Improve usage on all components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Box/Docs.mdx

@@ -16,8 +16,11 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   of our components. It provides a consistent API for styling and layout.
 </Text>
 
-<Title type="h2">Installation</Title>
-<Source code={`import { Box } from "@backstage/canon";`} language="tsx" dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Box } from "@backstage/canon";
+
+<Box>Hello World!</Box>
+`} language="tsx" dark />
 
 <Title type="h2">API reference</Title>
 

packages/canon/src/components/Button/Docs.mdx

@@ -12,7 +12,11 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={ButtonStories.Primary} />
 
-<Source of={ButtonStories.Primary} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Button } from "@backstage/canon";
+
+<Button>Click me</Button>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Checkbox/Docs.mdx

@@ -12,7 +12,11 @@ import { PropsTable } from '../../../docs/components/PropsTable';
 
 <Canvas of={CheckboxStories.Primary} />
 
-<Source of={CheckboxStories.Primary} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Checkbox } from "@backstage/canon";
+
+<Checkbox label="Checkbox" />
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Container/Docs.mdx

@@ -15,12 +15,12 @@ import { containerProperties } from './sprinkles.css';
   content on the page.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Container } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Container } from "@backstage/canon";
+
+<Container>Hello World!</Container>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Grid/Docs.mdx

@@ -13,24 +13,13 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   more complex ones.
 </Text>
 
-<Title type="h2">Installation</Title>
-<Source code={`import { Grid } from "@backstage/canon";`} language="tsx" dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Grid } from "@backstage/canon";
 
-<Title type="h2">Anatomy</Title>
-<Text>
-  The grid component is made of two parts: the grid container and the grid item. Import all parts and piece them together.
-</Text>
-<Source
-  code={`import { Grid } from "@backstage/canon/grid";
-
-export default () => (
-  <Grid>
-    <Grid.Item />
-  </Grid>
-);`}
-  language="tsx"
-  dark
-/>
+<Grid>
+  <Grid.Item>Hello World</Grid.Item>
+</Grid>
+`} language="tsx" dark />
 
 <Title type="h2">API reference</Title>
 

packages/canon/src/components/Heading/Docs.mdx

@@ -13,7 +13,11 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={HeadingStories.Title1} />
 
-<Source of={HeadingStories.Title1} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Heading } from "@backstage/canon";
+
+<Heading variant="title1">Hello World!</Heading>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Icon/Docs.mdx

@@ -0,0 +1,48 @@
+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';
+
+<Meta of={IconStories} />
+
+<Unstyled>
+
+<Title type="h1">Icon</Title>
+
+<Text>Icons are used to represent an action or a state.</Text>
+
+<Canvas of={IconStories.Primary} />
+
+<Title type="h2">Usage</Title>
+<Source code={`import { Icon } from "@backstage/canon";
+
+<Icon name="icon-name" />
+`} language="tsx" dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
+
+<PropsTable
+  data={{
+    name: {
+      type: Object.keys(defaultIcons),
+      responsive: false,
+    },
+    size: {
+      type: 'number',
+      responsive: false,
+    },
+    className: {
+      type: 'string',
+      responsive: false,
+    },
+    style: {
+      type: 'CSSProperties',
+      responsive: false,
+    },
+  }}
+/>
+
+</Unstyled>

packages/canon/src/components/Icon/Icon.tsx

@@ -16,10 +16,10 @@
 
 import React from 'react';
 import { useTheme } from '../../theme/context';
-import type { IconNames } from './types';
+import type { IconProps } from './types';
 
 /** @public */
-export const Icon = (props: { name: IconNames; size?: number }) => {
+export const Icon = (props: IconProps) => {
   const { name, size = 16 } = props;
   const { icons } = useTheme();
 

packages/canon/src/components/Icon/types.ts

@@ -36,3 +36,9 @@ export type IconNames =
 
 /** @public */
 export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
+
+/** @public */
+export type IconProps = {
+  name: IconNames;
+  size?: number;
+};

packages/canon/src/components/Inline/Docs.mdx

@@ -16,12 +16,16 @@ import { inlineProperties } from './sprinkles.css';
   responsively.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Inline } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Inline } from "@backstage/canon";
+
+<Inline>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Stack/Docs.mdx

@@ -15,12 +15,16 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   columns. All values are responsive.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Stack } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Stack } from "@backstage/canon";
+
+<Stack>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Stack>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference

packages/canon/src/components/Text/Docs.mdx

@@ -13,7 +13,10 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={TextStories.Default} />
 
-<Source of={TextStories.Default} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Text } from "@backstage/canon";
+
+<Text>Hello World!</Text>`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference