docs: Text の Story を見直し

kufu · Oct 9, 2024 · 1b9ea6e · 1b9ea6e
1 parent ccd65e7
commit 1b9ea6e
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 68 deletions.
diff --git a/packages/smarthr-ui/src/components/Text/Text.stories.tsx b/packages/smarthr-ui/src/components/Text/Text.stories.tsx
diff --git a/packages/smarthr-ui/src/components/Text/VRTText.stories.tsx b/packages/smarthr-ui/src/components/Text/VRTText.stories.tsx
diff --git a/packages/smarthr-ui/src/components/Text/stories/Text.stories.tsx 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
@@ -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
@@ -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";