diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index 3519ef2b..9951b5f6 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -1,11 +1,13 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryObj, Meta } from '@storybook/react'; import { Checkbox } from './Checkbox'; -export default { +const meta: Meta = { title: 'Form Components/Checkbox', component: Checkbox, + args: { + label: 'Checkbox', + }, argTypes: { checked: { description: '`boolean`', @@ -23,149 +25,151 @@ export default { }, onChange: { action: 'clicked' }, }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); +}; +export default meta; +type Story = StoryObj; -export const Unchecked = Template.bind({}); -Unchecked.parameters = { - docs: { - description: { - story: - 'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.', +export const Unchecked: Story = { + parameters: { + docs: { + description: { + story: + 'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.', + }, }, }, -}; -Unchecked.args = { - checked: false, - label: 'Checkbox', + args: { + checked: false, + }, }; -export const Checked = Template.bind({}); -Checked.parameters = { - docs: { - description: { - story: - 'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.', +export const Checked: Story = { + parameters: { + docs: { + description: { + story: + 'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.', + }, }, }, -}; -Checked.args = { - checked: true, - label: 'Checkbox', + args: { + checked: true, + }, }; -export const DisabledChecked = Template.bind({}); -DisabledChecked.parameters = { - docs: { - description: { - story: 'Applies the disabled state to the element.', +export const DisabledChecked: Story = { + parameters: { + docs: { + description: { + story: 'Applies the disabled state to the element.', + }, }, }, -}; -DisabledChecked.args = { - disabled: true, - checked: true, - label: 'Checkbox', + args: { + disabled: true, + checked: true, + }, }; -export const DisabledUnchecked = Template.bind({}); -DisabledUnchecked.args = { - disabled: true, - checked: false, - label: 'Checkbox', +export const DisabledUnchecked: Story = { + args: { + disabled: true, + checked: false, + }, }; -export const HelpMessage = Template.bind({}); -HelpMessage.parameters = { - docs: { - description: { - story: - 'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.', +export const HelpMessage: Story = { + parameters: { + docs: { + description: { + story: + 'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.', + }, }, }, -}; -HelpMessage.args = { - label: 'Checkbox', - helpMessage: 'This is some helper text.', + args: { + helpMessage: 'This is some helper text.', + }, }; -export const WithError = Template.bind({}); -WithError.parameters = { - docs: { - description: { - story: 'Sets an error style on the element.', +export const WithError: Story = { + parameters: { + docs: { + description: { + story: 'Sets an error style on the element.', + }, }, }, -}; -WithError.args = { - label: 'Checkbox', - hasError: true, + args: { + hasError: true, + }, }; -export const WithErrorText = Template.bind({}); -WithErrorText.args = { - label: 'Checkbox', - hasError: true, - errorMessage: 'This is an error!', +export const WithErrorText: Story = { + args: { + hasError: true, + errorMessage: 'This is an error!', + }, }; -export const ShowRequiredLabel = Template.bind({}); -ShowRequiredLabel.args = { - label: 'Checkbox', - showRequiredLabel: true, +export const ShowRequiredLabel: Story = { + args: { + showRequiredLabel: true, + }, }; -export const WithHelpAndErrorText = Template.bind({}); -WithHelpAndErrorText.args = { - label: 'Checkbox', - hasError: true, - errorMessage: 'This is an error!', - helpMessage: 'This is some helper text.', +export const WithHelpAndErrorText: Story = { + args: { + hasError: true, + errorMessage: 'This is an error!', + helpMessage: 'This is some helper text.', + }, }; -export const Indeterminate = Template.bind({}); -Indeterminate.parameters = { - docs: { - description: { - story: - 'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.', +export const Indeterminate: Story = { + parameters: { + docs: { + description: { + story: + 'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.', + }, }, }, -}; -Indeterminate.args = { - label: 'Checkbox', - indeterminate: true, + args: { + checked: true, + indeterminate: true, + }, }; -export const IndeterminateDisabled = Template.bind({}); -IndeterminateDisabled.args = { - label: 'Checkbox', - indeterminate: true, +export const IndeterminateDisabled: Story = { + args: { + checked: true, + disabled: true, + indeterminate: true, + }, }; -export const NoLabel = Template.bind({}); -NoLabel.args = { - label: '', - 'aria-label': 'Checkbox with no label', +export const NoLabel: Story = { + args: { + label: '', + 'aria-label': 'Checkbox with no label', + }, }; -export const InverseDark = Template.bind({}); -InverseDark.parameters = { - backgrounds: { default: 'dark' }, -}; -InverseDark.args = { - label: 'Checkbox', - color: 'inverse', +export const InverseDark: Story = { + parameters: { + backgrounds: { default: 'dark' }, + }, + args: { + color: 'inverse', + }, }; -export const InverseBlue = Template.bind({}); -InverseBlue.parameters = { - backgrounds: { default: 'blue' }, -}; -InverseBlue.args = { - label: 'Checkbox', - color: 'inverse', +export const InverseBlue: Story = { + parameters: { + backgrounds: { default: 'blue' }, + }, + args: { + color: 'inverse', + }, }; diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx index 8aa7b196..4a83e6fe 100644 --- a/src/components/Chip/Chip.stories.tsx +++ b/src/components/Chip/Chip.stories.tsx @@ -1,33 +1,34 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryObj, Meta } from '@storybook/react'; import { Chip } from './Chip'; -export default { - title: 'Components/Chip', +const meta: Meta = { component: Chip, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - label: 'Chip', + args: { + label: 'Chip', + }, }; +export default meta; +type Story = StoryObj; -export const OnDelete = Template.bind({}); -OnDelete.parameters = { - docs: { - description: { - story: - 'The function to call when the removal button is clicked. Note that this does not ' + - 'actually do anything to the Chip component, removing the element from the DOM is ' + - 'up to the consumer to take care of.\n\n' + - 'To display a Chip, but not display the removal button, do not provide this prop.', +export const Default: Story = {}; + +export const OnDelete: Story = { + parameters: { + docs: { + description: { + story: + 'The function to call when the removal button is clicked. Note that this does not ' + + 'actually do anything to the Chip component, removing the element from the DOM is ' + + 'up to the consumer to take care of.\n\n' + + 'To display a Chip, but not display the removal button, do not provide this prop.', + }, }, }, }; -OnDelete.args = { - label: 'Chip', + +export const DisableDelete: Story = { + args: { + disableDelete: true, + }, }; diff --git a/src/components/ColorPicker/ColorPicker.stories.tsx b/src/components/ColorPicker/ColorPicker.stories.tsx index 468aac33..9b831b8a 100644 --- a/src/components/ColorPicker/ColorPicker.stories.tsx +++ b/src/components/ColorPicker/ColorPicker.stories.tsx @@ -1,181 +1,181 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryObj, Meta } from '@storybook/react'; import { ColorPicker } from './ColorPicker'; import { HelpCircle } from '@lifeomic/chromicons'; -export default { +const meta: Meta = { title: 'Form Components/ColorPicker', component: ColorPicker, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Default = Template.bind({}); -Default.args = { - label: 'Color Picker', + args: { + label: 'Color Picker', + }, + decorators: [ + (story) =>
{story()}
, + ], }; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; -export const InvalidColorText = Template.bind({}); -InvalidColorText.parameters = { - docs: { - description: { - story: 'Displays text in Popover header when color is invalid.', +export const InvalidColorText: Story = { + parameters: { + docs: { + description: { + story: 'Displays text in Popover header when color is invalid.', + }, }, }, -}; -InvalidColorText.args = { - label: 'Color Picker', - invalidColorText: 'Invalid Color Text', + args: { + invalidColorText: 'Invalid Color Text', + }, }; -export const SecondaryLabel = Template.bind({}); -SecondaryLabel.parameters = { - docs: { - description: { - story: - 'A secondary, supplemental label to display for the ColorPicker element.', +export const SecondaryLabel: Story = { + parameters: { + docs: { + description: { + story: + 'A secondary, supplemental label to display for the ColorPicker element.', + }, }, }, -}; -SecondaryLabel.args = { - label: 'Color Picker', - secondaryLabel: 'Secondary Label', + args: { + secondaryLabel: 'Secondary Label', + }, }; -export const Placeholder = Template.bind({}); -Placeholder.parameters = { - docs: { - description: { - story: 'The placeholder text to display.', +export const Placeholder: Story = { + parameters: { + docs: { + description: { + story: 'The placeholder text to display.', + }, }, }, -}; -Placeholder.args = { - label: 'Color Picker', - placeholder: 'Placeholder', + args: { + placeholder: 'Placeholder', + }, }; -export const IconAndTooltipMessage = Template.bind({}); -IconAndTooltipMessage.parameters = { - docs: { - description: { - story: - 'An additional icon and tooltip element can be used to provide additional context ' + - 'for the user on how the text entry will be used.', +export const IconAndTooltipMessage: Story = { + parameters: { + docs: { + description: { + story: + 'An additional icon and tooltip element can be used to provide additional context ' + + 'for the user on how the text entry will be used.', + }, }, }, -}; -IconAndTooltipMessage.args = { - label: 'Color Picker', - icon: HelpCircle, - tooltipMessage: "If you provide a color, you'll get free tacos!", + args: { + icon: HelpCircle, + tooltipMessage: "If you provide a color, you'll get free tacos!", + }, }; -export const HelpMessage = Template.bind({}); -HelpMessage.parameters = { - docs: { - description: { - story: - 'Caption, help text to display underneath the element. This should be ' + - 'supplemental text to the label, typically an expanded description of the option.', +export const HelpMessage: Story = { + parameters: { + docs: { + description: { + story: + 'Caption, help text to display underneath the element. This should be ' + + 'supplemental text to the label, typically an expanded description of the option.', + }, }, }, -}; -HelpMessage.args = { - label: 'Color Picker', - helpMessage: 'Some helper text!', + args: { + helpMessage: 'Some helper text!', + }, }; -export const ShowRequiredLabel = Template.bind({}); -ShowRequiredLabel.parameters = { - docs: { - description: { - story: - 'Shows an `*` next to the label; required validation must be handled separately.', +export const ShowRequiredLabel: Story = { + parameters: { + docs: { + description: { + story: + 'Shows an `*` next to the label; required validation must be handled separately.', + }, }, }, -}; -ShowRequiredLabel.args = { - label: 'Color Picker', - showRequiredLabel: true, + args: { + showRequiredLabel: true, + }, }; -export const HasError = Template.bind({}); -HasError.parameters = { - docs: { - description: { - story: 'Sets an error style on the element.', +export const HasError: Story = { + parameters: { + docs: { + description: { + story: 'Sets an error style on the element.', + }, }, }, -}; -HasError.args = { - label: 'Color Picker', - hasError: true, + args: { + hasError: true, + }, }; -export const ErrorMessage = Template.bind({}); -ErrorMessage.parameters = { - docs: { - description: { - story: - 'Caption, error text to display underneath the element when an error occurs. For ' + - 'the message to be displayed `hasError` must be set as well.', +export const ErrorMessage: Story = { + parameters: { + docs: { + description: { + story: + 'Caption, error text to display underneath the element when an error occurs. For ' + + 'the message to be displayed `hasError` must be set as well.', + }, }, }, -}; -ErrorMessage.args = { - label: 'Color Picker', - hasError: true, - errorMessage: 'Error Message', + args: { + hasError: true, + errorMessage: 'Error Message', + }, }; -export const Disabled = Template.bind({}); -Disabled.parameters = { - docs: { - description: { - story: - 'Applies the disabled state to the element.\n\n' + - '**REMINDER:** If you use `disabled`, screenreaders will not announce the text ' + - 'inside of the ColorPicker to the user, and will completely skip over this element.', +export const Disabled: Story = { + parameters: { + docs: { + description: { + story: + 'Applies the disabled state to the element.\n\n' + + '**REMINDER:** If you use `disabled`, screenreaders will not announce the text ' + + 'inside of the ColorPicker to the user, and will completely skip over this element.', + }, }, }, -}; -Disabled.args = { - label: 'Color Picker', - disabled: true, + args: { + disabled: true, + }, }; -export const ReadOnly = Template.bind({}); -ReadOnly.parameters = { - docs: { - description: { - story: 'Applies the read only state to the element.', +export const ReadOnly: Story = { + parameters: { + docs: { + description: { + story: 'Applies the read only state to the element.', + }, }, }, -}; -ReadOnly.args = { - label: 'Color Picker', - readOnly: true, + args: { + readOnly: true, + }, }; -export const InverseDark = Template.bind({}); -InverseDark.parameters = { - backgrounds: { default: 'dark' }, -}; -InverseDark.args = { - label: 'Color Picker', - color: 'inverse', +export const InverseDark: Story = { + parameters: { + backgrounds: { default: 'dark' }, + }, + args: { + color: 'inverse', + }, }; -export const InverseBlue = Template.bind({}); -InverseBlue.parameters = { - backgrounds: { default: 'blue' }, -}; -InverseBlue.args = { - label: 'Color Picker', - color: 'inverse', +export const InverseBlue: Story = { + parameters: { + backgrounds: { default: 'blue' }, + }, + args: { + color: 'inverse', + }, }; diff --git a/src/components/Select/ComboBox.stories.tsx b/src/components/Select/ComboBox.stories.tsx index eca09a37..9aa8cfaa 100644 --- a/src/components/Select/ComboBox.stories.tsx +++ b/src/components/Select/ComboBox.stories.tsx @@ -1,16 +1,20 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryObj, StoryFn, Meta } from '@storybook/react'; import { ComboBox } from './ComboBox'; import { SelectOption } from './SelectOption'; -export default { +const meta: Meta = { title: 'Form Components/ComboBox', component: ComboBox, - argTypes: {}, -} as ComponentMeta; + args: { + label: 'Combo Box', + }, +}; +export default meta; +type Story = StoryObj; -const Template: ComponentStory = (args) => ( +const Template: StoryFn = (args) => ( @@ -19,103 +23,107 @@ const Template: ComponentStory = (args) => ( ); -export const Default = Template.bind({}); -Default.args = { - label: 'Combo Box', +export const Default: Story = { + render: Template, }; -export const ValueAndOnChange = Template.bind({}); -ValueAndOnChange.parameters = { - docs: { - description: { - story: `The ComboBox works by providing \`value\` for the checked options and \`onChange\` -for listening for when items are added/removed. ComboBox expects the \`value\` to -be an array of options. +export const ValueAndOnChange: Story = { + render: Template, + parameters: { + docs: { + description: { + story: `The ComboBox works by providing \`value\` for the checked options and \`onChange\` + for listening for when items are added/removed. ComboBox expects the \`value\` to + be an array of options. -When an option is selected, the \`onChange\` is called. This function provides two -arguments, one for the selected values, and then the \`meta\` object. The \`meta\` -object can be used to store additional information about the option. + When an option is selected, the \`onChange\` is called. This function provides two + arguments, one for the selected values, and then the \`meta\` object. The \`meta\` + object can be used to store additional information about the option. -When an item is currently selected, and then clicked a second time, the item is -"removed". Chroma does not remove this item for you from the list. It is up to -you, the consumer, to do this yourself with a combination of \`onChange\` and -\`value\`.`, + When an item is currently selected, and then clicked a second time, the item is + "removed". Chroma does not remove this item for you from the list. It is up to + you, the consumer, to do this yourself with a combination of \`onChange\` and + \`value\`.`, + }, }, }, -}; -ValueAndOnChange.args = { - label: 'Combo Box', - value: ['option1', 'option3'], + args: { + value: ['option1', 'option3'], + }, }; -export const Label = Template.bind({}); -Label.parameters = { - docs: { - description: { - story: `The label to display for the ComboBox element. This is also the popover title -announced for screen readers when the select menu is open. If a label is not -provided, \`popoverAriaLabel\` should be provided.`, +export const Label: Story = { + render: Template, + parameters: { + docs: { + description: { + story: `The label to display for the ComboBox element. This is also the popover title + announced for screen readers when the select menu is open. If a label is not + provided, \`popoverAriaLabel\` should be provided.`, + }, }, }, }; -Label.args = { - label: 'Combo Box', -}; -export const SecondaryLabel = Template.bind({}); -SecondaryLabel.parameters = { - docs: { - description: { - story: `A secondary, supplemental label to display for the combobox element.`, +export const SecondaryLabel: Story = { + render: Template, + parameters: { + docs: { + description: { + story: `A secondary, supplemental label to display for the combobox element.`, + }, }, }, -}; -SecondaryLabel.args = { - label: 'Combo Box', - secondaryLabel: 'Secondary Label', + args: { + secondaryLabel: 'Secondary Label', + }, }; -export const Placeholder = Template.bind({}); -Placeholder.parameters = { - docs: { - description: { - story: `The placeholder text to display.`, +export const Placeholder: Story = { + render: Template, + parameters: { + docs: { + description: { + story: `The placeholder text to display.`, + }, }, }, -}; -Placeholder.args = { - label: 'Combo Box', - placeholder: 'Placeholder', + args: { + placeholder: 'Placeholder', + }, }; -export const HelpMessage = Template.bind({}); -HelpMessage.parameters = { - docs: { - description: { - story: `Caption, help text to display underneath the element. This should be -supplemental text to the label, typically an expanded description of the option.`, +export const HelpMessage: Story = { + render: Template, + parameters: { + docs: { + description: { + story: `Caption, help text to display underneath the element. This should be + supplemental text to the label, typically an expanded description of the option.`, + }, }, }, -}; -HelpMessage.args = { - label: 'Combo Box', - helpMessage: 'Help Message', + args: { + helpMessage: 'Help Message', + }, }; -export const InverseDark = Template.bind({}); -InverseDark.parameters = { - backgrounds: { default: 'dark' }, -}; -InverseDark.args = { - label: 'Combo Box', - color: 'inverse', +export const InverseDark: Story = { + render: Template, + parameters: { + backgrounds: { default: 'dark' }, + }, + args: { + color: 'inverse', + }, }; -export const InverseBlue = Template.bind({}); -InverseBlue.parameters = { - backgrounds: { default: 'blue' }, -}; -InverseBlue.args = { - label: 'Combo Box', - color: 'inverse', +export const InverseBlue: Story = { + render: Template, + parameters: { + backgrounds: { default: 'blue' }, + }, + args: { + color: 'inverse', + }, };