diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js index cd39ae007e16..4b349d472cce 100644 --- a/packages/react/src/components/Accordion/Accordion-story.js +++ b/packages/react/src/components/Accordion/Accordion-story.js @@ -78,9 +78,9 @@ export const accordion = () => ( export const skeleton = () => ; -skeleton.story = { - decorators: [(story) =>
{story()}
], -}; +skeleton.decorators = [ + (story) =>
{story()}
, +]; const props = { onClick: action('onClick'), diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js index 51592f017c3c..a14764d72934 100644 --- a/packages/react/src/components/Checkbox/Checkbox-story.js +++ b/packages/react/src/components/Checkbox/Checkbox-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, text } from '@storybook/addon-knobs'; import Checkbox from '../Checkbox'; @@ -25,76 +24,83 @@ const props = () => ({ onChange: action('onChange'), }); -storiesOf('Checkbox', module) - .addParameters({ +export default { + title: 'Checkbox', + decorators: [withKnobs], + + parameters: { component: Checkbox, + subcomponents: { CheckboxSkeleton, }, - }) - .addDecorator(withKnobs) - .add( - 'checked', - () => { - const checkboxProps = props(); - return ( -
- Checkbox heading - - -
- ); - }, - { - info: { - text: ` - Checkboxes are used when there is a list of options and the user may select multiple options, including all or none. - The example below shows how the Checkbox component can be used as an uncontrolled component that is initially checked - by setting the defaultChecked property to true. To use the component in a controlled way, you should set the - checked property instead. - `, - }, - } - ) - .add( - 'unchecked', - () => { - const checkboxProps = props(); - return ( -
- Checkbox heading - - -
- ); - }, - { - info: { - text: ` - Checkboxes are used when there is a list of options and the user may select multiple options, including all or none. - The example below shows how the Checkbox component can be used as an uncontrolled component that is initially - unchecked. To use the component in a controlled way, you should set the checked property instead. - `, - }, - } - ) - .add( - 'skeleton', - () => ( -
- -
- ), - { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, - } + }, +}; + +export const Checked = () => { + const checkboxProps = props(); + return ( +
+ Checkbox heading + + +
+ ); +}; + +Checked.storyName = 'checked'; + +Checked.parameters = { + info: { + text: ` + Checkboxes are used when there is a list of options and the user may select multiple options, including all or none. + The example below shows how the Checkbox component can be used as an uncontrolled component that is initially checked + by setting the defaultChecked property to true. To use the component in a controlled way, you should set the + checked property instead. + `, + }, +}; + +export const Unchecked = () => { + const checkboxProps = props(); + return ( +
+ Checkbox heading + + +
); +}; + +Unchecked.storyName = 'unchecked'; + +Unchecked.parameters = { + info: { + text: ` + Checkboxes are used when there is a list of options and the user may select multiple options, including all or none. + The example below shows how the Checkbox component can be used as an uncontrolled component that is initially + unchecked. To use the component in a controlled way, you should set the checked property instead. + `, + }, +}; + +export const Skeleton = () => ( +
+ +
+); + +Skeleton.storyName = 'skeleton'; + +Skeleton.parameters = { + info: { + text: ` + Placeholder skeleton state to use when content is loading. + `, + }, +}; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 17c4c4f40c68..695ee1ed64a9 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, text } from '@storybook/addon-knobs'; import CodeSnippet from '../CodeSnippet'; @@ -73,126 +72,134 @@ const lightPropMessage = ( ); -storiesOf('CodeSnippet', module) - .addParameters({ +export default { + title: 'CodeSnippet', + decorators: [withKnobs], + + parameters: { component: CodeSnippet, + subcomponents: { CodeSnippetSkeleton, }, - }) - .addDecorator(withKnobs) - .add( - 'inline', - () => ( -
- {props.inline().light && lightPropMessage} - - {'node -v'} - -
- ), - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. - - The Inline style is for code used within a block of text. - `, - }, - } - ) - .add( - 'single line', - () => ( -
- {props.single().light && lightPropMessage} - - { - 'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!' - } - -
- ), - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. - - The Code style is for larger, multi-line code snippets. - `, - }, - } - ) - .add( - 'multi line', - () => { - const multilineProps = props.multiline(); - return ( -
- {multilineProps.light && lightPropMessage} - - {`@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile); - - @include breakpoint(bp--xs--major) { - padding-right: padding(xs); - padding-left: padding(xs); - } + }, +}; + +export const Inline = () => ( +
+ {props.inline().light && lightPropMessage} + + {'node -v'} + +
+); + +Inline.storyName = 'inline'; + +Inline.parameters = { + info: { + text: ` + Code snippets are small blocks of reusable code that can be inserted in a code file. + + The Inline style is for code used within a block of text. + `, + }, +}; + +export const SingleLine = () => ( +
+ {props.single().light && lightPropMessage} + + { + 'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!' + } + +
+); + +SingleLine.storyName = 'single line'; + +SingleLine.parameters = { + info: { + text: ` + Code snippets are small blocks of reusable code that can be inserted in a code file. + + The Code style is for larger, multi-line code snippets. + `, + }, +}; + +export const MultiLine = () => { + const multilineProps = props.multiline(); + return ( +
+ {multilineProps.light && lightPropMessage} + + {`@mixin grid-container { +width: 100%; +padding-right: padding(mobile); +padding-left: padding(mobile); + +@include breakpoint(bp--xs--major) { +padding-right: padding(xs); +padding-left: padding(xs); +} } $z-indexes: ( - modal : 9000, - overlay : 8000, - dropdown : 7000, - header : 6000, - footer : 5000, - hidden : - 1, - overflowHidden: - 1, - floating: 10000 +modal : 9000, +overlay : 8000, +dropdown : 7000, +header : 6000, +footer : 5000, +hidden : - 1, +overflowHidden: - 1, +floating: 10000 );`} - -
- - {`@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile); - - @include breakpoint(bp--xs--major) { - padding-right: padding(xs); - } + +
+ + {`@mixin grid-container { +width: 100%; +padding-right: padding(mobile); +padding-left: padding(mobile); + +@include breakpoint(bp--xs--major) { +padding-right: padding(xs); +} }`} - -
- ); - }, - { - info: { - text: ` - Code snippets are small blocks of reusable code that can be inserted in a code file. - - The Terminal style is for single-line . - `, - }, - } - ) - .add( - 'skeleton', - () => ( -
- - -
- ), - { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, - } + +
); +}; + +MultiLine.storyName = 'multi line'; + +MultiLine.parameters = { + info: { + text: ` + Code snippets are small blocks of reusable code that can be inserted in a code file. + + The Terminal style is for single-line . + `, + }, +}; + +export const Skeleton = () => ( +
+ + +
+); + +Skeleton.storyName = 'skeleton'; + +Skeleton.parameters = { + info: { + text: ` + Placeholder skeleton state to use when content is loading. + `, + }, +}; diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js index 393d099237e5..d9bddfe6b909 100644 --- a/packages/react/src/components/ComboBox/ComboBox-story.js +++ b/packages/react/src/components/ComboBox/ComboBox-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import ComboBox from '../ComboBox'; @@ -65,25 +64,27 @@ const props = () => ({ onChange: action('onChange'), }); -storiesOf('ComboBox', module) - .addParameters({ +export default { + title: 'ComboBox', + decorators: [withKnobs], + + parameters: { component: ComboBox, - }) - .addDecorator(withKnobs) - .add( - 'Default', - () => ( -
- (item ? item.text : '')} - {...props()} - /> -
- ), - { - info: { - text: 'ComboBox', - }, - } - ); + }, +}; + +export const Default = () => ( +
+ (item ? item.text : '')} + {...props()} + /> +
+); + +Default.parameters = { + info: { + text: 'ComboBox', + }, +}; diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js index 7ffdc3aa008b..a9d77e4ec46f 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal-story.js +++ b/packages/react/src/components/ComposedModal/ComposedModal-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import ComposedModal, { @@ -133,151 +132,157 @@ const scrollingContent = ( ); -storiesOf('ComposedModal', module) - .addParameters({ +export default { + title: 'ComposedModal', + decorators: [withKnobs], + + parameters: { component: ComposedModal, + subcomponents: { ModalHeader, ModalBody, ModalFooter, }, - }) - .addDecorator(withKnobs) - .add( - 'Using Header / Footer Props', - () => { - const { size, ...rest } = props.composedModal(); - const { hasScrollingContent, ...bodyProps } = props.modalBody(); - return ( - - - -

- Please see ModalWrapper for more examples and demo of the - functionality. -

- {hasScrollingContent && scrollingContent} - - - - ); - }, - { - info: { - text: ` - Composed Modal allows you to create your own modal with just the parts you need. The ComposedModal element provides the state management for open/close, as well as passes the ModalHeader a prop to close the modal (with the close button). + }, +}; + +export const UsingHeaderFooterProps = () => { + const { size, ...rest } = props.composedModal(); + const { hasScrollingContent, ...bodyProps } = props.modalBody(); + return ( + + + +

+ Please see ModalWrapper for more examples and demo of the + functionality. +

+ {hasScrollingContent && scrollingContent} + + + + ); +}; - The interior components - ModalHeader / ModalBody / ModalFooter - are all container elements that will render any children you add in, wrapped in the appropriate CSS classes. +UsingHeaderFooterProps.storyName = 'Using Header / Footer Props'; - The Modal Header / Modal Footer come with some built in props to let you accelerate towards standard Carbon modal UI. If there are customizations you need to do, see the next example of just using the interior components as containers. - `, - }, - } - ) - .add( - 'Using child nodes', - () => { +UsingHeaderFooterProps.parameters = { + info: { + text: ` + Composed Modal allows you to create your own modal with just the parts you need. The ComposedModal element provides the state management for open/close, as well as passes the ModalHeader a prop to close the modal (with the close button). + + The interior components - ModalHeader / ModalBody / ModalFooter - are all container elements that will render any children you add in, wrapped in the appropriate CSS classes. + + The Modal Header / Modal Footer come with some built in props to let you accelerate towards standard Carbon modal UI. If there are customizations you need to do, see the next example of just using the interior components as containers. + `, + }, +}; + +export const UsingChildNodes = () => { + const { size, ...rest } = props.composedModal(); + const { hasScrollingContent, ...bodyProps } = props.modalBody(); + return ( + + +

Testing

+ + +

+ Please see ModalWrapper for more examples and demo of the + functionality. +

+ {hasScrollingContent && scrollingContent} + + + + + + + ); +}; + +UsingChildNodes.storyName = 'Using child nodes'; + +UsingChildNodes.parameters = { + info: { + text: ` + Alternatively, you can just use the Modal components as wrapper elements and figure the children out yourself. We do suggest for the header you utilize the built in props for label and title though, for the footer it's mostly a composed element so creating the two buttons yourself (using the Button component) is probably the most straight-forward pattern. + `, + }, +}; + +export const TitleOnly = () => { + const { size, ...rest } = props.composedModal({ titleOnly: true }); + return ( + + + + + + ); +}; + +TitleOnly.storyName = 'Title only'; + +TitleOnly.parameters = { + info: { + text: ` + In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message. + It should be less than 3 lines of text. If more room is required then use the standard body copy format. + `, + }, +}; + +export const ExampleUsageWithTriggerButton = () => { + class ComposedModalExample extends React.Component { + state = { open: false }; + toggleModal = (open) => this.setState({ open }); + render() { + const { open } = this.state; const { size, ...rest } = props.composedModal(); const { hasScrollingContent, ...bodyProps } = props.modalBody(); return ( - - -

Testing

- - -

- Please see ModalWrapper for more examples and demo of the - functionality. -

- {hasScrollingContent && scrollingContent} - - - - - - - ); - }, - { - info: { - text: ` - Alternatively, you can just use the Modal components as wrapper elements and figure the children out yourself. We do suggest for the header you utilize the built in props for label and title though, for the footer it's mostly a composed element so creating the two buttons yourself (using the Button component) is probably the most straight-forward pattern. - `, - }, - } - ) - .add( - 'Title only', - () => { - const { size, ...rest } = props.composedModal({ titleOnly: true }); - return ( - - - - - + <> + + this.toggleModal(false)}> + + +

+ Please see ModalWrapper for more examples and demo of the + functionality. +

+ {hasScrollingContent && scrollingContent} + + + + ); - }, - { - info: { - text: ` - In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message. - It should be less than 3 lines of text. If more room is required then use the standard body copy format. - `, - }, - } - ) - .add( - 'Example usage with trigger button', - () => { - class ComposedModalExample extends React.Component { - state = { open: false }; - toggleModal = (open) => this.setState({ open }); - render() { - const { open } = this.state; - const { size, ...rest } = props.composedModal(); - const { hasScrollingContent, ...bodyProps } = props.modalBody(); - return ( - <> - - this.toggleModal(false)}> - - -

- Please see ModalWrapper for more examples and demo of the - functionality. -

- {hasScrollingContent && scrollingContent} - - - - - ); - } - } - return ; - }, - { - info: { - text: ` - An example ComposedModal with a trigger button - `, - }, } - ); + } + return ; +}; + +ExampleUsageWithTriggerButton.storyName = 'Example usage with trigger button'; + +ExampleUsageWithTriggerButton.parameters = { + info: { + text: ` + An example ComposedModal with a trigger button + `, + }, +}; diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js index 60d7c5687519..a85365d2a2a0 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select } from '@storybook/addon-knobs'; import ContentSwitcher from '../ContentSwitcher'; @@ -33,52 +32,54 @@ const props = { }), }; -storiesOf('ContentSwitcher', module) - .addParameters({ +export default { + title: 'ContentSwitcher', + decorators: [withKnobs], + + parameters: { component: ContentSwitcher, + subcomponents: { Switch, }, - }) - .addDecorator(withKnobs) - .add( - 'Default', - () => { - const switchProps = props.switch(); - return ( - - - - - - ); - }, - { - info: { - text: ` - The Content Switcher component manipulates the content shown following an exclusive or “either/or” pattern. - Create Switch components for each section in the content switcher. - `, - }, - } - ) - .add( - 'Selected', - () => { - const switchProps = props.switch(); - return ( - - - - - - ); - }, - { - info: { - text: ` - Render the Content Switcher with a different section automatically selected - `, - }, - } + }, +}; + +export const Default = () => { + const switchProps = props.switch(); + return ( + + + + + + ); +}; + +Default.parameters = { + info: { + text: ` + The Content Switcher component manipulates the content shown following an exclusive or “either/or” pattern. + Create Switch components for each section in the content switcher. + `, + }, +}; + +export const Selected = () => { + const switchProps = props.switch(); + return ( + + + + + ); +}; + +Selected.parameters = { + info: { + text: ` + Render the Content Switcher with a different section automatically selected + `, + }, +}; diff --git a/packages/react/src/components/CopyButton/CopyButton-story.js b/packages/react/src/components/CopyButton/CopyButton-story.js index 12d382531bc0..d92a5c683844 100644 --- a/packages/react/src/components/CopyButton/CopyButton-story.js +++ b/packages/react/src/components/CopyButton/CopyButton-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, number, text } from '@storybook/addon-knobs'; @@ -25,14 +24,20 @@ const props = () => ({ onClick: action('onClick'), }); -storiesOf('CopyButton', module) - .addParameters({ +export default { + title: 'CopyButton', + decorators: [withKnobs], + + parameters: { component: CopyButton, - }) - .addDecorator(withKnobs) - .add('Default', () => , { - info: { - text: - 'The copy button can be used when the user needs to copy information, such as a code snippet, to their clipboard.', - }, - }); + }, +}; + +export const Default = () => ; + +Default.parameters = { + info: { + text: + 'The copy button can be used when the user needs to copy information, such as a code snippet, to their clipboard.', + }, +}; diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js index 6d47e6e1ef6e..bc70acd9c653 100644 --- a/packages/react/src/components/DataTable/DataTable-story.js +++ b/packages/react/src/components/DataTable/DataTable-story.js @@ -1,11 +1,3 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { storiesOf } from '@storybook/react'; import { withKnobs, boolean, select } from '@storybook/addon-knobs'; import { withReadme } from 'storybook-readme'; import readme from './README.md'; @@ -44,9 +36,13 @@ const props = () => ({ stickyHeader: boolean('Sticky header (experimental)', false), }); -storiesOf('DataTable', module) - .addParameters({ +export default { + title: 'DataTable', + decorators: [withKnobs], + + parameters: { component: DataTable, + subcomponents: { Table, TableActionList, @@ -69,210 +65,224 @@ storiesOf('DataTable', module) TableToolbarSearch, TableToolbarMenu, }, - }) - .addDecorator(withKnobs) - .add( - 'default', - withReadme(readme, () => require('./stories/default').default(props())), - { - info: { - /* eslint-disable no-useless-escape */ - text: ` - Data Tables are used to represent a collection of resources, displaying a - subset of their fields in columns, or headers. The \`DataTable\` component - that we export from Carbon requires two props to be passed in: \`rows\` - and \`headers\`. - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - /* eslint-enable no-useless-escape */ - }, - } - ) - .add( - 'with toolbar', - withReadme(readme, () => - require('./stories/with-toolbar').default(props()) - ), - { - info: { - text: ` - DataTable with action menu and filtering. - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with sorting', - withReadme(readme, () => - require('./stories/with-sorting').default(props()) - ), - { - info: { - text: ` - DataTable with sorting - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with selection', - withReadme(readme, () => - require('./stories/with-selection').default(props()) - ), - { - info: { - text: ` - DataTable with selection - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with radio button selection', - withReadme(readme, () => - require('./stories/with-selection--radio').default(props()) - ), - { - info: { - text: ` - DataTable with radio button selection - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with expansion', - withReadme(readme, () => - require('./stories/with-expansion').default(props()) - ), - { - info: { - text: ` - DataTable with expansion - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with batch expansion', - withReadme(readme, () => - require('./stories/with-batch-expansion').default(props()) - ), - { - info: { - text: ` - DataTable with batch expansion - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with batch actions', - withReadme(readme, () => - require('./stories/with-batch-actions').default(props()) - ), - { - info: { - text: ` - Uses alongside and - to create the toolbar and placeholder for where the batch action menu will - be displayed. - - You can use the \`getBatchActionProps\` prop getter on the - component to have it wire up the ghost menu for you. - - Individual components take in any kind of event handler - prop that you would expect to use, like \`onClick\`. You can use these - alongside the \`selectedRows\` property in your \`render\` prop function - to pass along this info to your batch action handler. - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with dynamic content', - withReadme(readme, () => - require('./stories/with-dynamic-content').default(props()) - ), - { - info: { - text: ` - Showcases DataTable behavior when rows are added to the component, - and when cell data changes dynamically. - `, - }, - } - ) - .add( - 'with boolean column', - withReadme(readme, () => - require('./stories/with-boolean-column').default(props()) - ), - { - info: { - text: ` - DataTable with toolbar and filtering with column has boolean value. - `, - }, - } - ) - .add( - 'with options', - withReadme(readme, () => - require('./stories/with-options').default(props()) - ), - { - info: { - text: ` - DataTable with options like disabled, isSelected, isExpanded etc. - - You can find more detailed information surrounding usage of this component - at the following url: ${readmeURL} - `, - }, - } - ) - .add( - 'with overflow menu', - withReadme(readme, () => - require('./stories/with-overflow-menu').default({ - ...props(), - overflowMenuOnHover: boolean( - 'Show overflow menu on hover (overflowMenuOnHover)', - false - ), - }) - ), - { - info: { - text: ` - DataTable with Overflow menus added. + }, +}; +export const Default = withReadme(readme, () => + require('./stories/default').default(props()) +); + +Default.storyName = 'default'; + +Default.parameters = { + info: { + /* eslint-disable no-useless-escape */ + text: ` + Data Tables are used to represent a collection of resources, displaying a + subset of their fields in columns, or headers. The \`DataTable\` component + that we export from Carbon requires two props to be passed in: \`rows\` + and \`headers\`. You can find more detailed information surrounding usage of this component at the following url: ${readmeURL} `, - }, - } - ); + /* eslint-enable no-useless-escape */ + }, +}; + +export const WithToolbar = withReadme(readme, () => + require('./stories/with-toolbar').default(props()) +); + +WithToolbar.storyName = 'with toolbar'; + +WithToolbar.parameters = { + info: { + text: ` + DataTable with action menu and filtering. + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithSorting = withReadme(readme, () => + require('./stories/with-sorting').default(props()) +); + +WithSorting.storyName = 'with sorting'; + +WithSorting.parameters = { + info: { + text: ` + DataTable with sorting + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithSelection = withReadme(readme, () => + require('./stories/with-selection').default(props()) +); + +WithSelection.storyName = 'with selection'; + +WithSelection.parameters = { + info: { + text: ` + DataTable with selection + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithRadioButtonSelection = withReadme(readme, () => + require('./stories/with-selection--radio').default(props()) +); + +WithRadioButtonSelection.storyName = 'with radio button selection'; + +WithRadioButtonSelection.parameters = { + info: { + text: ` + DataTable with radio button selection + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithExpansion = withReadme(readme, () => + require('./stories/with-expansion').default(props()) +); + +WithExpansion.storyName = 'with expansion'; + +WithExpansion.parameters = { + info: { + text: ` + DataTable with expansion + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithBatchExpansion = withReadme(readme, () => + require('./stories/with-batch-expansion').default(props()) +); + +WithBatchExpansion.storyName = 'with batch expansion'; + +WithBatchExpansion.parameters = { + info: { + text: ` + DataTable with batch expansion + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithBatchActions = withReadme(readme, () => + require('./stories/with-batch-actions').default(props()) +); + +WithBatchActions.storyName = 'with batch actions'; + +WithBatchActions.parameters = { + info: { + text: ` + Uses alongside and + to create the toolbar and placeholder for where the batch action menu will + be displayed. + + You can use the \`getBatchActionProps\` prop getter on the + component to have it wire up the ghost menu for you. + + Individual components take in any kind of event handler + prop that you would expect to use, like \`onClick\`. You can use these + alongside the \`selectedRows\` property in your \`render\` prop function + to pass along this info to your batch action handler. + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithDynamicContent = withReadme(readme, () => + require('./stories/with-dynamic-content').default(props()) +); + +WithDynamicContent.storyName = 'with dynamic content'; + +WithDynamicContent.parameters = { + info: { + text: ` + Showcases DataTable behavior when rows are added to the component, + and when cell data changes dynamically. + `, + }, +}; + +export const WithBooleanColumn = withReadme(readme, () => + require('./stories/with-boolean-column').default(props()) +); + +WithBooleanColumn.storyName = 'with boolean column'; + +WithBooleanColumn.parameters = { + info: { + text: ` + DataTable with toolbar and filtering with column has boolean value. + `, + }, +}; + +export const WithOptions = withReadme(readme, () => + require('./stories/with-options').default(props()) +); + +WithOptions.storyName = 'with options'; + +WithOptions.parameters = { + info: { + text: ` + DataTable with options like disabled, isSelected, isExpanded etc. + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} + `, + }, +}; + +export const WithOverflowMenu = withReadme(readme, () => + require('./stories/with-overflow-menu').default({ + ...props(), + overflowMenuOnHover: boolean( + 'Show overflow menu on hover (overflowMenuOnHover)', + false + ), + }) +); + +WithOverflowMenu.storyName = 'with overflow menu'; + +WithOverflowMenu.parameters = { + info: { + text: ` + DataTable with Overflow menus added. + + You can find more detailed information surrounding usage of this component + at the following url: ${readmeURL} +`, + }, +}; diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js index a45b1f0509e2..8b37902aab25 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js @@ -8,7 +8,6 @@ /* eslint-disable no-console */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { withKnobs, boolean, array } from '@storybook/addon-knobs'; import DataTableSkeleton from '../DataTableSkeleton'; @@ -31,26 +30,30 @@ const props = () => ({ showToolbar: boolean('Show the Table Toolbar (showToolbar)', true), }); -storiesOf('DataTableSkeleton', module) - .addParameters({ +export default { + title: 'DataTableSkeleton', + decorators: [withKnobs], + + parameters: { component: DataTableSkeleton, - }) - .addDecorator(withKnobs) - .add( - 'default', - () => ( -
- -
-
- ), - { - info: { - text: ` - Skeleton states are used as a progressive loading state while the user waits for content to load. - - This example shows a skeleton state for a data table. - `, - }, - } - ); + }, +}; + +export const Default = () => ( +
+ +
+
+); + +Default.storyName = 'default'; + +Default.parameters = { + info: { + text: ` + Skeleton states are used as a progressive loading state while the user waits for content to load. + + This example shows a skeleton state for a data table. + `, + }, +}; diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js index 42f2ef81c13e..71a4c696a20d 100644 --- a/packages/react/src/components/DatePicker/DatePicker-story.js +++ b/packages/react/src/components/DatePicker/DatePicker-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action, decorateAction } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; @@ -74,160 +73,163 @@ const props = { }), }; -storiesOf('DatePicker', module) - .addParameters({ +export default { + title: 'DatePicker', + decorators: [withKnobs], + + parameters: { component: DatePicker, + subcomponents: { DatePickerInput, DatePickerSkeleton, }, - }) - .addDecorator(withKnobs) - .add( - 'simple', - () => ( - )', false)} - datePickerType="simple"> - - - ), - { - info: { - text: - 'A simple Date Picker consists of an input field and no calendar.', - }, - } - ) - .add( - 'single with calendar', - () => ( - )', - 'm/d/Y' - )}> - console.log('click')} - {...props.datePickerInput()} - /> - - ), - { - info: { - text: ` - A single Date Picker consists of an input field and a calendar. - `, - }, - } - ) - .add( - 'range with calendar', - () => { - const datePickerInputProps = props.datePickerInput(); - return ( - )', - 'm/d/Y' - )}> - - - - ); - }, - { - info: { - text: ` - A range Date Picker consists of two input fields and a calendar. - `, - }, - } - ) - .add( - 'range with calendar and min/max dates', - () => { - const datePickerInputProps = props.datePickerInput(); - return ( + }, +}; + +export const Simple = () => ( + )', false)} + datePickerType="simple"> + + +); + +Simple.storyName = 'simple'; + +Simple.parameters = { + info: { + text: 'A simple Date Picker consists of an input field and no calendar.', + }, +}; + +export const SingleWithCalendar = () => ( + )', 'm/d/Y')}> + console.log('click')} + {...props.datePickerInput()} + /> + +); + +SingleWithCalendar.storyName = 'single with calendar'; + +SingleWithCalendar.parameters = { + info: { + text: ` + A single Date Picker consists of an input field and a calendar. + `, + }, +}; + +export const RangeWithCalendar = () => { + const datePickerInputProps = props.datePickerInput(); + return ( + )', + 'm/d/Y' + )}> + + + + ); +}; + +RangeWithCalendar.storyName = 'range with calendar'; + +RangeWithCalendar.parameters = { + info: { + text: ` + A range Date Picker consists of two input fields and a calendar. + `, + }, +}; + +export const RangeWithCalendarAndMinMaxDates = () => { + const datePickerInputProps = props.datePickerInput(); + return ( + + + + + ); +}; + +RangeWithCalendarAndMinMaxDates.storyName = + 'range with calendar and min/max dates'; + +RangeWithCalendarAndMinMaxDates.parameters = { + info: { + text: ` + A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields. + `, + }, +}; + +export const FullyControlled = () => ( + + {({ state, setState }) => ( + <> + datePickerType="single" + dateFormat="m/d/Y" + value={state.date} + onChange={(eventOrDates) => { + const value = eventOrDates.target + ? eventOrDates.target.value + : eventOrDates[0]; + setState({ date: value }); + }}> - - ); - }, - { - info: { - text: ` - A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields. - `, - }, - } - ) - .add( - 'fully controlled', - () => ( - - {({ state, setState }) => ( - <> - { - const value = eventOrDates.target - ? eventOrDates.target.value - : eventOrDates[0]; - setState({ date: value }); - }}> - - - - - )} - - ), - { - info: { - text: ` - If your application needs to control the value of the date picker and - be notified of any changes. - `, - }, - } - ) - .add('skeleton', () => , { - info: { - text: ` + + + )} + +); + +FullyControlled.storyName = 'fully controlled'; + +FullyControlled.parameters = { + info: { + text: ` + If your application needs to control the value of the date picker and + be notified of any changes. + `, + }, +}; + +export const Skeleton = () => ; + +Skeleton.storyName = 'skeleton'; + +Skeleton.parameters = { + info: { + text: ` Placeholder skeleton state to use when content is loading. `, - }, - }); + }, +}; diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js index 10f95989c057..07372c0fbc6a 100644 --- a/packages/react/src/components/Dropdown/Dropdown-story.js +++ b/packages/react/src/components/Dropdown/Dropdown-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import Dropdown from '../Dropdown'; @@ -78,109 +77,114 @@ const props = () => ({ ), }); -storiesOf('Dropdown', module) - .addParameters({ +export default { + title: 'Dropdown', + decorators: [withKnobs], + + parameters: { component: Dropdown, + subcomponents: { DropdownSkeleton, }, - }) - .addDecorator(withKnobs) - .add( - 'default', - () => ( + }, +}; + +export const Default = () => ( +
+ (item ? item.text : '')} + onChange={action('onChange')} + /> +
+); + +Default.storyName = 'default'; + +Default.parameters = { + info: { + text: 'Dropdown', + }, +}; + +export const Inline = () => ( +
+ (item ? item.text : '')} + onChange={action('onChange')} + /> +
+); + +Inline.storyName = 'inline'; + +Inline.parameters = { + info: { + text: 'Dropdown', + }, +}; + +export const ItemsAsStrings = () => ( +
+ +
+); + +ItemsAsStrings.storyName = 'items as strings'; + +ItemsAsStrings.parameters = { + info: { + text: 'Rendering an array of strings as `items`', + }, +}; + +export const FullyControlled = () => ( + + {({ state, setState }) => (
(item ? item.text : '')} - onChange={action('onChange')} + onChange={({ selectedItem }) => + setTimeout(() => setState({ selectedItem }), 1000) + } + selectedItem={state.selectedItem} />
- ), - { - info: { - text: 'Dropdown', - }, - } - ) - .add( - 'inline', - () => ( -
- (item ? item.text : '')} - onChange={action('onChange')} - /> -
- ), - { - info: { - text: 'Dropdown', - }, - } - ) - .add( - 'items as strings', - () => ( -
- -
- ), - { - info: { - text: 'Rendering an array of strings as `items`', - }, - } - ) - .add( - 'fully controlled', - () => ( - - {({ state, setState }) => ( -
- (item ? item.text : '')} - onChange={({ selectedItem }) => - setTimeout(() => setState({ selectedItem }), 1000) - } - selectedItem={state.selectedItem} - /> -
- )} - - ), - { - info: { - text: ` - Sometimes you want to control everything. - `, - }, - } - ) - .add( - 'skeleton', - () => ( -
- -   - -
- ), - { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, - } - ); + )} + +); + +FullyControlled.storyName = 'fully controlled'; + +FullyControlled.parameters = { + info: { + text: ` + Sometimes you want to control everything. + `, + }, +}; + +export const Skeleton = () => ( +
+ +   + +
+); + +Skeleton.storyName = 'skeleton'; + +Skeleton.parameters = { + info: { + text: ` + Placeholder skeleton state to use when content is loading. + `, + }, +}; diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js index ff312e816543..a5b0f2fffa68 100644 --- a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js +++ b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js @@ -6,80 +6,88 @@ */ import React, { useState } from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { ErrorBoundary, ErrorBoundaryContext } from './'; import Button from '../Button'; -storiesOf('ErrorBoundary', module) - .addParameters({ +export default { + title: 'ErrorBoundary', + + parameters: { component: ErrorBoundary, - }) - .add('default', () => { - function DemoComponent() { - const [shouldThrowError, setShouldThrowError] = useState(false); - - function onClick() { - setShouldThrowError(!shouldThrowError); - } - - return ( - <> - -
- }> - - -
- - ); - } + }, +}; + +export const Default = () => { + function DemoComponent() { + const [shouldThrowError, setShouldThrowError] = useState(false); - function Fallback() { - return 'Whoops'; + function onClick() { + setShouldThrowError(!shouldThrowError); } - function ThrowError({ shouldThrowError }) { - if (shouldThrowError) { - throw new Error('Component threw error'); - } + return ( + <> + +
+ }> + + +
+ + ); + } - return 'Successfully rendered'; - } + function Fallback() { + return 'Whoops'; + } - return ; - }) - .add('with custom context', () => { - function DemoComponent() { - const [shouldThrowError, setShouldThrowError] = useState(false); - - function onClick() { - setShouldThrowError(!shouldThrowError); - } - - return ( - - -
- }> - - -
- - ); + function ThrowError({ shouldThrowError }) { + if (shouldThrowError) { + throw new Error('Component threw error'); } - function Fallback() { - return 'Whoops'; + return 'Successfully rendered'; + } + + return ; +}; + +Default.storyName = 'default'; + +export const WithCustomContext = () => { + function DemoComponent() { + const [shouldThrowError, setShouldThrowError] = useState(false); + + function onClick() { + setShouldThrowError(!shouldThrowError); } - function ThrowError({ shouldThrowError }) { - if (shouldThrowError) { - throw new Error('Component threw error'); - } + return ( + + +
+ }> + + +
+ + ); + } + + function Fallback() { + return 'Whoops'; + } - return 'Successfully rendered'; + function ThrowError({ shouldThrowError }) { + if (shouldThrowError) { + throw new Error('Component threw error'); } - return ; - }); + return 'Successfully rendered'; + } + + return ; +}; + +WithCustomContext.storyName = 'with custom context'; diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js index 4bae8f34e93d..c9e5f7a4abad 100644 --- a/packages/react/src/components/FileUploader/FileUploader-story.js +++ b/packages/react/src/components/FileUploader/FileUploader-story.js @@ -8,7 +8,6 @@ /* eslint-disable no-console */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, @@ -138,90 +137,107 @@ const props = { }), }; -storiesOf('FileUploader', module) - .addParameters({ +export default { + title: 'FileUploader', + decorators: [withKnobs], + + parameters: { component: FileUploader, + subcomponents: { FileUploaderButton, FileUploaderSkeleton, FileUploaderItem, FileUploaderDropContainer, }, - }) - .addDecorator(withKnobs) - .add( - 'FileUploaderButton', - () => , - { - info: { - text: ` - The FileUploaderButton can be used as a standalone component if you do not need the extra UI that comes with FileUploader. The FileUploaderButton is used in FileUploader. - `, - }, - } - ) - .add( - 'FileUploader', - () => { - return ( -
- -
- ); - }, - { - info: { - text: ` - The FileUploader components allow the user to upload any necessary files. This uses the FileUploaderButton and Filename components. Filename components will appear below the FileUploaderButton when files are added. Use the filenameStatus prop to control what icon appears in Filename ('edit', 'complete', or 'uploading'). - `, - }, - } - ) - .add( - 'FileUploaderItem', - () => , - { - info: { - text: ` - represents an item that has been uploaded to the file uploader component. Use the \`status\` prop to control which icon appears ('edit', 'complete', or 'uploading'). - `, - }, - } - ) - .add( - 'FileUploaderDropContainer', - () => , - { - info: { - text: - ' is a drag and drop file uploader which allows users to upload files via both the normal file selection dialog and by dragging and dropping files.', - }, - } - ) - .add( - 'Drag and drop upload container example application', - () => - require('./stories/drop-container').default( - props.fileUploaderDropContainer() - ), - { - info: { - text: 'Example application with drag and drop file uploader', - }, - } - ) - .add( - 'skeleton', - () => ( -
- -
- ), - { - info: { - text: ` - Placeholder skeleton state to use when content is loading. + }, +}; + +export const _FileUploaderButton = () => ( + +); + +_FileUploaderButton.storyName = 'FileUploaderButton'; + +_FileUploaderButton.parameters = { + info: { + text: ` + The FileUploaderButton can be used as a standalone component if you do not need the extra UI that comes with FileUploader. The FileUploaderButton is used in FileUploader. + `, + }, +}; + +export const _FileUploader = () => { + return ( +
+ +
+ ); +}; + +_FileUploader.storyName = 'FileUploader'; + +_FileUploader.parameters = { + info: { + text: ` + The FileUploader components allow the user to upload any necessary files. This uses the FileUploaderButton and Filename components. Filename components will appear below the FileUploaderButton when files are added. Use the filenameStatus prop to control what icon appears in Filename ('edit', 'complete', or 'uploading'). + `, + }, +}; + +export const _FileUploaderItem = () => ( + +); + +_FileUploaderItem.storyName = 'FileUploaderItem'; + +_FileUploaderItem.parameters = { + info: { + text: ` + represents an item that has been uploaded to the file uploader component. Use the \`status\` prop to control which icon appears ('edit', 'complete', or 'uploading'). `, - }, - } + }, +}; + +export const _FileUploaderDropContainer = () => ( + +); + +_FileUploaderDropContainer.storyName = 'FileUploaderDropContainer'; + +_FileUploaderDropContainer.parameters = { + info: { + text: + ' is a drag and drop file uploader which allows users to upload files via both the normal file selection dialog and by dragging and dropping files.', + }, +}; + +export const DragAndDropUploadContainerExampleApplication = () => + require('./stories/drop-container').default( + props.fileUploaderDropContainer() ); + +DragAndDropUploadContainerExampleApplication.storyName = + 'Drag and drop upload container example application'; + +DragAndDropUploadContainerExampleApplication.parameters = { + info: { + text: 'Example application with drag and drop file uploader', + }, +}; + +export const Skeleton = () => ( +
+ +
+); + +Skeleton.storyName = 'skeleton'; + +Skeleton.parameters = { + info: { + text: ` +Placeholder skeleton state to use when content is loading. +`, + }, +}; diff --git a/packages/react/src/components/FluidForm/FluidForm-story.js b/packages/react/src/components/FluidForm/FluidForm-story.js index 25383ae794e8..fdd658c737d4 100644 --- a/packages/react/src/components/FluidForm/FluidForm-story.js +++ b/packages/react/src/components/FluidForm/FluidForm-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs } from '@storybook/addon-knobs'; @@ -37,34 +36,36 @@ const InvalidPasswordProps = { 'Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.', }; -storiesOf('FluidForm', module) - .addParameters({ +export default { + title: 'FluidForm', + decorators: [withKnobs], + + parameters: { component: FluidForm, - }) - .addDecorator(withKnobs) - .add( - 'Default', - () => ( - - + }, +}; + +export const Default = () => ( + + - - - ), - { - info: { - text: ` - Forms are widely used to collect user input. + + +); - Form can have any number of react components enclosed within FormGroup component. FormGroup component - is a wrapper for legend and fieldset component. +Default.parameters = { + info: { + text: ` + Forms are widely used to collect user input. - `, - }, - } - ); + Form can have any number of react components enclosed within FormGroup component. FormGroup component + is a wrapper for legend and fieldset component. + + `, + }, +}; diff --git a/packages/react/src/components/Form/Form-story.js b/packages/react/src/components/Form/Form-story.js index fcd384bed7ba..b659ca4fefbd 100644 --- a/packages/react/src/components/Form/Form-story.js +++ b/packages/react/src/components/Form/Form-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, text } from '@storybook/addon-knobs'; @@ -134,125 +133,128 @@ const buttonEvents = { RadioButton.displayName = 'RadioButton'; -storiesOf('Form', module) - .addParameters({ +export default { + title: 'Form', + decorators: [withKnobs], + + parameters: { component: Form, + subcomponents: { FormGroup, }, - }) - .addDecorator(withKnobs) - .add( - 'Default', - () => ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + }, +}; - ( + + + + + + + + + + + + + + + + + + + + + - -