Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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>}
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'
*/
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);
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()(() => (
Empty State Title
This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that
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);
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>}
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')(() => {
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>
);
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>
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);
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')(() => {
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 = (