Fix button component

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

packages/canon/src/components/Button/Button.stories.tsx

@@ -46,28 +46,34 @@ export const Primary: Story = {
   },
 };
 
-export const Secondary: Story = {
+export const Variants: Story = {
   args: {
-    children: 'Secondary button',
-    variant: 'secondary',
+    children: 'Button',
   },
-};
-
-export const Tertiary: Story = {
-  args: {
-    children: 'Tertiary button',
-    variant: 'tertiary',
+  parameters: {
+    argTypes: {
+      variant: {
+        control: false,
+      },
+    },
   },
+  render: () => (
+    <Inline alignY="center">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="tertiary">Tertiary</Button>
+    </Inline>
+  ),
 };
 
 export const Sizes: Story = {
   args: {
     children: 'Button',
   },
-  render: args => (
+  render: () => (
     <Inline alignY="center">
-      <Button {...args} size="medium" />
-      <Button {...args} size="small" />
+      <Button size="medium">Medium</Button>
+      <Button size="small">Small</Button>
     </Inline>
   ),
 };

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

@@ -51,4 +51,85 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
   }}
 />
 
+<Title type="h2">Examples</Title>
+
+<Title type="h3">Variants</Title>
+<Text>Here's a view when buttons have different variants.</Text>
+
+<Canvas of={ButtonStories.Variants} />
+
+<Source
+  code={`<Inline alignY="center">
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="tertiary">Tertiary</Button>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Sizes</Title>
+<Text>Here's a view when buttons have different sizes.</Text>
+
+<Canvas of={ButtonStories.Sizes} />
+
+<Source
+  code={`<Inline alignY="center">
+  <Button size="medium">Medium</Button>
+  <Button size="small">Small</Button>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">With Icons</Title>
+<Text>Here's a view when buttons have icons.</Text>
+
+<Canvas of={ButtonStories.WithIcons} />
+
+<Source
+  code={`<Inline alignY="center">
+  <Button iconStart="cloud">Button</Button>
+  <Button iconEnd="chevronRight">Button</Button>
+  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
+</Inline>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Full width</Title>
+<Text>Here's a view when buttons are full width.</Text>
+
+<Canvas of={ButtonStories.FullWidth} />
+
+<Source
+  code={`<Stack style={{ width: '300px' }}>
+  <Button iconStart="cloud">Button</Button>
+  <Button iconEnd="chevronRight">Button</Button>
+  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
+</Stack>`}
+  language="tsx"
+  dark
+/>
+
+<Title type="h3">Disabled</Title>
+<Text>Here's a view when buttons are disabled.</Text>
+
+<Canvas of={ButtonStories.Disabled} />
+
+<Source code={`<Button disabled>Button</Button>`} language="tsx" dark />
+
+<Title type="h3">Responsive</Title>
+<Text>Here's a view when buttons are responsive.</Text>
+
+<Canvas of={ButtonStories.Responsive} />
+
+<Source
+  code={`<Button variant={{ xs: 'primary', sm: 'secondary', md: 'tertiary' }} size={{ xs: 'small', sm: 'medium' }}>
+  Button
+</Button>`}
+  language="tsx"
+  dark
+/>
+
 </Unstyled>

packages/canon/src/components/Button/styles.css

@@ -21,8 +21,8 @@
   justify-content: center;
   user-select: none;
   font-family: var(--canon-font-regular);
-  font-weight: var(--canon-font-bold);
-  font-size: var(--canon-font-size-md);
+  font-weight: var(--canon-font-weight-bold);
+  font-size: var(--canon-font-size-body);
   padding: 0;
   transition: all 150ms ease;
   cursor: pointer;
@@ -70,10 +70,11 @@
     height: 40px;
   }
 
-  &.cn-button-content {
+  & .cn-button-content {
     display: flex;
     align-items: center;
     gap: var(--canon-spacing-xs);
+    font-weight: var(--canon-font-weight-bold);
 
     &.cn-button-content-icon-both {
       flex: 1;