Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/カードコンポーネントサイズ変更 #59

Merged
merged 12 commits into from
Mar 27, 2024
Merged

Feat/カードコンポーネントサイズ変更 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e292ae4
とりあえず変数追加
Mar 24, 2024
436daad
cssに変数を追加
Mar 24, 2024
f436c8d
cssの変数必要なさそう
Mar 24, 2024
2c69b30
ふさわしくない値に対する処理
Mar 24, 2024
ec0f1b6
formatter
Mar 24, 2024
adc76e8
上限の設定と当てはまるかどうかの判定の優先度変更
Mar 24, 2024
3d75eae
formatter
Mar 24, 2024
c456435
stringではない受け取り方
Mar 24, 2024
76a9243
formatter
Mar 24, 2024
ff0481f
undefined削除
Mar 25, 2024
60bf15e
customStyleをstyleに
Mar 25, 2024
4e4c315
stories.tsxの方もstyleに変更
Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/components/Card/Card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

.card {
width: 100%;
.card {
max-width: 100%;
border: 1px solid #ccc;
background-color: #fff;
text-decoration: none;
Expand Down
4 changes: 4 additions & 0 deletions src/components/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
title: 'Components/Card',
component: Card,
argTypes: {
style: { control: 'object' },
title: { control: 'text' },
content: { control: 'text' },
date: { control: 'text' },
Expand All @@ -20,6 +21,9 @@ const Template: StoryFn<typeof Card> = (args) => <Card {...args} />;
export const Default = Template.bind({});

Default.args = {
style: {
width: '100%',
},
title: 'OOOOOOOOOOOOOOOOOOOOOOOOOO',
content:
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
Expand Down
4 changes: 3 additions & 1 deletion src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import style from './Card.module.css';

interface CardProps {
style?: React.CSSProperties;
title: string;
content: string;
date: string;
Expand All @@ -12,6 +13,7 @@ interface CardProps {
imageAlt: string;
}
const Card: React.FC<CardProps> = ({
style: customStyle,
title,
content,
date,
Expand All @@ -21,7 +23,7 @@ const Card: React.FC<CardProps> = ({
imageAlt,
}) => {
return (
<Link href={to} className={style.card}>
<Link href={to} className={style.card} style={customStyle}>
<div className={style.img}>
<img className={style.img} src={imageSrc} alt={imageAlt} />
<div className={style.box}>
Expand Down