Skip to content

Commit

Permalink
docs: adding Card to API docs (#763)
Browse files Browse the repository at this point in the history
  • Loading branch information
aversini authored Dec 18, 2024
1 parent e6f7ade commit d07602e
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/api/.storybook/preview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const preview = {
"Release Tags",
],
"Components",
["Bubble", "Button", "ButtonIcon", "buttonLink"],
["Bubble", "Button", "ButtonIcon", "ButtonLink", "Card"],
],
},
},
Expand Down
7 changes: 7 additions & 0 deletions packages/api/src/stories/Card.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Meta } from "@storybook/blocks";

import AutoDoc from "../helpers/AutoDoc";
import * as Stories from "./Card.stories";

<Meta title="Components/Card" of={Stories} />
<AutoDoc importName="Card" stage="stable" />
71 changes: 71 additions & 0 deletions packages/api/src/stories/Card.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Card } from "@versini/ui-card/src/components";

type Story = StoryObj<typeof Card>;

const meta: Meta<typeof Card> = {
parameters: {
layout: "centered",
docs: {
controls: { exclude: ["spacing"] },
},
},
title: "Components/Card",

component: Card,
args: {},
};

export default meta;

export const Basic: Story = {
args: {
header: "Dune",
footer: "Frank Herbert",
},
render: (args) => (
<div className="min-h-10">
<div className="flex flex-wrap gap-2">
<Card {...args}>
<p>
In the year 10191, a spice called melange is the most valuable
substance known in the universe, and its only source is the desert
planet Arrakis.
</p>

<p className="pt-4">
Paul Atreides, a brilliant and gifted young man born into a great
destiny beyond his understanding, must travel to the most dangerous
planet in the universe.
</p>
</Card>
</div>
</div>
),
};

export const Custom: Story = {
args: {
header: <h2 className="text-red-500">Dune</h2>,
footer: <h4 className="text-xs text-slate-400">Frank Herbert</h4>,
},
render: (args) => (
<div className="min-h-10">
<div className="flex flex-wrap gap-2">
<Card {...args}>
<p>
In the year 10191, a spice called melange is the most valuable
substance known in the universe, and its only source is the desert
planet Arrakis.
</p>

<p className="pt-4">
Paul Atreides, a brilliant and gifted young man born into a great
destiny beyond his understanding, must travel to the most dangerous
planet in the universe.
</p>
</Card>
</div>
</div>
),
};

0 comments on commit d07602e

Please sign in to comment.