From d8e757bc3b7938bd76e4d56146684a06a497b227 Mon Sep 17 00:00:00 2001
From: uknmr <y.kinmori@gmail.com>
Date: Wed, 16 Oct 2024 15:09:12 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20Button=20/=20AnchorButton=20=E3=81=AE?=
 =?UTF-8?q?=20Story=20=E3=82=92=E8=A6=8B=E7=9B=B4=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Button/stories/AnchorButton.stories.tsx   |   3 +
 .../Button/stories/Button.stories.tsx         |   3 +
 .../stories/VRTAnchorButton.stories.tsx       |  62 +++++-----
 .../Button/stories/VRTButton.stories.tsx      | 106 +++++++++---------
 4 files changed, 92 insertions(+), 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
index e59172c388..19176fae94 100644
--- 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
index 394f6358a6..e12f9e9b81 100644
--- 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
index 87afce5881..b5bb9d872f 100644
--- 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
index db45fa4f03..76e2bb673f 100644
--- 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>
 )