Skip to content

Commit

Permalink
feat: add Prose component
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtiala
jtiala committed Jan 25, 2024
1 parent 17b2cde commit 982f166
Show file tree
Hide file tree
Showing 25 changed files with 765 additions and 413 deletions.
7 changes: 2 additions & 5 deletions apps/docs/stories/Layout/Stack.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Stack } from "@themeless-ui/react";
import { SizeElement } from "../../utils";

const meta = {
title: "Layout/Stack",
Expand All @@ -10,11 +11,7 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

const children = [
<div key="1">1</div>,
<div key="2">2</div>,
<div key="3">3</div>,
];
const children = [...Array(3).keys()].map((n) => <SizeElement key={n} />);

export const Vertical: Story = {
args: {
Expand Down
14 changes: 13 additions & 1 deletion apps/docs/stories/Typography/Blockquote.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Blockquote, Paragraph } from "@themeless-ui/react";
import { Blockquote, Paragraph, Prose } from "@themeless-ui/react";

const meta = {
title: "Typography/Blockquote",
Expand Down Expand Up @@ -41,3 +41,15 @@ export const WithoutAuthor: Story = {
children,
},
};

export const UsingWithProse = {
render: () => (
<Prose>
<Paragraph>{lipsum}</Paragraph>
<Blockquote cite={cite} author={author} source={source}>
{lipsum}
</Blockquote>
<Paragraph>{lipsum}</Paragraph>
</Prose>
),
};
83 changes: 39 additions & 44 deletions apps/docs/stories/Typography/Heading.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Heading, Paragraph } from "@themeless-ui/react";
import { Heading, Paragraph, Prose } from "@themeless-ui/react";
import { ExampleStack } from "../../utils";

const meta = {
title: "Typography/Heading",
Expand All @@ -24,57 +25,51 @@ export const Default: Story = {

export const Levels = {
render: () => (
<div>
<div>
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<Heading level={5}>Heading 5</Heading>
<Heading level={6}>Heading 6</Heading>
</div>
</div>
<ExampleStack>
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<Heading level={5}>Heading 5</Heading>
<Heading level={6}>Heading 6</Heading>
</ExampleStack>
),
};

export const LongContent = {
render: () => (
<div>
<div>
<Heading level={1}>Heading 1 &mdash; {lipsum}</Heading>
<Heading level={2}>Heading 2 &mdash; {lipsum}</Heading>
<Heading level={3}>Heading 3 &mdash; {lipsum}</Heading>
<Heading level={4}>Heading 4 &mdash; {lipsum}</Heading>
<Heading level={5}>Heading 5 &mdash; {lipsum}</Heading>
<Heading level={6}>Heading 6 &mdash; {lipsum}</Heading>
</div>
</div>
<ExampleStack>
<Heading level={1}>Heading 1 &mdash; {lipsum}</Heading>
<Heading level={2}>Heading 2 &mdash; {lipsum}</Heading>
<Heading level={3}>Heading 3 &mdash; {lipsum}</Heading>
<Heading level={4}>Heading 4 &mdash; {lipsum}</Heading>
<Heading level={5}>Heading 5 &mdash; {lipsum}</Heading>
<Heading level={6}>Heading 6 &mdash; {lipsum}</Heading>
</ExampleStack>
),
};

export const UsingWithParagraphs = {
export const UsingWithProse = {
render: () => (
<div>
<div>
<Heading level={1}>Heading 1</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={2}>Heading 2</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={3}>Heading 3</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={4}>Heading 4</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={5}>Heading 5</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={6}>Heading 6</Heading>
{lipsumParagraph}
{lipsumParagraph}
</div>
</div>
<Prose>
<Heading level={1}>Heading 1</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={2}>Heading 2</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={3}>Heading 3</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={4}>Heading 4</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={5}>Heading 5</Heading>
{lipsumParagraph}
{lipsumParagraph}
<Heading level={6}>Heading 6</Heading>
{lipsumParagraph}
{lipsumParagraph}
</Prose>
),
};
161 changes: 160 additions & 1 deletion apps/docs/stories/Typography/List.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { List } from "@themeless-ui/react";
import { Heading, List, Paragraph, Prose } from "@themeless-ui/react";
import { ExampleGrid, ExampleItem } from "../../utils";

const meta = {
title: "Typography/List",
Expand All @@ -16,6 +17,9 @@ const children = [
<List.Item key="3">Consectetur adipiscing elit</List.Item>,
];

const lipsum =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan ex vel lacinia volutpat. Ut ultricies, mauris et varius finibus, nulla ante efficitur libero, eget convallis odio ex ut neque. Praesent quis odio ac felis pretium pharetra sit amet quis neque. Nam nec libero purus. Maecenas sagittis lobortis lacinia. Aliquam non vehicula metus. Vivamus fringilla ante eget leo pretium cursus. Morbi venenatis diam metus, ut faucibus dolor mollis a. Nulla nec ex sapien. Curabitur a tempor est. Mauris faucibus congue mi, sit amet pulvinar justo porttitor nec. Nunc et eros a est fermentum lacinia id at nisi.";

export const UnorderedList: Story = {
args: {
type: "unordered",
Expand All @@ -29,3 +33,158 @@ export const OrderedList: Story = {
children,
},
};

export const NestedLists: Story = {
render: () => {
const unordered = (
<List>
<List.Item>
First level
<List>
<List.Item>
Second level
<List>
<List.Item>
Third level
<List>
<List.Item>Fourth level</List.Item>
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>
First level
<List>
<List.Item>
Second level
<List>
<List.Item>
Third level
<List>
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>Second level</List.Item>
</List>
</List.Item>
</List>
);

const ordered = (
<List type="ordered">
<List.Item>
First level
<List type="ordered">
<List.Item>
Second level
<List type="ordered">
<List.Item>
Third level
<List type="ordered">
<List.Item>Fourth level</List.Item>
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>
First level
<List type="ordered">
<List.Item>
Second level
<List type="ordered">
<List.Item>
Third level
<List type="ordered">
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>Second level</List.Item>
</List>
</List.Item>
</List>
);

const mixed = (
<List type="ordered">
<List.Item>
First level
<List>
<List.Item>
Second level
<List type="ordered">
<List.Item>
Third level
<List>
<List.Item>Fourth level</List.Item>
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>
First level
<List type="ordered">
<List.Item>
Second level
<List>
<List.Item>
Third level
<List type="ordered">
<List.Item>Fourth level</List.Item>
</List>
</List.Item>
</List>
</List.Item>
<List.Item>Second level</List.Item>
</List>
</List.Item>
</List>
);

return (
<ExampleGrid columns={6}>
<ExampleItem title="Unordered">{unordered}</ExampleItem>
<ExampleItem title="Ordered">{ordered}</ExampleItem>
<ExampleItem title="Mixed">{mixed}</ExampleItem>
<ExampleItem title="Unordered with Prose">
<Prose>{unordered}</Prose>
</ExampleItem>
<ExampleItem title="Ordered with Prose">
<Prose>{ordered}</Prose>
</ExampleItem>
<ExampleItem title="Mixed with Prose">
<Prose>{mixed}</Prose>
</ExampleItem>
</ExampleGrid>
);
},
};

export const UsingWithProse = {
render: () => (
<Prose>
<Heading level={1}>Heading 1</Heading>
<Paragraph>{lipsum}</Paragraph>
<List>{children}</List>
<Paragraph>{lipsum}</Paragraph>
<Heading level={2}>Heading 2</Heading>
<List type="ordered">{children}</List>
<Heading level={3}>Heading 3</Heading>
<List>{children}</List>
<Paragraph>{lipsum}</Paragraph>
<List>{children}</List>
</Prose>
),
};
28 changes: 16 additions & 12 deletions apps/docs/stories/Typography/Paragraph.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Paragraph, Text } from "@themeless-ui/react";
import { Paragraph, Prose, Text } from "@themeless-ui/react";

const meta = {
title: "Typography/Paragraph",
Expand All @@ -19,19 +19,23 @@ export const Default: Story = {
},
};

export const UsingWithText = {
export const UsingWithProse = {
render: () => (
<>
<Prose>
<Paragraph>{lipsum}</Paragraph>
<Paragraph>
<Text type="del">Lorem ipsum dolor sit amet</Text>
<Text type="ins">Donec accumsan ex vellacinia volutpat.</Text> Ut
tricies, <Text type="mark">mauris</Text> et{" "}
<Text type="small">varius</Text> finibus,{" "}
<Text type="strong">nulla ante</Text> efficitur libero, eget convallis{" "}
<Text type="code">odio ex ut</Text> neque.
</Paragraph>
<Paragraph>{lipsum}</Paragraph>
</>
</Prose>
),
};

export const UsingWithText = {
render: () => (
<Paragraph>
<Text type="del">Lorem ipsum dolor sit amet</Text>
<Text type="ins">Donec accumsan ex vellacinia volutpat.</Text> Ut tricies,{" "}
<Text type="mark">mauris</Text> et <Text type="small">varius</Text>{" "}
finibus, <Text type="strong">nulla ante</Text> efficitur libero, eget
convallis <Text type="code">odio ex ut</Text> neque.
</Paragraph>
),
};
Loading

0 comments on commit 982f166

Please sign in to comment.