From a193e7f631fa9a06e4ab5a2881ce9e1898b70404 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sat, 4 Jan 2025 08:52:09 +0100 Subject: [PATCH] =?UTF-8?q?Use=20composeStories()=20from=20Storybook=20?= =?UTF-8?q?=F0=9F=94=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Charles de Dreuille --- microsite-canon/content/button.mdx | 26 ++-- microsite-canon/content/stack.mdx | 1 + microsite-canon/package.json | 1 + microsite-canon/snippets/box.tsx | 14 +- microsite-canon/snippets/button.tsx | 121 ++++-------------- microsite-canon/snippets/checkbox.tsx | 35 ++--- microsite-canon/snippets/container.tsx | 14 +- microsite-canon/snippets/grid.tsx | 16 +-- microsite-canon/snippets/heading.tsx | 41 +++--- microsite-canon/snippets/icon.tsx | 14 +- microsite-canon/snippets/inline.tsx | 30 +---- microsite-canon/snippets/stack.tsx | 18 +-- microsite-canon/snippets/text.tsx | 95 +++----------- .../canon/src/components/Box/Box.stories.tsx | 43 +++++-- .../src/components/Button/Button.stories.tsx | 64 ++++++--- .../components/Checkbox/Checkbox.stories.tsx | 31 ++++- .../Container/Container.stories.tsx | 28 +++- .../src/components/Grid/Grid.stories.tsx | 18 ++- .../components/Heading/Heading.stories.tsx | 32 +++-- .../src/components/Icon/Icon.stories.tsx | 2 +- .../src/components/Inline/Inline.stories.tsx | 59 +++------ .../src/components/Stack/Stack.stories.tsx | 119 +++++++++-------- .../src/components/Text/Text.stories.tsx | 80 ++++++++++-- yarn.lock | 1 + 24 files changed, 450 insertions(+), 453 deletions(-) diff --git a/microsite-canon/content/button.mdx b/microsite-canon/content/button.mdx index 08ebf15b38..9e212a0d84 100644 --- a/microsite-canon/content/button.mdx +++ b/microsite-canon/content/button.mdx @@ -3,12 +3,12 @@ import { Snippet } from '../components/Snippet'; import { Tabs } from '../components/Tabs'; import { CodeBlock } from '../components/CodeBlock'; import { - Button1, - Button2, - Button3, - Button4, - Button5, - Button6, + ButtonPreview, + ButtonSizes, + ButtonWithIcons, + ButtonFullWidth, + ButtonDisabled, + ButtonResponsive, } from '../snippets/button'; import { buttonVariants } from './_snippets'; @@ -19,7 +19,7 @@ A button component that can be used to trigger actions. } + preview={} code={` @@ -124,7 +124,7 @@ Here's a view when buttons have icons. align="center" py={4} open - preview={} + preview={} code={` @@ -140,7 +140,7 @@ Here's a view when buttons are full width. align="center" py={4} open - preview={} + preview={} code={` `} @@ -154,7 +154,7 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} + preview={} code={``} /> @@ -166,7 +166,7 @@ Here's a view when buttons are responsive. align="center" py={4} open - preview={} + preview={} code={` - - - - ); +export const ButtonSizes = () => { + const { Sizes } = composeStories(ButtonStories); + + return ; }; -export const Button2 = () => { - return ( - - - - - ); +export const ButtonWithIcons = () => { + const { WithIcons } = composeStories(ButtonStories); + + return ; }; -export const Button3 = () => { - return ( - - - - - - ); +export const ButtonFullWidth = () => { + const { FullWidth } = composeStories(ButtonStories); + + return ; }; -export const Button4 = () => { - return ( - - - - ); +export const ButtonDisabled = () => { + const { Disabled } = composeStories(ButtonStories); + + return ; }; -export const Button5 = () => { - return ; -}; +export const ButtonResponsive = () => { + const { Responsive } = composeStories(ButtonStories); -export const Button6 = () => { // TODO: Add responsive button return null; - return ( - - ); + return ; }; export const ButtonPlayground = () => { - return ( - - {variants.map(variant => ( - - {capitalizeFirstLetter(variant as string)} - {['small', 'medium'].map(size => ( - - - - - - ))} - - ))} - - ); + const { Playground } = composeStories(ButtonStories); + + return ; }; diff --git a/microsite-canon/snippets/checkbox.tsx b/microsite-canon/snippets/checkbox.tsx index eef2134d7a..231ce6864b 100644 --- a/microsite-canon/snippets/checkbox.tsx +++ b/microsite-canon/snippets/checkbox.tsx @@ -1,31 +1,22 @@ -import { Text } from '@backstage/canon'; -import { Stack, Inline, Checkbox } from '@backstage/canon'; +'use client'; + +import * as CheckboxStories from '../../packages/canon/src/components/Checkbox/Checkbox.stories'; +import { composeStories } from '@storybook/react'; export const CheckboxPreview = () => { - return ; + const { Default } = composeStories(CheckboxStories); + + return ; }; export const CheckboxAllVariants = () => { - return ( - - - - - - - ); + const { AllVariants } = composeStories(CheckboxStories); + + return ; }; export const CheckboxPlayground = () => { - return ( - - All variants - - - - - - - - ); + const { Playground } = composeStories(CheckboxStories); + + return ; }; diff --git a/microsite-canon/snippets/container.tsx b/microsite-canon/snippets/container.tsx index a74d7325ea..32205447a1 100644 --- a/microsite-canon/snippets/container.tsx +++ b/microsite-canon/snippets/container.tsx @@ -1,10 +1,10 @@ -import { Container } from '@backstage/canon'; -import { DecorativeBox } from '../components/DecorativeBox'; +'use client'; + +import { composeStories } from '@storybook/react'; +import * as ContainerStories from '../../packages/canon/src/components/Container/Container.stories'; export const ContainerPreview = () => { - return ( -
- -
- ); + const { Preview } = composeStories(ContainerStories); + + return ; }; diff --git a/microsite-canon/snippets/grid.tsx b/microsite-canon/snippets/grid.tsx index 82ef3a0daa..8f1a8d64db 100644 --- a/microsite-canon/snippets/grid.tsx +++ b/microsite-canon/snippets/grid.tsx @@ -1,12 +1,10 @@ -import { Grid } from '@backstage/canon'; -import { DecorativeBox } from '../components/DecorativeBox'; +'use client'; + +import { composeStories } from '@storybook/react'; +import * as GridStories from '../../packages/canon/src/components/Grid/Grid.stories'; export const GridPreview = () => { - return ( - - - - - - ); + const { Default } = composeStories(GridStories); + + return ; }; diff --git a/microsite-canon/snippets/heading.tsx b/microsite-canon/snippets/heading.tsx index 79b1ac458a..7c9fb23448 100644 --- a/microsite-canon/snippets/heading.tsx +++ b/microsite-canon/snippets/heading.tsx @@ -1,39 +1,30 @@ -import { Text, Heading } from '@backstage/canon'; -import { Stack } from '@backstage/canon'; +'use client'; + +import * as HeadingStories from '../../packages/canon/src/components/Heading/Heading.stories'; +import { composeStories } from '@storybook/react'; export const HeadingPreview = () => { - return Look mum, no hands!; + const { Title1 } = composeStories(HeadingStories); + + return ; }; export const HeadingAllVariants = () => { - return ( - - Display - Title 1 - Title 2 - Title 3 - Title 4 - Title 5 - - ); + const { AllVariants } = composeStories(HeadingStories); + + return ; }; export const HeadingResponsive = () => { + const { Responsive } = composeStories(HeadingStories); + // TODO: Add responsive heading return null; - return Responsive; + return ; }; export const HeadingPlayground = () => { - return ( - - All variants - Display - Title 1 - Title 2 - Title 3 - Title 4 - Title 5 - - ); + const { Playground } = composeStories(HeadingStories); + + return ; }; diff --git a/microsite-canon/snippets/icon.tsx b/microsite-canon/snippets/icon.tsx index de0e804203..975adfa9e7 100644 --- a/microsite-canon/snippets/icon.tsx +++ b/microsite-canon/snippets/icon.tsx @@ -1,10 +1,10 @@ -import { Icon } from '@backstage/canon'; -import { Stack } from '@backstage/canon'; +'use client'; + +import * as IconStories from '../../packages/canon/src/components/Icon/Icon.stories'; +import { composeStories } from '@storybook/react'; export const IconPreview = () => { - return ( - - - - ); + const { Default } = composeStories(IconStories); + + return ; }; diff --git a/microsite-canon/snippets/inline.tsx b/microsite-canon/snippets/inline.tsx index 3cdd672925..3f5c0f6e64 100644 --- a/microsite-canon/snippets/inline.tsx +++ b/microsite-canon/snippets/inline.tsx @@ -1,26 +1,10 @@ -import { Inline } from '@backstage/canon'; -import { DecorativeBox } from '../components/DecorativeBox'; +'use client'; + +import * as InlineStories from '../../packages/canon/src/components/Inline/Inline.stories'; +import { composeStories } from '@storybook/react'; export const InlinePreview = () => { - return ( - - - - - - - - - - - - - - - - - - - - ); + const { Default } = composeStories(InlineStories); + + return ; }; diff --git a/microsite-canon/snippets/stack.tsx b/microsite-canon/snippets/stack.tsx index 4aabffcbc1..2274a3d434 100644 --- a/microsite-canon/snippets/stack.tsx +++ b/microsite-canon/snippets/stack.tsx @@ -1,14 +1,10 @@ -import { Stack } from '@backstage/canon'; -import { DecorativeBox } from '../components/DecorativeBox'; +'use client'; + +import * as StackStories from '../../packages/canon/src/components/Stack/Stack.stories'; +import { composeStories } from '@storybook/react'; export const StackPreview = () => { - return ( -
- - - - - -
- ); + const { Default } = composeStories(StackStories); + + return ; }; diff --git a/microsite-canon/snippets/text.tsx b/microsite-canon/snippets/text.tsx index 45508033d8..4ce93c2777 100644 --- a/microsite-canon/snippets/text.tsx +++ b/microsite-canon/snippets/text.tsx @@ -1,93 +1,36 @@ -import { Text } from '@backstage/canon'; -import { Stack } from '@backstage/canon'; +'use client'; + +import * as TextStories from '../../packages/canon/src/components/Text/Text.stories'; +import { composeStories } from '@storybook/react'; export const TextPreview = () => { - return ( - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is in - the painting? - - ); + const { Default } = composeStories(TextStories); + + return ; }; export const TextAllVariants = () => { - return ( - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - ); + const { AllVariants } = composeStories(TextStories); + + return ; }; export const TextAllWeights = () => { - return ( - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - ); + const { AllWeights } = composeStories(TextStories); + + return ; }; export const TextResponsive = () => { + const { Responsive } = composeStories(TextStories); + // TODO: Add responsive text return null; - return Responsive; + return ; }; export const TextPlayground = () => { - return ( - - Subtitle - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - Body - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - Caption - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - Label - - A man looks at a painting in a museum and says, “Brothers and sisters I - have none, but that man's father is my father's son.” Who is - in the painting? - - - ); + const { Playground } = composeStories(TextStories); + + return ; }; diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index a1b8400726..526de26ae2 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -40,22 +40,28 @@ const meta = { export default meta; type Story = StoryObj; -export const Basic: Story = { +export const Default: Story = { args: { style: { - background: '#1f47ff', - color: 'white', - padding: '4px 8px', + width: '64px', + height: '64px', + background: '#eaf2fd', borderRadius: '4px', + border: '1px solid #2563eb', + color: '#2563eb', + backgroundImage: + 'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")', }, - children: 'Basic Box', }, }; export const Display: Story = { args: { style: { - ...Basic.args?.style, + ...Default.args?.style, + width: 'auto', + height: 'auto', + padding: '8px', }, }, render: args => ( @@ -84,7 +90,10 @@ export const Display: Story = { export const FlexDirection: Story = { args: { style: { - ...Basic.args?.style, + ...Default.args?.style, + width: 'auto', + height: 'auto', + padding: '8px', }, display: 'flex', gap: 'xs', @@ -110,8 +119,10 @@ export const FlexDirection: Story = { export const JustifyContent: Story = { args: { style: { - ...Basic.args?.style, + ...Default.args?.style, width: '200px', + height: 'auto', + padding: '8px', }, display: 'flex', gap: 'xs', @@ -153,9 +164,10 @@ export const JustifyContent: Story = { export const AlignItems: Story = { args: { style: { - ...Basic.args?.style, + ...Default.args?.style, width: '200px', height: '100px', + padding: '8px', }, display: 'flex', gap: 'xs', @@ -289,8 +301,10 @@ export const Margin: Story = { export const FlexWrap: Story = { args: { style: { - ...Basic.args?.style, + ...Default.args?.style, width: '200px', + height: 'auto', + padding: '8px', }, display: 'flex', gap: 'xs', @@ -328,11 +342,14 @@ export const FlexWrap: Story = { export const BorderRadius: Story = { args: { style: { - background: '#1f47ff', - color: 'white', - padding: '4px 8px', width: '64px', height: '64px', + background: '#eaf2fd', + border: '1px solid #2563eb', + color: '#2563eb', + backgroundImage: + 'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")', + padding: '4px 8px', }, display: 'flex', alignItems: 'center', diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index 1659545d49..2a62053df9 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -20,6 +20,8 @@ import { Button } from './Button'; import { Inline } from '../Inline'; import { Stack } from '../Stack'; import { Text } from '../Text'; +import { ButtonProps } from './types'; + const meta = { title: 'Button', component: Button, @@ -37,12 +39,6 @@ const meta = { export default meta; type Story = StoryObj; -export const Primary: Story = { - args: { - children: 'Primary button', - }, -}; - export const Variants: Story = { args: { children: 'Button', @@ -56,9 +52,15 @@ export const Variants: Story = { }, render: () => ( - - - + + + ), }; @@ -123,20 +125,46 @@ export const Responsive: Story = { }, }; +const variants: string[] = ['primary', 'secondary', 'tertiary']; + export const Playground: Story = { args: { children: 'Button', }, - render: args => ( + render: () => ( - - Primary - - + + + + ))} + + ))} ), }; diff --git a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx index af2d24dd9a..9841450b41 100644 --- a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx @@ -14,8 +14,12 @@ * limitations under the License. */ +import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Checkbox } from './Checkbox'; +import { Inline } from '../Inline'; +import { Stack } from '../Stack'; +import { Text } from '../Text'; const meta = { title: 'Checkbox', @@ -28,8 +32,33 @@ const meta = { export default meta; type Story = StoryObj; -export const Primary: Story = { +export const Default: Story = { args: { label: 'Accept terms and conditions', }, }; + +export const AllVariants: Story = { + render: () => ( + + + + + + + ), +}; + +export const Playground: Story = { + render: () => ( + + All variants + + + + + + + + ), +}; diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx index 48a69f762d..514880ce20 100644 --- a/packages/canon/src/components/Container/Container.stories.tsx +++ b/packages/canon/src/components/Container/Container.stories.tsx @@ -30,26 +30,40 @@ const meta = { control: 'text', }, }, - parameters: { - layout: 'fullscreen', - }, } satisfies Meta; export default meta; type Story = StoryObj; -const FakeBox = () => ( +const DecorativeBox = () => ( ); export const Default: Story = { - args: {}, + parameters: { + layout: 'fullscreen', + }, render: args => ( - + ), }; + +export const Preview: Story = { + render: () => ( +
+ +
+ ), +}; diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx index b8374eb593..4d659dd87e 100644 --- a/packages/canon/src/components/Grid/Grid.stories.tsx +++ b/packages/canon/src/components/Grid/Grid.stories.tsx @@ -43,7 +43,14 @@ type Story = StoryObj; const FakeBox = () => ( ); @@ -103,7 +110,14 @@ export const RowAndColumns: Story = { diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx index 8add2ca613..8709f79889 100644 --- a/packages/canon/src/components/Heading/Heading.stories.tsx +++ b/packages/canon/src/components/Heading/Heading.stories.tsx @@ -18,20 +18,19 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from './Heading'; import { Stack } from '../Stack'; - +import { Text } from '../Text'; const meta = { title: 'Heading', component: Heading, + args: { + children: 'Heading', + }, } satisfies Meta; export default meta; type Story = StoryObj; -export const Default: Story = { - args: { - children: 'Heading', - }, -}; +export const Default: Story = {}; export const Title1: Story = { args: { @@ -41,11 +40,8 @@ export const Title1: Story = { }; export const AllVariants: Story = { - args: { - children: 'Heading', - }, render: () => ( - + Display Title 1 Title 2 @@ -57,7 +53,6 @@ export const AllVariants: Story = { export const Responsive: Story = { args: { - ...Default.args, variant: { xs: 'title4', md: 'display', @@ -67,8 +62,21 @@ export const Responsive: Story = { export const CustomTag: Story = { args: { - ...Default.args, variant: 'title5', as: 'h2', }, }; + +export const Playground: Story = { + render: () => ( + + All variants + Display + Title 1 + Title 2 + Title 3 + Title 4 + Title 5 + + ), +}; diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx index 173ff9ae3c..c8932ca7f8 100644 --- a/packages/canon/src/components/Icon/Icon.stories.tsx +++ b/packages/canon/src/components/Icon/Icon.stories.tsx @@ -40,7 +40,7 @@ const meta = { export default meta; type Story = StoryObj; -export const Primary: Story = { +export const Default: Story = { args: { name: 'heart', }, diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx index 060edc8a97..db9e60b9ef 100644 --- a/packages/canon/src/components/Inline/Inline.stories.tsx +++ b/packages/canon/src/components/Inline/Inline.stories.tsx @@ -41,6 +41,9 @@ const meta = { control: 'text', }, }, + args: { + children: 'hello world', + }, } satisfies Meta; export default meta; @@ -52,33 +55,12 @@ const fakeBlockList = [ { width: 80, height: 50 }, { width: 120, height: 70 }, { width: 95, height: 65 }, - { width: 110, height: 55 }, + { width: 80, height: 32 }, { width: 130, height: 60 }, { width: 100, height: 80 }, { width: 140, height: 45 }, { width: 85, height: 70 }, { width: 125, height: 50 }, - { width: 105, height: 75 }, - { width: 115, height: 65 }, - { width: 135, height: 55 }, - { width: 90, height: 60 }, - { width: 145, height: 80 }, - { width: 75, height: 45 }, - { width: 155, height: 70 }, - { width: 60, height: 50 }, - { width: 160, height: 75 }, - { width: 70, height: 65 }, - { width: 150, height: 55 }, - { width: 95, height: 60 }, - { width: 120, height: 80 }, - { width: 85, height: 45 }, - { width: 130, height: 70 }, - { width: 100, height: 50 }, - { width: 140, height: 75 }, - { width: 110, height: 65 }, - { width: 125, height: 55 }, - { width: 105, height: 60 }, - { width: 145, height: 80 }, ]; const FakeBox = ({ @@ -90,67 +72,66 @@ const FakeBox = ({ }) => ( ); export const Default: Story = { - args: { - children: ( - <> - {fakeBlockList.map((block, index) => ( - - ))} - - ), - }, + render: () => ( + + {fakeBlockList.map((block, index) => ( + + ))} + + ), }; export const AlignLeft: Story = { args: { - ...Default.args, align: 'left', }, }; export const AlignCenter: Story = { args: { - ...Default.args, align: 'center', }, }; export const AlignRight: Story = { args: { - ...Default.args, align: 'right', }, }; export const VerticalAlignTop: Story = { args: { - ...Default.args, alignY: 'top', }, }; export const VerticalAlignCenter: Story = { args: { - ...Default.args, alignY: 'center', }, }; export const VerticalAlignBottom: Story = { args: { - ...Default.args, alignY: 'bottom', }, }; export const LargeGap: Story = { args: { - ...Default.args, gap: 'xl', }, }; diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx index 9c7ff604f3..2dce4d9645 100644 --- a/packages/canon/src/components/Stack/Stack.stories.tsx +++ b/packages/canon/src/components/Stack/Stack.stories.tsx @@ -17,7 +17,6 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Stack } from './Stack'; -import { Box } from '../Box/Box'; const meta = { title: 'Stack', @@ -40,81 +39,97 @@ const meta = { args: { align: 'left', gap: 'xs', + children: 'hello world', }, } satisfies Meta; export default meta; type Story = StoryObj; -const FakeBox = () => ( - - Fake Box - -); +const DecorativeBox = () => { + return ( +
+ ); +}; export const Default: Story = { - args: { - children: ( - <> - - - - - ), - }, + render: () => ( +
+ + + + + +
+ ), }; export const AlignLeft: Story = { - args: { - ...Default.args, - align: 'left', - }, + render: () => ( + + + + + + ), }; export const AlignCenter: Story = { - args: { - ...Default.args, - align: 'center', - }, + render: () => ( + + + + + + ), }; export const AlignRight: Story = { - args: { - ...Default.args, - align: 'right', - }, + render: () => ( + + + + + + ), }; export const ResponsiveAlign: Story = { - args: { - ...Default.args, - align: { - xs: 'left', - md: 'center', - lg: 'right', - }, - }, + render: () => ( + + + + + + ), }; export const ResponsiveGap: Story = { - args: { - ...Default.args, - gap: { - xs: 'xs', - md: 'md', - lg: '2xl', - }, - }, + render: () => ( + + + + + + ), }; export const LargeGap: Story = { - args: { - ...Default.args, - gap: 'xl', - }, + render: () => ( + + + + + + ), }; diff --git a/packages/canon/src/components/Text/Text.stories.tsx b/packages/canon/src/components/Text/Text.stories.tsx index ca9a790c3f..cef09a6c16 100644 --- a/packages/canon/src/components/Text/Text.stories.tsx +++ b/packages/canon/src/components/Text/Text.stories.tsx @@ -22,6 +22,9 @@ import { Stack } from '../Stack'; const meta = { title: 'Text', component: Text, + args: { + children: 'Text', + }, } satisfies Meta; export default meta; @@ -30,42 +33,91 @@ type Story = StoryObj; export const Default: Story = { args: { children: - 'Lorem ipsum dolor sit amet consectetur. Nec arcu vel lacus magna adipiscing nisi mauris tortor viverra. Enim rhoncus quisque consectetur ligula diam ac lacus massa. Id interdum id pellentesque justo ut massa nibh amet. Odio massa in scelerisque tortor massa integer purus amet enim. Eros sit neque nullam facilisis. Purus massa dignissim aliquet purus eu in. Urna consequat ullamcorper arcu amet dictumst. Commodo praesent turpis fringilla tristique congue volutpat in. Nulla in nulla ultrices lacus. In ultrices id tellus ut.', + "A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?", + style: { maxWidth: '600px' }, }, }; export const AllVariants: Story = { - args: { - children: 'Text', - }, render: () => ( - Subtitle {Default.args?.children} - Body {Default.args?.children} - Caption {Default.args?.children} - Label {Default.args?.children} + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + ), }; export const AllWeights: Story = { - args: { - children: 'Text', - }, render: () => ( - Regular {Default.args?.children} - Bold {Default.args?.children} + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + ), }; export const Responsive: Story = { args: { - ...Default.args, variant: { xs: 'label', md: 'body', }, }, }; + +export const Playground: Story = { + render: () => ( + + Subtitle + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + Body + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + Caption + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + Label + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + ), +}; diff --git a/yarn.lock b/yarn.lock index 6d340cc8c6..f89e6a7243 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24623,6 +24623,7 @@ __metadata: "@mdx-js/loader": ^3.1.0 "@mdx-js/react": ^3.1.0 "@next/mdx": ^15.1.3 + "@storybook/react": ^8.4.7 "@types/mdx": ^2.0.13 "@types/node": ^20 "@types/react": ^19