From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Apr 2022 19:24:21 +0200
Subject: refactor(storybook): reorganize design system

Add more stories for each components and change some components
categories for better organization.
---
 src/components/molecules/nav/nav.stories.tsx | 42 ++++++++++++++++++----------
 1 file changed, 28 insertions(+), 14 deletions(-)

(limited to 'src/components/molecules/nav/nav.stories.tsx')

diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 9975bbd..25455fd 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -4,18 +4,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { IntlProvider } from 'react-intl';
 import NavComponent, { type NavItem } from './nav';
 
-const MainNavItems: NavItem[] = [
-  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
-  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
-];
-
-const FooterNavItems: NavItem[] = [
-  { id: 'contactLink', href: '/contact', label: 'Contact' },
-  { id: 'legalLink', href: '/legal-notice', label: 'Legal notice' },
-];
-
+/**
+ * Nav - Storybook Meta
+ */
 export default {
-  title: 'Molecules/Nav',
+  title: 'Molecules/Navigation/Nav',
   component: NavComponent,
   argTypes: {
     className: {
@@ -54,20 +47,41 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
 } as ComponentMeta<typeof NavComponent>;
 
 const Template: ComponentStory<typeof NavComponent> = (args) => (
-  <IntlProvider locale="en">
-    <NavComponent {...args} />
-  </IntlProvider>
+  <NavComponent {...args} />
 );
 
+const MainNavItems: NavItem[] = [
+  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
+  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
+];
+
+const FooterNavItems: NavItem[] = [
+  { id: 'contactLink', href: '/contact', label: 'Contact' },
+  { id: 'legalLink', href: '/legal-notice', label: 'Legal notice' },
+];
+
+/**
+ * Nav Stories - Main navigation
+ */
 export const MainNav = Template.bind({});
 MainNav.args = {
   items: MainNavItems,
   kind: 'main',
 };
 
+/**
+ * Nav Stories - Footer navigation
+ */
 export const FooterNav = Template.bind({});
 FooterNav.args = {
   items: FooterNavItems,
-- 
cgit v1.2.3