docs(spindle-ui): add TextButton disabled style

openameba · Oct 6, 2023 · fb68e58 · fb68e58
1 parent dc6f5ac
commit fb68e58
Showing 1 changed file with 105 additions and 0 deletions.
diff --git 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`は様々な箇所での利用が想定されるため、以下のようにスタイルを上書きして利用できます。