From 3800cd81424b3aa07f50103aac293ffac7181c69 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 20 Dec 2023 11:02:07 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20create=20a=20stories=20fo?=
 =?UTF-8?q?r=20all=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously we were using a deprecated Storybook feature by using
canvas for multiple Stories and it was also rendering buttons not
aligned, so this new story is a better choice.
---
 packages/react/src/components/Button/index.mdx   |  7 +------
 .../src/components/Button/index.stories.tsx      | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index d775be2..8c0cb13 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -8,12 +8,7 @@ import * as Stories from './index.stories';
 
 The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
 
-<Canvas>
-  <Story id="components-button--primary"/>
-  <Story id="components-button--secondary"/>
-  <Story id="components-button--tertiary"/>
-  <Story id="components-button--danger"/>
-</Canvas>
+<Canvas of={Stories.All}/>
 
 <Source
   language='ts'
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 669929c..00d174b 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -10,6 +10,22 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+export const All: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+        <Button {...Primary.args} />
+        <Button {...PrimaryText.args} />
+        <Button {...Secondary.args} />
+        <Button {...Tertiary.args} />
+        <Button {...TertiaryText.args} />
+        <Button {...Disabled.args} />
+        <Button {...Danger.args} />
+      </div>
+    );
+  },
+};
+
 export const Primary: Story = {
   args: {
     children: "Primary",