How to use the storybook/constants/siteConstants.STORYBOOK_CATEGORY.WIDGETS 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 / TreeView / TreeView.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info/dist/index';
import { withKnobs } from '@storybook/addon-knobs';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

import { MockTreeView, MockTreeViewSource, keyboardNavigation } from './__mocks__/MockTreeView';
import TreeViewNodeSpecification from './__mocks__/TreeViewNodeSpecification';
import TreeView from './TreeView';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Tree View`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'TreeView',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#bootstrap-tree-view`
  })
);

stories.add(
  'TreeView',
  withInfo({
    source: false,
    propTables: [TreeView, TreeViewNodeSpecification],
    propTablesExclude: [MockTreeView],
    text: (
      <div></div>
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / DropdownKebab / DropdownKebab.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Button } from '../Button';
import { MenuItem } from '../MenuItem';
import { DropdownKebab } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Dropdown Kebab`, module);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Kebab Dropdown',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#kebabs`
  })
);

stories.add(
  'DropdownKebab',
  withInfo('pullRight prop is used to align the dropdown to the right.')(() =&gt; (
    <div>
      <button>Some Button</button> <button>Another Button</button>
      
        <menuitem>Action</menuitem>
        <menuitem>Another Action</menuitem></div>
github patternfly / patternfly-react / packages / patternfly-react / src / components / ListGroup / ListGroup.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } 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</div>
github patternfly / patternfly-react / packages / core / src / components / Spinner / Spinner.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import {
  storybookPackageName,
  DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Spinner } from './index';
import { name } from '../../../package.json';

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

stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Spinner',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#spinner`
  })
);

stories.add(
  'Spinner',
  withInfo()(() => {
    const loading = boolean('Loading', true);
    const inline = boolean('Inline', false);
github patternfly / patternfly-react / packages / core / src / components / Label / Label.stories.js View on Github external
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import {
  storybookPackageName,
  DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Label, DisposableLabel, RemoveButton } from './index';
import {
  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()(() => (
github patternfly / patternfly-react / packages / patternfly-react / src / components / Popover / Popover.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, 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 / patternfly-react / src / components / Pagination / Pagination.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, text, number, select, boolean } from '@storybook/addon-knobs';
import { inlineTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

import { Pager, PaginationRow, Paginator, PAGINATION_VIEW_TYPES } from './index';
import { MockPaginationRow, mockPaginationSource } from './__mocks__/mockPaginationRow';
import { name } from '../../../package.json';

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

stories.add(
  'Pager',
  withInfo()(() =&gt; {
    const story = (
      <div>
        <h2>Default size</h2>
        
        <hr>
        <h2>Mini size</h2></div>
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / Badge / Badge.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Badge } from './index';
import { name } from '../../../package.json';

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

const description = (
  <p>
    This component is based on React Bootstrap Badge component. Badges easily highlight new or unread items. See{' '}
    <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}badge/`}">React Bootstrap Docs</a> for complete Badge
    component documentation.
  </p>
);

stories.addDecorator(
  defaultTemplate({
    title: 'Badges',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#badges`,
    description
  })
);
github patternfly / patternfly-react / packages / core / src / components / Pagination / Pagination.stories.js View on Github external
} from 'storybook/constants/siteConstants';

import {
  Pager,
  PaginationRow,
  Paginator,
  PAGINATION_VIEW_TYPES
} from './index';
import {
  MockPaginationRow,
  mockPaginationSource
} from './__mocks__/mockPaginationRow';
import { name } from '../../../package.json';

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

stories.add(
  'Pager',
  withInfo()(() =&gt; {
    const story = (
      <div>
        <h2>Default size</h2>
        </div>
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / Tabs / Tabs.stories.js View on Github external
import React from 'react';
import classNames from 'classnames';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { TabContainer, Nav, NavItem, NavDropdown, MenuItem, TabPane, TabContent } from '../../index';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Tabs`, module);
const description = (
  <p>
    This component is based on React Bootstrap Tabs component. See{' '}
    <a href="{`${DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT}tabs/`}">React Bootstrap Docs</a> for complete Tabs component
    documentation.
  </p>
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Tabs',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#tabs`,
    description
  })
);