How to use the storybook/constants/siteConstants.DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS 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-react / src / components / Slider / Slider.stories.js View on Github external
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.addWithInfo('Slider', () => (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">&nbsp;https://github.com/seiyria/bootstrap-slider</a>
    </p>
    <br>
    <br>

    <div>
      

      <br></div></div>
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / ModelessOverlay / ModelessOverlay.stories.js View on Github external
})(() =&gt; {
    const size = select('Size', { default: 'Default', sm: 'Small', lg: 'Large' }, 'default');
    const story = ;
    return inlineTemplate({
      title: 'Modeless Overlay',
      documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}modeless-overlay/`,
      description:
        'Built off the Bootstrap Modal classes, the modeless overlay is a non-modal version of the Bootstrap Modal',
      story
    });
  })
);
github patternfly / patternfly-react / packages / patternfly-react / src / components / Toolbar / Toolbar.stories.js View on Github external
import { decorateAction } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info/dist/index';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';

import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Toolbar, ToolbarResults, ToolbarRightContent, ToolbarFind, ToolbarViewSelector } from '../../index';

import { MockToolbarExample, mockToolbarExampleSource } from './__mocks__/mockToolbarExample';
import { name } from '../../../package.json';

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

stories.addDecorator(
  defaultTemplate({
    title: 'Toolbar',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}toolbar/`
  })
);

stories.add(
  'Toolbar',
  withInfo({
    source: false,
    propTables: [Toolbar, ToolbarResults, ToolbarRightContent, ToolbarFind, ToolbarViewSelector],
    propTablesExclude: [MockToolbarExample],
    text: (
      <div>
        <h1>Story Source</h1>
        <pre>{mockToolbarExampleSource}</pre>
      </div>
    )
  })(() =&gt; {
github patternfly / patternfly-react / packages / patternfly-react / src / components / Sort / Sort.stories.js View on Github external
{
    id: 'birthMonth',
    title: 'Birth Month',
    isNumeric: true
  },
  {
    id: 'car',
    title: 'Car',
    isNumeric: false
  }
];

stories.addDecorator(
  defaultTemplate({
    title: 'Sort',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}sort/`
  })
);

stories.add(
  'Sort',
  withInfo({
    source: false,
    propTables: [Sort, SortTypeSelector, SortDirectionSelector],
    propTablesExclude: [MockSortExample],
    text: (
      <div>
        <h1>Story Source</h1>
        <pre>{mockSortExampleSource}</pre>
      </div>
    )
  })(() =&gt; )
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / Slider / Slider.stories.js View on Github external
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.add('Slider', () =&gt; (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">&nbsp;https://github.com/seiyria/bootstrap-slider</a>
    </p>
    <br>
    <br>

    <div>
      

      <br></div></div>
github patternfly / patternfly-react / packages / core / src / components / Toolbar / Toolbar.stories.js View on Github external
MockToolbarExample,
  mockToolbarExampleSource
} from './__mocks__/mockToolbarExample';
import { name } from '../../../package.json';

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

stories.addDecorator(
  defaultTemplate({
    title: 'Toolbar',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}toolbar/`
  })
);

stories.add(
  'Toolbar',
  withInfo({
    source: false,
    propTables: [
      Toolbar,
      ToolbarResults,
      ToolbarRightContent,
      ToolbarFind,
      ToolbarViewSelector
    ],
    propTablesExclude: [MockToolbarExample],
    text: (
github patternfly / patternfly-react / packages / patternfly-react / 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 / 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 / ExpandCollapse / ExpandCollapse.stories.js View on Github external
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, STORYBOOK_CATEGORY, DOCUMENTATION_URL } from 'storybook/constants/siteConstants';
import { name } from '../../../package.json';
import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';

import { ExpandCollapse } from './index';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Expand Collapse`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Expand Collapse',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}expand-collapse-section/`
  })
);

stories.add(
  'ExpandCollapse',
  withInfo('This is the ExpandCollapse component.')(() =&gt; (
    <div style="{{">
      
        <p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
        <p>And other text comes here.</p></div>
github patternfly / patternfly-react / packages / core / src / components / Slider / Slider.stories.js View on Github external
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.FORMS_AND_CONTROLS
  }/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.addWithInfo('Slider', () =&gt; (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and
      available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">
        &nbsp;https://github.com/seiyria/bootstrap-slider
      </a>
    </p>
    <br>
    <br>

    <div></div></div>