How to use the storybook/constants/siteConstants.STORYBOOK_CATEGORY.COMMUNICATION 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 / SessionTimeout / SessionTimeout.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { name } from '../../../package.json';
import { SessionTimeout, CountDownSessionTimeout } from './index';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Session Timeout`, module);

stories.addDecorator(withKnobs).addDecorator(
  defaultTemplate({
    title: 'Session Timeout',
    documentationLink: 'http://www.patternfly.org/pattern-library/communication/session-timeout/'
  })
);

stories
  .add('Session Timeout', () => (
     {}}
      continueFnc={() => {}}
      displayBefore={number('displayBefore', 30)}
      timeLeft={number('timeLeft', 30)}
      primaryContent={<p>{text('primary content', 'Your session is about to expire')}</p>}
github patternfly / patternfly-react / packages / core / src / components / ToastNotification / ToastNotification.stories.js View on Github external
DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import { Button } from '../Button';
import { DropdownKebab } from '../DropdownKebab';
import { MenuItem } from '../MenuItem';
import {
  ToastNotification,
  TimedToastNotification,
  ToastNotificationList
} from './index';
import { name } from '../../../package.json';

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

stories.add(
  'Toast Notification',
  withInfo(
    `Toast Notifications pop onto the screen to notify the user of a system occurrence`
  )(() => {
    const header = text('Header', 'Great job!');
    const message = text('Message', 'This is really working out.');
    const type = select(
      'Type',
      ToastNotification.TOAST_NOTIFICATION_TYPES,
      'success'
github patternfly / patternfly-react / packages / core / src / components / Wizard / Wizard.stories.js View on Github external
*/
const componentStories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.COMMUNICATION
  }/Wizard/Components`,
  module
);
loadingWizardExampleWithInfo(componentStories);
wizardExampleWithInfo(componentStories);

/**
 * Wizard Pattern stories
 */
const patternStories = storiesOf(
  `${storybookPackageName(name)}/${
    STORYBOOK_CATEGORY.COMMUNICATION
  }/Wizard/Patterns`,
  module
);
wizardPatternExampleAddWithInfo(patternStories);
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / EmptyState / EmptyState.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
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 { Button } from '../Button';
import { EmptyState } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Empty State`, module);

stories.addDecorator(
  defaultTemplate({
    title: 'Empty State',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}empty-state/`
  })
);

stories.add(
  'EmptyState',
  withInfo()(() =&gt; (
    
      
      Empty State Title
      
        This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that
github patternfly / patternfly-react / packages / patternfly-react / src / components / Notification / NotificationDrawerStory.stories.js View on Github external
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import {
  basicNotificationDrawerStory,
  WrapperNotificationDrawerStory,
  StatefulNotificationDrawerStory
} from './Stories/index';
import { name } from '../../../package.json';

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

basicNotificationDrawerStory(stories);
WrapperNotificationDrawerStory(stories);
StatefulNotificationDrawerStory(stories);
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / SessionTimeout / SessionTimeout.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { name } from '../../../package.json';
import { SessionTimeout, CountDownSessionTimeout } from './index';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Session Timeout`, module);

stories.addDecorator(withKnobs).addDecorator(
  defaultTemplate({
    title: 'Session Timeout',
    documentationLink: 'http://www.patternfly.org/pattern-library/communication/session-timeout/'
  })
);

stories
  .add('Session Timeout', () =&gt; (
     {}}
      continueFnc={() =&gt; {}}
      displayBefore={number('displayBefore', 30)}
      timeLeft={number('timeLeft', 30)}
      primaryContent={<p>{text('primary content', 'Your session is about to expire')}</p>}
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / LoadingState / LoadingState.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, select, number } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { inlineTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

import LoadableState, { LoadableStateSource } from './Stories/LoadableState';
import LoadingState from './LoadingState';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.COMMUNICATION}/Loading State`, module);

stories.addDecorator(withKnobs);

stories
  .add(
    'Loading State',
    withInfo('Loading State shows centered spinner when loading')(() =&gt; {
      const loading = boolean('Loading', true);

      const size = select('Size', ['lg', 'md', 'sm', 'xs'], 'lg');

      const story = (
        
          <div>Look at me! I am loaded content!</div>
        
      );
github patternfly / patternfly-react / packages / patternfly-react / src / components / MessageDialog / MessageDialog.stories.js View on Github external
documentation
    <p></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
  })
);

stories.add(
  'Message Dialog with Toggleable Options',
  withInfo({
    source: false,
    propTables: [MessageDialog],
    propTablesExclude: [MessageDialogToggleableOptions],
    text: (
      <div></div>
github patternfly / patternfly-react / packages / core / src / components / Notification / NotificationDrawerStory.stories.js View on Github external
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import {
  storybookPackageName,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import {
  basicNotificationDrawerStory,
  WrapperNotificationDrawerStory,
  StatefulNotificationDrawerStory
} from './Stories/index';
import { name } from '../../../package.json';

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

basicNotificationDrawerStory(stories);
WrapperNotificationDrawerStory(stories);
StatefulNotificationDrawerStory(stories);
github patternfly / patternfly-react / packages / patternfly-3 / patternfly-react / src / components / ToastNotification / ToastNotification.stories.js View on Github external
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { inlineTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Button } from '../Button';
import { DropdownKebab } from '../DropdownKebab';
import { MenuItem } from '../MenuItem';
import { ToastNotification, TimedToastNotification, ToastNotificationList } from './index';
import { name } from '../../../package.json';

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

stories.add(
  'Toast Notification',
  withInfo('Toast Notifications pop onto the screen to notify the user of a system occurrence')(() =&gt; {
    const header = text('Header', 'Great job!');
    const message = text('Message', 'This is really working out.');
    const type = select('Type', ToastNotification.TOAST_NOTIFICATION_TYPES, 'success');
    const dismissEnabled = boolean('Dismiss', false);
    const menuEnabled = boolean('Menu', true);
    const actionEnabled = boolean('Action', true);

    const story = (