From 9fa0ff8ad3cde26c16fe74abdbd7bced4cca5081 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 13 Jan 2023 17:14:39 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20add=20documentation=20for?=
 =?UTF-8?q?=20Button=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Let's leverage the power of Storybook ! Use MDX file to create a
top notch documentation.
---
 .../src/components/Button/index.stories.mdx   | 53 +++++++++++++++++++
 .../src/components/Button/index.stories.tsx   |  8 +--
 2 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/components/Button/index.stories.mdx

diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx
new file mode 100644
index 0000000..3abe403
--- /dev/null
+++ b/packages/react/src/components/Button/index.stories.mdx
@@ -0,0 +1,53 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Button } from "./index";
+
+<Meta title="Button/Default" component={Button}/>
+
+export const Template = (args) => <Button {...args} />;
+
+# Button
+
+The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
+
+<Canvas>
+  <Story id="button--primary"/>
+  <Story id="button--secondary"/>
+  <Story id="button--tertiary"/>
+</Canvas>
+
+<Source
+  language='ts'
+  dark
+  format={false}
+  code={`import { Button } from "@openfun/cunningham-react";`}
+/>
+
+
+## Disabled
+
+The button can be disabled. The disabled button will render the same no matter what color is used.
+
+> Keep in the mind that a disabled button will never call `onClick` if it is provided.
+
+<Canvas withSource="open">
+  <Story id="button--disabled"/>
+</Canvas>
+
+## Props
+
+You can use all the props of the native html `<button>` element props plus the following.
+
+<ArgsTable of={Button} />
+
+
+
+## Design tokens
+
+Here a the custom design tokens defined by the button.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| border-radius 	| Border radius of the button 	|
+| height        	| Height of the button        	|
+| font-size     	| Font size of the label      	|
+| font-weight   	| Font weight of the label    	|
\ No newline at end of file
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 68b1b2c..34e780f 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -11,25 +11,25 @@ const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
-  children: "Label",
+  children: "Primary",
   color: "primary",
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  children: "Label",
+  children: "Secondary",
   color: "secondary",
 };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = {
-  children: "Label",
+  children: "Tertiary",
   color: "tertiary",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  children: "Label",
+  children: "Disabled",
   color: "primary",
   disabled: true,
 };