Merge pull request #380 from uyupun/feat/356_value

Valueコンポーネントの作成

docs/architecture.md

@@ -42,6 +42,8 @@ AtomicDesignにおけるコンポーネントの分類の曖昧さを改善し
 - 依存関係の方向はBase <- Case <- Common <- Domainとする
 - Domain以外のコンポーネントは同じ分類同士で依存させない
   - 本来、Baseに分類されるべきだが、Baseに依存してしまうようなコンポーネントは、Commonに定義する
+- 同分類のコンポーネントであれば、複数のコンポーネントをサブディレクトリ配下にまとめることができる
+  - 例えば、domain/Philosophyディレクトリ配下に、Mission、Vision、Valueといったコンポーネントをまとめることで、組織の行動指針に関連するコンポーネント間の関連を明確にし、一元的な管理を可能にしている
 
 ### 参照
 

src/components/domain/Philosophy/Values/index.ts

@@ -0,0 +1,2 @@
+export { PhilosophyValues } from './values';
+export { PhilosophyValue } from './value';

src/components/domain/Philosophy/Values/styles.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+
+import { sprinkles } from '@/styles/sprinkles.css';
+import { vars } from '@/styles/themes.css';
+
+const styles = {
+  section: sprinkles({
+    textAlign: 'center',
+  }),
+  heading: sprinkles({
+    marginBottom: {
+      mobile: 6,
+      desktop: 10,
+    },
+  }),
+  itemContainer: style({
+    selectors: {
+      '&:not(:last-child)': {
+        marginBottom: vars.spacing[6],
+      },
+    },
+  }),
+  title: sprinkles({
+    marginBottom: {
+      mobile: 2,
+      desktop: 4,
+    },
+  }),
+  strong: sprinkles({
+    fontWeight: 'bold',
+  }),
+  description: sprinkles({
+    textAlign: 'left',
+  }),
+};
+
+export { styles };

src/components/domain/Philosophy/Values/value.stories.tsx

@@ -0,0 +1,21 @@
+import { PhilosophyValue as DomainPhilosophyValue } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DomainPhilosophyValue> = {
+  title: 'Domain/Philosophy/Values',
+  component: DomainPhilosophyValue,
+};
+export default meta;
+
+type Story = StoryObj<typeof DomainPhilosophyValue>;
+export const Value: Story = {
+  render: () => (
+    <DomainPhilosophyValue
+      description={
+        'お客様に信頼される軸となる安心、安全。そして新たな機会創出に向けて挑戦し続けるUnstoppableな精神。これらの軸を重視したプラットフォームの提供に尽力します。'
+      }
+      title={'安心、安全、Unstoppable'}
+    />
+  ),
+};

src/components/domain/Philosophy/Values/value.tsx

@@ -0,0 +1,36 @@
+import { Text } from '@/components/base/Text';
+
+import { styles } from './styles.css';
+
+import type { FC } from 'react';
+
+type Props = {
+  /**
+   * タイトル
+   */
+  title: string;
+  /**
+   * 説明文
+   */
+  description: string;
+};
+
+const PhilosophyValue: FC<Props> = ({ 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>
+  );
+};
+
+export { PhilosophyValue };

src/components/domain/Philosophy/Values/values.stories.tsx

@@ -0,0 +1,44 @@
+import { PhilosophyValues as DomainPhilosophyValues } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DomainPhilosophyValues> = {
+  title: 'Domain/Philosophy/Values',
+  component: DomainPhilosophyValues,
+};
+export default meta;
+
+type Story = StoryObj<typeof DomainPhilosophyValues>;
+export const Values: Story = {
+  render: () => (
+    <DomainPhilosophyValues
+      values={[
+        {
+          title: '安心、安全、Unstoppable',
+          description:
+            'お客様に信頼される軸となる安心、安全。そして新たな機会創出に向けて挑戦し続けるUnstoppableな精神。これらの軸を重視したプラットフォームの提供に尽力します。',
+        },
+        {
+          title: 'おもしろさファースト',
+          description:
+            '遊び心やユーモラスな考えは世界を潤し、より鮮明に映し出すと考えています。そのため、我々はおもしろさを追求する『おもしろ帝国』であり続けます。',
+        },
+        {
+          title: 'ダイナミックであれ。 ただしその前にドラマチックであれ。',
+          description:
+            '変革を続ける時代に取り残されないよう、ダイナミックであることが求められています。しかしそれよりももっと大切なことがあります。それは、我々が"お客様"や"お客様のお客様"に感動していただける、ドラマチックな組織であり続けることです。',
+        },
+        {
+          title: 'ボーダーレス',
+          description:
+            '誰一人として取り残さず、全人類を階層や境界なく、多様性(ダイバーシティ)の心を持って繋ぐことを重視します。',
+        },
+        {
+          title: 'ロジカル、クリエイティブ、アーティスティック',
+          description:
+            'より最適化されたプログラム提供のための論理的思考、より革新的なサービスを生み出すための創造的思考、よりリッチな顧客体験を実現するための芸術的思考の3つの思考を持って取り組みます。',
+        },
+      ]}
+    />
+  ),
+};

src/components/domain/Philosophy/Values/values.tsx

@@ -0,0 +1,28 @@
+import { Heading } from '@/components/base/Heading';
+
+import { styles } from './styles.css';
+import { PhilosophyValue } from './value';
+
+import type { ComponentProps, FC } from 'react';
+
+type Props = {
+  /**
+   * タイトルと説明文を保持する配列
+   */
+  values: Array<ComponentProps<typeof PhilosophyValue>>;
+};
+
+const PhilosophyValues: FC<Props> = ({ values }) => {
+  return (
+    <section className={styles.section}>
+      <Heading className={styles.heading} tagName="h2">
+        Value
+      </Heading>
+      {values.map((value) => (
+        <PhilosophyValue description={value.description} key={value.title} title={value.title} />
+      ))}
+    </section>
+  );
+};
+
+export { PhilosophyValues };