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: update Card to support all cases #96

Merged
merged 1 commit into from
Feb 11, 2025
Merged

feat: update Card to support all cases #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const Button: React.FC<ButtonProps> = ({
return (
<Component
className={classNames(
"ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-xl",
"ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-lg",
"ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
variantClassNames(size, {
md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
Expand Down
259 changes: 237 additions & 22 deletions src/components/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,46 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Card, type CardProps } from "./index";
import { Pill } from "../Pill";
import { Card, type CardProps, CardContent } from "./index";
import { Tag } from "../Tag";
import { Button } from "../Button";
import { InkIcon } from "../..";
import { TitleAndDescription } from "./Content";

const meta: Meta<CardProps> = {
title: "Components (WIP)/Card",
title: "Components/Card",
component: Card,
tags: ["autodocs"],
argTypes: {},
args: {
title: "Card Example",
description:
"Ever wondered why keyboards aren't arranged in alphabetical order? Probably because someone in the 1870s had a really good time watching people hunt and peck for letters. QWERTY layout: the original practical joke that became a global standard.",
image: (props) => (
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
className={props.className}
width={1024}
height={580}
children: (
<CardContent.CallToAction
title="Card Example"
description="Ever wondered why keyboards aren't arranged in alphabetical order? Probably because someone in the 1870s had a really good time watching people hunt and peck for letters. QWERTY layout: the original practical joke that became a global standard."
button={
<Button variant="primary" size="lg">
Button
</Button>
}
variant="default"
/>
),
image: (
<CardContent.Image
mainLabels={
<>
<Tag variant="event">Tag 1</Tag>
<Tag variant="event">Tag 2</Tag>
</>
}
>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={580}
/>
</CardContent.Image>
),
imageLocation: "left",
mainLabels: <Pill>Main Label</Pill>,
secondaryLabels: <Pill>Secondary Label</Pill>,
variant: "light",
},
};

Expand All @@ -34,20 +51,218 @@ export const Basic: Story = {
args: {},
};

export const Dark: Story = {
args: {
variant: "dark",
},
};

export const ImageOnTheRight: Story = {
args: {
children: (
<TitleAndDescription
title="Image on the right"
description="Why did the image move to the right? Because it was tired of being left out! Now it can finally see what's happening on the other side of the card. Some say it's getting a better view of the content this way."
/>
),
imageLocation: "right",
},
};

export const ImageOnTheTop: Story = {
args: {
children: (
<TitleAndDescription
title="Image on the top"
description="After enjoying the view from the right side, our adventurous image decided to aim even higher! Now it's living the high life at the top of the card, looking down on all the content below. Talk about a promotion in position!"
/>
),
imageLocation: "top",
},
};

export const ImageWithMainAndSecondaryLabels: Story = {
args: {
children: (
<TitleAndDescription
title="Image with main and secondary labels"
description="After exploring different positions, our image decided it needed some accessories! Now it's showing off its fancy collection of labels - both main and secondary ones. Like a fashionista with a new wardrobe, it's strutting its stuff with tags that make it stand out from the crowd!"
/>
),
image: (
<CardContent.Image
mainLabels={
<>
<Tag variant="event">Tag 1</Tag>
<Tag variant="event">Tag 2</Tag>
</>
}
secondaryLabels={
<>
<Tag variant="event">Tag 3</Tag>
<Tag variant="event">Tag 4</Tag>
</>
}
>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={580}
/>
</CardContent.Image>
),
},
};

/** For a Tagline card, use `CardContent.Tagline` and no image. */
export const WithTagline: Story = {
args: {
image: undefined,
imageLocation: undefined,
children: (
<CardContent.Tagline
title="Do something now!"
buttons={
<>
<Button variant="primary" size="lg">
Button
</Button>
<Button variant="secondary" size="lg">
Second Button
</Button>
</>
}
/>
),
},
};

/** Set the "secondary" variant and "clickable" to get a hover, use `asChild` to have an `a` tag as the root element, then use `CardContent.Link` to render the content. */
export const Link: Story = {
args: {
variant: "secondary",
clickable: true,
asChild: true,
image: undefined,
children: (
<a href="#something" target="_self" className="ink:no-underline">
<CardContent.Link
icon={<InkIcon.InkLogo />}
title="Join the Ink Revolution!"
description="Did you know that Ink's design system is like a chameleon for your UI? Just like these color-changing lizards adapt to their environment, Ink components seamlessly blend into any design while maintaining their unique personality. Just fabulous, adaptable UI!"
/>
</a>
),
},
};

export const LargeLinks: Story = {
args: {
image: (
<CardContent.Image mainLabels={<Tag variant="event">Main Label</Tag>}>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={1024}
/>
</CardContent.Image>
),
children: (
<>
<TitleAndDescription
title="Links Galore"
description="Links are the backbone of the web! They connect us, guide us, and make the internet what it is today. At Ink, we love links so much we've made them beautiful, accessible, and a joy to use. Click around and experience the magic of web navigation!"
/>
<CardContent.LargeLinks>
<CardContent.LargeLink asChild>
<a href="#design-tips" target="_self" className="ink:no-underline">
Design Tips & Tricks
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#color-theory" target="_self" className="ink:no-underline">
Color Theory 101
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#typography" target="_self" className="ink:no-underline">
Typography Essentials
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a
href="#accessibility"
target="_self"
className="ink:no-underline"
>
Accessibility Best Practices
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#animations" target="_self" className="ink:no-underline">
Animation Fundamentals
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#responsive" target="_self" className="ink:no-underline">
Responsive Design Guide
</a>
</CardContent.LargeLink>
</CardContent.LargeLinks>
</>
),
},
};

export const LargeCardInfo: Story = {
args: {
image: (
<CardContent.Image mainLabels={<Tag variant="event">Main Label</Tag>}>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={1024}
/>
</CardContent.Image>
),
children: (
<>
<TitleAndDescription title="Fun Activities Around Town" />
<CardContent.CardInfo>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Apps className="ink:size-3" />}
title="Pizza Making Class"
description="Learn to toss dough and create your perfect pizza with our expert chefs."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Bridge className="ink:size-3" />}
title="Paint & Sip Night"
description="Enjoy wine while creating your masterpiece in this relaxing art class."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Social.Telegram className="ink:size-3" />}
title="Live Jazz Night"
description="Swing by for smooth tunes and great vibes at our local jazz club."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Deposit className="ink:size-3" />}
title="Community Garden"
description="Get your hands dirty and learn about urban farming with neighbors."
/>
</Card>
<Card className="ink:lg:col-span-2" variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Sun className="ink:size-3" />}
title="Weekend Food Festival"
description="Sample delicious treats from local vendors and enjoy live entertainment all weekend long."
/>
</Card>
</CardContent.CardInfo>
</>
),
},
};
Loading
Loading