From e57c2d23f98654ab9bb79cbf64ae5f9279628f20 Mon Sep 17 00:00:00 2001
From: "hiroki.yokouchi" <hiroki.yokouchi@dr-ubie.com>
Date: Fri, 26 Jul 2024 10:32:52 +0900
Subject: [PATCH] so that the text is not centered when wrap

---
 src/components/ButtonCard/ButtonCard.module.css  |  1 +
 src/components/ButtonCard/ButtonCard.stories.tsx | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/components/ButtonCard/ButtonCard.module.css b/src/components/ButtonCard/ButtonCard.module.css
index 94bbe9f..e6286b9 100644
--- a/src/components/ButtonCard/ButtonCard.module.css
+++ b/src/components/ButtonCard/ButtonCard.module.css
@@ -11,6 +11,7 @@
 
   /* TODO: Replaced by tokens when @ubie/design-tokens is up-to-date. */
   line-height: 1.5;
+  text-align: left;
   text-decoration: none;
   overflow-wrap: anywhere;
   cursor: pointer;
diff --git a/src/components/ButtonCard/ButtonCard.stories.tsx b/src/components/ButtonCard/ButtonCard.stories.tsx
index 4c3114c..61256ae 100644
--- a/src/components/ButtonCard/ButtonCard.stories.tsx
+++ b/src/components/ButtonCard/ButtonCard.stories.tsx
@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { ButtonCard } from './ButtonCard';
+import { Box } from '../Box/Box';
 import { Flex } from '../Flex/Flex';
 
 export default {
@@ -21,6 +22,18 @@ export const Default: Story = {
   args: defaultArgs,
 };
 
+export const WrapText: Story = {
+  render: (args) => (
+    <Box width="200px">
+      <ButtonCard {...args} />
+    </Box>
+  ),
+  args: {
+    ...defaultArgs,
+    children: '自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分',
+  },
+};
+
 export const Disabled: Story = {
   render: (args) => <ButtonCard {...args} />,
   args: {