From 2fc326307dfa26e6e9f8bac465bb24871c10d01c Mon Sep 17 00:00:00 2001
From: s-sasaki-0529 <shingo.sasaki.0529@gmail.com>
Date: Tue, 8 Oct 2024 19:25:27 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20Badge=20=E3=81=AE=20Story=20?=
 =?UTF-8?q?=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

---
 .../src/components/Badge/Badge.stories.tsx    | 93 -------------------
 .../src/components/Badge/VRTBadge.stories.tsx | 40 --------
 .../Badge/stories/Badge.stories.tsx           | 92 ++++++++++++++++++
 .../Badge/stories/VRTBadge.stories.tsx        | 44 +++++++++
 4 files changed, 136 insertions(+), 133 deletions(-)
 delete mode 100644 packages/smarthr-ui/src/components/Badge/Badge.stories.tsx
 delete mode 100644 packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx
 create mode 100644 packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx
 create mode 100644 packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx

diff --git a/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx b/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx
deleted file mode 100644
index b365e79ff0..0000000000
--- a/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import React from 'react'
-import styled from 'styled-components'
-
-import { FaBellIcon } from '../Icon'
-import { Cluster, Stack } from '../Layout'
-import { Text } from '../Text'
-import { VisuallyHiddenText } from '../VisuallyHiddenText'
-
-import { Badge } from './Badge'
-
-export default {
-  title: 'States（状態）/Badge',
-  component: Badge,
-}
-
-export const All: StoryFn = () => (
-  <Stack as="dl" gap={3}>
-    <Stack>
-      <DtText>種類</DtText>
-      <dd>
-        <Stack align="flex-start">
-          <Cluster gap={0.75} align="center">
-            <Badge count={9} />
-            <Badge count={100} />
-          </Cluster>
-          <p>
-            <code>dot</code> を与えるとドットのみの表示になります。
-            <code>count</code> を与えても無視します。
-            <br />
-            視覚情報しか持たないため、別途アクセシブルネームを与える必要があります。
-          </p>
-          <Cluster gap={0.75} align="center">
-            <Badge dot />
-            <VisuallyHiddenText>通知があります</VisuallyHiddenText>
-            <Badge dot count={9} />
-            <VisuallyHiddenText>通知があります</VisuallyHiddenText>
-          </Cluster>
-          <p>
-            最大値の標準は99です。必要に応じて <code>overflowCount</code> で変えられます。
-          </p>
-          <Cluster gap={0.75}>
-            <Badge count={1000} />
-            <Badge count={1000} overflowCount={10} />
-            <Badge count={1000} overflowCount={999} />
-          </Cluster>
-          <p>
-            <code>children</code> を与えると、その右肩に表示します。
-          </p>
-          <Cluster gap={1.5}>
-            <Badge count={9}>
-              <FaBellIcon />
-            </Badge>
-            <Badge dot>
-              <FaBellIcon />
-            </Badge>
-          </Cluster>
-          <p>
-            標準では<code>count=0</code>の場合は Badge を表示しません。<code>showZero</code>{' '}
-            を与えると表示します。
-          </p>
-          <Cluster gap={0.75} align="center">
-            <Badge count={0} />
-            <Badge count={0} showZero />
-            <Badge count={0}>
-              <FaBellIcon />
-            </Badge>
-            <Badge count={0} showZero>
-              <FaBellIcon />
-            </Badge>
-          </Cluster>
-        </Stack>
-      </dd>
-    </Stack>
-    <Stack>
-      <DtText>色</DtText>
-      <dd>
-        <Cluster gap={1.5}>
-          <Badge count={9} />
-          <Badge count={9} type="grey" />
-          <Badge count={9} type="yellow" />
-          <Badge count={9} type="red" />
-          <Badge dot />
-          <Badge dot type="grey" />
-          <Badge dot type="yellow" />
-          <Badge dot type="red" />
-        </Cluster>
-      </dd>
-    </Stack>
-  </Stack>
-)
-
-const DtText = styled(Text).attrs({ forwardedAs: 'dt', weight: 'bold', color: 'TEXT_GREY' })``
diff --git a/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx b/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx
deleted file mode 100644
index 4661e52e25..0000000000
--- a/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import React from 'react'
-import styled from 'styled-components'
-
-import { InformationPanel } from '../InformationPanel'
-
-import { Badge } from './Badge'
-import { All } from './Badge.stories'
-
-export default {
-  title: 'States（状態）/Badge',
-  component: Badge,
-  parameters: {
-    withTheming: true,
-  },
-}
-
-export const VRTBadgeForcedColors: StoryFn = () => (
-  <Wrapper>
-    <VRTInformationPanel title="VRT 用の Story です">
-      Chromatic 上では強制カラーモードで表示されます
-    </VRTInformationPanel>
-    <All />
-  </Wrapper>
-)
-
-VRTBadgeForcedColors.parameters = {
-  chromatic: { forcedColors: 'active' },
-}
-
-const Wrapper = styled.div`
-  height: 100vh;
-  box-sizing: border-box;
-  padding: 24px;
-  color: ${({ theme }) => theme.color.TEXT_BLACK};
-`
-
-const VRTInformationPanel = styled(InformationPanel)`
-  margin-bottom: 24px;
-`
diff --git a/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx b/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx
new file mode 100644
index 0000000000..bc793bad03
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx
@@ -0,0 +1,92 @@
+import React from 'react'
+
+import { Cluster, Stack } from '../../Layout'
+import { Text } from '../../Text'
+import { Badge } from '../Badge'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+export default {
+  title: 'States（状態）/Badge',
+  component: Badge,
+  render: (args) => <Badge {...args} />,
+  args: {
+    count: 0,
+    overflowCount: 99,
+    showZero: true,
+    type: 'blue',
+    dot: false,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} as Meta<typeof Badge>
+
+export const BadgeControl: StoryObj<typeof Badge> = {
+  name: 'Playground',
+  args: {},
+}
+
+export const Count: StoryObj<typeof Badge> = {
+  name: 'count',
+  render: (args) => (
+    <Cluster>
+      {new Array(10).fill(0).map((_, i) => (
+        <Badge {...args} count={i + 1} key={i} />
+      ))}
+    </Cluster>
+  ),
+  args: {},
+}
+
+export const OverflowCount: StoryObj<typeof Badge> = {
+  name: 'overflowCount',
+  render: (args) => (
+    <Cluster>
+      <Badge {...args} count={98} />
+      <Badge {...args} count={99} />
+      <Badge {...args} count={100} />
+    </Cluster>
+  ),
+  args: {
+    overflowCount: 99,
+  },
+}
+
+export const ShowZero: StoryObj<typeof Badge> = {
+  name: 'showZero',
+  render: (args) => (
+    <Stack>
+      <Cluster>
+        <Text>true</Text>
+        <Badge {...args} showZero={true} count={0} />
+      </Cluster>
+      <Cluster>
+        <Text>false</Text>
+        <Badge {...args} showZero={false} count={0} />
+      </Cluster>
+    </Stack>
+  ),
+  args: {
+    showZero: true,
+  },
+}
+
+export const Type: StoryObj<typeof Badge> = {
+  name: 'type',
+  render: (args) => (
+    <Cluster>
+      <Badge {...args} type="blue" />
+      <Badge {...args} type="yellow" />
+      <Badge {...args} type="red" />
+      <Badge {...args} type="grey" />
+    </Cluster>
+  ),
+  args: {},
+}
+
+export const Dot: StoryObj<typeof Badge> = {
+  name: 'dot',
+  render: (args) => <Badge {...args} dot={true} />,
+  args: {},
+}
diff --git a/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx
new file mode 100644
index 0000000000..44e0525d73
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx
@@ -0,0 +1,44 @@
+import { fireEvent, within } from '@storybook/test'
+import React from 'react'
+
+import { Cluster, Stack } from '../../Layout'
+import { Badge } from '../Badge'
+
+import type { StoryObj } from '@storybook/react'
+
+export default {
+  title: 'States（状態）/Badge/VRT',
+  /* ペアワイズ法は使わずにすべての組み合わせを網羅する */
+  render: (args: any) => {
+    const types = ['grey', 'blue', 'red', 'yellow'] as const
+    return (
+      <Stack {...args}>
+        {types.map((type, i) => (
+          <Cluster key={i}>
+            <>
+              <Badge type={type} count={0} showZero={false} />
+              <Badge type={type} count={0} showZero={true} />
+              <Badge type={type} count={1} />
+              <Badge type={type} count={10} overflowCount={10} />
+              <Badge type={type} count={10} overflowCount={9} />
+              <Badge type={type} dot={true} />
+            </>
+          </Cluster>
+        ))}
+      </Stack>
+    )
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs'],
+}
+
+export const VRT = {}
+
+export const VRTForcedColors: StoryObj = {
+  ...VRT,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}

From 4a82ba1218b782efac835ec4b0416bbc6ec63228 Mon Sep 17 00:00:00 2001
From: s-sasaki-0529 <shingo.sasaki.0529@gmail.com>
Date: Tue, 8 Oct 2024 19:34:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20VRT=E3=81=A7=E6=9C=AB=E5=B0=BE?=
 =?UTF-8?q?=E3=81=8C=E5=88=88=E3=82=8A=E5=8F=96=E3=82=89=E3=82=8C=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Badge/stories/VRTBadge.stories.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx
index 44e0525d73..7903f1b4ed 100644
--- a/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx
+++ b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx
@@ -12,7 +12,7 @@ export default {
   render: (args: any) => {
     const types = ['grey', 'blue', 'red', 'yellow'] as const
     return (
-      <Stack {...args}>
+      <Stack {...args} style={{ padding: '1rem' }}>
         {types.map((type, i) => (
           <Cluster key={i}>
             <>