From 6948440ca9ee42eea5eed99fb27e5988b3079290 Mon Sep 17 00:00:00 2001 From: shigek Date: Sun, 24 Mar 2024 01:06:48 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=B5?= =?UTF-8?q?=E3=82=A4=E3=82=BA=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LinkButton/LinkButton.module.css | 35 ++++++++++++++++--- .../LinkButton/LinkButton.stories.tsx | 2 ++ src/components/LinkButton/LinkButton.tsx | 3 ++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css index 313593f..766bdb5 100644 --- a/src/components/LinkButton/LinkButton.module.css +++ b/src/components/LinkButton/LinkButton.module.css @@ -1,19 +1,38 @@ .button { display: inline-block; - font-size: 1.5rem; text-align: center; text-decoration: none; } +.small { + font-size: 1rem; +} + +.medium { + font-size: 1.5rem; +} + +.large { + font-size: 2rem; +} + .greenButton { padding: 24px 48px; background-color: #439154; - color: #FFFFFF; + color: #ffffff; border: none; border-radius: 999px; transition: background-color 0.3s ease; } +.greenButton.small { + padding: 18px 36px; +} + +.greenButton.large { + padding: 30px 60px; +} + .greenButton:hover { background-color: #36773c; } @@ -21,11 +40,19 @@ .grayButton { padding: 12px 64px; background-color: #414141; - color: #FFFFFF; - border: 1px solid #FFFFFF; + color: #ffffff; + border: 1px solid #ffffff; transition: background-color 0.3s ease; } +.grayButton.small { + padding: 9px 48px; +} + +.grayButton.large { + padding: 15px 80px; +} + .grayButton:hover { background-color: #000000; } diff --git a/src/components/LinkButton/LinkButton.stories.tsx b/src/components/LinkButton/LinkButton.stories.tsx index e29208e..e38fabf 100644 --- a/src/components/LinkButton/LinkButton.stories.tsx +++ b/src/components/LinkButton/LinkButton.stories.tsx @@ -14,6 +14,7 @@ Primary.args = { children: 'Click Me', variant: 'green', href: '/', + size: 'medium', }; export const Secondary = Template.bind({}); @@ -21,4 +22,5 @@ Secondary.args = { children: 'Click Me', variant: 'gray', href: '/', + size: 'medium', }; diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx index 3029ac9..9e715c1 100644 --- a/src/components/LinkButton/LinkButton.tsx +++ b/src/components/LinkButton/LinkButton.tsx @@ -6,17 +6,20 @@ import styles from './LinkButton.module.css'; interface ButtonProps extends Omit { href: string; variant: 'green' | 'gray'; + size?: 'small' | 'medium' | 'large'; children: React.ReactNode; } export const LinkButton: React.FC = ({ href, variant, + size = 'medium', children, ...props }) => { const className = clsx( styles.button, + styles[size], variant === 'green' && styles.greenButton, variant === 'gray' && styles.grayButton, ); From 661b2a6dcde4a9eba19d7cf7ef80679cec58d7d1 Mon Sep 17 00:00:00 2001 From: shigek Date: Mon, 25 Mar 2024 02:16:09 +0900 Subject: [PATCH 2/4] =?UTF-8?q?padding=20=E3=82=92em=E3=81=AB=E7=B5=B1?= =?UTF-8?q?=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LinkButton/LinkButton.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css index 766bdb5..9fa0af0 100644 --- a/src/components/LinkButton/LinkButton.module.css +++ b/src/components/LinkButton/LinkButton.module.css @@ -17,7 +17,7 @@ } .greenButton { - padding: 24px 48px; + padding: 1em 2em; background-color: #439154; color: #ffffff; border: none; @@ -26,11 +26,11 @@ } .greenButton.small { - padding: 18px 36px; + padding: 1em 2em; } .greenButton.large { - padding: 30px 60px; + padding: 1em 2em; } .greenButton:hover { @@ -38,7 +38,7 @@ } .grayButton { - padding: 12px 64px; + padding: 0.5em 3em; background-color: #414141; color: #ffffff; border: 1px solid #ffffff; @@ -46,11 +46,11 @@ } .grayButton.small { - padding: 9px 48px; + padding: 0.5em 3em; } .grayButton.large { - padding: 15px 80px; + padding: 0.5em 3em; } .grayButton:hover { From a9af97dbc3372de42f1ce57970694889e87e6d67 Mon Sep 17 00:00:00 2001 From: shigek Date: Mon, 25 Mar 2024 02:18:41 +0900 Subject: [PATCH 3/4] =?UTF-8?q?stroybook=E3=81=AE=E3=83=9C=E3=82=BF?= =?UTF-8?q?=E3=83=B3=E3=81=AE=E5=90=8D=E5=89=8D=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LinkButton/LinkButton.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/LinkButton/LinkButton.stories.tsx b/src/components/LinkButton/LinkButton.stories.tsx index e38fabf..ead740a 100644 --- a/src/components/LinkButton/LinkButton.stories.tsx +++ b/src/components/LinkButton/LinkButton.stories.tsx @@ -9,16 +9,16 @@ export default { const Template: StoryFn = (args) => ; -export const Primary = Template.bind({}); -Primary.args = { +export const Green = Template.bind({}); +Green.args = { children: 'Click Me', variant: 'green', href: '/', size: 'medium', }; -export const Secondary = Template.bind({}); -Secondary.args = { +export const Gray = Template.bind({}); +Gray.args = { children: 'Click Me', variant: 'gray', href: '/', From beabd3296a5fa2389a712bb1d7dd591ceeeb0f0f Mon Sep 17 00:00:00 2001 From: shigek Date: Thu, 28 Mar 2024 00:03:34 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?= =?UTF-8?q?=E7=B8=A6=E6=A8=AA=E6=AF=94=E3=82=92=E4=BF=AE=E6=AD=A3=E3=83=BB?= =?UTF-8?q?=E9=87=8D=E8=A4=87=E3=81=99=E3=82=8B=E9=83=A8=E5=88=86=E3=82=92?= =?UTF-8?q?=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LinkButton/LinkButton.module.css | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css index 9fa0af0..6d5989b 100644 --- a/src/components/LinkButton/LinkButton.module.css +++ b/src/components/LinkButton/LinkButton.module.css @@ -25,14 +25,6 @@ transition: background-color 0.3s ease; } -.greenButton.small { - padding: 1em 2em; -} - -.greenButton.large { - padding: 1em 2em; -} - .greenButton:hover { background-color: #36773c; } @@ -46,11 +38,7 @@ } .grayButton.small { - padding: 0.5em 3em; -} - -.grayButton.large { - padding: 0.5em 3em; + padding: 0.5em 2em; } .grayButton:hover {