From b5b418dc9118ab120d27494c98c984388d97400a Mon Sep 17 00:00:00 2001 From: AndreaBusse29 Date: Wed, 30 Aug 2023 17:41:10 +0200 Subject: [PATCH] chore: migrate radio button story to tsx --- .../css/stories/default.stories.mdx | 26 -- .../css/stories/readme.stories.mdx | 8 - .../css/stories/states.stories.mdx | 326 ------------------ .../css/stories/tokens.stories.mdx | 16 - .../components/RadioButton.stories.tsx | 310 +++++++++++++++++ 5 files changed, 310 insertions(+), 376 deletions(-) delete mode 100644 components/radio-button/css/stories/default.stories.mdx delete mode 100644 components/radio-button/css/stories/readme.stories.mdx delete mode 100644 components/radio-button/css/stories/states.stories.mdx delete mode 100644 components/radio-button/css/stories/tokens.stories.mdx create mode 100644 packages/storybook/stories/components/RadioButton.stories.tsx diff --git a/components/radio-button/css/stories/default.stories.mdx b/components/radio-button/css/stories/default.stories.mdx deleted file mode 100644 index ccea328a8c9..00000000000 --- a/components/radio-button/css/stories/default.stories.mdx +++ /dev/null @@ -1,26 +0,0 @@ -{/* @license CC0-1.0 */} - -import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks"; -import { argTypes, defaultArgs, RadioButton } from "../story-template"; -import "../index.scss"; - - - -# Radio Button Component - - - {RadioButton.bind({})} - - - diff --git a/components/radio-button/css/stories/readme.stories.mdx b/components/radio-button/css/stories/readme.stories.mdx deleted file mode 100644 index 203787a351a..00000000000 --- a/components/radio-button/css/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/radio-button/css/stories/states.stories.mdx b/components/radio-button/css/stories/states.stories.mdx deleted file mode 100644 index 706d27d33b7..00000000000 --- a/components/radio-button/css/stories/states.stories.mdx +++ /dev/null @@ -1,326 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Canvas, Meta, Story } from "@storybook/blocks"; -import { RadioButton } from "../story-template"; -import "../index.scss"; - - - -# radio button component states - -## Hover - - - - {RadioButton.bind({})} - - - -## Focus - - - - {RadioButton.bind({})} - - - -## Focus-visible - - - - {RadioButton.bind({})} - - - -## Active - -When the component is `active`, it always has `focus` too. Test these states together for accurate results. - - - - {RadioButton.bind({})} - - - -## Disabled - - - - {RadioButton.bind({})} - - - -## Disabled + focus - - - - {RadioButton.bind({})} - - - -## Disabled + focus-visible - - - - {RadioButton.bind({})} - - - -## Disabled + hover - - - - {RadioButton.bind({})} - - - -## Disabled + active - - - - {RadioButton.bind({})} - - - -## Checked - - - - {RadioButton.bind({})} - - - -## Checked + focus - - - - {RadioButton.bind({})} - - - -## Checked + focus-visible - - - - {RadioButton.bind({})} - - - -## Checked + hover - - - - {RadioButton.bind({})} - - - -## Checked + active - - - - {RadioButton.bind({})} - - - -## Checked + disabled - - - - {RadioButton.bind({})} - - - -## Checked + disabled + hover - -Should be identical to "Checked + disabled" - - - - {RadioButton.bind({})} - - - -## Checked + disabled + focus - -Should be identical to "Checked + disabled". - - - - {RadioButton.bind({})} - - - -## Checked + disabled + focus-visible - -Must have a focus ring. - - - - {RadioButton.bind({})} - - - -## Checked + disabled + active - -Should be identical to "Checked + disabled". - - - - {RadioButton.bind({})} - - - -## Invalid - - - - {RadioButton.bind({})} - - - -## Checked + Invalid - - - - {RadioButton.bind({})} - - diff --git a/components/radio-button/css/stories/tokens.stories.mdx b/components/radio-button/css/stories/tokens.stories.mdx deleted file mode 100644 index 47aba1ac907..00000000000 --- a/components/radio-button/css/stories/tokens.stories.mdx +++ /dev/null @@ -1,16 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; -import tokensDefinition from "../../tokens.json"; - - - -# RadioButton Design Tokens - - diff --git a/packages/storybook/stories/components/RadioButton.stories.tsx b/packages/storybook/stories/components/RadioButton.stories.tsx new file mode 100644 index 00000000000..164fc96f4ee --- /dev/null +++ b/packages/storybook/stories/components/RadioButton.stories.tsx @@ -0,0 +1,310 @@ +/* @license CC0-1.0 */ + +import { Meta, StoryObj } from '@storybook/react'; +import { RadioButton } from '@utrecht/component-library-react/dist/css-module'; +import { RadioButtonProps } from '@utrecht/component-library-react/dist/css-module/RadioButton'; +import readme from '@utrecht/components/radio-button/README.md?raw'; +import tokensDefinition from '@utrecht/components/radio-button/tokens.json'; +import tokens from '@utrecht/design-tokens/dist/index.json'; +import clsx from 'clsx'; +import React from 'react'; +import { designTokenStory } from './util'; + +interface RadioButtonStoryProps extends RadioButtonProps { + focus?: boolean; + focusVisible?: boolean; + hover?: boolean; + 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 ; +}; + +const meta = { + title: 'CSS Component/Radio Button', + id: 'css-radio-button', + component: RadioButtonStory, + args: { + checked: false, + disabled: false, + active: false, + hover: false, + focus: false, + focusVisible: false, + invalid: false, + name: '', + id: '', + }, + argTypes: { + checked: { + description: 'Checked', + control: 'boolean', + }, + disabled: { + description: 'Disabled', + control: 'boolean', + }, + active: { + description: 'Active', + control: 'boolean', + }, + hover: { + description: 'Hover', + control: 'boolean', + }, + focus: { + description: 'Focus', + control: 'boolean', + }, + focusVisible: { + description: 'Focus-visible', + control: 'boolean', + }, + invalid: { + description: 'Invalid', + control: 'boolean', + }, + }, + parameters: { + tokensPrefix: 'utrecht-radio-button', + status: { + type: 'WORK IN PROGRESS', + }, + tokens, + tokensDefinition, + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Hover: Story = { + name: 'Hover State', + args: { + ...Default.args, + hover: true, + }, +}; + +export const Focus: Story = { + name: 'Focus State', + args: { + ...Default.args, + focus: true, + }, +}; + +export const FocusVisible: Story = { + name: 'Focus Visible State', + args: { + ...Default.args, + focus: true, + focusVisible: true, + }, +}; + +export const Active: Story = { + name: 'Active State', + 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.`, + }, + }, + }, +}; + +export const Disabled: Story = { + name: 'Disabled State', + args: { + ...Default.args, + disabled: true, + }, +}; + +export const DisabledAndFocussed: Story = { + name: 'Disabled and Focus State', + args: { + ...Default.args, + disabled: true, + focus: true, + }, +}; + +export const DisabledAndFocusVisible: Story = { + name: 'Disabled and Focus-Visible State', + args: { + ...Default.args, + disabled: true, + focus: true, + focusVisible: true, + }, +}; + +export const DisabledAndHover: Story = { + name: 'Disabled and Hover State', + args: { + ...Default.args, + disabled: true, + hover: true, + }, +}; + +export const DisabledAndActive: Story = { + name: 'Disabled and Active State', + args: { + ...Default.args, + disabled: true, + active: true, + }, +}; + +export const Checked: Story = { + name: 'Checked State', + args: { + ...Default.args, + checked: true, + }, +}; + +export const CheckedAndFocus: Story = { + name: 'Checked and Focus State', + args: { + ...Default.args, + checked: true, + focus: true, + }, +}; + +export const CheckedAndFocusVisible: Story = { + name: 'Checked and Focus-Visible State', + args: { + ...Default.args, + checked: true, + focus: true, + focusVisible: true, + }, +}; + +export const CheckedAndHover: Story = { + name: 'Checked and Hover State', + args: { + ...Default.args, + checked: true, + hover: true, + }, +}; + +export const CheckedAndActive: Story = { + name: 'Checked and Active State', + args: { + ...Default.args, + checked: true, + active: true, + }, +}; + +export const CheckedAndDisabled: Story = { + name: 'Checked and Disabled State', + args: { + ...Default.args, + checked: true, + disabled: true, + }, +}; + +export const CheckedDisabledAndHover: Story = { + name: 'Checked, Disabled and Hover State', + args: { + ...Default.args, + checked: true, + disabled: true, + hover: true, + }, + parameters: { + ...Default.parameters, + docs: { + description: { + story: `Should be identical to "Checked + disabled"`, + }, + }, + }, +}; + +export const CheckedDisabledAndFocus: Story = { + name: 'Checked, Disabled and Focus State', + args: { + ...Default.args, + checked: true, + disabled: true, + focus: true, + }, + parameters: { + ...Default.parameters, + docs: { + description: { + story: `Should be identical to "Checked + disabled"`, + }, + }, + }, +}; + +export const CheckedDisabledAndActive: Story = { + name: 'Checked, Disabled and Active State', + args: { + ...Default.args, + checked: true, + disabled: true, + active: true, + focus: true, + }, + parameters: { + ...Default.parameters, + docs: { + description: { + story: `Should be identical to "Checked + disabled"`, + }, + }, + }, +}; + +export const Invalid: Story = { + name: 'Invalid State', + args: { + ...Default.args, + invalid: true, + }, +}; + +export const CheckedAndInvalid: Story = { + name: 'Checked and Invalid State', + args: { + ...Default.args, + checked: true, + invalid: true, + }, +}; + +export const DesignTokens = designTokenStory(meta);