docs: VRT 用の Story を追加

kufu · Oct 8, 2024 · bda7e40 · bda7e40
1 parent fb4ab05
commit bda7e40
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 10 deletions.
diff --git a/packages/smarthr-ui/src/components/Button/stories/VRTAnchorButton.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/VRTAnchorButton.stories.tsx
@@ -0,0 +1,95 @@
+import React, { ComponentProps } from 'react'
+
+import { BaseColumn } from '../../Base'
+import { FaCaretDownIcon, FaCirclePlusIcon } from '../../Icon'
+import { Cluster, Stack } from '../../Layout'
+import { AnchorButton } from '../AnchorButton'
+import { Button } from '../Button'
+
+import type { StoryFn, StoryObj } from '@storybook/react'
+
+type Variant = ComponentProps<typeof Button>['variant']
+
+/**
+ * $ pict anchor-button.pixt.txt
+ * size    disabled prefix suffix square  wide
+ * s       true     なし    なし    false   false
+ * default false    あり    なし    false   true
+ * default true     なし    あり    false   true
+ * s       false    なし    なし    true    false
+ * default true     なし    なし    true    false
+ * s       false    なし    あり    false   false
+ * s       true     あり    なし    false   true
+ * s       true     あり    なし    false   false
+ */
+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>
+    ))}
+  </Stack>
+)
+
+export default {
+  title: 'Buttons（ボタン）/Button/AnchorButton/VRT',
+  render: Template,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs'],
+}
+
+export const VRT = {}
+
+export const VRTHover = {
+  render: () => (
+    <>
+      <Template id="hover" />
+      <Template id="focus" />
+      <Template id="focus-visible" />
+      <Template id="active" />
+    </>
+  ),
+  parameters: {
+    pseudo: {
+      hover: ['#hover .smarthr-ui-AnchorButton'],
+      focus: ['#focus .smarthr-ui-AnchorButton'],
+      focusVisible: ['#focus-visible .smarthr-ui-AnchorButton'],
+      active: ['#active .smarthr-ui-AnchorButton'],
+    },
+  },
+}
+
+export const VRTForcedColors: StoryObj = {
+  ...VRT,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
diff --git a/packages/smarthr-ui/src/components/Button/stories/VRTButton.stories.tsx b/packages/smarthr-ui/src/components/Button/stories/VRTButton.stories.tsx
@@ -0,0 +1,118 @@
+import React, { ComponentProps } from 'react'
+
+import { BaseColumn } from '../../Base'
+import { FaCaretDownIcon, FaCirclePlusIcon } from '../../Icon'
+import { Cluster, Stack } from '../../Layout'
+import { Button } from '../Button'
+
+import type { StoryFn, StoryObj } from '@storybook/react'
+
+type Variant = ComponentProps<typeof Button>['variant']
+
+/**
+ * $ pict button.pixt.txt /e:button-seeds.pict.txt
+ * size    disabled disabledDetail  loading prefix suffix square  wide
+ * default false    なし             false   あり    なし    false   false
+ * default false    なし             false   なし    なし    true    false
+ * s       false    なし             false   なし    あり    false   true
+ * s       true     なし             false   あり    なし    false   true
+ * default false    なし             true    なし    あり    false   true
+ * default true     あり             false   なし    なし    true    false
+ * s       false    なし             true    なし    なし    true    false
+ * s       false    なし             true    あり    なし    false   false
+ * s       true     あり             false   なし    あり    false   false
+ * default true     あり             false   あり    なし    false   false
+ */
+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>
+    ))}
+  </Stack>
+)
+
+export default {
+  title: 'Buttons（ボタン）/Button/VRT',
+  render: Template,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs'],
+}
+
+export const VRT = {}
+
+export const VRTHover = {
+  render: () => (
+    <>
+      <Template id="hover" />
+      <Template id="focus" />
+      <Template id="focus-visible" />
+      <Template id="active" />
+    </>
+  ),
+  parameters: {
+    pseudo: {
+      hover: ['#hover .smarthr-ui-Button'],
+      focus: ['#focus .smarthr-ui-Button'],
+      focusVisible: ['#focus-visible .smarthr-ui-Button'],
+      active: ['#active .smarthr-ui-Button'],
+    },
+  },
+}
+
+export const VRTForcedColors: StoryObj = {
+  ...VRT,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
diff --git a/packages/smarthr-ui/src/components/Button/stories/anchor-button.txt b/packages/smarthr-ui/src/components/Button/stories/anchor-button.txt
@@ -0,0 +1,12 @@
+size: default, s
+disabled: true, false
+prefix: あり, なし
+suffix: あり, なし
+square: true, false
+wide: true, false (10)
+
+# prefix と suffix は共存しない
+IF [prefix] = "あり" THEN [suffix] = "なし";
+
+# square のとき prefix や suffix、wide は共存しない
+IF [square] = "true" THEN [prefix] = "なし" AND [suffix] = "なし" AND [wide] = "false";
diff --git a/packages/smarthr-ui/src/components/Button/stories/button-seeds.pict.txt b/packages/smarthr-ui/src/components/Button/stories/button-seeds.pict.txt
@@ -0,0 +1,4 @@
+size	disabled	disabledDetail	loading	prefix	suffix	square	wide
+default	false	なし	false	あり	なし	false	false
+default	false	なし	false	なし	なし	true	false
+s	false	なし	false	なし	あり	false	true
diff --git a/packages/smarthr-ui/src/components/Button/stories/button.pict.txt b/packages/smarthr-ui/src/components/Button/stories/button.pict.txt
@@ -0,0 +1,23 @@
+size: default, s
+disabled: true, false (10)
+disabledDetail: あり, なし
+loading: true, false
+prefix: あり, なし
+suffix: あり, なし
+square: true, false
+wide: true, false (10)
+
+# prefix と suffix は共存しない
+IF [prefix] = "あり" THEN [suffix] = "なし";
+
+# square のとき prefix や suffix、wide は共存しない
+IF [square] = "true" THEN [prefix] = "なし" AND [suffix] = "なし" AND [wide] = "false";
+
+# disabled のとき loading ではない
+IF [disabled] = "true" THEN [loading] = "false";
+
+# disabled ではないとき、disabledDetail ではない
+IF [disabled] = "false" THEN [disabledDetail] = "なし";
+
+# wide のとき disabledDetail ではない
+IF [wide] = "true" THEN [disabledDetail] = "なし";
diff --git a/packages/smarthr-ui/src/components/Button/types.ts b/packages/smarthr-ui/src/components/Button/types.ts
@@ -1,16 +1,10 @@
-export type BaseProps = {
+import { PropsWithChildren } from 'react'
+
+export type BaseProps = PropsWithChildren<{
   /**
    * ボタンの大きさ
    */
   size?: 'default' | 's'
-  /**
-   * ボタン内に表示する内容
-   */
-  children?: React.ReactNode
-  /**
-   * コンポーネントに適用するクラス名
-   */
-  className?: string
   /**
    * 無効な理由
    */
@@ -44,6 +38,6 @@ export type BaseProps = {
    * 処理が走ってるかどうか
    */
   loading?: boolean
-}
+}>
 
 export type Variant = 'primary' | 'secondary' | 'danger' | 'skeleton' | 'text'