From 1b9ea6efaf64f5ed90ec226cc45aef63f6162834 Mon Sep 17 00:00:00 2001
From: uknmr <y.kinmori@gmail.com>
Date: Thu, 10 Oct 2024 05:38:59 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20Text=20=E3=81=AE=20Story=20=E3=82=92?=
 =?UTF-8?q?=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/Text/Text.stories.tsx      |  39 -----
 .../src/components/Text/VRTText.stories.tsx   |  29 ----
 .../components/Text/stories/Text.stories.tsx  | 138 ++++++++++++++++++
 .../Text/stories/VRTText.stories.tsx          | 104 +++++++++++++
 .../src/components/Text/stories/text.pict     |  10 ++
 5 files changed, 252 insertions(+), 68 deletions(-)
 delete mode 100644 packages/smarthr-ui/src/components/Text/Text.stories.tsx
 delete mode 100644 packages/smarthr-ui/src/components/Text/VRTText.stories.tsx
 create mode 100644 packages/smarthr-ui/src/components/Text/stories/Text.stories.tsx
 create mode 100644 packages/smarthr-ui/src/components/Text/stories/VRTText.stories.tsx
 create mode 100644 packages/smarthr-ui/src/components/Text/stories/text.pict

diff --git a/packages/smarthr-ui/src/components/Text/Text.stories.tsx b/packages/smarthr-ui/src/components/Text/Text.stories.tsx
deleted file mode 100644
index 65a768f674..0000000000
--- a/packages/smarthr-ui/src/components/Text/Text.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import React from 'react'
-
-import { Text } from './Text'
-
-export default {
-  title: 'Text（テキスト）/Text',
-  component: Text,
-}
-
-export const Default: StoryFn = () => (
-  <>
-    <Text as="h1" size="XXL" leading="TIGHT">
-      &lt;Text&gt;
-    </Text>
-    <Text as="p">
-      デフォルトの出力要素は <code>span</code> です。
-    </Text>
-    <Text as="p">
-      styled-components と同じく <code>as</code> で要素を差し替えられます。
-    </Text>
-    <Text as="p">
-      <Text color="TEXT_GREY">色</Text>や<Text weight="bold">ウェイト</Text>、
-      <Text whiteSpace="nowrap">ホワイトスペース</Text>を変えられます。
-    </Text>
-    <Text as="p">
-      <code>emphasis</code> を渡すとそのテキストは<Text emphasis>強調</Text>を示し、
-      <code>em</code>
-      要素の太字装飾で出力します。
-    </Text>
-    <Text as="p">
-      <Text emphasis>入れ子</Text>もできますが、
-      <Text color="TEXT_LINK" weight="bold">
-        Valid
-      </Text>
-      な HTML になるよう注意してください。
-    </Text>
-  </>
-)
diff --git a/packages/smarthr-ui/src/components/Text/VRTText.stories.tsx b/packages/smarthr-ui/src/components/Text/VRTText.stories.tsx
deleted file mode 100644
index 2451da8f52..0000000000
--- a/packages/smarthr-ui/src/components/Text/VRTText.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { StoryFn } from '@storybook/react'
-import * as React from 'react'
-import styled from 'styled-components'
-
-import { InformationPanel } from '../InformationPanel'
-
-import { Text } from './Text'
-import { Default } from './Text.stories'
-
-export default {
-  title: 'Text（テキスト）/Text',
-  component: Text,
-}
-
-export const VRTForcedColors: StoryFn = () => (
-  <>
-    <VRTInformationPanel title="VRT 用の Story です">
-      Chromatic 上では強制カラーモードで表示されます
-    </VRTInformationPanel>
-    <Default />
-  </>
-)
-VRTForcedColors.parameters = {
-  chromatic: { forcedColors: 'active' },
-}
-
-const VRTInformationPanel = styled(InformationPanel)`
-  margin-bottom: 24px;
-`
diff --git a/packages/smarthr-ui/src/components/Text/stories/Text.stories.tsx b/packages/smarthr-ui/src/components/Text/stories/Text.stories.tsx
new file mode 100644
index 0000000000..92ab5c4d08
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Text/stories/Text.stories.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+
+import { Stack } from '../../Layout'
+import { Text } from '../Text'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const asOptions = { なし: undefined, '<p>': 'p', '<h1>': 'h1' }
+
+export default {
+  title: 'Text（テキスト）/Text',
+  component: Text,
+  render: (args) => <Text {...args} />,
+  argTypes: {
+    as: {
+      control: 'radio',
+      options: Object.keys(asOptions),
+      mapping: asOptions,
+    },
+  },
+  args: {
+    children: 'well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。',
+    italic: false,
+    emphasis: false,
+    as: 'なし',
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} as Meta<typeof Text>
+
+export const TextControl: StoryObj<typeof Text> = {
+  name: 'Playground',
+}
+
+export const Size: StoryObj<typeof Text> = {
+  name: 'size',
+  render: (args) => (
+    <Stack>
+      <Text {...args} size="XXS" />
+      <Text {...args} size="XS" />
+      <Text {...args} size="S" />
+      <Text {...args} size="M" />
+      <Text {...args} size="L" />
+      <Text {...args} size="XL" />
+      <Text {...args} size="XXL" />
+    </Stack>
+  ),
+}
+
+export const Weight: StoryObj<typeof Text> = {
+  name: 'weight',
+  render: (args) => (
+    <Stack>
+      <Text {...args} weight="normal" />
+      <Text {...args} weight="bold" />
+    </Stack>
+  ),
+}
+
+export const Color: StoryObj<typeof Text> = {
+  name: 'color',
+  render: (args) => (
+    <Stack>
+      <Text {...args} color="TEXT_BLACK" />
+      <Text {...args} color="TEXT_WHITE" className="shr-bg-black" />
+      <Text {...args} color="TEXT_GREY" />
+      <Text {...args} color="TEXT_DISABLED" />
+      <Text {...args} color="TEXT_LINK" />
+      <Text {...args} color="inherit" />
+    </Stack>
+  ),
+}
+
+export const Italic: StoryObj<typeof Text> = {
+  name: 'italic',
+  args: {
+    italic: true,
+  },
+}
+
+export const Leading: StoryObj<typeof Text> = {
+  name: 'leading',
+  render: (args) => (
+    <Stack>
+      <Text {...args} leading="NONE" />
+      <Text {...args} leading="TIGHT" />
+      <Text {...args} leading="NORMAL" />
+      <Text {...args} leading="LOOSE" />
+    </Stack>
+  ),
+}
+
+export const WhiteSpace: StoryObj<typeof Text> = {
+  name: 'whiteSpace',
+  render: (args) => (
+    <Stack>
+      <Text {...args} whiteSpace="normal" />
+      <Text {...args} whiteSpace="nowrap" />
+      <Text {...args} whiteSpace="pre" />
+      <Text {...args} whiteSpace="pre-line" />
+      <Text {...args} whiteSpace="pre-wrap" />
+    </Stack>
+  ),
+}
+
+export const Emphasis: StoryObj<typeof Text> = {
+  name: 'emphasis',
+  args: {
+    emphasis: true,
+  },
+}
+
+export const StyleType: StoryObj<typeof Text> = {
+  name: 'styleType',
+  args: {
+    weight: undefined,
+  },
+  render: (args) => (
+    <Stack>
+      <Text {...args} styleType="screenTitle" />
+      <Text {...args} styleType="sectionTitle" />
+      <Text {...args} styleType="blockTitle" />
+      <Text {...args} styleType="subBlockTitle" />
+      <Text {...args} styleType="subSubBlockTitle" />
+    </Stack>
+  ),
+}
+
+export const As: StoryObj<typeof Text> = {
+  name: 'as',
+  render: (args) => (
+    <Stack>
+      <Text {...args} as="h1" />
+      <Text {...args} as="p" />
+    </Stack>
+  ),
+}
diff --git a/packages/smarthr-ui/src/components/Text/stories/VRTText.stories.tsx b/packages/smarthr-ui/src/components/Text/stories/VRTText.stories.tsx
new file mode 100644
index 0000000000..e408d4056c
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Text/stories/VRTText.stories.tsx
@@ -0,0 +1,104 @@
+import React from 'react'
+
+import { Stack } from '../../Layout'
+import { STYLE_TYPE_MAP, Text } from '../Text'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// $ pict text.pict
+const pict = [
+  { size: 'XS', weight: undefined, color: 'TEXT_LINK', leading: 'NORMAL', emphasis: false },
+  { size: 'XL', weight: 'bold', color: 'TEXT_WHITE', leading: 'LOOSE', emphasis: true },
+  { size: 'XL', weight: 'normal', color: 'TEXT_BLACK', leading: 'TIGHT', emphasis: false },
+  { size: 'XXS', weight: 'bold', color: 'TEXT_LINK', leading: undefined, emphasis: true },
+  { size: 'XXL', weight: 'bold', color: 'TEXT_GREY', leading: 'NONE', emphasis: false },
+  { size: 'XL', weight: 'bold', color: undefined, leading: 'NORMAL', emphasis: true },
+  { size: 'XXL', weight: 'bold', color: 'TEXT_BLACK', leading: undefined, emphasis: true },
+  { size: 'XXL', weight: 'bold', color: 'TEXT_LINK', leading: 'TIGHT', emphasis: true },
+  { size: 'L', weight: 'bold', color: 'TEXT_GREY', leading: 'LOOSE', emphasis: true },
+  { size: 'XXS', weight: 'normal', color: 'TEXT_GREY', leading: undefined, emphasis: false },
+  { size: 'XXL', weight: 'bold', color: 'TEXT_DISABLED', leading: 'LOOSE', emphasis: true },
+  { size: 'XL', weight: undefined, color: 'TEXT_DISABLED', leading: 'NONE', emphasis: false },
+  { size: 'L', weight: undefined, color: 'TEXT_BLACK', leading: 'LOOSE', emphasis: false },
+  { size: 'XS', weight: 'bold', color: undefined, leading: 'NONE', emphasis: true },
+  { size: 'XS', weight: 'normal', color: 'TEXT_BLACK', leading: 'TIGHT', emphasis: false },
+  { size: 'S', weight: 'bold', color: 'TEXT_DISABLED', leading: 'TIGHT', emphasis: true },
+  { size: 'XS', weight: 'bold', color: 'inherit', leading: undefined, emphasis: true },
+  { size: 'L', weight: 'normal', color: 'TEXT_DISABLED', leading: undefined, emphasis: false },
+  { size: undefined, weight: 'bold', color: 'TEXT_BLACK', leading: 'NORMAL', emphasis: true },
+  { size: 'XXS', weight: 'normal', color: undefined, leading: 'LOOSE', emphasis: false },
+  { size: 'M', weight: 'normal', color: 'TEXT_DISABLED', leading: 'NORMAL', emphasis: false },
+  { size: 'L', weight: undefined, color: undefined, leading: 'TIGHT', emphasis: false },
+  { size: 'XS', weight: undefined, color: 'TEXT_WHITE', leading: undefined, emphasis: false },
+  { size: 'S', weight: 'normal', color: 'TEXT_LINK', leading: 'NONE', emphasis: false },
+  { size: 'M', weight: 'bold', color: undefined, leading: undefined, emphasis: true },
+  { size: 'S', weight: undefined, color: undefined, leading: 'NORMAL', emphasis: false },
+  { size: undefined, weight: undefined, color: 'TEXT_GREY', leading: 'TIGHT', emphasis: false },
+  { size: 'L', weight: 'bold', color: 'TEXT_LINK', leading: 'NORMAL', emphasis: false },
+  { size: 'S', weight: 'normal', color: 'inherit', leading: 'LOOSE', emphasis: false },
+  { size: 'M', weight: 'bold', color: 'inherit', leading: 'NONE', emphasis: true },
+  { size: 'XXL', weight: undefined, color: 'inherit', leading: 'NORMAL', emphasis: false },
+  { size: 'XL', weight: undefined, color: 'TEXT_GREY', leading: 'NORMAL', emphasis: false },
+  { size: 'S', weight: 'normal', color: 'TEXT_WHITE', leading: 'NONE', emphasis: false },
+  { size: 'XS', weight: 'bold', color: 'TEXT_GREY', leading: 'LOOSE', emphasis: true },
+  { size: 'S', weight: undefined, color: 'TEXT_GREY', leading: undefined, emphasis: false },
+  { size: 'XXS', weight: undefined, color: 'TEXT_BLACK', leading: 'NONE', emphasis: false },
+  { size: 'XXS', weight: 'bold', color: 'TEXT_WHITE', leading: 'TIGHT', emphasis: true },
+  { size: 'XL', weight: undefined, color: 'TEXT_LINK', leading: 'LOOSE', emphasis: false },
+  { size: 'S', weight: 'bold', color: 'TEXT_BLACK', leading: 'TIGHT', emphasis: false },
+  { size: undefined, weight: 'normal', color: undefined, leading: undefined, emphasis: false },
+  { size: 'M', weight: undefined, color: 'TEXT_GREY', leading: 'LOOSE', emphasis: false },
+  { size: 'M', weight: 'bold', color: 'TEXT_BLACK', leading: 'TIGHT', emphasis: false },
+  { size: 'XXL', weight: 'normal', color: 'TEXT_WHITE', leading: 'NORMAL', emphasis: false },
+  { size: 'M', weight: 'bold', color: 'TEXT_LINK', leading: undefined, emphasis: false },
+  { size: 'XL', weight: undefined, color: 'inherit', leading: 'TIGHT', emphasis: false },
+  { size: 'M', weight: undefined, color: 'TEXT_WHITE', leading: undefined, emphasis: false },
+  { size: undefined, weight: 'normal', color: 'TEXT_LINK', leading: 'LOOSE', emphasis: false },
+  { size: 'L', weight: undefined, color: 'TEXT_WHITE', leading: 'NONE', emphasis: false },
+  { size: 'XXS', weight: 'bold', color: 'TEXT_DISABLED', leading: 'NORMAL', emphasis: true },
+  { size: 'L', weight: undefined, color: 'inherit', leading: undefined, emphasis: false },
+  { size: undefined, weight: undefined, color: 'TEXT_DISABLED', leading: 'NONE', emphasis: false },
+  { size: undefined, weight: undefined, color: 'inherit', leading: 'LOOSE', emphasis: false },
+  { size: 'XXL', weight: undefined, color: undefined, leading: undefined, emphasis: false },
+  { size: 'XXS', weight: undefined, color: 'inherit', leading: 'LOOSE', emphasis: false },
+  { size: undefined, weight: undefined, color: 'TEXT_WHITE', leading: undefined, emphasis: false },
+  { size: 'XS', weight: undefined, color: 'TEXT_DISABLED', leading: 'NONE', emphasis: false },
+  { size: 'XL', weight: 'bold', color: undefined, leading: undefined, emphasis: false },
+]
+
+export default {
+  title: 'Text（テキスト）/Text/VRT',
+  render: (args) => (
+    <Stack gap={0.5}>
+      {/* styleType ごとにペアワイズ法で抽出したパターンをあてる */}
+      {[undefined, ...Object.keys(STYLE_TYPE_MAP)].map((styleType) =>
+        pict.map((props, i) => (
+          <Text
+            {...props}
+            {...args}
+            styleType={styleType}
+            // 白文字だと見えないので背景色を変える
+            className={props.color === 'TEXT_WHITE' ? 'shr-bg-black' : undefined}
+            key={i}
+          />
+        )),
+      )}
+    </Stack>
+  ),
+  args: {
+    children: 'well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。',
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Text>
+
+export const VRT = {}
+
+export const VRTForcedColors: StoryObj = {
+  ...VRT,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
diff --git a/packages/smarthr-ui/src/components/Text/stories/text.pict b/packages/smarthr-ui/src/components/Text/stories/text.pict
new file mode 100644
index 0000000000..57bdd6caa3
--- /dev/null
+++ b/packages/smarthr-ui/src/components/Text/stories/text.pict
@@ -0,0 +1,10 @@
+size: undefined (10), XXS, XS, S, M, L, XL, XXL
+weight: undefined (10), normal, bold
+# italic は自分たちで定義した値ではないので除外
+color: undefined (10), TEXT_BLACK, TEXT_WHITE, TEXT_GREY, TEXT_DISABLED, TEXT_LINK, inherit
+leading: undefined (10), NONE, TIGHT, NORMAL, LOOSE
+emphasis: false (10), true
+# whiteSpace も自分たちで定義した値ではないので除外
+# styleType は styleType ごとに展開するので除外
+
+IF [emphasis] = "true" THEN [weight] = "bold";
\ No newline at end of file