diff options
Diffstat (limited to 'src/components/molecules/forms')
8 files changed, 334 insertions, 82 deletions
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index a59bfa9..4e6adf1 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import AckeeSelectComponent from './ackee-select'; +import AckeeSelect from './ackee-select'; +/** + * AckeeSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: AckeeSelectComponent, + title: 'Molecules/Forms/Select', + component: AckeeSelect, argTypes: { initialValue: { control: { @@ -17,16 +20,50 @@ export default { required: true, }, }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, -} as ComponentMeta<typeof AckeeSelectComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof AckeeSelect>; -const Template: ComponentStory<typeof AckeeSelectComponent> = (args) => ( - <IntlProvider locale="en"> - <AckeeSelectComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof AckeeSelect> = (args) => ( + <AckeeSelect {...args} /> ); -export const AckeeSelect = Template.bind({}); -AckeeSelect.args = { +/** + * Select Stories - Ackee select + */ +export const Ackee = Template.bind({}); +Ackee.args = { initialValue: 'full', }; diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx index b77d71e..56eef00 100644 --- a/src/components/molecules/forms/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -1,16 +1,45 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledFieldComponent from './labelled-field'; +import LabelledField from './labelled-field'; +/** + * LabelledField - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledFieldComponent, + title: 'Molecules/Forms/Field', + component: LabelledField, args: { disabled: false, labelPosition: 'top', required: false, }, argTypes: { + 'aria-labelledby': { + control: { + type: 'text', + }, + description: 'One or more ids that refers to the field name.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, disabled: { control: { type: 'boolean', @@ -35,6 +64,20 @@ export default { required: true, }, }, + hideLabel: { + control: { + type: 'boolean', + }, + description: 'Visually hide the field label.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, label: { control: { type: 'text', @@ -181,20 +224,68 @@ export default { }, }, }, -} as ComponentMeta<typeof LabelledFieldComponent>; +} as ComponentMeta<typeof LabelledField>; -const Template: ComponentStory<typeof LabelledFieldComponent> = ({ +const Template: ComponentStory<typeof LabelledField> = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState<string>(''); - return <LabelledFieldComponent value={value} setValue={setValue} {...args} />; + return <LabelledField value={value} setValue={setValue} {...args} />; +}; + +/** + * Labelled Field Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'left', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'top', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', + required: true, +}; + +/** + * Labelled Field Stories - Hidden label + */ +export const HiddenLabel = Template.bind({}); +HiddenLabel.args = { + hideLabel: true, + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', }; -export const LabelledField = Template.bind({}); -LabelledField.args = { +/** + * Labelled Field Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, id: 'labelled-field-storybook', label: 'Labelled field', name: 'labelled-field-storybook', diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx index 0c569f5..d02732c 100644 --- a/src/components/molecules/forms/labelled-select.stories.tsx +++ b/src/components/molecules/forms/labelled-select.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledSelectComponent from './labelled-select'; +import LabelledSelect from './labelled-select'; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -8,9 +8,12 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; +/** + * LabelledSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledSelectComponent, + title: 'Molecules/Forms/Select', + component: LabelledSelect, args: { disabled: false, labelPosition: 'top', @@ -167,29 +170,67 @@ export default { }, }, }, -} as ComponentMeta<typeof LabelledSelectComponent>; +} as ComponentMeta<typeof LabelledSelect>; -const Template: ComponentStory<typeof LabelledSelectComponent> = ({ +const Template: ComponentStory<typeof LabelledSelect> = ({ value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState<string>(value); - return ( - <LabelledSelectComponent - value={selected} - setValue={setSelected} - {...args} - /> - ); + return <LabelledSelect value={selected} setValue={setSelected} {...args} />; }; -export const LabelledSelect = Template.bind({}); -LabelledSelect.args = { +/** + * Labelled Select Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { id: 'labelled-select-storybook', label: 'Labelled select', + labelPosition: 'left', name: 'labelled-select-storybook', options: selectOptions, value: 'option1', }; + +/** + * Labelled Select Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + id: 'labelled-select-storybook', + label: 'Labelled select', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + required: true, + value: 'option1', +}; diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index dc4d2a9..dcfc68d 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -2,10 +2,26 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import MotionToggleComponent from './motion-toggle'; +/** + * MotionToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', + title: 'Molecules/Forms/Toggle', component: MotionToggleComponent, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof MotionToggleComponent>; const Template: ComponentStory<typeof MotionToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <MotionToggleComponent {...args} /> - </IntlProvider> + <MotionToggleComponent {...args} /> ); -export const MotionToggle = Template.bind({}); -MotionToggle.args = { +/** + * Toggle Stories - Motion + */ +export const Motion = Template.bind({}); +Motion.args = { value: false, }; diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index dc9090b..513ebfc 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import PrismThemeToggleComponent from './prism-theme-toggle'; +import PrismThemeToggle from './prism-theme-toggle'; +/** + * PrismThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: PrismThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: PrismThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta<typeof PrismThemeToggleComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof PrismThemeToggle>; -const Template: ComponentStory<typeof PrismThemeToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <PrismThemeToggleComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof PrismThemeToggle> = (args) => ( + <PrismThemeToggle {...args} /> ); -export const PrismThemeToggle = Template.bind({}); -PrismThemeToggle.args = { +/** + * Toggle Stories - Prism theme + */ +export const PrismTheme = Template.bind({}); +PrismTheme.args = { value: false, }; diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx index c63e9b8..d757b2b 100644 --- a/src/components/molecules/forms/select-with-tooltip.stories.tsx +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SelectWithTooltipComponent from './select-with-tooltip'; +import SelectWithTooltip from './select-with-tooltip'; +/** + * SelectWithTooltip - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: SelectWithTooltipComponent, + title: 'Molecules/Forms/Select', + component: SelectWithTooltip, argTypes: { content: { control: { @@ -175,7 +178,14 @@ export default { }, }, }, -} as ComponentMeta<typeof SelectWithTooltipComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof SelectWithTooltip>; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -183,25 +193,22 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; -const Template: ComponentStory<typeof SelectWithTooltipComponent> = ({ +const Template: ComponentStory<typeof SelectWithTooltip> = ({ value: _value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState<string>('option1'); return ( - <IntlProvider locale="en"> - <SelectWithTooltipComponent - value={selected} - setValue={setSelected} - {...args} - /> - </IntlProvider> + <SelectWithTooltip value={selected} setValue={setSelected} {...args} /> ); }; -export const SelectWithTooltip = Template.bind({}); -SelectWithTooltip.args = { +/** + * Select Stories - With tooltip + */ +export const WithTooltip = Template.bind({}); +WithTooltip.args = { content: 'Illo voluptatibus quia minima placeat sit nostrum excepturi.', title: 'Possimus quidem dolor', id: 'storybook-select', diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index a9bcf73..05d94b9 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ThemeToggleComponent from './theme-toggle'; +import ThemeToggle from './theme-toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: ThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta<typeof ThemeToggleComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof ThemeToggle>; -const Template: ComponentStory<typeof ThemeToggleComponent> = (args) => ( - <IntlProvider locale="en"> - <ThemeToggleComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof ThemeToggle> = (args) => ( + <ThemeToggle {...args} /> ); -export const ThemeToggle = Template.bind({}); -ThemeToggle.args = { +/** + * Toggle Stories - Theme + */ +export const Theme = Template.bind({}); +Theme.args = { value: false, }; diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx index 078a34c..0351ab7 100644 --- a/src/components/molecules/forms/toggle.stories.tsx +++ b/src/components/molecules/forms/toggle.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import ToggleComponent from './toggle'; +import Toggle from './toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ToggleComponent, + title: 'Molecules/Forms/Toggle', + component: Toggle, argTypes: { choices: { description: 'The toggle choices.', @@ -92,21 +95,22 @@ export default { }, }, }, -} as ComponentMeta<typeof ToggleComponent>; +} as ComponentMeta<typeof Toggle>; -const Template: ComponentStory<typeof ToggleComponent> = ({ +const Template: ComponentStory<typeof Toggle> = ({ value: _value, setValue: _setValue, ...args }) => { const [isChecked, setIsChecked] = useState<boolean>(false); - return ( - <ToggleComponent value={isChecked} setValue={setIsChecked} {...args} /> - ); + return <Toggle value={isChecked} setValue={setIsChecked} {...args} />; }; -export const Toggle = Template.bind({}); -Toggle.args = { +/** + * Toggle Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { choices: { left: 'On', right: 'Off', |