From dac99ebd8708c6c0739f488120b1adb5c62d970c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 7 Jan 2025 15:38:58 +0000
Subject: [PATCH 1/2] Update stories on Storybook

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  |  43 +++++--
 .../src/components/Button/Button.stories.tsx  |  67 ++++++++--
 .../canon/src/components/Button/Button.tsx    |   5 +-
 packages/canon/src/components/Button/types.ts |   1 +
 .../components/Checkbox/Checkbox.stories.tsx  |  31 ++++-
 .../Container/Container.stories.tsx           |  28 +++--
 .../src/components/Grid/Grid.stories.tsx      |  18 ++-
 .../components/Heading/Heading.stories.tsx    |  32 +++--
 .../canon/src/components/Heading/Heading.tsx  |   1 +
 .../src/components/Icon/Icon.stories.tsx      |   6 +-
 packages/canon/src/components/Icon/icons.ts   |  10 +-
 packages/canon/src/components/Icon/index.tsx  |   1 +
 packages/canon/src/components/Icon/types.ts   |   3 +
 .../src/components/Inline/Inline.stories.tsx  |  59 +++------
 .../src/components/Stack/Stack.stories.tsx    | 119 ++++++++++--------
 ...Example1.stories.tsx => Table.stories.tsx} |  42 ++++---
 .../Table/stories/Table.stories.tsx           |  32 -----
 .../Table/stories/TableBody.stories.tsx       |  40 ------
 .../Table/stories/TableCaption.stories.tsx    |  30 -----
 .../Table/stories/TableCell.stories.tsx       |  30 -----
 .../Table/stories/TableFooter.stories.tsx     |  30 -----
 .../Table/stories/TableHead.stories.tsx       |  30 -----
 .../Table/stories/TableHeader.stories.tsx     |  40 ------
 .../Table/stories/TableRow.stories.tsx        |  42 -------
 .../src/components/Text/Text.stories.tsx      |  80 +++++++++---
 packages/canon/src/components/Text/Text.tsx   |   5 +-
 packages/canon/src/components/Text/types.ts   |   4 +-
 27 files changed, 378 insertions(+), 451 deletions(-)
 rename packages/canon/src/components/Table/{stories/Example1.stories.tsx => Table.stories.tsx} (86%)
 delete mode 100644 packages/canon/src/components/Table/stories/Table.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableBody.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableCaption.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableCell.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableFooter.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableHead.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableHeader.stories.tsx
 delete mode 100644 packages/canon/src/components/Table/stories/TableRow.stories.tsx

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index bd4e597fa0..d11f9fbab7 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<typeof meta>;
 
-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 c921efa6f2..728098970c 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -19,13 +19,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import { Inline } from '../Inline';
 import { Stack } from '../Stack';
+import { Text } from '../Text';
+import { ButtonProps } from './types';
 
 const meta = {
   title: 'Components/Button',
   component: Button,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
     size: {
       control: 'select',
@@ -40,12 +39,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {
-    children: 'Primary button',
-  },
-};
-
 export const Variants: Story = {
   args: {
     children: 'Button',
@@ -59,9 +52,15 @@ export const Variants: Story = {
   },
   render: () => (
     <Inline alignY="center">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="tertiary">Tertiary</Button>
+      <Button iconStart="cloud" variant="primary">
+        Button
+      </Button>
+      <Button iconStart="cloud" variant="secondary">
+        Button
+      </Button>
+      <Button iconStart="cloud" variant="tertiary">
+        Button
+      </Button>
     </Inline>
   ),
 };
@@ -125,3 +124,47 @@ export const Responsive: Story = {
     },
   },
 };
+
+const variants: string[] = ['primary', 'secondary', 'tertiary'];
+
+export const Playground: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: () => (
+    <Stack>
+      {variants.map(variant => (
+        <Stack key={variant}>
+          <Text>{variant}</Text>
+          {['small', 'medium'].map(size => (
+            <Inline alignY="center" key={size}>
+              <Button
+                iconStart="cloud"
+                variant={variant as ButtonProps['variant']}
+                size={size as ButtonProps['size']}
+              >
+                Button
+              </Button>
+              <Button
+                iconEnd="chevronRight"
+                variant={variant as ButtonProps['variant']}
+                size={size as ButtonProps['size']}
+              >
+                Button
+              </Button>
+              <Button
+                iconStart="cloud"
+                iconEnd="chevronRight"
+                style={{ width: '200px' }}
+                variant={variant as ButtonProps['variant']}
+                size={size as ButtonProps['size']}
+              >
+                Button
+              </Button>
+            </Inline>
+          ))}
+        </Stack>
+      ))}
+    </Stack>
+  ),
+};
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index e4166e5c79..081d09a1d5 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -29,6 +29,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconStart,
       iconEnd,
       children,
+      style,
+      ...rest
     } = props;
 
     const { getResponsiveValue } = useCanon();
@@ -39,7 +41,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
-        {...props}
+        {...rest}
         ref={ref}
         disabled={disabled}
         className={[
@@ -47,6 +49,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           `cn-button-${responsiveSize}`,
           `cn-button-${responsiveVariant}`,
         ].join(' ')}
+        style={style}
       >
         <span
           className={[
diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts
index df5caa0f9f..96a11df84f 100644
--- a/packages/canon/src/components/Button/types.ts
+++ b/packages/canon/src/components/Button/types.ts
@@ -31,4 +31,5 @@ export interface ButtonProps {
   disabled?: boolean;
   iconStart?: IconNames;
   iconEnd?: IconNames;
+  style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx
index ffd874ffe7..574783578c 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: 'Components/Checkbox',
@@ -28,8 +32,33 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     label: 'Accept terms and conditions',
   },
 };
+
+export const AllVariants: Story = {
+  render: () => (
+    <Inline alignY="center">
+      <Checkbox />
+      <Checkbox checked />
+      <Checkbox label="Checkbox" />
+      <Checkbox label="Checkbox" checked />
+    </Inline>
+  ),
+};
+
+export const Playground: Story = {
+  render: () => (
+    <Stack>
+      <Text>All variants</Text>
+      <Inline alignY="center">
+        <Checkbox />
+        <Checkbox checked />
+        <Checkbox label="Checkbox" />
+        <Checkbox label="Checkbox" checked />
+      </Inline>
+    </Stack>
+  ),
+};
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index 66c86f638d..c9f468048e 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<typeof Container>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const FakeBox = () => (
+const DecorativeBox = () => (
   <Box
     borderRadius="xs"
-    style={{ background: '#1f47ff', color: 'white', height: '400px' }}
+    style={{
+      height: '64px',
+      background: '#eaf2fd',
+      borderRadius: '4px',
+      border: '1px solid #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")',
+    }}
   />
 );
 
 export const Default: Story = {
-  args: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
   render: args => (
     <Container {...args}>
-      <FakeBox />
+      <DecorativeBox />
     </Container>
   ),
 };
+
+export const Preview: Story = {
+  render: () => (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <DecorativeBox />
+    </div>
+  ),
+};
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 8fa6caec23..9aeec52d00 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<typeof meta>;
 const FakeBox = () => (
   <Box
     borderRadius="xs"
-    style={{ background: '#1f47ff', color: 'white', height: '64px' }}
+    style={{
+      background: '#eaf2fd',
+      borderRadius: '4px',
+      boxShadow: '0 0 0 1px #2563eb',
+      height: '64px',
+      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")',
+    }}
   />
 );
 
@@ -103,7 +110,14 @@ export const RowAndColumns: Story = {
         <Grid.Item colSpan={1} rowSpan={2}>
           <Box
             borderRadius="xs"
-            style={{ background: '#1f47ff', color: 'white', height: '100%' }}
+            style={{
+              height: '100%',
+              background: '#eaf2fd',
+              borderRadius: '4px',
+              boxShadow: '0 0 0 1px #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")',
+            }}
           />
         </Grid.Item>
         <Grid.Item colSpan={2}>
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index 8c46528a2f..dc74ea0e16 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: 'Components/Heading',
   component: Heading,
+  args: {
+    children: 'Heading',
+  },
 } satisfies Meta<typeof Heading>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-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: () => (
-    <Stack gap="md">
+    <Stack>
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>
@@ -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: () => (
+    <Stack>
+      <Text>All variants</Text>
+      <Heading variant="display">Display</Heading>
+      <Heading variant="title1">Title 1</Heading>
+      <Heading variant="title2">Title 2</Heading>
+      <Heading variant="title3">Title 3</Heading>
+      <Heading variant="title4">Title 4</Heading>
+      <Heading variant="title5">Title 5</Heading>
+    </Stack>
+  ),
+};
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 04ce6bcdfa..612c871ebb 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -18,6 +18,7 @@ import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
 import { useCanon } from '../../contexts/canon';
 
+/** @public */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
     const { children, variant = 'title1', as = 'h1', ...restProps } = props;
diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx
index a5cf0ae56a..cdf63fbb32 100644
--- a/packages/canon/src/components/Icon/Icon.stories.tsx
+++ b/packages/canon/src/components/Icon/Icon.stories.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon } from './Icon';
 import { CanonProvider } from '../../contexts/canon';
-import { defaultIcons } from './icons';
+import { icons } from './icons';
 
 const meta = {
   title: 'Components/Icon',
@@ -29,7 +29,7 @@ const meta = {
   argTypes: {
     name: {
       control: 'select',
-      options: Object.keys(defaultIcons),
+      options: Object.keys(icons),
     },
   },
   args: {
@@ -40,7 +40,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     name: 'heart',
   },
diff --git a/packages/canon/src/components/Icon/icons.ts b/packages/canon/src/components/Icon/icons.ts
index ff5cd9a507..40cbefb72d 100644
--- a/packages/canon/src/components/Icon/icons.ts
+++ b/packages/canon/src/components/Icon/icons.ts
@@ -35,10 +35,13 @@ import {
   RiArrowRightCircleLine,
   RiArrowUpCircleLine,
   RiCheckLine,
+  RiMoonLine,
+  RiSunLine,
+  RiExternalLinkLine,
 } from '@remixicon/react';
 
-// List of default icons
-export const defaultIcons: IconMap = {
+/** @public */
+export const icons: IconMap = {
   arrowDown: RiArrowDownFill,
   arrowLeft: RiArrowLeftFill,
   arrowRight: RiArrowRightFill,
@@ -53,7 +56,10 @@ export const defaultIcons: IconMap = {
   chevronLeft: RiArrowLeftSLine,
   chevronRight: RiArrowRightSLine,
   cloud: RiCloudFill,
+  externalLink: RiExternalLinkLine,
   heart: RiHeartFill,
+  moon: RiMoonLine,
   plus: RiAddLine,
+  sun: RiSunLine,
   trash: RiDeleteBin6Line,
 };
diff --git a/packages/canon/src/components/Icon/index.tsx b/packages/canon/src/components/Icon/index.tsx
index 3e7564c77e..0fa2eac35b 100644
--- a/packages/canon/src/components/Icon/index.tsx
+++ b/packages/canon/src/components/Icon/index.tsx
@@ -15,4 +15,5 @@
  */
 
 export * from './Icon';
+export * from './icons';
 export type * from './types';
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index a65a9f0913..57eddc74ba 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -30,8 +30,11 @@ export type IconNames =
   | 'chevronRight'
   | 'chevronUp'
   | 'cloud'
+  | 'externalLink'
   | 'heart'
+  | 'moon'
   | 'plus'
+  | 'sun'
   | 'trash';
 
 /** @public */
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index b6653a3067..6aa6079989 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<typeof Inline>;
 
 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 = ({
 }) => (
   <Box
     borderRadius="xs"
-    style={{ background: '#1f47ff', color: 'white', width, height }}
+    style={{
+      background: '#eaf2fd',
+      borderRadius: '4px',
+      boxShadow: '0 0 0 1px #2563eb',
+      width,
+      height,
+      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")',
+    }}
   />
 );
 
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        {fakeBlockList.map((block, index) => (
-          <FakeBox key={index} width={block.width} height={block.height} />
-        ))}
-      </>
-    ),
-  },
+  render: () => (
+    <Inline>
+      {fakeBlockList.map((block, index) => (
+        <FakeBox key={index} width={block.width} height={block.height} />
+      ))}
+    </Inline>
+  ),
 };
 
 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 7e77bc861d..4c48cf80cc 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: 'Components/Stack',
@@ -40,81 +39,97 @@ const meta = {
   args: {
     align: 'left',
     gap: 'xs',
+    children: 'hello world',
   },
 } satisfies Meta<typeof Stack>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const FakeBox = () => (
-  <Box
-    paddingX="xl"
-    paddingY="md"
-    borderRadius="xs"
-    style={{ background: '#1f47ff', color: 'white' }}
-  >
-    Fake Box
-  </Box>
-);
+const DecorativeBox = () => {
+  return (
+    <div
+      style={{
+        background: '#eaf2fd',
+        borderRadius: '4px',
+        boxShadow: '0 0 0 1px #2563eb',
+        height: '32px',
+        minWidth: '100px',
+        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")',
+      }}
+    />
+  );
+};
 
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <FakeBox />
-        <FakeBox />
-        <FakeBox />
-      </>
-    ),
-  },
+  render: () => (
+    <div style={{ width: '320px' }}>
+      <Stack>
+        <DecorativeBox />
+        <DecorativeBox />
+        <DecorativeBox />
+      </Stack>
+    </div>
+  ),
 };
 
 export const AlignLeft: Story = {
-  args: {
-    ...Default.args,
-    align: 'left',
-  },
+  render: () => (
+    <Stack align="left">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
 
 export const AlignCenter: Story = {
-  args: {
-    ...Default.args,
-    align: 'center',
-  },
+  render: () => (
+    <Stack align="center">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
 
 export const AlignRight: Story = {
-  args: {
-    ...Default.args,
-    align: 'right',
-  },
+  render: () => (
+    <Stack align="right">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
 
 export const ResponsiveAlign: Story = {
-  args: {
-    ...Default.args,
-    align: {
-      xs: 'left',
-      md: 'center',
-      lg: 'right',
-    },
-  },
+  render: () => (
+    <Stack align={{ xs: 'left', md: 'center', lg: 'right' }}>
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
 
 export const ResponsiveGap: Story = {
-  args: {
-    ...Default.args,
-    gap: {
-      xs: 'xs',
-      md: 'md',
-      lg: '2xl',
-    },
-  },
+  render: () => (
+    <Stack gap={{ xs: 'xs', md: 'md', lg: '2xl' }}>
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
 
 export const LargeGap: Story = {
-  args: {
-    ...Default.args,
-    gap: 'xl',
-  },
+  render: () => (
+    <Stack gap="xl">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Stack>
+  ),
 };
diff --git a/packages/canon/src/components/Table/stories/Example1.stories.tsx b/packages/canon/src/components/Table/Table.stories.tsx
similarity index 86%
rename from packages/canon/src/components/Table/stories/Example1.stories.tsx
rename to packages/canon/src/components/Table/Table.stories.tsx
index 140293438e..c4c08be527 100644
--- a/packages/canon/src/components/Table/stories/Example1.stories.tsx
+++ b/packages/canon/src/components/Table/Table.stories.tsx
@@ -14,23 +14,6 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableCell,
-  TableBody,
-  TableFooter,
-} from '../Table';
-
-const meta = {
-  title: 'Components/Table/Examples/Simple',
-  component: Table,
-} satisfies Meta<typeof Table>;
-
 const invoices = [
   {
     invoice: 'INV001',
@@ -76,6 +59,31 @@ const invoices = [
   },
 ];
 
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../Table';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  subcomponents: {
+    TableBody: TableBody as React.ComponentType<unknown>,
+    TableCell: TableCell as React.ComponentType<unknown>,
+    TableFooter: TableFooter as React.ComponentType<unknown>,
+    TableHead: TableHead as React.ComponentType<unknown>,
+    TableHeader: TableHeader as React.ComponentType<unknown>,
+    TableRow: TableRow as React.ComponentType<unknown>,
+  },
+} satisfies Meta<typeof Table>;
+
 export default meta;
 type Story = StoryObj<typeof meta>;
 
diff --git a/packages/canon/src/components/Table/stories/Table.stories.tsx b/packages/canon/src/components/Table/stories/Table.stories.tsx
deleted file mode 100644
index 2267b77093..0000000000
--- a/packages/canon/src/components/Table/stories/Table.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/Table',
-  component: Table,
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Hello World! I'm a basic table",
-  },
-};
diff --git a/packages/canon/src/components/Table/stories/TableBody.stories.tsx b/packages/canon/src/components/Table/stories/TableBody.stories.tsx
deleted file mode 100644
index f69d26f0bd..0000000000
--- a/packages/canon/src/components/Table/stories/TableBody.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table, TableBody } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableBody',
-  component: TableBody,
-  decorators: [
-    Story => (
-      <Table>
-        <Story />
-      </Table>
-    ),
-  ],
-} satisfies Meta<typeof TableBody>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Hello World! I'm a basic table body",
-  },
-};
diff --git a/packages/canon/src/components/Table/stories/TableCaption.stories.tsx b/packages/canon/src/components/Table/stories/TableCaption.stories.tsx
deleted file mode 100644
index 46ea5f0f4d..0000000000
--- a/packages/canon/src/components/Table/stories/TableCaption.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableCaption } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableCaption',
-  component: TableCaption,
-} satisfies Meta<typeof TableCaption>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/packages/canon/src/components/Table/stories/TableCell.stories.tsx b/packages/canon/src/components/Table/stories/TableCell.stories.tsx
deleted file mode 100644
index 126b72bf95..0000000000
--- a/packages/canon/src/components/Table/stories/TableCell.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableCell } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableCell',
-  component: TableCell,
-} satisfies Meta<typeof TableCell>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/packages/canon/src/components/Table/stories/TableFooter.stories.tsx b/packages/canon/src/components/Table/stories/TableFooter.stories.tsx
deleted file mode 100644
index b7dbacbc30..0000000000
--- a/packages/canon/src/components/Table/stories/TableFooter.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableFooter } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableFooter',
-  component: TableFooter,
-} satisfies Meta<typeof TableFooter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/packages/canon/src/components/Table/stories/TableHead.stories.tsx b/packages/canon/src/components/Table/stories/TableHead.stories.tsx
deleted file mode 100644
index c7cfac51e8..0000000000
--- a/packages/canon/src/components/Table/stories/TableHead.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableHead } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableHead',
-  component: TableHead,
-} satisfies Meta<typeof TableHead>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/packages/canon/src/components/Table/stories/TableHeader.stories.tsx b/packages/canon/src/components/Table/stories/TableHeader.stories.tsx
deleted file mode 100644
index a2f044dcc3..0000000000
--- a/packages/canon/src/components/Table/stories/TableHeader.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table, TableHeader } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableHeader',
-  component: TableHeader,
-  decorators: [
-    Story => (
-      <Table>
-        <Story />
-      </Table>
-    ),
-  ],
-} satisfies Meta<typeof TableHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Hello World! I'm a basic table header",
-  },
-};
diff --git a/packages/canon/src/components/Table/stories/TableRow.stories.tsx b/packages/canon/src/components/Table/stories/TableRow.stories.tsx
deleted file mode 100644
index 7eb58ed5a4..0000000000
--- a/packages/canon/src/components/Table/stories/TableRow.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table, TableRow, TableHeader } from '../Table';
-
-const meta = {
-  title: 'Components/Table/Components/TableRow',
-  component: TableRow,
-  decorators: [
-    Story => (
-      <Table>
-        <TableHeader>
-          <Story />
-        </TableHeader>
-      </Table>
-    ),
-  ],
-} satisfies Meta<typeof TableRow>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Hello World! I'm a basic table row",
-  },
-};
diff --git a/packages/canon/src/components/Text/Text.stories.tsx b/packages/canon/src/components/Text/Text.stories.tsx
index 2cde7ed553..b0776beee9 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: 'Components/Text',
   component: Text,
+  args: {
+    children: 'Text',
+  },
 } satisfies Meta<typeof Text>;
 
 export default meta;
@@ -30,42 +33,91 @@ type Story = StoryObj<typeof meta>;
 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: () => (
     <Stack gap="md">
-      <Text variant="subtitle">Subtitle {Default.args?.children}</Text>
-      <Text variant="body">Body {Default.args?.children}</Text>
-      <Text variant="caption">Caption {Default.args?.children}</Text>
-      <Text variant="label">Label {Default.args?.children}</Text>
+      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text variant="body" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text variant="caption" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text variant="label" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
     </Stack>
   ),
 };
 
 export const AllWeights: Story = {
-  args: {
-    children: 'Text',
-  },
   render: () => (
     <Stack gap="md">
-      <Text weight="regular">Regular {Default.args?.children}</Text>
-      <Text weight="bold">Bold {Default.args?.children}</Text>
+      <Text weight="regular" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text weight="bold" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
     </Stack>
   ),
 };
 
 export const Responsive: Story = {
   args: {
-    ...Default.args,
     variant: {
       xs: 'label',
       md: 'body',
     },
   },
 };
+
+export const Playground: Story = {
+  render: () => (
+    <Stack>
+      <Text>Subtitle</Text>
+      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text>Body</Text>
+      <Text variant="body" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text>Caption</Text>
+      <Text variant="caption" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+      <Text>Label</Text>
+      <Text variant="label" style={{ maxWidth: '600px' }}>
+        A man looks at a painting in a museum and says, “Brothers and sisters I
+        have none, but that man&apos;s father is my father&apos;s son.” Who is
+        in the painting?
+      </Text>
+    </Stack>
+  ),
+};
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 3af01f92f9..1359a0e4c5 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -18,12 +18,14 @@ import React, { forwardRef } from 'react';
 import { TextProps } from './types';
 import { useCanon } from '../../contexts/canon';
 
+/** @public */
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
     const {
       children,
       variant = 'body',
       weight = 'regular',
+      style,
       ...restProps
     } = props;
 
@@ -36,10 +38,11 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     return (
       <p
         ref={ref}
-        {...restProps}
         className={`text ${
           responsiveVariant ? `text-${responsiveVariant}` : ''
         } ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
+        style={style}
+        {...restProps}
       >
         {children}
       </p>
diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts
index d3232e1d67..7e11bed6e3 100644
--- a/packages/canon/src/components/Text/types.ts
+++ b/packages/canon/src/components/Text/types.ts
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
+import type { CSSProperties, ReactNode } from 'react';
 import type { Breakpoint } from '../../types';
 
 /** @public */
 export interface TextProps {
-  children: React.ReactNode;
+  children: ReactNode;
   variant?:
     | 'subtitle'
     | 'body'
@@ -26,4 +27,5 @@ export interface TextProps {
     | 'label'
     | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
   weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+  style?: CSSProperties;
 }

From adb3e03265aab6ebb3c13aba953f50ab4d13ffc3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 7 Jan 2025 15:50:35 +0000
Subject: [PATCH 2/2] Fixes imports

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../components/IconLibrary/IconLibrary.tsx    |  6 +-
 packages/canon/report.api.md                  | 86 +++++++++++++++++++
 packages/canon/src/components/Button/Docs.mdx |  2 +-
 .../canon/src/components/Checkbox/Docs.mdx    |  2 +-
 packages/canon/src/components/Icon/Docs.mdx   |  6 +-
 packages/canon/src/contexts/canon.tsx         | 12 +--
 packages/canon/src/index.ts                   |  5 ++
 7 files changed, 106 insertions(+), 13 deletions(-)

diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
index e32f4c08a4..1d517f7a98 100644
--- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
+++ b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
@@ -16,15 +16,15 @@
 import React from 'react';
 import { Icon } from '@backstage/canon';
 import type { IconNames } from '@backstage/canon';
-import { defaultIcons } from '../../../src/components/Icon/icons';
+import { icons } from '../../../src/components/Icon/icons';
 import { Text } from '../Text/Text';
 
 export const IconLibrary = () => {
-  const icons = Object.keys(defaultIcons);
+  const iconsList = Object.keys(icons);
 
   return (
     <div className="icon-library">
-      {icons.map(icon => (
+      {iconsList.map(icon => (
         <div key={icon} className="icon-library-item">
           <div className="icon-library-item-icon">
             <Icon name={icon as IconNames} />
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index e725d0ac8b..fc1f773b4b 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -5,9 +5,11 @@
 ```ts
 /// <reference types="react" />
 
+import type { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 
 // @public (undocumented)
@@ -84,6 +86,8 @@ export interface ButtonProps {
   // (undocumented)
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
   // (undocumented)
+  style?: React.CSSProperties;
+  // (undocumented)
   variant?:
     | 'primary'
     | 'secondary'
@@ -91,6 +95,29 @@ export interface ButtonProps {
     | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
 }
 
+// @public (undocumented)
+export interface CanonContextProps {
+  // (undocumented)
+  breakpoint: Breakpoint;
+  // (undocumented)
+  getResponsiveValue: (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => string;
+  // (undocumented)
+  icons: IconMap;
+}
+
+// @public (undocumented)
+export const CanonProvider: (props: CanonProviderProps) => React_2.JSX.Element;
+
+// @public (undocumented)
+export interface CanonProviderProps {
+  // (undocumented)
+  children?: ReactNode;
+  // (undocumented)
+  overrides?: Partial<Record<IconNames, React_2.ComponentType>>;
+}
+
 // @public (undocumented)
 export const Checkbox: React_2.ForwardRefExoticComponent<
   CheckboxProps & React_2.RefAttributes<HTMLButtonElement>
@@ -200,6 +227,33 @@ export interface GridProps extends SpaceProps {
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export const Heading: React_2.ForwardRefExoticComponent<
+  HeadingProps & React_2.RefAttributes<HTMLHeadingElement>
+>;
+
+// @public (undocumented)
+export interface HeadingProps {
+  // (undocumented)
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  // (undocumented)
+  children: React.ReactNode;
+  // (undocumented)
+  variant?:
+    | 'display'
+    | 'title1'
+    | 'title2'
+    | 'title3'
+    | 'title4'
+    | 'title5'
+    | Partial<
+        Record<
+          Breakpoint,
+          'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
+        >
+      >;
+}
+
 // @public (undocumented)
 export const Icon: (props: IconProps) => React_2.JSX.Element;
 
@@ -222,8 +276,11 @@ export type IconNames =
   | 'chevronRight'
   | 'chevronUp'
   | 'cloud'
+  | 'externalLink'
   | 'heart'
+  | 'moon'
   | 'plus'
+  | 'sun'
   | 'trash';
 
 // @public (undocumented)
@@ -232,6 +289,9 @@ export type IconProps = {
   size?: number;
 };
 
+// @public (undocumented)
+export const icons: IconMap;
+
 // @public (undocumented)
 export const Inline: ForwardRefExoticComponent<
   InlineProps & RefAttributes<HTMLElement>
@@ -374,6 +434,32 @@ export const TableRow: React_3.ForwardRefExoticComponent<
     React_3.RefAttributes<HTMLTableRowElement>
 >;
 
+// @public (undocumented)
+const Text_2: React_2.ForwardRefExoticComponent<
+  TextProps & React_2.RefAttributes<HTMLParagraphElement>
+>;
+export { Text_2 as Text };
+
+// @public (undocumented)
+export interface TextProps {
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
+  style?: CSSProperties;
+  // (undocumented)
+  variant?:
+    | 'subtitle'
+    | 'body'
+    | 'caption'
+    | 'label'
+    | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
+  // (undocumented)
+  weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+}
+
+// @public (undocumented)
+export const useCanon: () => CanonContextProps;
+
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index e4b069cbcd..ae90b5fd80 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 <Title type="h1">Button</Title>
 <Text>A button component that can be used to trigger actions.</Text>
 
-<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Variants} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Button } from "@backstage/canon";
diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx
index 12e13abf03..9826708888 100644
--- a/packages/canon/src/components/Checkbox/Docs.mdx
+++ b/packages/canon/src/components/Checkbox/Docs.mdx
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable';
 <Title type="h1">Checkbox</Title>
 <Text>A checkbox component that can be used to trigger actions.</Text>
 
-<Canvas of={CheckboxStories.Primary} />
+<Canvas of={CheckboxStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Checkbox } from "@backstage/canon";
diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx
index 463fe60133..41c296424c 100644
--- a/packages/canon/src/components/Icon/Docs.mdx
+++ b/packages/canon/src/components/Icon/Docs.mdx
@@ -2,7 +2,7 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as IconStories from './Icon.stories';
 import { Title, Text } from '../../../docs/components';
 import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-import { defaultIcons } from './icons';
+import { icons } from './icons';
 
 <Meta of={IconStories} />
 
@@ -12,7 +12,7 @@ import { defaultIcons } from './icons';
 
 <Text>Icons are used to represent an action or a state.</Text>
 
-<Canvas of={IconStories.Primary} />
+<Canvas of={IconStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Icon } from "@backstage/canon";
@@ -27,7 +27,7 @@ import { defaultIcons } from './icons';
 <PropsTable
   data={{
     name: {
-      type: Object.keys(defaultIcons),
+      type: Object.keys(icons),
       responsive: false,
     },
     size: {
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index a8c21e8fa9..5a0e6b4315 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -16,11 +16,12 @@
 
 import React, { createContext, useContext, ReactNode } from 'react';
 import { IconMap, IconNames } from '../components/Icon/types';
-import { defaultIcons } from '../components/Icon/icons';
+import { icons } from '../components/Icon/icons';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import type { Breakpoint } from '../types';
 
-interface CanonContextProps {
+/** @public */
+export interface CanonContextProps {
   icons: IconMap;
   breakpoint: Breakpoint;
   getResponsiveValue: (
@@ -29,12 +30,13 @@ interface CanonContextProps {
 }
 
 const CanonContext = createContext<CanonContextProps>({
-  icons: defaultIcons,
+  icons,
   breakpoint: 'md',
   getResponsiveValue: () => '',
 });
 
-interface CanonProviderProps {
+/** @public */
+export interface CanonProviderProps {
   children?: ReactNode;
   overrides?: Partial<Record<IconNames, React.ComponentType>>;
 }
@@ -44,7 +46,7 @@ export const CanonProvider = (props: CanonProviderProps) => {
   const { children, overrides } = props;
 
   // Merge provided overrides with default icons
-  const combinedIcons = { ...defaultIcons, ...overrides };
+  const combinedIcons = { ...icons, ...overrides };
 
   const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
   const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 23432295e2..f6cca4bed6 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -20,12 +20,17 @@
  * @packageDocumentation
  */
 
+// Providers
+export * from './contexts/canon';
+
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';
 export * from './components/Stack';
 export * from './components/Inline';
 export * from './components/Container';
+export * from './components/Text';
+export * from './components/Heading';
 
 // UI components
 export * from './components/Button';