From 09ef38b91b35fe527b2e9dc15bb14909cf83a23c Mon Sep 17 00:00:00 2001
From: "hiroki.yokouchi" <hiroki.yokouchi@dr-ubie.com>
Date: Fri, 12 Jul 2024 14:22:48 +0900
Subject: [PATCH] extend width prop

---
 src/components/Center/Center.module.css |  2 ++
 src/components/Center/Center.spec.tsx   | 33 +++++++++++++++++++++++++
 src/components/Center/Center.tsx        | 19 ++++++++------
 src/stories/Center.stories.tsx          | 22 +++++++++++++++++
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/components/Center/Center.module.css b/src/components/Center/Center.module.css
index 33ae21e6..446cdb0f 100644
--- a/src/components/Center/Center.module.css
+++ b/src/components/Center/Center.module.css
@@ -1,4 +1,6 @@
 .center {
+  width: var(--width);
+  min-width: var(--min-width);
   max-width: var(--max-width);
   padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
   margin-inline: auto;
diff --git a/src/components/Center/Center.spec.tsx b/src/components/Center/Center.spec.tsx
index 10191fd1..7cbfb002 100644
--- a/src/components/Center/Center.spec.tsx
+++ b/src/components/Center/Center.spec.tsx
@@ -107,4 +107,37 @@ describe('<Center>', () => {
     expect(div).toHaveStyle('--padding-bottom: var(--size-spacing-lg)');
     expect(div).toHaveStyle('--padding-left: var(--size-spacing-xl)');
   });
+
+  it('receives width', () => {
+    render(
+      <Center width="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--width: 100px');
+  });
+
+  it('receives max-width', () => {
+    render(
+      <Center maxWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--max-width: 100px');
+  });
+
+  it('receives min-width', () => {
+    render(
+      <Center minWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId('flex-item');
+
+    expect(div).toHaveStyle('--min-width: 100px');
+  });
 });
diff --git a/src/components/Center/Center.tsx b/src/components/Center/Center.tsx
index 37d3d6fe..fc81cf6e 100644
--- a/src/components/Center/Center.tsx
+++ b/src/components/Center/Center.tsx
@@ -13,10 +13,10 @@ import {
 } from 'react';
 import styles from './Center.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
-import { marginVariables, paddingVariables } from '../../utils/style';
+import { marginVariables, paddingVariables, widthVariables } from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
 import { Box } from '../Box/Box';
-import type { MarginYProps, PaddingProps } from '../../types/style';
+import type { MarginYProps, PaddingProps, WidthProps } from '../../types/style';
 
 type Props = {
   /**
@@ -34,17 +34,13 @@ type Props = {
    * @default false
    */
   childrenCenter?: boolean;
-  /**
-   * 横幅の最大値
-   * @default none
-   */
-  maxWidth?: string;
   /**
    * HTMLのID属性の値
    */
   id?: string;
 } & MarginYProps &
   PaddingProps &
+  WidthProps &
   CustomDataAttributeProps;
 
 export const Center: FC<PropsWithChildren<Props>> = ({
@@ -63,7 +59,9 @@ export const Center: FC<PropsWithChildren<Props>> = ({
   textCenter,
   childrenCenter,
   id,
-  maxWidth = 'none',
+  width,
+  minWidth,
+  maxWidth,
   ...props
 }) => {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -95,6 +93,11 @@ export const Center: FC<PropsWithChildren<Props>> = ({
           mt,
           mb,
         }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
       } as CSSProperties,
       ...props,
     },
diff --git a/src/stories/Center.stories.tsx b/src/stories/Center.stories.tsx
index 5e481782..4ad7dbf8 100644
--- a/src/stories/Center.stories.tsx
+++ b/src/stories/Center.stories.tsx
@@ -96,3 +96,25 @@ export const CustomDataAttribute: Story = {
     </Center>
   ),
 };
+
+export const Width: Story = {
+  render: () => (
+    <>
+      <Center maxWidth="100%" textCenter>
+        <p>width: 100%</p>
+      </Center>
+
+      <br />
+
+      <Center maxWidth="500px" textCenter>
+        <p>max-width: 500px</p>
+      </Center>
+
+      <br />
+
+      <Center minWidth="500px" textCenter>
+        <p>min-width: 500px</p>
+      </Center>
+    </>
+  ),
+};