From 0dec7a3dfe25812783e7948a4718c93104e4cf0f Mon Sep 17 00:00:00 2001 From: Mohammer5 Date: Wed, 17 Apr 2024 06:31:24 +0800 Subject: [PATCH 01/28] refactor(storybook): replace "storiesOf" with new api --- .../CheckboxFieldFF.e3e.stories.js | 52 + .../CheckboxFieldFF.stories.e2e.js | 54 - .../FileInputFieldFF.stories.e2e.js | 18 +- .../InputFieldFF/InputFieldFF.stories.e2e.js | 28 +- .../MultiSelectFieldFF.stories.e2e.js | 30 +- .../RadioFieldFF/RadioFieldFF.stories.e2e.js | 66 +- .../SingleSelectFieldFF.stories.e2e.js | 29 +- .../SwitchFieldFF.stories.e2e.js | 88 +- .../TextAreaFieldFF.stories.e2e.js | 36 +- .../src/alert-bar/alert-bar.stories.e2e.js | 94 +- .../alert-stack/alert-stack.stories.e2e.js | 7 +- components/box/src/box.stories.e2e.js | 15 +- .../button-strip/button-strip.stories.e2e.js | 7 +- .../button/src/button/button.stories.e2e.js | 44 +- .../dropdown-button.stories.e2e.js | 124 +- .../split-button/split-button.stories.e2e.js | 119 +- components/card/src/card.stories.e2e.js | 6 +- .../checkbox-field.stories.e2e.js | 57 +- .../src/checkbox/checkbox.stories.e2e.js | 95 +- components/chip/src/chip.stories.e2e.js | 17 +- .../css-variables.stories.e2e.js | 87 +- .../field-group/field-group.stories.e2e.js | 6 +- .../src/field-set/field-set.stories.e2e.js | 6 +- .../field/src/field/field.stories.e2e.js | 6 +- .../file-input-field-with-list.stories.e2e.js | 79 +- .../file-input-field.stories.e2e.js | 23 +- .../src/file-input/file-input.stories.e2e.js | 63 +- .../file-list/file-list-item.stories.e2e.js | 67 +- .../file-list-placeholder.stories.e2e.js | 6 +- .../src/file-list/file-list.stories.e2e.js | 6 +- components/help/src/help.stories.e2e.js | 4 +- .../input-field/input-field.stories.e2e.js | 6 +- .../input/src/input/input.stories.e2e.js | 65 +- components/label/src/label.stories.e2e.js | 7 +- components/legend/src/legend.stories.e2e.js | 15 +- components/menu/src/menu/menu.stories.e2e.js | 4 +- .../modal-actions.stories.e2e.js | 6 +- .../modal-content.stories.e2e.js | 6 +- .../modal-title/modal-title.stories.e2e.js | 6 +- .../modal/src/modal/modal.stories.e2e.js | 95 +- components/node/src/node.stories.e2e.js | 55 +- .../notice-box/src/notice-box.stories.e2e.js | 7 +- .../children_as_child_nodes.stories.e2e.js | 6 +- .../displaying_loading_error.stories.e2e.js | 53 +- .../src/__e2e__/force_reload.stories.e2e.js | 6 +- .../src/__e2e__/highlight.stories.e2e.js | 6 +- .../src/__e2e__/loading_state.stories.e2e.js | 6 +- .../__e2e__/multi_selection.stories.e2e.js | 8 +- .../src/__e2e__/no_selection.stories.e2e.js | 57 +- .../path_based_filtering.stories.e2e.js | 71 +- .../__e2e__/single_selection.stories.e2e.js | 6 +- .../src/__e2e__/tree_api.stories.e2e.js | 6 +- components/radio/src/radio.stories.e2e.js | 73 +- .../multi-select-field.stories.e2e.js | 83 +- .../multi-select/multi-select.stories.e2e.js | 681 +- .../single-select-field.stories.e2e.js | 83 +- .../single-select.stories.e2e.js | 633 +- .../switch-field/switch-field.stories.e2e.js | 6 +- .../switch/src/switch/switch.stories.e2e.js | 71 +- .../tab/src/tab-bar/tab-bar.stories.e2e.js | 53 +- components/tab/src/tab/tab.stories.e2e.js | 19 +- components/tag/src/tag.stories.e2e.js | 25 +- .../text-area-field.stories.e2e.js | 6 +- .../src/text-area/text-area.stories.e2e.js | 25 +- package.json | 5 +- storybook/config/main.js | 43 +- storybook/config/manager.js | 2 +- storybook/package.json | 34 +- storybook/src/babel-config.js | 11 +- storybook/src/load-stories.js | 23 +- storybook/src/webpack-config.js | 8 +- yarn.lock | 18439 +++++++++------- 72 files changed, 11881 insertions(+), 10278 deletions(-) create mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js delete mode 100644 collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js new file mode 100644 index 0000000000..9dcb79c5b7 --- /dev/null +++ b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e3e.stories.js @@ -0,0 +1,52 @@ +import React from 'react' +import { Field } from 'react-final-form' +import { formDecorator } from '../formDecorator.js' +import { hasValue } from '../validators/index.js' +import { CheckboxFieldFF } from './CheckboxFieldFF.js' + +// https://github.com/final-form/react-final-form-arrays/issues/111 +const initialValue = ['yes'] + +export default { title: 'TestingCheckbox', decorators: [formDecorator] } +export const Unchecked = () => ( + +) +export const Checked = () => ( + +) +export const UncheckedWithValue = () => ( + +) +export const CheckedWithValue = () => ( + +) diff --git a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js b/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js deleted file mode 100644 index 07d8978c80..0000000000 --- a/collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.stories.e2e.js +++ /dev/null @@ -1,54 +0,0 @@ -import { storiesOf } from '@storybook/react' -import React from 'react' -import { Field } from 'react-final-form' -import { formDecorator } from '../formDecorator.js' -import { hasValue } from '../validators/index.js' -import { CheckboxFieldFF } from './CheckboxFieldFF.js' - -// https://github.com/final-form/react-final-form-arrays/issues/111 -const initialValue = ['yes'] - -storiesOf('Testing:Checkbox', module) - .addDecorator(formDecorator) - .add('Unchecked', () => ( - - )) - .add('Checked ', () => ( - - )) - .add('Unchecked with value', () => ( - - )) - .add('Checked with value', () => ( - - )) diff --git a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js index 77c62bb192..030c4440a7 100644 --- a/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +++ b/collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js' @@ -13,7 +12,7 @@ import { TextAreaFieldFF } from '../TextAreaFieldFF/TextAreaFieldFF.js' import { composeValidators, email, hasValue } from '../validators/index.js' import { FileInputFieldFF } from './FileInputFieldFF.js' -const StandardForm = ({ values }) => { +const Form = ({ values }) => { return (
{ ) } -storiesOf('Testing:FileInput', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Standard form', (_, { formRenderProps }) => ( - - )) +export default { + title: 'Testing:FileInput', + decorators: [formDecorator], + parameters: { options: { showPanel: false } }, +} + +export const StandardForm = (_, { formRenderProps }) => ( +
+) diff --git a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js b/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js index 3401342491..6c4109cba9 100644 --- a/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js +++ b/collections/forms/src/InputFieldFF/InputFieldFF.stories.e2e.js @@ -1,21 +1,19 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { InputFieldFF } from './InputFieldFF.js' -storiesOf('Testing:InputFieldFF', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) +export default { title: 'TestingInputFieldFF', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js index 8e84ea3a98..2f8178a69d 100644 --- a/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +++ b/collections/forms/src/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -10,16 +9,19 @@ const defaultOptions = [ { value: 'second', label: 'Second' }, ] -storiesOf('Testing:MultiSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) +export default { + title: 'MultiSelectFieldFF', + component: MultiSelectFieldFF, + decorators: [formDecorator], +} + +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js b/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js index 7380ad4577..546a106531 100644 --- a/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js +++ b/collections/forms/src/RadioFieldFF/RadioFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js' @@ -6,36 +5,35 @@ import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { RadioFieldFF } from './RadioFieldFF.js' -storiesOf('Testing:RadioFieldFF', module) - .addDecorator(formDecorator) - .add('Required and no selected value', () => ( - - - - - - )) +export default { title: 'TestingRadioFieldFF', decorators: [formDecorator] } +export const RequiredAndNoSelectedValue = () => ( + + + + + +) diff --git a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js index 8d5cff006a..4c30e415e1 100644 --- a/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +++ b/collections/forms/src/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -7,16 +6,18 @@ import { SingleSelectFieldFF } from './SingleSelectFieldFF.js' const defaultOptions = [{ value: 'initial', label: 'Initial' }] -storiesOf('Testing:SingleSelectFieldFF', module) - .addDecorator(formDecorator) - .addParameters({ options: { showPanel: false } }) - .add('Required', (_, { cypressProps }) => ( - - )) +export default { + title: 'Testing:SingleSelectFieldFF', + decorators: [formDecorator], + parameters: { options: { showPanel: false } } +} +export const Required = (_, { cypressProps }) => ( + +) diff --git a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js index 51715f9131..d4d9b3f084 100644 --- a/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js +++ b/collections/forms/src/SwitchFieldFF/SwitchFieldFF.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' @@ -8,47 +7,46 @@ import { SwitchFieldFF } from './SwitchFieldFF.js' // https://github.com/final-form/react-final-form-arrays/issues/111 const initialValue = ['yes'] -storiesOf('Testing:SwitchFieldFF', module) - .addDecorator(formDecorator) - .add('Unchecked', () => ( - - )) - .add('Checked ', () => ( - - )) - .add('Unchecked with value', () => ( - - )) - .add('Checked with value', () => ( - - )) +export default { title: 'Testing:SwitchFieldFF', decorators: [formDecorator] } +export const Unchecked = () => ( + +) +export const Checked = () => ( + +) +export const UncheckedWithValue = () => ( + +) +export const CheckedWithValue = () => ( + +) diff --git a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js index 82a56e4496..4a743e64ad 100644 --- a/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +++ b/collections/forms/src/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js @@ -1,25 +1,23 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from 'react-final-form' import { formDecorator } from '../formDecorator.js' import { hasValue } from '../validators/index.js' import { TextAreaFieldFF } from './TextAreaFieldFF.js' -storiesOf('TextArea', module) - .addDecorator(formDecorator) - .add('Default', () => ( - - )) - .add('Required', () => ( - - )) +export default { title: 'TextArea', decorators: [formDecorator] } +export const Default = () => ( + +) +export const Required = () => ( + +) diff --git a/components/alert/src/alert-bar/alert-bar.stories.e2e.js b/components/alert/src/alert-bar/alert-bar.stories.e2e.js index a415d1f6a3..6518be77be 100644 --- a/components/alert/src/alert-bar/alert-bar.stories.e2e.js +++ b/components/alert/src/alert-bar/alert-bar.stories.e2e.js @@ -1,53 +1,53 @@ -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { AlertBar } from './index.js' window.onHidden = window.Cypress && window.Cypress.cy.stub() -storiesOf('AlertBar', module) - .add('Default', () => Default) - .add('Custom duration', () => ( - Custom duration - )) - .add('Permanent with actions', () => ( - {} }, +export default { title: 'AlertBar' } + +export const Default = () => Default +export const CustomDuration = () => ( + Custom duration +) +export const PermanentWithActions = () => ( + {} }, { label: 'Cancel', onClick: () => {} }, - ]} - > - With Actions - - )) - .add('Disabled icon', () => Message) - .add('Custom icon', () => ( - Custom icon}>Message - )) - .add('With message', () => With a message) - .add('With onHidden', () => ( - Message - )) - .add('Permanent', () => Message) - .add('Hidden prop', () => { - const [hidden, setHidden] = useState(true) - const toggleVisibility = () => setHidden((prevHidden) => !prevHidden) - return ( - - - - - ) - }) + ]} + > + With Actions + +) +export const DisabledIcon = () => Message +export const CustomIcon = () => ( + Custom icon}>Message +) +export const WithMessage = () => With a message +export const WithOnHidden = () => ( + Message +) +export const Permanent = () => Message +export const HiddenProp = () => { + const [hidden, setHidden] = useState(true) + const toggleVisibility = () => setHidden((prevHidden) => !prevHidden) + return ( + + + + + ) +} diff --git a/components/alert/src/alert-stack/alert-stack.stories.e2e.js b/components/alert/src/alert-stack/alert-stack.stories.e2e.js index 83ed76a162..8069370010 100644 --- a/components/alert/src/alert-stack/alert-stack.stories.e2e.js +++ b/components/alert/src/alert-stack/alert-stack.stories.e2e.js @@ -1,12 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { AlertBar } from '../alert-bar/index.js' import { AlertStack } from './alert-stack.js' -storiesOf('AlertStack', module).add('Default', () => ( +export default { title: 'AlertStac' } + +export const Default = () => ( Message Message Message -)) +) diff --git a/components/box/src/box.stories.e2e.js b/components/box/src/box.stories.e2e.js index 41dd3464e0..aab22b627f 100644 --- a/components/box/src/box.stories.e2e.js +++ b/components/box/src/box.stories.e2e.js @@ -1,11 +1,10 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Box } from './box.js' -storiesOf('Box', module) - .add('With children', () => I am a child) - .add('Multiple', () => ( - - I am a child in a Box. - - )) +export default { title: 'Box' } +export const Withchildren = () => I am a child +export const Multiple = () => ( + + I am a child in a Box. + +) diff --git a/components/button/src/button-strip/button-strip.stories.e2e.js b/components/button/src/button-strip/button-strip.stories.e2e.js index e173009074..d6d5116d91 100644 --- a/components/button/src/button-strip/button-strip.stories.e2e.js +++ b/components/button/src/button-strip/button-strip.stories.e2e.js @@ -1,12 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Button } from '../index.js' import { ButtonStrip } from './index.js' -storiesOf('ButtonStrip', module).add('With children', () => ( +export default { title: 'ButtonStrip' } + +export const WithChildren = () => ( -)) +) diff --git a/components/button/src/button/button.stories.e2e.js b/components/button/src/button/button.stories.e2e.js index 5730885ae5..9894153ebf 100644 --- a/components/button/src/button/button.stories.e2e.js +++ b/components/button/src/button/button.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Button } from './button.js' @@ -6,24 +5,25 @@ window.onClick = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Button', module) - .add('With onClick', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) +export default { title: 'Button' } + +export const WithOnClick = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) diff --git a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js b/components/button/src/dropdown-button/dropdown-button.stories.e2e.js index 6d9de79a9c..7a27a146dc 100644 --- a/components/button/src/dropdown-button/dropdown-button.stories.e2e.js +++ b/components/button/src/dropdown-button/dropdown-button.stories.e2e.js @@ -1,67 +1,67 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { DropdownButton } from './index.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('DropdownButton', module) - .add('Default', () => ( - Content
} - > - Button - - )) - .add('With onClick', () => ( - Content} - > - Button - - )) - .add('With children', () => ( - Component} - > - I am a child - - )) - .add('With component', () => ( - I am a component} - /> - )) - .add('With icon', () => ( - I am a component} - icon={'Icon'} - /> - )) - .add('With initialFocus', () => ( - Content} - initialFocus - /> - )) - .add('Disabled with onClick', () => ( - Content} - onClick={window.onClick} - disabled - /> - )) +export default { title: 'DropdownButton' } + +export const Default = () => ( + Content} + > + Button + +) +export const WithOnClick = () => ( + Content} + > + Button + +) +export const WithChildren = () => ( + Component} + > + I am a child + +) +export const WithComponent = () => ( + I am a component} + /> +) +export const WithIcon = () => ( + I am a component} + icon={'Icon'} + /> +) +export const WithInitialFocus = () => ( + Content} + initialFocus + /> +) +export const DisabledWithOnClick = () => ( + Content} + onClick={window.onClick} + disabled + /> +) diff --git a/components/button/src/split-button/split-button.stories.e2e.js b/components/button/src/split-button/split-button.stories.e2e.js index 29eb16ab2c..3a937a1e8e 100644 --- a/components/button/src/split-button/split-button.stories.e2e.js +++ b/components/button/src/split-button/split-button.stories.e2e.js @@ -1,65 +1,64 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SplitButton } from './split-button.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('SplitButton', module) - .add('Default', () => ( - Component} - > - Label me! - - )) - .add('With onClick', () => ( - Component} - onClick={window.onClick} - > - Label me! - - )) - .add('With children', () => ( - Component} - > - I am a child - - )) - .add('With icon', () => ( - Component} - icon={
Icon
} - > - Children -
- )) - .add('With initialFocus', () => ( - Component} - initialFocus - > - Children - - )) - .add('With disabled', () => ( - Component} - disabled - > - Children - - )) +export default { title: 'SplitButton' } +export const Default = () => ( + Component} + > + Label me! + +) +export const WithOnClick = () => ( + Component} + onClick={window.onClick} + > + Label me! + +) +export const WithChildren = () => ( + Component} + > + I am a child + +) +export const WithIcon = () => ( + Component} + icon={
Icon
} + > + Children +
+) +export const WithInitialFocus = () => ( + Component} + initialFocus + > + Children + +) +export const WithDisabled = () => ( + Component} + disabled + > + Children + +) diff --git a/components/card/src/card.stories.e2e.js b/components/card/src/card.stories.e2e.js index 00170dbe78..2da68f0aa9 100644 --- a/components/card/src/card.stories.e2e.js +++ b/components/card/src/card.stories.e2e.js @@ -1,11 +1,11 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Card } from './card.js' -storiesOf('Card', module).add('With children', () => ( +export default { title: 'Card' } +export const WithChildren = () => ( I am a child I am a child I am a child -)) +) diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js b/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js index 0c8111c6f6..e3b2b771c4 100644 --- a/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js +++ b/components/checkbox/src/checkbox-field/checkbox-field.stories.e2e.js @@ -1,32 +1,31 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { CheckboxField } from './index.js' -storiesOf('CheckboxField', module) - .add('With label and required', () => ( - - )) - .add('With help text', () => ( - - )) - .add('With label', () => ( - - )) - .add('With validation text', () => ( - - )) +export default { title: 'CheckboxField' } +export const WithLabelAndRequired = () => ( + +) +export const WithHelpText = () => ( + +) +export const WithLabel = () => ( + +) +export const WithValidationText = () => ( + +) diff --git a/components/checkbox/src/checkbox/checkbox.stories.e2e.js b/components/checkbox/src/checkbox/checkbox.stories.e2e.js index 18609d4464..f47bee5748 100644 --- a/components/checkbox/src/checkbox/checkbox.stories.e2e.js +++ b/components/checkbox/src/checkbox/checkbox.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Checkbox } from './index.js' @@ -7,50 +6,50 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Checkbox', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('Disabled with onClick', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) - .add('Indeterminate prop', () => ( - - )) - .add('No indeterminate prop', () => ( - - )) +export default { title: 'Checkbox' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const DisabledWithOnClick = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) +export const IndeterminateProp = () => ( + +) +export const NoIndeterminateProp = () => ( + +) diff --git a/components/chip/src/chip.stories.e2e.js b/components/chip/src/chip.stories.e2e.js index 737cc5ecd8..d840f14262 100644 --- a/components/chip/src/chip.stories.e2e.js +++ b/components/chip/src/chip.stories.e2e.js @@ -1,15 +1,14 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Chip } from './chip.js' window.onClick = window.Cypress && window.Cypress.cy.stub() window.onRemove = window.Cypress && window.Cypress.cy.stub() -storiesOf('Chip', module) - .add('Default', () => Message) - .add('With onClick', () => Chippy) - .add('With onRemove', () => ( - Chipmunk - )) - .add('With children', () => I am a child) - .add('With icon', () => Icon}>Message) +export default { title: 'Chip' } +export const Default = () => Message +export const WithOnClick = () => Chippy + export const WithOnRemove = () => ( + Chipmunk +) +export const WithChildren = () => I am a child +export const WithIcon = () => Icon}>Message diff --git a/components/css/src/css-variables/css-variables.stories.e2e.js b/components/css/src/css-variables/css-variables.stories.e2e.js index 0871b7b458..5276e34b03 100644 --- a/components/css/src/css-variables/css-variables.stories.e2e.js +++ b/components/css/src/css-variables/css-variables.stories.e2e.js @@ -1,47 +1,46 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { CssVariables } from './index.js' -storiesOf('CssVariables', module) - .add('With colors', () => ( - - -
-
- )) - .add('With theme', () => ( - - -
-
- )) - .add('With layers', () => ( - - -
-
- )) - .add('With spacers', () => ( - - -
-
- )) - .add('With elevations', () => ( - - -
-
- )) +export default { title: 'CssVariables' } +export const WithColors = () => ( + + +
+
+) +export const WithTheme = () => ( + + +
+
+) +export const WithLayers = () => ( + + +
+
+) +export const WithSpacers = () => ( + + +
+
+) +export const WithElevations = () => ( + + +
+
+) diff --git a/components/field/src/field-group/field-group.stories.e2e.js b/components/field/src/field-group/field-group.stories.e2e.js index 45eeffc073..d591841f46 100644 --- a/components/field/src/field-group/field-group.stories.e2e.js +++ b/components/field/src/field-group/field-group.stories.e2e.js @@ -1,9 +1,9 @@ import { Checkbox } from '@dhis2-ui/checkbox' -import { storiesOf } from '@storybook/react' import React from 'react' import { FieldGroup } from './field-group.js' -storiesOf('FieldGroup', module).add('With label and required', () => ( +export default { title: 'FieldGroup' } +export const WithLabelAndRequired = () => ( ( -)) +) diff --git a/components/field/src/field-set/field-set.stories.e2e.js b/components/field/src/field-set/field-set.stories.e2e.js index 3e74d69a99..925364d919 100644 --- a/components/field/src/field-set/field-set.stories.e2e.js +++ b/components/field/src/field-set/field-set.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FieldSet } from './field-set.js' -storiesOf('FieldSet', module).add('With children', () => ( +export default { title: 'FieldSet' } +export const WithChildren = () => (
I am a child
-)) +) diff --git a/components/field/src/field/field.stories.e2e.js b/components/field/src/field/field.stories.e2e.js index c8ca27c06d..dbd74c8382 100644 --- a/components/field/src/field/field.stories.e2e.js +++ b/components/field/src/field/field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Field } from './field.js' -storiesOf('Field', module).add('With children', () => ( +export default { title: 'Field' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js index 11664011aa..8d66caceee 100644 --- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js +++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInputFieldWithList } from './index.js' @@ -33,42 +32,42 @@ const onChange = (payload, event) => { ) } -storiesOf('FileInputFieldWithList', module) - .add('Single file - with file', () => ( - - )) - .add('Multiple files - empty', () => ( - - )) - .add('Multiple files - with files', () => ( - - )) - .add('With file and default texts', () => ( - - )) - .add('With default texts', () => ( - - )) +export default { title: 'FileInputFieldWithList' } +export const SingleFileWithFile = () => ( + +) +export const MultipleFilesEmpty = () => ( + +) +export const MultipleFilesWithFiles = () => ( + +) +export const WithFileAndDefaultTexts = () => ( + +) +export const WithDefaultTexts = () => ( + +) diff --git a/components/file-input/src/file-input-field/file-input-field.stories.e2e.js b/components/file-input/src/file-input-field/file-input-field.stories.e2e.js index 7a5a4e9b40..5d7bfdcdde 100644 --- a/components/file-input/src/file-input-field/file-input-field.stories.e2e.js +++ b/components/file-input/src/file-input-field/file-input-field.stories.e2e.js @@ -1,16 +1,13 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInputField } from './file-input-field.js' -storiesOf('FileInputField', module) - .add('With label and required', () => ( - - )) - .add('Default', () => ( - - )) +export default { title: 'FileInputField' } +export const WithLabelAndRequired = () => ( + +) +export const Default = () => diff --git a/components/file-input/src/file-input/file-input.stories.e2e.js b/components/file-input/src/file-input/file-input.stories.e2e.js index 485f6c5e89..c1da8ad992 100644 --- a/components/file-input/src/file-input/file-input.stories.e2e.js +++ b/components/file-input/src/file-input/file-input.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileInput } from './index.js' @@ -17,34 +16,34 @@ const onChange = (payload, event) => { ) } -storiesOf('FileInput', module) - .add('With onChange', () => ( - - )) - .add('With onChange and multiple', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) +export default { title: 'FileInput' } +export const WithOnChange = () => ( + +) +export const WithOnChangeAndMultiple = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) diff --git a/components/file-input/src/file-list/file-list-item.stories.e2e.js b/components/file-input/src/file-list/file-list-item.stories.e2e.js index fb3dd1d18f..d2b12ffae7 100644 --- a/components/file-input/src/file-list/file-list-item.stories.e2e.js +++ b/components/file-input/src/file-list/file-list-item.stories.e2e.js @@ -1,40 +1,39 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileListItem } from './file-list-item.js' window.onRemove = window.Cypress && window.Cypress.cy.stub() window.onCancel = window.Cypress && window.Cypress.cy.stub() -storiesOf('FileListItem', module) - .add('With onRemove', () => ( - - )) - .add('Loading with onCancel', () => ( - - )) - .add('Loading with onCancel and cancelText', () => ( - {}} - onRemove={() => {}} - cancelText="Cancel" - /> - )) - .add('With label', () => ( - {}} /> - )) - .add('With removeText', () => ( - {}} /> - )) +export default { title: 'FileListItem' } +export const WithOnRemove = () => ( + +) +export const LoadingWithOnCancel = () => ( + +) +export const LoadingWithOnCancelAndCancelText = () => ( + {}} + onRemove={() => {}} + cancelText="Cancel" + /> +) +export const WithLabel = () => ( + {}} /> +) +export const WithRemoveText = () => ( + {}} /> +) diff --git a/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js b/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js index 25af178f3d..98ea79f561 100644 --- a/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js +++ b/components/file-input/src/file-list/file-list-placeholder.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileListPlaceholder } from './file-list-placeholder.js' -storiesOf('FileListPlaceholder', module).add('With children', () => ( +export default { title: 'FileListPlaceholder' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/file-input/src/file-list/file-list.stories.e2e.js b/components/file-input/src/file-list/file-list.stories.e2e.js index c705d53fe8..d0fe4a3a8b 100644 --- a/components/file-input/src/file-list/file-list.stories.e2e.js +++ b/components/file-input/src/file-list/file-list.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { FileList } from './file-list.js' -storiesOf('FileList', module).add('With children', () => ( +export default { title: 'FileList' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/help/src/help.stories.e2e.js b/components/help/src/help.stories.e2e.js index 1d305fa6e9..09265078aa 100644 --- a/components/help/src/help.stories.e2e.js +++ b/components/help/src/help.stories.e2e.js @@ -1,5 +1,5 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Help } from './help.js' -storiesOf('Help', module).add('With children', () => I am a child) +export default { title: 'Help' } +export const WithChildren = () => I am a child diff --git a/components/input/src/input-field/input-field.stories.e2e.js b/components/input/src/input-field/input-field.stories.e2e.js index 998449bbe8..1b8274c6f8 100644 --- a/components/input/src/input-field/input-field.stories.e2e.js +++ b/components/input/src/input-field/input-field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { InputField } from './index.js' -storiesOf('InputField', module).add('With label and required', () => ( +export default { title: 'InputField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/input/src/input/input.stories.e2e.js b/components/input/src/input/input.stories.e2e.js index c53354c453..3bf88f3314 100644 --- a/components/input/src/input/input.stories.e2e.js +++ b/components/input/src/input/input.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Input } from './index.js' @@ -6,35 +5,35 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Input', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With initialFocus', () => ( - - )) - .add('With disabled', () => ( - - )) +export default { title: 'Input' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithInitialFocus = () => ( + +) +export const WithDisabled = () => ( + +) diff --git a/components/label/src/label.stories.e2e.js b/components/label/src/label.stories.e2e.js index 8dd08e8c34..759602a151 100644 --- a/components/label/src/label.stories.e2e.js +++ b/components/label/src/label.stories.e2e.js @@ -1,7 +1,6 @@ import { Label } from '@dhis2-ui/label' -import { storiesOf } from '@storybook/react' import React from 'react' -storiesOf('Label', module) - .add('With children', () => ) - .add('With required', () => ) +export default { title: 'Label' } +export const WithChildren = () => +export const WithRequired = () => diff --git a/components/legend/src/legend.stories.e2e.js b/components/legend/src/legend.stories.e2e.js index 2b18458821..4bd6266553 100644 --- a/components/legend/src/legend.stories.e2e.js +++ b/components/legend/src/legend.stories.e2e.js @@ -1,11 +1,10 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Legend } from './legend.js' -storiesOf('Legend', module) - .add('With content and required', () => ( - - I am wrapped in a legend which has some styling - - )) - .add('With children', () => I am a child) +export default { title: 'Legend' } +export const WithContentAndRequired = () => ( + + I am wrapped in a legend which has some styling + +) +export const WithChildren = () => I am a child diff --git a/components/menu/src/menu/menu.stories.e2e.js b/components/menu/src/menu/menu.stories.e2e.js index 45a8103357..c30865282d 100644 --- a/components/menu/src/menu/menu.stories.e2e.js +++ b/components/menu/src/menu/menu.stories.e2e.js @@ -1,5 +1,5 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Menu } from './index.js' -storiesOf('Menu', module).add('With children', () => I am a child) +export default { title: 'Menu' } +export const WithChildren = () => I am a child diff --git a/components/modal/src/modal-actions/modal-actions.stories.e2e.js b/components/modal/src/modal-actions/modal-actions.stories.e2e.js index 13d2e6ef7b..f28e01526c 100644 --- a/components/modal/src/modal-actions/modal-actions.stories.e2e.js +++ b/components/modal/src/modal-actions/modal-actions.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalActions } from './modal-actions.js' -storiesOf('ModalActions', module).add('With children', () => ( +export default { title: 'ModalActions' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal-content/modal-content.stories.e2e.js b/components/modal/src/modal-content/modal-content.stories.e2e.js index f0fa22ef50..71e5a64eaf 100644 --- a/components/modal/src/modal-content/modal-content.stories.e2e.js +++ b/components/modal/src/modal-content/modal-content.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalContent } from './modal-content.js' -storiesOf('ModalContent', module).add('With children', () => ( +export default { title: 'ModalContent' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal-title/modal-title.stories.e2e.js b/components/modal/src/modal-title/modal-title.stories.e2e.js index d62dbb6d07..73a98fc1a1 100644 --- a/components/modal/src/modal-title/modal-title.stories.e2e.js +++ b/components/modal/src/modal-title/modal-title.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { ModalTitle } from './modal-title.js' -storiesOf('ModalTitle', module).add('With children', () => ( +export default { title: 'ModalTitle' } +export const WithChildren = () => ( I am a child -)) +) diff --git a/components/modal/src/modal/modal.stories.e2e.js b/components/modal/src/modal/modal.stories.e2e.js index abf835efae..179616fb4d 100644 --- a/components/modal/src/modal/modal.stories.e2e.js +++ b/components/modal/src/modal/modal.stories.e2e.js @@ -1,5 +1,4 @@ import { Button, ButtonStrip } from '@dhis2-ui/button' -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { ModalActions, ModalContent, ModalTitle } from '../index.js' import { Modal } from './modal.js' @@ -26,54 +25,54 @@ const StatefuleComponent = () => { ) } -storiesOf('Modal', module) - .add('With onClose', () => ( - - Title - Content - - - - - - - - )) - .add('Bottom-aligned, with onClose', () => ( - - Title - Content - - - - - - - - )) - .add('With children', () => I am a child) - .add('With stateful children', () => { - const [hide, setHide] = useState(false) +export default { title: 'Modal' } +export const WithOnClose = () => ( + + Title + Content + + + + + + + +) +export const BottomAlignedWithOnClose = () => ( + + Title + Content + + + + + + + +) +export const WithChildren = () => I am a child + export const WithStatefulChildren = () => { + const [hide, setHide] = useState(false) - return ( -
- + return ( +
+ - - Can be hidden + + Can be hidden - - - + + + - - - - -
- ) - }) + + + + +
+ ) +} diff --git a/components/node/src/node.stories.e2e.js b/components/node/src/node.stories.e2e.js index fe1d483836..bbcdd00aca 100644 --- a/components/node/src/node.stories.e2e.js +++ b/components/node/src/node.stories.e2e.js @@ -1,34 +1,33 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Node } from './node.js' window.onClose = window.Cypress && window.Cypress.cy.stub() window.onOpen = window.Cypress && window.Cypress.cy.stub() -storiesOf('Node', module) - .add('Open with onClose', () => ( - Component}> - Children - - )) - .add('Closed with onOpen', () => ( - Component}> - Children - - )) - .add('Closed with children', () => ( - Component}>I am a child - )) - .add('Open with children', () => ( - Component}> - I am a child - - )) - .add('With component', () => ( - I am a component}>Children - )) - .add('With icon', () => ( - Component} icon={
Icon
}> - Children -
- )) +export default { title: 'Node' } +export const OpenWithOnClose = () => ( + Component}> + Children + +) +export const ClosedWithOnOpen = () => ( + Component}> + Children + +) +export const ClosedWithChildren = () => ( + Component}>I am a child +) +export const OpenWithChildren = () => ( + Component}> + I am a child + +) +export const WithComponent = () => ( + I am a component}>Children +) +export const WithIcon = () => ( + Component} icon={
Icon
}> + Children +
+) diff --git a/components/notice-box/src/notice-box.stories.e2e.js b/components/notice-box/src/notice-box.stories.e2e.js index 79c0725096..cf75dd9658 100644 --- a/components/notice-box/src/notice-box.stories.e2e.js +++ b/components/notice-box/src/notice-box.stories.e2e.js @@ -1,7 +1,6 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { NoticeBox } from './notice-box.js' -storiesOf('NoticeBox', module) - .add('With children', () => The noticebox content) - .add('With title', () => ) +export default { title: 'NoticeBox' } +export const WithChildren = () => The noticebox content +export const WithTitle = () => diff --git a/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js index a13167e972..b2716cf19e 100644 --- a/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/children_as_child_nodes.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,7 +7,8 @@ import { namespace, } from './common.js' -storiesOf(namespace, module).add('Closed with children', () => ( +export default { title: namespace } +export const ClosedWithChildren = () => ( {({ selected, onChange }) => ( @@ -20,4 +20,4 @@ storiesOf(namespace, module).add('Closed with children', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js index 3d49019cc6..718e8392a5 100644 --- a/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -23,29 +22,29 @@ const dataProviderDataWithError = { }, } -storiesOf(namespace, module) - .add('A0000000001 loading error', () => ( - - - {() => ( - null} - /> - )} - - - )) - .add('A0000000001 loading error autoexpand', () => ( - - - {() => ( - null} - /> - )} - - - )) +export default { title: namespace } +export const A0000000001LoadingError = () => ( + + + {() => ( + null} + /> + )} + + +) +export const A0000000001LoadingErrorAutoexpand = () => ( + + + {() => ( + null} + /> + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js index f3e432cd09..a1edecb818 100644 --- a/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/force_reload.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React, { useState } from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -31,7 +30,7 @@ const afterReloadData = { }, } -const ForceReloading = () => { +const ForceReloading_ = () => { const [forceReload, setForceReload] = useState(false) return ( @@ -63,4 +62,5 @@ const ForceReloading = () => { ) } -storiesOf(namespace, module).add('Force reloading', () => ) +export default { title: namespace } +export const ForceReloading = () => diff --git a/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js index 3f978886fa..2d62f8581a 100644 --- a/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/highlight.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,7 +7,8 @@ import { namespace, } from './common.js' -storiesOf(namespace, module).add('Root highlighted', () => ( +export default { title: namespace } +export const RootHighlighted = () => ( {({ onChange }) => ( @@ -20,4 +20,4 @@ storiesOf(namespace, module).add('Root highlighted', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js index 102c7d075a..d6635a72aa 100644 --- a/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/loading_state.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -28,7 +27,8 @@ const data = { }, } -storiesOf(namespace, module).add('A0000000001 loading', () => ( +export default { title: namespace } +export const A0000000001Loading = () => ( {({ onChange }) => ( @@ -36,4 +36,4 @@ storiesOf(namespace, module).add('A0000000001 loading', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js index e80890221f..bd452612dd 100644 --- a/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/multi_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -10,11 +9,12 @@ import { window.selection = [] -storiesOf(namespace, module).add('Multiple selection', () => ( +export default { title: namespace } +export const MultipleSelection = () => ( - (window.selection = newSelection) + (window.selection = newSelection) } > {({ selected, onChange }) => ( @@ -26,4 +26,4 @@ storiesOf(namespace, module).add('Multiple selection', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js index ce52182a79..9d2d01476e 100644 --- a/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/no_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -8,31 +7,31 @@ import { namespace, } from './common.js' -storiesOf(namespace, module) - .add('No selection closed', () => ( - - - {({ onChange }) => ( - - )} - - - )) - .add('No selection root opened', () => ( - - - {({ onChange }) => ( - - )} - - - )) +export default { title: namespace } +export const NoSelectionClosed = () => ( + + + {({ onChange }) => ( + + )} + + +) +export const NoSelectionRootOpened = () => ( + + + {({ onChange }) => ( + + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js index ebfea9d31d..76ac869548 100644 --- a/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/path_based_filtering.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -13,43 +12,43 @@ for (let i = 0; i < 7; ++i) { window.allUnits.push(`A000000000${i}`) } -storiesOf(namespace, module) - .add('Filtered by 3-level-path', () => ( - - - {({ onChange }) => ( - ( + + + {({ onChange }) => ( + - )} - - - )) - .add('Filtered by 3-level-path and 2-level-path', () => ( - - - {({ onChange }) => ( - + )} + + +) +export const FilteredBy3LevelPathAnd2LevelPath = () => ( + + + {({ onChange }) => ( + - )} - - - )) + ]} + /> + )} + + +) diff --git a/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js index b29413a9fd..fe2a208402 100644 --- a/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/single_selection.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -35,7 +34,8 @@ const data = { }, } -storiesOf(namespace, module).add('Single selection', () => ( +export default { title: namespace } +export const SingleSelection = () => ( {({ selected, onChange }) => ( @@ -48,4 +48,4 @@ storiesOf(namespace, module).add('Single selection', () => ( )} -)) +) diff --git a/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js index 1c09bb09f8..ca728cfbcc 100644 --- a/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js +++ b/components/organisation-unit-tree/src/__e2e__/tree_api.stories.e2e.js @@ -1,5 +1,4 @@ import { CustomDataProvider } from '@dhis2/app-runtime' -import { storiesOf } from '@storybook/react' import React from 'react' import { OrganisationUnitTree } from '../index.js' import { @@ -39,7 +38,8 @@ window.onCollapse = window.Cypress && window.Cypress.cy.stub() window.onExpand = window.Cypress && window.Cypress.cy.stub() window.onChildrenLoaded = window.Cypress && window.Cypress.cy.stub() -storiesOf(namespace, module).add('Events', () => ( +export default { title: namespace } +export const Events = () => ( {({ selected, onChange }) => ( @@ -57,4 +57,4 @@ storiesOf(namespace, module).add('Events', () => ( )} -)) +) diff --git a/components/radio/src/radio.stories.e2e.js b/components/radio/src/radio.stories.e2e.js index 189ab153b3..e5c929f852 100644 --- a/components/radio/src/radio.stories.e2e.js +++ b/components/radio/src/radio.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Radio } from './radio.js' @@ -6,39 +5,39 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Radio', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With disabled', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) +export default { title: 'Radio' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithDisabled = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) diff --git a/components/select/src/multi-select-field/multi-select-field.stories.e2e.js b/components/select/src/multi-select-field/multi-select-field.stories.e2e.js index 4b97327671..ed223c42f6 100644 --- a/components/select/src/multi-select-field/multi-select-field.stories.e2e.js +++ b/components/select/src/multi-select-field/multi-select-field.stories.e2e.js @@ -1,46 +1,45 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { MultiSelectOption } from '../index.js' import { MultiSelectField } from './index.js' -storiesOf('MultiSelectField', module) - .add('With label', () => ( - - - - - - )) - .add('With help text', () => ( - - - - - - )) - .add('With validation text', () => ( - - - - - - )) - .add('With label and required status', () => ( - - - - - - )) - .add('With clearable and selected option', () => ( - - - - )) - .add('With filterable', () => ( - - - - )) - .add('With loading', () => ) - .add('Without options', () => ) +export default { title: 'MultiSelectField' } +export const WithLabel = () => ( + + + + + +) +export const WithHelpText = () => ( + + + + + +) +export const WithValidationText = () => ( + + + + + +) +export const WithLabelAndRequiredStatus = () => ( + + + + + +) +export const WithClearableAndSelectedOption = () => ( + + + +) +export const WithFilterable = () => ( + + + +) +export const WithLoading = () => +export const WithoutOptions = () => diff --git a/components/select/src/multi-select/multi-select.stories.e2e.js b/components/select/src/multi-select/multi-select.stories.e2e.js index 7d820c6de7..2f50f79b17 100644 --- a/components/select/src/multi-select/multi-select.stories.e2e.js +++ b/components/select/src/multi-select/multi-select.stories.e2e.js @@ -1,6 +1,5 @@ import { Button } from '@dhis2-ui/button' import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal' -import { storiesOf } from '@storybook/react' import PropTypes from 'prop-types' import React, { useState } from 'react' import { MultiSelectOption } from '../index.js' @@ -26,93 +25,225 @@ const options = [ { name: 'bar', id: '4' }, ] -storiesOf('MultiSelect', module) - .add('With options', () => ( - - - - - - )) - .add('With options and onChange', () => ( - - - - - - )) - .add('With onFocus', () => ( - - - - - - )) - .add('With onBlur', () => ( - - - - - - )) - .add('With custom options and onChange', () => ( - - - - - - )) - .add('With invalid options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- - {null} - {undefined} - {false} -
- )) - .add('With invalid filterable options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- -
- )) - .add('With initialFocus', () => ( - - )) - .add('Empty', () => ) - .add('Empty with empty text', () => ( - - )) - .add('Empty with empty component', () => ( - Custom empty component} - /> - )) - .add('With options and loading', () => ( - - - - - - )) - .add('With options, loading and loading text', () => ( - - - - - - )) - .add('With more than ten options', () => ( +export default { title: 'MultiSelect' } +export const WithOptions = () => ( + + + + + +) +export const WithOptionsAndOnChange = () => ( + + + + + +) +export const WithOnFocus = () => ( + + + + + +) +export const WithOnBlur = () => ( + + + + + +) +export const WithCustomOptionsAndOnChange = () => ( + + + + + +) +export const WithInvalidOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ + {null} + {undefined} + {false} +
+) +export const WithInvalidFilterableOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ +
+) +export const WithInitialFocus = () => ( + +) +export const Empty = () => +export const EmptyWithEmptyText = () => ( + +) +export const EmptyWithEmptyComponent = () => ( + Custom empty component} + /> +) +export const WithOptionsAndLoading = () => ( + + + + + +) +export const WithOptionsLoadingAndLoadingText = () => ( + + + + + +) +export const WithMoreThanTenOptions = () => ( + + + + + + + + + + + + + + +) +export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => ( + + + + + + + + + + + + + + +) +export const WithOptionsASelectionAndDisabled = () => ( + + + + + +) +export const WithOptionsAndDisabled = () => ( + + + + + +) +export const WithPrefix = () => ( + + + + + +) +export const WithPrefixAndSelection = () => ( + + + + + +) +export const WithPlaceholder = () => ( + + + + + +) +export const WithPlaceholderAndSelection = () => ( + + + + + +) +export const WithDisabledOptionAndOnChange = () => ( + + + + + + +) +export const WithOptionsAndASelection = () => ( + + + + + +) +export const WithOptionsASelectionAndOnChange = () => ( + + + + + +) +export const WithOptionsAndMultipleSelections = () => ( + + + + + +) +export const WithClearButtonSelectionAndOnChange = () => ( + + + + + +) +export const WithFilterField = () => ( + + + + + +) +export const DefaultPosition = () => ( + <> @@ -127,9 +258,16 @@ storiesOf('MultiSelect', module) - )) - .add('With more than three options and a 100px max-height', () => ( - + + +) +export const FlippedPosition = () => ( + <> + @@ -143,149 +281,10 @@ storiesOf('MultiSelect', module) - )) - .add('With options, a selection and disabled', () => ( - - - - - - )) - .add('With options and disabled', () => ( - - - - - - )) - .add('With prefix', () => ( - - - - - - )) - .add('With prefix and selection', () => ( - - - - - - )) - .add('With placeholder', () => ( - - - - - - )) - .add('With placeholder and selection', () => ( - - - - - - )) - .add('With disabled option and onChange', () => ( - - - - - - - )) - .add('With options and a selection', () => ( - - - - - - )) - .add('With options, a selection and onChange', () => ( - - - - - - )) - .add('With options and multiple selections', () => ( - - - - - - )) - .add('With clear button, selection and onChange', () => ( - - - - - - )) - .add('With filter field', () => ( - - - - - - )) - .add('Default position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Flipped position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Shifted into view', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('With duplicate selected option values', () => ( - - - - - - - )) - .add('With options that can be added to the input', () => { - const [values, setValues] = React.useState([]) - return ( - <> - { - window.onChange && window.onChange({ selected }) - setValues(selected) - }} - > - - - - - - - ) - }) - .add('Menu width changing', () => { - const [toggle, setToggle] = useState(false) - return ( -
- - Modal - -
- {toggle && ( -
- Stuff -
- )} -
- - console.log( - 'size changed to ' + selected - ) - } - > - {options.map(({ name, id }) => ( - - ))} - + + ) +} +export const MenuWidthChanging = () => { + const [toggle, setToggle] = useState(false) + return ( +
+ + Modal + +
+ {toggle && ( +
+ Stuff
- {toggle && ( -
- Stuff -
- )} + )} +
+ + console.log( + 'size changed to ' + selected + ) + } + > + {options.map(({ name, id }) => ( + + ))} +
- - - -
- ) - }) + {toggle && ( +
+ Stuff +
+ )} +
+ + + +
+ ) +} diff --git a/components/select/src/single-select-field/single-select-field.stories.e2e.js b/components/select/src/single-select-field/single-select-field.stories.e2e.js index 88f759a282..c9f76263b4 100644 --- a/components/select/src/single-select-field/single-select-field.stories.e2e.js +++ b/components/select/src/single-select-field/single-select-field.stories.e2e.js @@ -1,46 +1,45 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SingleSelectOption } from '../index.js' import { SingleSelectField } from './index.js' -storiesOf('SingleSelectField', module) - .add('With label', () => ( - - - - - - )) - .add('With help text', () => ( - - - - - - )) - .add('With validation text', () => ( - - - - - - )) - .add('With label and required status', () => ( - - - - - - )) - .add('With clearable and selected option', () => ( - - - - )) - .add('With filterable', () => ( - - - - )) - .add('With loading', () => ) - .add('Without options', () => ) +export default { title: 'SingleSelectField' } +export const WithLabel = () => ( + + + + + +) +export const WithHelpText = () => ( + + + + + +) +export const WithValidationText = () => ( + + + + + +) +export const WithLabelAndRequiredStatus = () => ( + + + + + +) +export const WithClearableAndSelectedOption = () => ( + + + +) +export const WithFilterable = () => ( + + + +) +export const WithLoading = () => +export const WithoutOptions = () => diff --git a/components/select/src/single-select/single-select.stories.e2e.js b/components/select/src/single-select/single-select.stories.e2e.js index 23f4e71027..f5bb355b69 100644 --- a/components/select/src/single-select/single-select.stories.e2e.js +++ b/components/select/src/single-select/single-select.stories.e2e.js @@ -1,6 +1,5 @@ import { Button } from '@dhis2-ui/button' import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal' -import { storiesOf } from '@storybook/react' import PropTypes from 'prop-types' import React, { useState } from 'react' import { SingleSelectOption } from '../index.js' @@ -26,93 +25,222 @@ const options = [ { name: 'bar', id: '4' }, ] -storiesOf('SingleSelect', module) - .add('With options', () => ( - - - - - - )) - .add('With options and onChange', () => ( - - - - - - )) - .add('With onFocus', () => ( - - - - - - )) - .add('With onBlur', () => ( - - - - - - )) - .add('With custom options and onChange', () => ( - - - - - - )) - .add('With invalid options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- - {null} - {undefined} - {false} -
- )) - .add('With invalid filterable options', () => ( - -
invalid one
- -
invalid two
- -
invalid three
- -
- )) - .add('With initialFocus', () => ( - - )) - .add('Empty', () => ) - .add('Empty with empty text', () => ( - - )) - .add('Empty with empty component', () => ( - Custom empty component
} - /> - )) - .add('With options and loading', () => ( - - - - - - )) - .add('With options, loading and loading text', () => ( - - - - - - )) - .add('With more than ten options', () => ( +export default { title: 'SingleSelect' } +export const WithOptions = () => ( + + + + + +) +export const WithOptionsAndOnChange = () => ( + + + + + +) +export const WithOnFocus = () => ( + + + + + +) +export const WithOnBlur = () => ( + + + + + +) +export const WithCustomOptionsAndOnChange = () => ( + + + + + +) +export const WithInvalidOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ + {null} + {undefined} + {false} +
+) +export const WithInvalidFilterableOptions = () => ( + +
invalid one
+ +
invalid two
+ +
invalid three
+ +
+) +export const WithInitialFocus = () => ( + +) +export const Empty = () => + export const EmptyWithEmptyText = () => ( + +) +export const EmptyWithEmptyComponent = () => ( + Custom empty component
} + /> +) +export const WithOptionsAndLoading = () => ( + + + + + +) +export const WithOptionsLoadingAndLoadingText = () => ( + + + + + +) +export const WithMoreThanTenOptions = () => ( + + + + + + + + + + + + + + +) +export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => ( + + + + + + + + + + + + + + +) +export const WithOptionsASelectionAndDisabled = () => ( + + + + + +) +export const WithOptionsAndDisabled = () => ( + + + + + +) +export const WithPrefix = () => ( + + + + + +) +export const WithPrefixAndSelection = () => ( + + + + + +) +export const WithPlaceholder = () => ( + + + + + +) +export const WithPlaceholderAndSelection = () => ( + + + + + +) +export const WithDisabledOptionAndOnChange = () => ( + + + + + + +) +export const WithOptionsAndASelection = () => ( + + + + + +) +export const WithOptionsASelectionAndOnChange = () => ( + + + + + +) +export const WithClearButtonSelectionAndOnChange = () => ( + + + + + +) +export const WithFilterField = () => ( + + + + + +) +export const DefaultPosition = () => ( + <> @@ -127,9 +255,16 @@ storiesOf('SingleSelect', module) - )) - .add('With more than three options and a 100px max-height', () => ( - + + +) +export const FlippedPosition = () => ( + <> + @@ -143,146 +278,10 @@ storiesOf('SingleSelect', module) - )) - .add('With options, a selection and disabled', () => ( - - - - - - )) - .add('With options and disabled', () => ( - - - - - - )) - .add('With prefix', () => ( - - - - - - )) - .add('With prefix and selection', () => ( - - - - - - )) - .add('With placeholder', () => ( - - - - - - )) - .add('With placeholder and selection', () => ( - - - - - - )) - .add('With disabled option and onChange', () => ( - - - - - - - )) - .add('With options and a selection', () => ( - - - - - - )) - .add('With options, a selection and onChange', () => ( - - - - - - )) - .add('With clear button, selection and onChange', () => ( - - - - - - )) - .add('With filter field', () => ( - - - - - - )) - .add('Default position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Flipped position', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('Shifted into view', () => ( - <> - - - - - - - - - - - - - - - - - )) - .add('With duplicate selected option values', () => ( - - - - - - - )) - .add('Menu width changing', () => { - const [toggle, setToggle] = useState(false) - return ( -
- - Modal - -
- {toggle && ( -
- Stuff -
- )} -
- - console.log( - 'size changed to ' + selected - ) - } - > - {options.map(({ name, id }) => ( - - ))} - + +) +export const WithDuplicateSelectedOptionValues = () => ( + + + + + + +) +export const MenuWidthChanging = () => { + const [toggle, setToggle] = useState(false) + return ( +
+ + Modal + +
+ {toggle && ( +
+ Stuff
- {toggle && ( -
- Stuff -
- )} + )} +
+ + console.log( + 'size changed to ' + selected + ) + } + > + {options.map(({ name, id }) => ( + + ))} +
- - - -
- ) - }) + {toggle && ( +
+ Stuff +
+ )} +
+ + + +
+ ) +} diff --git a/components/switch/src/switch-field/switch-field.stories.e2e.js b/components/switch/src/switch-field/switch-field.stories.e2e.js index b1dff350f5..f2abc1d398 100644 --- a/components/switch/src/switch-field/switch-field.stories.e2e.js +++ b/components/switch/src/switch-field/switch-field.stories.e2e.js @@ -1,7 +1,7 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { SwitchField } from './index.js' -storiesOf('SwitchField', module).add('With label and required', () => ( +export default { title: 'SwitchField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/switch/src/switch/switch.stories.e2e.js b/components/switch/src/switch/switch.stories.e2e.js index e34f37f2a1..4788b6fab6 100644 --- a/components/switch/src/switch/switch.stories.e2e.js +++ b/components/switch/src/switch/switch.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Switch } from './index.js' @@ -6,38 +5,38 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('Switch', module) - .add('With onChange', () => ( - - )) - .add('With initialFocus and onBlur', () => ( - - )) - .add('With onFocus', () => ( - - )) - .add('With disabled', () => ( - - )) - .add('With label', () => ( - - )) - .add('With initialFocus', () => ( - - )) +export default { title: 'Switch' } +export const WithOnChange = () => ( + +) +export const WithInitialFocusAndOnBlur = () => ( + +) +export const WithOnFocus = () => ( + +) +export const WithDisabled = () => ( + +) +export const WithLabel = () => ( + +) +export const WithInitialFocus = () => ( + +) diff --git a/components/tab/src/tab-bar/tab-bar.stories.e2e.js b/components/tab/src/tab-bar/tab-bar.stories.e2e.js index 60d61f7c72..6a89cf43fc 100644 --- a/components/tab/src/tab-bar/tab-bar.stories.e2e.js +++ b/components/tab/src/tab-bar/tab-bar.stories.e2e.js @@ -1,32 +1,31 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tab } from '../tab/index.js' import { TabBar } from './index.js' -storiesOf('TabBar', module) - .add('With children', () => I am a child) - .add('Scrollable with children', () => ( - I am a child - )) - .add('Scrollable with some tabs', () => { - const TabStaticWidth = () => ( - -
- Foo -
-
- ) +export default { title: 'TabBar' } +export const WithChildren = () => I am a child + export const ScrollableWithChildren = () => ( + I am a child +) +export const ScrollableWithSomeTabs = () => { + const TabStaticWidth = () => ( + +
+ Foo +
+
+ ) - return ( - - - - - - ) - }) + return ( + + + + + + ) +} diff --git a/components/tab/src/tab/tab.stories.e2e.js b/components/tab/src/tab/tab.stories.e2e.js index b030e6276d..51e7e6588a 100644 --- a/components/tab/src/tab/tab.stories.e2e.js +++ b/components/tab/src/tab/tab.stories.e2e.js @@ -1,15 +1,14 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tab } from './tab.js' window.onClick = window.Cypress && window.Cypress.cy.stub() -storiesOf('Tab', module) - .add('With onClick', () => Tab A) - .add('With children', () => I am a child) - .add('With icon', () => Icon
}>Children) - .add('With onClick and disabled', () => ( - - Tab A - - )) +export default { title: 'Tab' } +export const WithOnClick = () => Tab A +export const WithChildren = () => I am a child +export const WithIcon = () => Icon
}>Children +export const WithOnClickAndDisabled = () => ( + + Tab A + +) diff --git a/components/tag/src/tag.stories.e2e.js b/components/tag/src/tag.stories.e2e.js index 9479cda4a3..28507e8583 100644 --- a/components/tag/src/tag.stories.e2e.js +++ b/components/tag/src/tag.stories.e2e.js @@ -1,16 +1,15 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { Tag } from './tag.js' -storiesOf('Tag', module) - .add('Without icon', () => Default) - .add('With icon', () => Icon}>Default) - .add('With text', () => Text content) - .add('With default max width', () => ( - - This is a lot of content that should exceed the default max width of - the tag component quite significantly so testing is still works when - the default value of the max width is changed - - )) - .add('With custom max width', () => Text content) +export default { title: 'Tag' } +export const WithoutIcon = () => Default +export const WithIcon = () => Icon}>Default +export const WithText = () => Text content + export const WithDefaultMaxWidth = () => ( + + This is a lot of content that should exceed the default max width of + the tag component quite significantly so testing is still works when + the default value of the max width is changed + +) +export const WithCustomMaxWidth = () => Text content diff --git a/components/text-area/src/text-area-field/text-area-field.stories.e2e.js b/components/text-area/src/text-area-field/text-area-field.stories.e2e.js index b8629e72c8..fa50d32a08 100644 --- a/components/text-area/src/text-area-field/text-area-field.stories.e2e.js +++ b/components/text-area/src/text-area-field/text-area-field.stories.e2e.js @@ -1,11 +1,11 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { TextAreaField } from './index.js' -storiesOf('TextAreaField', module).add('With label and required', () => ( +export default { title: 'TextAreaField' } +export const WithLabelAndRequired = () => ( -)) +) diff --git a/components/text-area/src/text-area/text-area.stories.e2e.js b/components/text-area/src/text-area/text-area.stories.e2e.js index 209291c6c5..ae4550c69d 100644 --- a/components/text-area/src/text-area/text-area.stories.e2e.js +++ b/components/text-area/src/text-area/text-area.stories.e2e.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react' import React from 'react' import { TextArea } from './index.js' @@ -6,15 +5,15 @@ window.onChange = window.Cypress && window.Cypress.cy.stub() window.onBlur = window.Cypress && window.Cypress.cy.stub() window.onFocus = window.Cypress && window.Cypress.cy.stub() -storiesOf('TextArea', module) - .add('With onChange', () => ( -