From fb68e586dd92aa413aa19951dc3b93dbfe8f0c93 Mon Sep 17 00:00:00 2001
From: hara-kazunari <kz.route21@gmail.com>
Date: Fri, 6 Oct 2023 16:32:37 +0900
Subject: [PATCH] docs(spindle-ui): add TextButton disabled style

---
 .../src/TextButton/TextButton.stories.mdx     | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/packages/spindle-ui/src/TextButton/TextButton.stories.mdx b/packages/spindle-ui/src/TextButton/TextButton.stories.mdx
index c1d9618ac..82b76947f 100644
--- a/packages/spindle-ui/src/TextButton/TextButton.stories.mdx
+++ b/packages/spindle-ui/src/TextButton/TextButton.stories.mdx
@@ -43,6 +43,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Normal Disabled
+
+<Preview withSource="open">
+  <Story name="NormalDisabled">
+    <TextButton {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton">もっと見る</button>
+  `}
+/>
+
 ## Normal With Icon
 
 <Preview withSource="open">
@@ -64,6 +85,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Normal With Icon Disabled
+
+<Preview withSource="open">
+  <Story name="NormalWithIconDisabled">
+    <TextButton icon={<PencilAdd aria-hidden="true" />} iconPosition="start" {...actions('onClick', 'onMouseOver')} disabled>ブログを書く</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton icon={<PencilAdd aria-hidden="true" />} iconPosition="start" disabled>ブログを書く</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--hasIcon spui-TextButton--iconstart" disabled><span class="spui-TextButton-icon"><svg>...</svg></span>ブログを書く</button>
+  `}
+/>
+
 ## Subtle
 
 <Preview withSource="open">
@@ -85,6 +127,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Subtle Disabled
+
+<Preview withSource="open">
+  <Story name="SubtleDisabled">
+    <TextButton variant="subtle" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton variant="subtle" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--subtle" disabled>もっと見る</button>
+  `}
+/>
+
 ## Subtle With Icon
 
 <Preview withSource="open">
@@ -106,6 +169,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Subtle With Icon Disabled
+
+<Preview withSource="open">
+  <Story name="SubtleWithIconDisabled">
+    <TextButton variant="subtle" icon={<ChevronRightBold aria-hidden="true" />} iconPosition="end" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton variant="subtle" icon={<ChevronRightBold aria-hidden="true" />} iconPosition="end" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--subtle spui-TextButton--hasIcon spui-TextButton--iconend" disabled><span class="spui-TextButton-icon"><svg>...</svg></span>もっと見る</button>
+  `}
+/>
+
 ## Underline Patterns
 
 テキストのアンダーラインは以下のルールで表示されます。
@@ -135,6 +219,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Underline Hover Disabled
+
+<Preview withSource="open">
+  <Story name="UnderlineHoverDisabled">
+    <TextButton underline="hover" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton underline="hover" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--underlinehover" disabled>もっと見る</button>
+  `}
+/>
+
 ## スタイルの上書き
 `TextButton`を利用する際には、ますデフォルト定義されているスタイルで要件を満たせないか検討してください。ただし、`TextButton`は様々な箇所での利用が想定されるため、以下のようにスタイルを上書きして利用できます。