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 10, 2025
1 parent 72ace3e commit 50710b8
Show file tree
Hide file tree
Showing 22 changed files with 593 additions and 121 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
209 changes: 188 additions & 21 deletions src/components/Card/Card.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,42 @@
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",
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">Main Label</Tag>}
secondaryLabels={<Tag variant="event">Secondary Label</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,12 +47,6 @@ export const Basic: Story = {
args: {},
};

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

export const ImageOnTheRight: Story = {
args: {
imageLocation: "right",
Expand All @@ -51,3 +58,163 @@ export const ImageOnTheTop: Story = {
imageLocation: "top",
},
};

/** 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="Do something now!"
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."
/>
</a>
),
},
};

export const LargeLinks: Story = {
args: {
image: (
<CardContent.Image
mainLabels={<Tag variant="event">Main Label</Tag>}
secondaryLabels={<Tag variant="event">Secondary Label</Tag>}
>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={1024}
/>
</CardContent.Image>
),
children: (
<>
<TitleAndDescription
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."
/>
<CardContent.LargeLinks>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 1
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 2
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 3
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 4
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 5
</a>
</CardContent.LargeLink>
<CardContent.LargeLink asChild>
<a href="#something" target="_self" className="ink:no-underline">
Link 6
</a>
</CardContent.LargeLink>
</CardContent.LargeLinks>
</>
),
},
};

export const LargeCardInfo: Story = {
args: {
image: (
<CardContent.Image
mainLabels={<Tag variant="event">Main Label</Tag>}
secondaryLabels={<Tag variant="event">Secondary Label</Tag>}
>
<img
src="https://picsum.photos/1024/576"
alt="Card Image"
width={1024}
height={1024}
/>
</CardContent.Image>
),
children: (
<>
<TitleAndDescription title="Card Example" />
<CardContent.CardInfo>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Settings className="ink:size-3" />}
title="Card Example 1"
description="Configure basic settings and preferences."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Settings className="ink:size-3" />}
title="Card Example 2"
description="Manage user permissions and access controls for your organization."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Settings className="ink:size-3" />}
title="Card Example 3"
description="View and analyze usage statistics and metrics."
/>
</Card>
<Card variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Settings className="ink:size-3" />}
title="Card Example 4"
description="Set up automated workflows and integrations with other tools."
/>
</Card>
<Card className="ink:lg:col-span-2" variant="secondary">
<CardContent.Tiny
icon={<InkIcon.Settings className="ink:size-3" />}
title="Card Example 5"
description="Customize the appearance and behavior of your dashboard."
/>
</Card>
</CardContent.CardInfo>
</>
),
},
};
Loading

0 comments on commit 50710b8

Please sign in to comment.