From a539b127987e61c99cd0e7f0164ed1f330ec1184 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 17 Dec 2024 11:51:50 +0000
Subject: [PATCH] Fix button component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Button/Button.stories.tsx  | 30 ++++---
 packages/canon/src/components/Button/Docs.mdx | 81 +++++++++++++++++++
 .../canon/src/components/Button/styles.css    |  7 +-
 3 files changed, 103 insertions(+), 15 deletions(-)

diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index c88791ddc7..c921efa6f2 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/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>
   ),
 };
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index 2dabace9b2..e4b069cbcd 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/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>
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 914dd08c65..9d24e6b452 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/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;