Skip to content

Commit

Permalink
feat: update Card to support all cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@fran-ink
fran-ink committed Feb 11, 2025
1 parent 72ace3e commit d6efeab
Show file tree
Hide file tree
Showing 23 changed files with 656 additions and 125 deletions.
2 changes: 1 addition & 1 deletion src/components/Button/Button.tsx
View file
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
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

0 comments on commit d6efeab

Please sign in to comment.