Skip to content

Commit

Permalink
docs: tweaks to the radio button story
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robbert
Robbert committed Sep 5, 2023
1 parent b5b418d commit 7553714
Showing 1 changed file with 54 additions and 56 deletions.
110 changes: 54 additions & 56 deletions packages/storybook/stories/components/RadioButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,18 @@ interface RadioButtonStoryProps extends RadioButtonProps {
active?: boolean;
}

const RadioButtonStory = ({ active, focus, focusVisible, hover, ...args }: RadioButtonStoryProps) => {
const classNames = {
'utrecht-radio-button--active': active,
'utrecht-radio-button--focus': focus,
'utrecht-radio-button--focus-visible': focusVisible,
'utrecht-radio-button--hover': hover,
};

return <RadioButton className={clsx(classNames)} {...args} />;
};
const RadioButtonStory = ({ active, focus, focusVisible, hover, name, ...args }: RadioButtonStoryProps) => (
<RadioButton
className={clsx({
'utrecht-radio-button--active': active,
'utrecht-radio-button--focus': focus,
'utrecht-radio-button--focus-visible': focusVisible,
'utrecht-radio-button--hover': hover,
})}
name={name || undefined}
{...args}
/>
);

const meta = {
title: 'CSS Component/Radio Button',
Expand All @@ -41,7 +43,6 @@ const meta = {
focusVisible: false,
invalid: false,
name: '',
id: '',
},
argTypes: {
checked: {
Expand Down Expand Up @@ -72,6 +73,10 @@ const meta = {
description: 'Invalid',
control: 'boolean',
},
name: {
description: 'Radio group name. Use the same name for each radio button in a group.',
control: 'string',
},
},
parameters: {
tokensPrefix: 'utrecht-radio-button',
Expand All @@ -86,7 +91,7 @@ const meta = {
},
},
},
} satisfies Meta<typeof RadioButton>;
} satisfies Meta<typeof RadioButtonStory>;

export default meta;

Expand All @@ -95,39 +100,34 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {};

export const Hover: Story = {
name: 'Hover State',
name: 'Hover',
args: {
...Default.args,
hover: true,
},
};

export const Focus: Story = {
name: 'Focus State',
name: 'Focus',
args: {
...Default.args,
focus: true,
},
};

export const FocusVisible: Story = {
name: 'Focus Visible State',
name: 'Focus Visible',
args: {
...Default.args,
focus: true,
focusVisible: true,
},
};

export const Active: Story = {
name: 'Active State',
name: 'Active',
args: {
...Default.args,
active: true,
focus: true,
},
parameters: {
...Default.parameters,
docs: {
description: {
story: `When the component is \`active\`, it always has \`focus\` too. Test these states together for accurate results.`,
Expand All @@ -137,114 +137,101 @@ export const Active: Story = {
};

export const Disabled: Story = {
name: 'Disabled State',
name: 'Disabled',
args: {
...Default.args,
disabled: true,
},
};

export const DisabledAndFocussed: Story = {
name: 'Disabled and Focus State',
name: 'Disabled and Focus',
args: {
...Default.args,
disabled: true,
focus: true,
},
};

export const DisabledAndFocusVisible: Story = {
name: 'Disabled and Focus-Visible State',
name: 'Disabled and Focus-Visible',
args: {
...Default.args,
disabled: true,
focus: true,
focusVisible: true,
},
};

export const DisabledAndHover: Story = {
name: 'Disabled and Hover State',
name: 'Disabled and Hover',
args: {
...Default.args,
disabled: true,
hover: true,
},
};

export const DisabledAndActive: Story = {
name: 'Disabled and Active State',
name: 'Disabled and Active',
args: {
...Default.args,
disabled: true,
active: true,
},
};

export const Checked: Story = {
name: 'Checked State',
name: 'Checked',
args: {
...Default.args,
checked: true,
},
};

export const CheckedAndFocus: Story = {
name: 'Checked and Focus State',
name: 'Checked and Focus',
args: {
...Default.args,
checked: true,
focus: true,
},
};

export const CheckedAndFocusVisible: Story = {
name: 'Checked and Focus-Visible State',
name: 'Checked and Focus-Visible',
args: {
...Default.args,
checked: true,
focus: true,
focusVisible: true,
},
};

export const CheckedAndHover: Story = {
name: 'Checked and Hover State',
name: 'Checked and Hover',
args: {
...Default.args,
checked: true,
hover: true,
},
};

export const CheckedAndActive: Story = {
name: 'Checked and Active State',
name: 'Checked and Active',
args: {
...Default.args,
checked: true,
active: true,
},
};

export const CheckedAndDisabled: Story = {
name: 'Checked and Disabled State',
name: 'Checked and Disabled',
args: {
...Default.args,
checked: true,
disabled: true,
},
};

export const CheckedDisabledAndHover: Story = {
name: 'Checked, Disabled and Hover State',
name: 'Checked, Disabled and Hover',
args: {
...Default.args,
checked: true,
disabled: true,
hover: true,
},
parameters: {
...Default.parameters,
docs: {
description: {
story: `Should be identical to "Checked + disabled"`,
Expand All @@ -254,15 +241,30 @@ export const CheckedDisabledAndHover: Story = {
};

export const CheckedDisabledAndFocus: Story = {
name: 'Checked, Disabled and Focus State',
name: 'Checked, Disabled and Focus',
args: {
checked: true,
disabled: true,
focus: true,
},
parameters: {
docs: {
description: {
story: `Should be identical to "Checked + disabled"`,
},
},
},
};

export const CheckedDisabledAndFocusVisible: Story = {
name: 'Checked, Disabled and Focus-visible',
args: {
...Default.args,
checked: true,
disabled: true,
focus: true,
focusVisible: true,
},
parameters: {
...Default.parameters,
docs: {
description: {
story: `Should be identical to "Checked + disabled"`,
Expand All @@ -272,16 +274,14 @@ export const CheckedDisabledAndFocus: Story = {
};

export const CheckedDisabledAndActive: Story = {
name: 'Checked, Disabled and Active State',
name: 'Checked, Disabled and Active',
args: {
...Default.args,
checked: true,
disabled: true,
active: true,
focus: true,
},
parameters: {
...Default.parameters,
docs: {
description: {
story: `Should be identical to "Checked + disabled"`,
Expand All @@ -291,17 +291,15 @@ export const CheckedDisabledAndActive: Story = {
};

export const Invalid: Story = {
name: 'Invalid State',
name: 'Invalid',
args: {
...Default.args,
invalid: true,
},
};

export const CheckedAndInvalid: Story = {
name: 'Checked and Invalid State',
name: 'Checked and Invalid',
args: {
...Default.args,
checked: true,
invalid: true,
},
Expand Down

0 comments on commit 7553714

Please sign in to comment.