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

chore(fuselage): Card improvements #1254

Merged
merged 7 commits into from
Dec 27, 2023
Merged

chore(fuselage): Card improvements #1254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6b1ab46
chore: `CardGroup` HTMLAttributes
juliajforesti Dec 22, 2023
3bf1fb0
chore: clickable `Card`
juliajforesti Dec 22, 2023
8562062
chore: card improvements
juliajforesti Dec 27, 2023
9a9b2df
reorganize styles
juliajforesti Dec 27, 2023
4a549c1
chore: update snapshots
juliajforesti Dec 27, 2023
f71268c
chore: improve stories
juliajforesti Dec 27, 2023
b007c65
Merge branch 'main' into chore/card-improvements
dougfabris Dec 27, 2023
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
232 changes: 120 additions & 112 deletions packages/fuselage/src/components/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import React from 'react';
import { Card, CardBody, CardCol, CardTitle } from '.';
import { Avatar } from '../Avatar';
import { Badge } from '../Badge';
import Box from '../Box/Box';
import { Button, IconButton } from '../Button';
import { Icon } from '../Icon';
import { FramedIcon } from '../FramedIcon';
import { Tag } from '../Tag';
import CardControls from './CardControls';
import CardHeader from './CardHeader';
Expand All @@ -29,12 +30,121 @@ export default {
},
} as ComponentMeta<typeof Card>;

const imgUrl =
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';

export const Vertical: ComponentStory<typeof Card> = () => (
<Card>
<CardHeader>
<FramedIcon icon='address-book' info />
<CardTitle variant='h3' info='Heading info'>
Heading 3
</CardTitle>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci
consequatur qui laudantium rem praesentium earum ut consectetur.
</CardBody>
<CardControls>
<Button medium primary>
Button
</Button>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const VerticalNoIcon: ComponentStory<typeof Card> = () => (
<Card>
<CardTitle variant='h3'>Heading 3</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci
consequatur qui laudantium rem praesentium earum ut consectetur.
</CardBody>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const Hero: ComponentStory<typeof Card> = () => (
<Card hero>
<CardTitle variant='h3'>Heading 3</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci
consequatur qui laudantium rem praesentium earum ut consectetur.
</CardBody>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const VerticalCustom: ComponentStory<typeof Card> = () => (
<Card>
<CardHeader>
<Avatar url={imgUrl} alt='avatar' />
<CardTitle variant='h3'>Heading 3</CardTitle>
</CardHeader>
<CardBody>
<CardCol>
{Array.from(new Array(3)).map((_, index) => (
<Box is='span' display='flex' alignItems='center' key={index}>
<FramedIcon icon='check' success />
<Box mis={8}>Lorem ipsum dolor sit amet.</Box>
</Box>
))}
</CardCol>
<CardCol>
{Array.from(new Array(3)).map((_, index) => (
<Box is='span' display='flex' alignItems='center' key={index}>
<FramedIcon icon='cross' danger />
<Box mis={8}>Lorem ipsum dolor sit amet.</Box>
</Box>
))}
</CardCol>
</CardBody>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const Horizontal: ComponentStory<typeof Card> = () => (
<Card horizontal>
<CardRow>
<CardCol>
<Icon name='document-eye' size='x24' />
<FramedIcon icon='document-eye' info />
</CardCol>
<CardCol>
<CardTitle variant='h3' info='Card info here'>
Heading 3
</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium
voluptatem rem praesentium earum ut consectetur.
</CardBody>
</CardCol>
</CardRow>
<CardControls>
<Button medium>Button</Button>
<Button medium primary>
Button
</Button>
<Badge small variant='primary' />
<Tag>Tag</Tag>
<IconButton icon='menu' small aria-label='menu' />
</CardControls>
</Card>
);

export const Clickable: ComponentStory<typeof Card> = () => (
<Card horizontal clickable>
<CardRow>
<FramedIcon icon='document-eye' info />
<CardCol>
<CardTitle variant='h3' info='Card info here'>
Heading 3
Expand All @@ -59,15 +169,13 @@ export const Horizontal: ComponentStory<typeof Card> = () => (

export const HorizontalNoIcon: ComponentStory<typeof Card> = () => (
<Card horizontal>
<CardCol>
<CardTitle variant='h3' info='Card info here'>
Heading 3
</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium
voluptatem rem praesentium earum ut consectetur.
</CardBody>
</CardCol>
<CardTitle variant='h3' info='Card info here'>
Heading 3
</CardTitle>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium
voluptatem rem praesentium earum ut consectetur.
</CardBody>
<CardControls>
<Badge small variant='primary' />
<Tag>Card tag</Tag>
Expand All @@ -79,7 +187,7 @@ export const HorizontalNoIcon: ComponentStory<typeof Card> = () => (
export const HorizontalNoAction: ComponentStory<typeof Card> = () => (
<Card horizontal>
<CardRow>
<Icon name='document-eye' size='x24' />
<FramedIcon icon='document-eye' info />
<CardCol>
<CardTitle variant='h3'>Heading 3</CardTitle>
<CardBody>
Expand Down Expand Up @@ -117,9 +225,6 @@ export const TitleH5: ComponentStory<typeof Card> = () => (
);
TitleH5.storyName = 'Title h5';

const imgUrl =
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';

export const HorizontalCustom: ComponentStory<typeof Card> = () => (
<Card horizontal>
<CardRow>
Expand All @@ -145,100 +250,3 @@ export const HorizontalCustom: ComponentStory<typeof Card> = () => (
</CardControls>
</Card>
);

export const Vertical: ComponentStory<typeof Card> = () => (
<Card>
<CardCol>
<CardHeader>
<Icon name='address-book' size='x24' />
<CardTitle variant='h3' info='Heading info'>
Heading 3
</CardTitle>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In
adipisci consequatur qui laudantium rem praesentium earum ut
consectetur.
</CardBody>
</CardCol>
<CardControls>
<Button medium primary>
Button
</Button>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const VerticalNoIcon: ComponentStory<typeof Card> = () => (
<Card>
<CardCol>
<CardHeader>
<CardTitle variant='h3'>Heading 3</CardTitle>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In
adipisci consequatur qui laudantium rem praesentium earum ut
consectetur.
</CardBody>
</CardCol>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const Hero: ComponentStory<typeof Card> = () => (
<Card hero>
<CardCol>
<CardHeader>
<CardTitle variant='h3'>Heading 3</CardTitle>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem
praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In
adipisci consequatur qui laudantium rem praesentium earum ut
consectetur.
</CardBody>
</CardCol>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);

export const VerticalCustom: ComponentStory<typeof Card> = () => (
<Card>
<CardCol>
<CardHeader>
<Avatar url={imgUrl} alt='avatar' />
<CardTitle variant='h3'>Heading 3</CardTitle>
</CardHeader>
<CardBody>
<CardCol>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>
In adipisci consequatur qui laudantium rem praesentium earum ut.
</li>
<li>Consectetur.</li>
</ul>
</CardCol>
<CardCol>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>
In adipisci consequatur qui laudantium rem praesentium earum ut.
</li>
<li>Consectetur.</li>
</ul>
</CardCol>
</CardBody>
</CardCol>
<CardControls>
<Button medium>Button</Button>
</CardControls>
</Card>
);
Loading
Loading