From dd2a93ffdf6da21d2d8351a43b970d43a266d5e1 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 19 Jan 2023 15:31:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(doc)=20create=20a=20global=20categ?=
 =?UTF-8?q?ory=20for=20Components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This way we ensure that the main categories of the Storybook docs
are well separated, improving readability.
---
 .../src/components/Button/index.stories.mdx      | 16 ++++++++--------
 .../src/components/Button/index.stories.tsx      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx
index 60e91eb..5ee9b7b 100644
--- a/packages/react/src/components/Button/index.stories.mdx
+++ b/packages/react/src/components/Button/index.stories.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import { Button } from "./index";
 
-<Meta title="Button/Default" component={Button}/>
+<Meta title="Components/Button/Doc" component={Button}/>
 
 export const Template = (args) => <Button {...args} />;
 
@@ -10,10 +10,10 @@ export const Template = (args) => <Button {...args} />;
 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"/>
-  <Story id="button--danger"/>
+  <Story id="components-button--primary"/>
+  <Story id="components-button--secondary"/>
+  <Story id="components-button--tertiary"/>
+  <Story id="components-button--danger"/>
 </Canvas>
 
 <Source
@@ -30,11 +30,11 @@ You can use icons within the button by passing the icon name as a prop.
 > Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
 
 <Canvas withSource="open">
-  <Story id="button--icon-left"/>
+  <Story id="components-button--icon-left"/>
 </Canvas>
 
 <Canvas withSource="open">
-  <Story id="button--icon-right"/>
+  <Story id="components-button--icon-right"/>
 </Canvas>
 
 ## Disabled
@@ -44,7 +44,7 @@ The button can be disabled. The disabled button will render the same no matter w
 > Keep in the mind that a disabled button will never call `onClick` if it is provided.
 
 <Canvas withSource="open">
-  <Story id="button--disabled"/>
+  <Story id="components-button--disabled"/>
 </Canvas>
 
 ## Props
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 0a61ae3..d258a00 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Button } from "./index";
 
 export default {
-  title: "Button",
+  title: "Components/Button",
   component: Button,
 } as ComponentMeta<typeof Button>;