✨ feat: PhilosophyValues.Itemを作成する

uyupun · Apr 4, 2024 · 49fac96 · 49fac96
1 parent 79436aa
commit 49fac96
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 54 deletions.
diff --git a/src/components/domain/PhilosophyValues/index.stories.tsx b/src/components/domain/PhilosophyValues/index.stories.tsx
@@ -2,43 +2,80 @@ import { PhilosophyValues as DomainPhilosophyValues } from '.';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof DomainPhilosophyValues> = {
+// componentキーを記述しないことで、PhilosophyValues.Itemの
+// ControlにPhilosophyValuesのプロパティ（children）を表示しないようにしている
+const meta: Meta = {
   title: 'Domain/PhilosophyValues',
-  component: DomainPhilosophyValues,
 };
 export default meta;
 
-type Story = StoryObj<typeof DomainPhilosophyValues>;
-export const PhilosophyValues: Story = {
+type PhilosophyValuesItemStory = StoryObj<typeof DomainPhilosophyValues.Item>;
+export const PhilosophyValuesItem: PhilosophyValuesItemStory = {
   render: () => (
-    <DomainPhilosophyValues
-      values={[
-        {
-          title: '安心、安全、Unstoppable',
-          description:
-            'お客様に信頼される軸となる安心、安全。そして新たな機会創出に向けて挑戦し続けるUnstoppableな精神。これらの軸を重視したプラットフォームの提供に尽力します。',
-        },
-        {
-          title: 'おもしろさファースト',
-          description:
-            '遊び心やユーモラスな考えは世界を潤し、より鮮明に映し出すと考えています。そのため、我々はおもしろさを追求する『おもしろ帝国』であり続けます。',
-        },
-        {
-          title: 'ダイナミックであれ。 ただしその前にドラマチックであれ。',
-          description:
-            '変革を続ける時代に取り残されないよう、ダイナミックであることが求められています。しかしそれよりももっと大切なことがあります。それは、我々が"お客様"や"お客様のお客様"に感動していただける、ドラマチックな組織であり続けることです。',
-        },
-        {
-          title: 'ボーダーレス',
-          description:
-            '誰一人として取り残さず、全人類を階層や境界なく、多様性(ダイバーシティ)の心を持って繋ぐことを重視します。',
-        },
-        {
-          title: 'ロジカル、クリエイティブ、アーティスティック',
-          description:
-            'より最適化されたプログラム提供のための論理的思考、より革新的なサービスを生み出すための創造的思考、よりリッチな顧客体験を実現するための芸術的思考の3つの思考を持って取り組みます。',
-        },
-      ]}
+    <DomainPhilosophyValues.Item
+      description={
+        'お客様に信頼される軸となる安心、安全。そして新たな機会創出に向けて挑戦し続けるUnstoppableな精神。これらの軸を重視したプラットフォームの提供に尽力します。'
+      }
+      title={'安心、安全、Unstoppable'}
     />
   ),
+  // argTypesを記述することでControlに表示させる
+  argTypes: {
+    description: {
+      description: '説明文',
+      type: 'string',
+    },
+    title: {
+      description: 'タイトル',
+      type: 'string',
+    },
+  },
+};
+
+type PhilosophyValuesStory = StoryObj<typeof DomainPhilosophyValues>;
+export const PhilosophyValues: PhilosophyValuesStory = {
+  render: () => (
+    <DomainPhilosophyValues>
+      <DomainPhilosophyValues.Item
+        description={
+          'お客様に信頼される軸となる安心、安全。そして新たな機会創出に向けて挑戦し続けるUnstoppableな精神。これらの軸を重視したプラットフォームの提供に尽力します。'
+        }
+        title={'安心、安全、Unstoppable'}
+      />
+      <DomainPhilosophyValues.Item
+        description={
+          '遊び心やユーモラスな考えは世界を潤し、より鮮明に映し出すと考えています。そのため、我々はおもしろさを追求する『おもしろ帝国』であり続けます。'
+        }
+        title={'おもしろさファースト'}
+      />
+      <DomainPhilosophyValues.Item
+        description={
+          '変革を続ける時代に取り残されないよう、ダイナミックであることが求められています。しかしそれよりももっと大切なことがあります。それは、我々が"お客様"や"お客様のお客様"に感動していただける、ドラマチックな組織であり続けることです。'
+        }
+        title={'ダイナミックであれ。 ただしその前にドラマチックであれ。'}
+      />
+      <DomainPhilosophyValues.Item
+        description={
+          '誰一人として取り残さず、全人類を階層や境界なく、多様性(ダイバーシティ)の心を持って繋ぐことを重視します。'
+        }
+        title={'ボーダーレス'}
+      />
+      <DomainPhilosophyValues.Item
+        description={
+          'より最適化されたプログラム提供のための論理的思考、より革新的なサービスを生み出すための創造的思考、よりリッチな顧客体験を実現するための芸術的思考の3つの思考を持って取り組みます。'
+        }
+        title={'ロジカル、クリエイティブ、アーティスティック'}
+      />
+    </DomainPhilosophyValues>
+  ),
+  // argTypesを記述することでControlに表示させる
+  argTypes: {
+    children: {
+      description: 'PhilosophyValues.Itemを受け取る',
+      type: {
+        name: 'other',
+        value: 'ReactNode',
+      },
+    },
+  },
 };
diff --git a/src/components/domain/PhilosophyValues/index.tsx b/src/components/domain/PhilosophyValues/index.tsx
@@ -3,43 +3,62 @@ import { Text } from '@/components/base/Text';
 
 import { styles } from './styles.css';
 
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
-type PhilosophyValuesItem = {
+type ItemProps = {
+  /**
+   * タイトル
+   */
   title: string;
+  /**
+   * 説明文
+   */
   description: string;
 };
 
-type Props = {
+const Item: FC<ItemProps> = ({ title, description }) => {
+  return (
+    <div className={styles.itemContainer}>
+      <Text
+        className={styles.title}
+        fontSize={{ mobile: 18, desktop: 24 }}
+        lineHeight={1.3}
+        tagName="p"
+      >
+        <strong className={styles.strong}>{title}</strong>
+      </Text>
+      <Text className={styles.description} tagName="p">
+        {description}
+      </Text>
+    </div>
+  );
+};
+
+type ListProps = {
   /**
-   * タイトルと説明文を持つ配列
+   * PhilosophyValues.Itemを1つ以上受け取る
    */
-  values: PhilosophyValuesItem[];
+  children: ReactNode;
 };
 
-const PhilosophyValues: FC<Props> = ({ values }) => {
+/**
+ * compound component用の型
+ */
+type CompoundType = {
+  Item: FC<ItemProps>;
+};
+
+const PhilosophyValues: FC<ListProps> & CompoundType = ({ children }) => {
   return (
     <section className={styles.section}>
       <Heading className={styles.heading} tagName="h2">
         Value
       </Heading>
-      {values.map(({ title, description }) => (
-        <div className={styles.valueContainer} key={title}>
-          <Text
-            className={styles.title}
-            fontSize={{ mobile: 18, desktop: 24 }}
-            lineHeight={1.3}
-            tagName="p"
-          >
-            <strong className={styles.strong}>{title}</strong>
-          </Text>
-          <Text className={styles.description} tagName="p">
-            {description}
-          </Text>
-        </div>
-      ))}
+      {children}
     </section>
   );
 };
 
+PhilosophyValues.Item = Item;
+
 export { PhilosophyValues };
diff --git a/src/components/domain/PhilosophyValues/styles.css.ts b/src/components/domain/PhilosophyValues/styles.css.ts
@@ -13,7 +13,7 @@ const styles = {
       desktop: 10,
     },
   }),
-  valueContainer: style({
+  itemContainer: style({
     selectors: {
       '&:not(:last-child)': {
         marginBottom: vars.spacing[6],