diff --git a/src/components/form/primitive/Checkbox/Checkbox.stories.mdx b/src/components/form/primitive/Checkbox/Checkbox.stories.mdx deleted file mode 100644 index b215cab0..00000000 --- a/src/components/form/primitive/Checkbox/Checkbox.stories.mdx +++ /dev/null @@ -1,45 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../../.storybook/components' -import { Checkbox } from './Checkbox' - - - -# Checkbox - -A themed `checkbox` element. - -export const Template = ({ ...args }) => - - - - {Template.bind({})} - - - -### Props - - - - - - - -### With long text - -export const TemplateWithLongText = () => ( - -) - - - {TemplateWithLongText.bind({})} - diff --git a/src/components/form/primitive/Checkbox/Checkbox.stories.tsx b/src/components/form/primitive/Checkbox/Checkbox.stories.tsx new file mode 100644 index 00000000..f331a7e3 --- /dev/null +++ b/src/components/form/primitive/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,49 @@ +import { Meta, StoryObj } from '@storybook/react' +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Theme } from '../../../../../.storybook/components' +import { Checkbox } from './Checkbox' + +const meta = { + component: Checkbox, + args: { + name: 'name', + label: 'Accept privacy policy', + disabled: false, + }, + parameters: { + docs: { + page: () => ( + <> + + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['checkbox']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof Checkbox> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const WithLongMessage: Story = { + args: { + name: 'checkbox-w-long-text', + label: + 'This checkbox has a very long text to show the behavior of a line break within the checkbox component. Adjust the width of the window to see the positioning of the elements within the component.', + }, +} diff --git a/src/components/form/primitive/FieldSet.stories.mdx b/src/components/form/primitive/FieldSet.stories.mdx deleted file mode 100644 index fab7fa41..00000000 --- a/src/components/form/primitive/FieldSet.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { FieldSet } from './FieldSet' - -<Meta title="Components/Form/primitive/FieldSet" component={FieldSet} /> - -# FieldSet - -A themed fieldset. - -It inherits styles from the [InputLabel](../?path=/docs/components-form-primitive-inputlabel--docs). - -The `indent` property can be used to control the indentation of the component (which may depend on its position and the components it contains). - -export const Template = ({ ...args }) => <FieldSet {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - label: 'Label', - children: <>FieldSet Content</>, - }} - argTypes={{ - disabled: { type: 'boolean' }, - children: { control: { disable: true } }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['fieldset']} /> diff --git a/src/components/form/primitive/FieldSet.stories.tsx b/src/components/form/primitive/FieldSet.stories.tsx new file mode 100644 index 00000000..1bd76f7a --- /dev/null +++ b/src/components/form/primitive/FieldSet.stories.tsx @@ -0,0 +1,44 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components' +import { FieldSet } from './index' + +const meta = { + component: FieldSet, + args: { + label: 'Label', + children: <>FieldSet Content</>, + }, + argTypes: { + disabled: { type: 'boolean' }, + children: { control: { disable: true } }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['fieldset']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof FieldSet> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/form/primitive/Input.stories.mdx b/src/components/form/primitive/Input.stories.mdx deleted file mode 100644 index 6523198d..00000000 --- a/src/components/form/primitive/Input.stories.mdx +++ /dev/null @@ -1,148 +0,0 @@ -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { FormVariant, FormTone } from '../types' -import { Input } from './Input' - -<Meta title="Components/Form/primitive/Input" component={Input} /> - -# Input - -A themed `input` element. - -export const Template = ({ ...args }) => <Input {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - name: 'name', - placeholder: '', - disabled: false, - iconStart: 'None', - iconEnd: 'None', - }} - argTypes={{ - iconStart: { - options: ['None', 'Search', 'Badge'], - mapping: { - None: undefined, - Search: IconSearch, - Badge: IconBadge, - }, - control: { type: 'select' }, - }, - iconEnd: { - options: ['None', 'Search', 'Badge'], - mapping: { - None: undefined, - Search: IconSearch, - Badge: IconBadge, - }, - control: { type: 'select' }, - }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['input']} /> - -## Variants - -The `Variant` defines the background and the border. - -<Canvas> - <Story - name="VariantGhost" - args={{ - placeholder: 'Ghost', - variant: FormVariant.ghost, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSoft" - args={{ - placeholder: 'Soft', - variant: FormVariant.soft, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSolid" - args={{ - placeholder: 'Solid', - variant: FormVariant.solid, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantTransparent" - args={{ - placeholder: 'Transparent', - variant: FormVariant.transparent, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -## Tones - -The `Tone` defines the background and the border. - -<Canvas> - <Story - name="ToneNeutral" - args={{ - placeholder: 'Neutral', - tone: FormTone.neutral, - }} - > - {Template.bind({})} - </Story> - <Story - name="ToneCritical" - args={{ - placeholder: 'Critical', - tone: FormTone.critical, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -## Icons - -<Canvas> - <Story - name="IconStart" - args={{ - iconStart: IconSearch, - placeholder: 'Search', - }} - > - {Template.bind({})} - </Story> - <Story - name="IconEnd" - args={{ - iconEnd: IconBadge, - placeholder: 'Name', - }} - > - {Template.bind({})} - </Story> -</Canvas> diff --git a/src/components/form/primitive/Input.stories.tsx b/src/components/form/primitive/Input.stories.tsx new file mode 100644 index 00000000..d8ad959e --- /dev/null +++ b/src/components/form/primitive/Input.stories.tsx @@ -0,0 +1,99 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' +import { Theme } from '../../../../.storybook/components' +import { FormTone, FormVariant } from '../types' +import { Input } from './Input' + +const meta = { + component: Input, + args: { + name: 'name', + placeholder: '', + disabled: false, + iconStart: undefined, + iconEnd: undefined, + }, + argTypes: { + iconStart: { + options: ['None', 'Search', 'Badge'], + mapping: { + None: undefined, + Search: IconSearch, + Badge: IconBadge, + }, + control: { type: 'select' }, + }, + iconEnd: { + options: ['None', 'Search', 'Badge'], + mapping: { + None: undefined, + Search: IconSearch, + Badge: IconBadge, + }, + control: { type: 'select' }, + }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['input']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof Input> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const Variant: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <Input {...args} variant={FormVariant.Ghost} placeholder="Ghost" /> + <Input {...args} variant={FormVariant.Soft} placeholder="Soft" /> + <Input {...args} variant={FormVariant.Solid} placeholder="Solid" /> + <Input + {...args} + variant={FormVariant.Transparent} + placeholder="Transparent" + /> + </div> + ), +} + +export const Tone: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <Input {...args} tone={FormTone.Neutral} placeholder="Neutral" /> + <Input {...args} tone={FormTone.Critical} placeholder="Critical" /> + </div> + ), +} + +export const Icons: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <Input {...args} iconStart={IconSearch} placeholder="Search" /> + <Input {...args} iconEnd={IconBadge} placeholder="Badge" /> + </div> + ), +} diff --git a/src/components/form/primitive/InputIcon/InputIcon.stories.mdx b/src/components/form/primitive/InputIcon/InputIcon.stories.mdx deleted file mode 100644 index 8cd5508c..00000000 --- a/src/components/form/primitive/InputIcon/InputIcon.stories.mdx +++ /dev/null @@ -1,44 +0,0 @@ -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../../.storybook/components' -import { InputIcon } from './InputIcon' -import { IconPosition } from './types' - -<Meta title="Components/Form/primitive/InputIcon" component={InputIcon} /> - -# InputIcon - -A themed `Icon` component to be used with field components. - -export const Template = ({ ...args }) => <InputIcon {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - icon: 'Search', - position: IconPosition.start, - }} - argTypes={{ - icon: { - options: ['Search', 'Badge'], - mapping: { - Search: IconSearch, - Badge: IconBadge, - }, - control: { type: 'select' }, - }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['inputIcon']} /> diff --git a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx new file mode 100644 index 00000000..de87c1f1 --- /dev/null +++ b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx @@ -0,0 +1,53 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' +import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import { Theme } from '../../../../../.storybook/components' +import { InputIcon } from './InputIcon' +import { IconPosition } from './types' + +const meta = { + component: InputIcon, + args: { + icon: IconSearch, + position: IconPosition.Start, + }, + argTypes: { + icon: { + options: ['Search', 'Badge'], + mapping: { + Search: IconSearch, + Badge: IconBadge, + }, + control: { type: 'select' }, + }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['input']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof InputIcon> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/form/primitive/InputLabel.stories.mdx b/src/components/form/primitive/InputLabel.stories.mdx deleted file mode 100644 index ceeb409b..00000000 --- a/src/components/form/primitive/InputLabel.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { InputLabel } from './InputLabel' - -<Meta title="Components/Form/primitive/InputLabel" component={InputLabel} /> - -# InputLabel - -A themed `label` element. - -export const Template = ({ ...args }) => <InputLabel {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - children: 'Label', - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['inputLabel']} /> diff --git a/src/components/form/primitive/InputLabel.stories.tsx b/src/components/form/primitive/InputLabel.stories.tsx new file mode 100644 index 00000000..df2cc202 --- /dev/null +++ b/src/components/form/primitive/InputLabel.stories.tsx @@ -0,0 +1,40 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components' +import { InputLabel } from './InputLabel' + +const meta = { + component: InputLabel, + args: { + children: 'Label', + }, + + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['inputLabel']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof InputLabel> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/form/primitive/InputMessage.stories.mdx b/src/components/form/primitive/InputMessage.stories.mdx deleted file mode 100644 index a80b2f53..00000000 --- a/src/components/form/primitive/InputMessage.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { InputMessage } from './InputMessage' - -<Meta title="Components/Form/primitive/InputMessage" component={InputMessage} /> - -# InputMessage - -A themed message to be used with field components. - -export const Template = ({ ...args }) => <InputMessage {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - message: 'Message', - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['inputMessage']} /> diff --git a/src/components/form/primitive/InputMessage.stories.tsx b/src/components/form/primitive/InputMessage.stories.tsx new file mode 100644 index 00000000..256ca495 --- /dev/null +++ b/src/components/form/primitive/InputMessage.stories.tsx @@ -0,0 +1,40 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components' +import { InputMessage } from './InputMessage' + +const meta = { + component: InputMessage, + args: { + message: 'Message', + }, + + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['inputMessage']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof InputMessage> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/form/primitive/Option.stories.mdx b/src/components/form/primitive/Option.stories.mdx deleted file mode 100644 index 9faf3dd1..00000000 --- a/src/components/form/primitive/Option.stories.mdx +++ /dev/null @@ -1,41 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { Option } from './Option' -import { Select } from './Select' - -<Meta title="Components/Form/primitive/Option" component={Option} /> - -# Option - -A custom themed `option` element to be used with [Select](../?path=/docs/components-form-primitive-select--docs). - -export const Template = ({ ...args }) => <Option {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - children: 'Example option', - }} - argTypes={{ - disabled: { type: 'boolean' }, - }} - decorators={[ - (Story) => ( - <Select> - <Story /> - </Select> - ), - ]} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['option']} /> diff --git a/src/components/form/primitive/Option.stories.tsx b/src/components/form/primitive/Option.stories.tsx new file mode 100644 index 00000000..8dc92c8c --- /dev/null +++ b/src/components/form/primitive/Option.stories.tsx @@ -0,0 +1,49 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components' +import { Option } from './Option' +import { Select } from './Select' +const meta = { + component: Option, + args: { + children: 'Example option', + }, + argTypes: { + disabled: { type: 'boolean' }, + }, + decorators: [ + (Story) => ( + <Select> + <Story /> + </Select> + ), + ], + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['option']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof Option> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/form/primitive/Radio/Radio.stories.mdx b/src/components/form/primitive/Radio/Radio.stories.mdx deleted file mode 100644 index 1206fc99..00000000 --- a/src/components/form/primitive/Radio/Radio.stories.mdx +++ /dev/null @@ -1,50 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../../.storybook/components' -import { Radio } from './Radio' - -<Meta title="Components/Form/primitive/Radio" component={Radio} /> - -# Radio - -A themed `radio` element. - -export const Template = ({ ...args }) => ( - <div className="space-y-4"> - <Radio {...args} /> - <Radio {...args} label="Option 2" /> - <Radio {...args} label="Option 3" /> - </div> -) - -<Canvas> - <Story - name="Default" - args={{ - name: 'name', - label: 'Option 1', - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['radio']} /> - -### With long text - -export const TemplateWithLongText = () => ( - <Radio - name="radio-w-long-text" - label="This radio has a very long text to show the behavior of a line break within the radio component. Adjust the width of the window to see the positioning of the elements within the component." - /> -) - -<Canvas> - <Story name="With long text">{TemplateWithLongText.bind({})}</Story> -</Canvas> diff --git a/src/components/form/primitive/Radio/Radio.stories.tsx b/src/components/form/primitive/Radio/Radio.stories.tsx new file mode 100644 index 00000000..45bc3750 --- /dev/null +++ b/src/components/form/primitive/Radio/Radio.stories.tsx @@ -0,0 +1,55 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../../.storybook/components' +import { Radio } from './Radio' + +const meta = { + component: Radio, + args: { + name: 'name', + label: 'Option 1', + }, + render: (args) => ( + <div className="space-y-4"> + <Radio {...args} /> + <Radio {...args} label="Option 2" /> + <Radio {...args} label="Option 3" /> + </div> + ), + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['radio']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof Radio> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const WithLongTex: Story = { + args: { + name: 'radio-w-long-text', + label: + 'This radio has a very long text to show the behavior of a line break within the radio component. Adjust the width of the window to see the positioning of the elements within the component.', + }, +} diff --git a/src/components/form/primitive/Select.stories.mdx b/src/components/form/primitive/Select.stories.mdx deleted file mode 100644 index 4bfd72a0..00000000 --- a/src/components/form/primitive/Select.stories.mdx +++ /dev/null @@ -1,172 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { FormVariant, FormTone } from '../types' -import { Option } from './Option' -import { Select } from './Select' - -<Meta title="Components/Form/primitive/Select" component={Select} /> - -# Select - -A themed `select` element. - -It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). - -export const Template = ({ ...args }) => <Select {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - children: ( - <> - <Option value="1">Option 1</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - argTypes={{ - disabled: { type: 'boolean' }, - children: { control: { disable: true } }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['select']} /> - -## Variants - -The `Variant` defines the background and the border. - -<Canvas> - <Story - name="VariantGhost" - args={{ - variant: FormVariant.ghost, - children: ( - <> - <Option value="1">Ghost</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSoft" - args={{ - variant: FormVariant.soft, - children: ( - <> - <Option value="1">Soft</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSolid" - args={{ - variant: FormVariant.solid, - children: ( - <> - <Option value="1">Solid</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantTransparent" - args={{ - variant: FormVariant.transparent, - children: ( - <> - <Option value="1">Transparent</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> -</Canvas> - -## Tones - -The `Tone` defines the background and the border. - -<Canvas> - <Story - name="ToneNeutral" - args={{ - tone: FormTone.neutral, - children: ( - <> - <Option value="1">Neutral</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> - <Story - name="ToneCritical" - args={{ - tone: FormTone.critical, - children: ( - <> - <Option value="1">Critical</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> -</Canvas> - -## Initial placeholder - -To initially show a placeholder before the user selects an option, add a `hidden` option with an empty value. - -<Canvas> - <Story - name="Initial placeholder" - args={{ - children: ( - <> - <Option value="" hidden> - Please select an option - </Option> - <Option value="1">Option 1</Option> - <Option value="2">Option 2</Option> - <Option value="3">Option 3</Option> - </> - ), - }} - > - {Template.bind({})} - </Story> -</Canvas> diff --git a/src/components/form/primitive/Select.stories.tsx b/src/components/form/primitive/Select.stories.tsx new file mode 100644 index 00000000..8ccc8697 --- /dev/null +++ b/src/components/form/primitive/Select.stories.tsx @@ -0,0 +1,86 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components' +import { FormTone, FormVariant } from '../types' +import { Select } from './Select' +import { Option } from './Option' + +const meta = { + component: Select, + args: { + children: ( + <> + <Option value="1">Option 1</Option> + <Option value="2">Option 2</Option> + <Option value="3">Option 3</Option> + </> + ), + }, + argTypes: { + disabled: { type: 'boolean' }, + }, + + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['select']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof Select> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const Variants: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <Select {...args} variant={FormVariant.Ghost}></Select> + <Select {...args} variant={FormVariant.Soft}></Select> + <Select {...args} variant={FormVariant.Transparent}></Select> + <Select {...args} variant={FormVariant.Solid}></Select> + </div> + ), +} + +export const Tone: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <Select {...args} tone={FormTone.Neutral}></Select> + <Select {...args} tone={FormTone.Critical}></Select> + </div> + ), +} + +export const initialPlaceholder: Story = { + args: { + children: ( + <> + <Option value="" hidden> + Please select an option + </Option> + <Option value="1">Option 1</Option> + <Option value="2">Option 2</Option> + <Option value="3">Option 3</Option> + </> + ), + }, +} diff --git a/src/components/form/primitive/TextArea.stories.mdx b/src/components/form/primitive/TextArea.stories.mdx deleted file mode 100644 index ead7f428..00000000 --- a/src/components/form/primitive/TextArea.stories.mdx +++ /dev/null @@ -1,98 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { FormVariant, FormTone } from '../types' -import { TextArea } from './TextArea' - -<Meta title="Components/Form/primitive/TextArea" component={TextArea} /> - -# TextArea - -A themed `textarea` element. - -It inherits styles from the primitive [Input](../?path=/docs/components-form-primitive-input--docs). - -export const Template = ({ ...args }) => <TextArea {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - placeholder: 'Placeholder', - disabled: false, - rows: 4, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - -## Variants - -The `Variant` defines the background and the border. - -<Canvas> - <Story - name="VariantGhost" - args={{ - placeholder: 'Ghost', - variant: FormVariant.ghost, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSoft" - args={{ - placeholder: 'Soft', - variant: FormVariant.soft, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantSolid" - args={{ - placeholder: 'Solid', - variant: FormVariant.solid, - }} - > - {Template.bind({})} - </Story> - <Story - name="VariantTransparent" - args={{ - placeholder: 'Transparent', - variant: FormVariant.transparent, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -## Tones - -The `Tone` defines the background and the border. - -<Canvas> - <Story - name="ToneNeutral" - args={{ - placeholder: 'Neutral', - tone: FormTone.neutral, - }} - > - {Template.bind({})} - </Story> - <Story - name="ToneCritical" - args={{ - placeholder: 'Critical', - tone: FormTone.critical, - }} - > - {Template.bind({})} - </Story> -</Canvas> diff --git a/src/components/form/primitive/TextArea.stories.tsx b/src/components/form/primitive/TextArea.stories.tsx new file mode 100644 index 00000000..66c69f0e --- /dev/null +++ b/src/components/form/primitive/TextArea.stories.tsx @@ -0,0 +1,68 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { FormTone, FormVariant } from '../types' +import { TextArea } from './TextArea' + +const meta = { + component: TextArea, + args: { + placeholder: 'Placeholder', + disabled: false, + rows: 4, + }, + argTypes: { + disabled: { type: 'boolean' }, + }, + + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof TextArea> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const Variants: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <TextArea {...args} variant={FormVariant.Ghost} placeholder="Ghost" /> + <TextArea {...args} variant={FormVariant.Soft} placeholder="Soft" /> + <TextArea + {...args} + variant={FormVariant.Transparent} + placeholder="Transparent" + /> + <TextArea {...args} variant={FormVariant.Solid} placeholder="Solid" /> + </div> + ), +} + +export const Tones: Story = { + render: (args) => ( + <div className="flex flex-row space-x-4"> + <TextArea {...args} tone={FormTone.Neutral} placeholder="Neutral" /> + <TextArea {...args} tone={FormTone.Critical} placeholder="Critical" /> + </div> + ), +} diff --git a/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.mdx b/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.mdx deleted file mode 100644 index 5be81331..00000000 --- a/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../../.storybook/components' -import { ToggleSwitch } from './ToggleSwitch' - -<Meta title="Components/Form/primitive/ToggleSwitch" component={ToggleSwitch} /> - -# ToggleSwitch - -A toggle switch input that can be used in controlled or uncontrolled mode. - -export const Template = ({ ...args }) => <ToggleSwitch {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - name: 'name', - label: 'Airplane mode', - }} - argTypes={{ - disabled: { type: 'boolean' }, - required: { type: 'boolean' }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -<Theme component="form" items={['toggleSwitch']} /> - -### With long text - -export const TemplateWithLongText = () => ( - <ToggleSwitch - name="toggleswitch-w-long-text" - label="This toggle switch has a very long text to show the behavior of a line break within the toggle switch component. Adjust the width of the window to see the positioning of the elements within the component." - /> -) - -<Canvas> - <Story name="With long text">{TemplateWithLongText.bind({})}</Story> -</Canvas> diff --git a/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.tsx b/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.tsx new file mode 100644 index 00000000..0bd9a45a --- /dev/null +++ b/src/components/form/primitive/ToggleSwitch/ToggleSwitch.stories.tsx @@ -0,0 +1,52 @@ +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../../.storybook/components' +import { ToggleSwitch } from './ToggleSwitch' + +const meta = { + component: ToggleSwitch, + args: { + name: 'name', + label: 'Airplane mode', + }, + argTypes: { + disabled: { type: 'boolean' }, + required: { type: 'boolean' }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="form" items={['toggleSwitch']} /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof ToggleSwitch> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const WithLongText: Story = { + args: { + name: 'toggle-switch-w-long-text', + label: + 'This toggle switch has a very long text to show the behavior of a line break within the toggle switch component. Adjust the width of the window to see the positioning of the elements within the component.', + }, +}