docs: Button / AnchorButton の Story を見直し

kufu · Oct 16, 2024 · d8e757b · d8e757b
1 parent 1ba7e12
commit d8e757b
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 82 deletions.
diff --git a/packages/smarthr-ui/src/components/Button/stories/AnchorButton.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/AnchorButton.stories.tsx
@@ -68,6 +68,9 @@ export const Variant: StoryObj<typeof AnchorButton> = {
  <AnchorButton {...args} variant="primary">
  ボタン
  </AnchorButton>
+ <AnchorButton {...args} variant="tertiary">
+ ボタン
+ </AnchorButton>
  <AnchorButton {...args} variant="danger">
  ボタン
  </AnchorButton>

diff --git a/packages/smarthr-ui/src/components/Button/stories/Button.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/Button.stories.tsx
@@ -71,6 +71,9 @@ export const Variant: StoryObj<typeof Button> = {
  <Button {...args} variant="primary">
  ボタン
  </Button>
+ <Button {...args} variant="tertiary">
+ ボタン
+ </Button>
  <Button {...args} variant="danger">
  ボタン
  </Button>

diff --git a/packages/smarthr-ui/src/components/Button/stories/VRTAnchorButton.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/VRTAnchorButton.stories.tsx
@@ -24,36 +24,38 @@ type Variant = ComponentProps<typeof Button>['variant']
  */
 const Template: StoryFn = (args) => (
  <Stack {...args}>
- {(['secondary', 'primary', 'danger', 'text', 'skeleton'] as Variant[]).map((variant) => (
- <BaseColumn bgColor={variant === 'skeleton' ? 'GREY_20' : 'WHITE'} key={variant}>
- <Cluster align="center">
- <AnchorButton variant={variant} size="s">
- ボタン
- </AnchorButton>
- <AnchorButton variant={variant} prefix={<FaCirclePlusIcon />} wide href="#">
- ボタン
- </AnchorButton>
- <AnchorButton variant={variant} suffix={<FaCaretDownIcon />} wide>
- ボタン
- </AnchorButton>
- <AnchorButton variant={variant} size="s" square href="#">
- <FaCirclePlusIcon alt="ボタン" />
- </AnchorButton>
- <AnchorButton variant={variant} square>
- <FaCirclePlusIcon alt="ボタン" />
- </AnchorButton>
- <AnchorButton variant={variant} size="s" suffix={<FaCaretDownIcon />} href="#">
- ボタン
- </AnchorButton>
- <AnchorButton variant={variant} size="s" prefix={<FaCirclePlusIcon />} wide>
- ボタン
- </AnchorButton>
- <AnchorButton variant={variant} size="s" prefix={<FaCirclePlusIcon />}>
- ボタン
- </AnchorButton>
- </Cluster>
- </BaseColumn>
- ))}
+ {(['secondary', 'primary', 'tertiary', 'danger', 'text', 'skeleton'] as Variant[]).map(
+ (variant) => (
+ <BaseColumn bgColor={variant === 'skeleton' ? 'GREY_20' : 'WHITE'} key={variant}>
+ <Cluster align="center">
+ <AnchorButton variant={variant} size="s">
+ ボタン
+ </AnchorButton>
+ <AnchorButton variant={variant} prefix={<FaCirclePlusIcon />} wide href="#">
+ ボタン
+ </AnchorButton>
+ <AnchorButton variant={variant} suffix={<FaCaretDownIcon />} wide>
+ ボタン
+ </AnchorButton>
+ <AnchorButton variant={variant} size="s" square href="#">
+ <FaCirclePlusIcon alt="ボタン" />
+ </AnchorButton>
+ <AnchorButton variant={variant} square>
+ <FaCirclePlusIcon alt="ボタン" />
+ </AnchorButton>
+ <AnchorButton variant={variant} size="s" suffix={<FaCaretDownIcon />} href="#">
+ ボタン
+ </AnchorButton>
+ <AnchorButton variant={variant} size="s" prefix={<FaCirclePlusIcon />} wide>
+ ボタン
+ </AnchorButton>
+ <AnchorButton variant={variant} size="s" prefix={<FaCirclePlusIcon />}>
+ ボタン
+ </AnchorButton>
+ </Cluster>
+ </BaseColumn>
+ ),
+ )}
  </Stack>
 )
 

diff --git a/packages/smarthr-ui/src/components/Button/stories/VRTButton.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/VRTButton.stories.tsx
@@ -25,58 +25,60 @@ type Variant = ComponentProps<typeof Button>['variant']
  */
 const Template: StoryFn = (args) => (
  <Stack {...args}>
- {(['secondary', 'primary', 'danger', 'text', 'skeleton'] as Variant[]).map((variant) => (
- <BaseColumn bgColor={variant === 'skeleton' ? 'GREY_20' : 'WHITE'} key={variant}>
- <Cluster align="center">
- <Button variant={variant} prefix={<FaCirclePlusIcon />}>
- ボタン
- </Button>
- <Button variant={variant} square>
- <FaCirclePlusIcon alt="ボタン" />
- </Button>
- <Button variant={variant} size="s" suffix={<FaCaretDownIcon />} wide>
- ボタン
- </Button>
- <Button variant={variant} size="s" disabled prefix={<FaCirclePlusIcon />} wide>
- ボタン
- </Button>
- <Button variant={variant} loading suffix={<FaCaretDownIcon />} wide>
- ボタン
- </Button>
- <Button
- variant={variant}
- disabled
- disabledDetail={{ message: 'ボタンが無効な理由' }}
- square
- >
- <FaCirclePlusIcon alt="ボタン" />
- </Button>
- <Button variant={variant} size="s" loading square>
- <FaCirclePlusIcon alt="ボタン" />
- </Button>
- <Button variant={variant} size="s" loading prefix={<FaCirclePlusIcon />}>
- ボタン
- </Button>
- <Button
- variant={variant}
- size="s"
- disabled
- disabledDetail={{ message: 'ボタンが無効な理由' }}
- suffix={<FaCaretDownIcon />}
- >
- ボタン
- </Button>
- <Button
- variant={variant}
- disabled
- disabledDetail={{ message: 'ボタンが無効な理由' }}
- prefix={<FaCirclePlusIcon />}
- >
- ボタン
- </Button>
- </Cluster>
- </BaseColumn>
- ))}
+ {(['secondary', 'primary', 'tertiary', 'danger', 'text', 'skeleton'] as Variant[]).map(
+ (variant) => (
+ <BaseColumn bgColor={variant === 'skeleton' ? 'GREY_20' : 'WHITE'} key={variant}>
+ <Cluster align="center">
+ <Button variant={variant} prefix={<FaCirclePlusIcon />}>
+ ボタン
+ </Button>
+ <Button variant={variant} square>
+ <FaCirclePlusIcon alt="ボタン" />
+ </Button>
+ <Button variant={variant} size="s" suffix={<FaCaretDownIcon />} wide>
+ ボタン
+ </Button>
+ <Button variant={variant} size="s" disabled prefix={<FaCirclePlusIcon />} wide>
+ ボタン
+ </Button>
+ <Button variant={variant} loading suffix={<FaCaretDownIcon />} wide>
+ ボタン
+ </Button>
+ <Button
+ variant={variant}
+ disabled
+ disabledDetail={{ message: 'ボタンが無効な理由' }}
+ square
+ >
+ <FaCirclePlusIcon alt="ボタン" />
+ </Button>
+ <Button variant={variant} size="s" loading square>
+ <FaCirclePlusIcon alt="ボタン" />
+ </Button>
+ <Button variant={variant} size="s" loading prefix={<FaCirclePlusIcon />}>
+ ボタン
+ </Button>
+ <Button
+ variant={variant}
+ size="s"
+ disabled
+ disabledDetail={{ message: 'ボタンが無効な理由' }}
+ suffix={<FaCaretDownIcon />}
+ >
+ ボタン
+ </Button>
+ <Button
+ variant={variant}
+ disabled
+ disabledDetail={{ message: 'ボタンが無効な理由' }}
+ prefix={<FaCirclePlusIcon />}
+ >
+ ボタン
+ </Button>
+ </Cluster>
+ </BaseColumn>
+ ),
+ )}
  </Stack>
 )