Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
<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
});
})
);
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(
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()(() => (
<div>
</div>
} 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()(() => (
<div>
<h2>Basic</h2>
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
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()(() => {
const title = (
<div>
);
const content = (
</div>
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()(() => (
<div>
<label>Default</label>{' '}
<label>Primary</label>{' '}
<label>Success</label>{' '}
<label>Info</label>{' '}
<label>Warning</label>{' '}
<label>Danger</label>
</div>
))
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()(() => {
const tooltip = (
<div>Holy guacamole! Check this info.'
)
}}</div>
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
})(() => {
const story = ;
return inlineTemplate({
title: 'Modal Example',
documentationLink: `${
DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS
}modal-overlay/`,
reactBootstrapDocumentationLink: `${
DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT
}modal/`,
story
});
})
);
<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
});
});