How to use the storybook/constants/siteConstants.DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT function in storybook

To help you get started, we’ve selected a few storybook examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / Form / Form.stories.js View on Github external
<button>
        {text}
      </button>
    ));
    const story = (
      
        <form>
          {formFields} {formButtons}
        </form>
      
    );

    return inlineTemplate({
      title: 'Inline Form',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#forms`,
      reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}forms/`,
      story
    });
  })
);
github patternfly / patternfly-react / packages / core / src / components / MenuItem / MenuItem.stories.js View on Github external
DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Menu Item`,
  module
);

const description = (
  <p>
    This component is based on React Bootstrap MenuItem component. This
    component represents a menu item in a dropdown. See{' '}
    <a href="{`${">
      React Bootstrap Docs
    </a>{' '}
    for complete MenuItem component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'MenuItem',
    description
  })
);

stories.add(
github patternfly / patternfly-react / packages / patternfly-react / src / components / MenuItem / MenuItem.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { MenuItem } from './index';

import { name } from '../../../package.json';

import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Menu Item`, module);

const description = (
  <p>
    This component is based on React Bootstrap MenuItem component. This component represents a menu item in a dropdown.
    See <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}dropdowns/#menu-items`}">React Bootstrap Docs</a> for
    complete MenuItem component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'MenuItem',
    description
  })
);

stories.add(
  'MenuItem',
  withInfo()(() =&gt; (
    <div>
      </div>
github patternfly / patternfly-react / packages / core / src / components / ListGroup / ListGroup.stories.js View on Github external
} from 'storybook/constants/siteConstants';
import { Badge } from '../Badge';
import { ListGroup, ListGroupItem } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/List Group`,
  module
);

stories.addDecorator(
  defaultTemplate({
    title: 'ListGroup',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#list-group`,
    reactBootstrapDocumentationLink: `${
      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
    }list-group/`
  })
);

stories.add(
  'List Group',
  withInfo()(() =&gt; (
    <div>
      <h2>Basic</h2>
      
        Cras justo odio
        Dapibus ac facilisis in
        Morbi leo risus
        Porta ac consectetur ac
        Vestibulum at eros
      </div>
github patternfly / patternfly-react / packages / core / src / components / Popover / Popover.stories.js View on Github external
STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Button, OverlayTrigger, Popover } from '../../index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Popover`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Popover',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#popover`,
    reactBootstrapDocumentationLink: `${
      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
    }popovers/`
  })
);

stories.add(
  'Popover',
  withInfo()(() =&gt; {
    const title = (
      <div>
    );
    const content = (
      </div>
github patternfly / patternfly-react / packages / core / src / components / Label / Label.stories.js View on Github external
MockLabelRemove,
  mockLabelRemoveSource
} from './__mocks__/mockLabelExamples';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Label`,
  module
);

stories.addDecorator(
  defaultTemplate({
    title: 'Label',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#labels`,
    reactBootstrapDocumentationLink: `${
      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
    }label/`
  })
);

stories.add(
  'Label',
  withInfo()(() =&gt; (
    <div>
      <label>Default</label>{' '}
      <label>Primary</label>{' '}
      <label>Success</label>{' '}
      <label>Info</label>{' '}
      <label>Warning</label>{' '}
      <label>Danger</label>
    </div>
  ))
github patternfly / patternfly-react / packages / core / src / components / Tooltip / Tooltip.stories.js View on Github external
STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Button, OverlayTrigger, Tooltip } from '../../index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Tooltip`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Tooltip',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#tooltip`,
    reactBootstrapDocumentationLink: `${
      DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
    }tooltips/`
  })
);

stories.add(
  'Tooltip',
  withInfo()(() =&gt; {
    const tooltip = (
      
        <div>Holy guacamole! Check this info.'
            )
          }}</div>
github patternfly / patternfly-react / packages / patternfly-react / src / components / MessageDialog / MessageDialog.stories.js View on Github external
import MessageDialogWarning, { MessageDialogWarningSource } from './Stories/MessageDialogWarning';
import MessageDialogQuestion, { MessageDialogQuestionSource } from './Stories/MessageDialogQuestion';
import MessageDialogInfo, { MessageDialogInfoSource } from './Stories/MessageDialogInfo';
import MessageDialogSuccess, { MessageDialogSuccessSource } from './Stories/MessageDialogSuccess';

const modalStoryKind = `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Modal Overlay`;

const storyDescription = (
  
    <p>
      This component is based on the React Bootstrap Modal component. Please visit the following for complete
      documentation
    </p>
    <ul>
      <li>
        <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}modal/`}">React-Bootstrap Modal</a>
      </li>
      <li>
        
          Patternfly-React Modal
        
      </li>
    </ul>
  
);

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Message Dialog`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'MessageDialog',
    description: storyDescription
github patternfly / patternfly-react / packages / core / src / components / Modal / Modal.stories.js View on Github external
})(() =&gt; {
    const story = ;
    return inlineTemplate({
      title: 'Modal Example',
      documentationLink: `${
        DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS
      }modal-overlay/`,
      reactBootstrapDocumentationLink: `${
        DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
      }modal/`,
      story
    });
  })
);
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / DateTimePicker / DatePicker.stories.js View on Github external
<div style="{{">
      <label>Date picker</label>
      <div>
        <div>
          
        </div>
      </div>
    </div>
  );
  return inlineTemplate({
    title: 'DatePicker',
    documentationLink: `${DOCUMENTATION_URL.FORMS_AND_CONTROLS}#date-time-picker`,
    reactBootstrapDocumentationLink: `${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}date-time-picker/`,
    description: '',
    story
  });
});