From 5c202d27ed91213dfefd8972b6773b5694b696fc Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 16 Nov 2023 11:23:25 +0100
Subject: [PATCH 1/6] change architecture

---
 .storybook/preview.js                   |  19 +---
 stories/areachart.stories.tsx           |   4 +-
 stories/banner.stories.tsx              |   2 +-
 stories/barchart.stories.tsx            |   5 +-
 stories/box.stories.tsx                 |   2 +-
 stories/breadcrumb.stories.tsx          |   2 +-
 stories/card.stories.tsx                |   2 +-
 stories/checkbox.stories.tsx            |   4 +-
 stories/circularprogressbar.stories.tsx |   2 +-
 stories/collapsiblepanel.stories.tsx    |   2 +-
 stories/dropdown.stories.tsx            |   2 +-
 stories/dropzone.stories.tsx            |   4 +-
 stories/emptystate.stories.tsx          |   2 +-
 stories/errorpage401.stories.tsx        |   2 +-
 stories/errorpage404.stories.tsx        |   2 +-
 stories/errorpage500.stories.tsx        |   2 +-
 stories/errorpageauth.stories.tsx       |   2 +-
 stories/form.stories.tsx                |   2 +-
 stories/globalhealthbar.stories.tsx     |   4 +-
 stories/guideline/button-guideline.mdx  |  54 +++++-----
 stories/guideline/chart-guideline.mdx   |  34 +++---
 stories/healthselectorv2.stories.tsx    |   2 +-
 stories/icon.stories.tsx                |   4 -
 stories/input.stories.tsx               |   7 +-
 stories/lateralnavbarlayout.stories.tsx |   2 +-
 stories/layout.stories.tsx              |  96 +----------------
 stories/linechart.stories.tsx           |   2 +-
 stories/linecharttemporal.stories.tsx   |   2 +-
 stories/modal.stories.tsx               | 131 +-----------------------
 stories/multiselect.stories.tsx         |   2 +-
 stories/notifications.stories.tsx       |   2 +-
 stories/searchinput.stories.tsx         |   2 +-
 stories/select.stories.tsx              |   4 +-
 stories/selectinput.stories.tsx         |   2 +-
 stories/selectv2.stories.tsx            |   7 --
 stories/spacing.stories.tsx             |   2 +-
 stories/sparkline.stories.tsx           |   2 +-
 stories/statuswrapper.stories.tsx       |   2 +-
 stories/stepper.stories.tsx             |   2 +-
 stories/tablev2.stories.tsx             |   2 +-
 stories/tabsv2.stories.tsx              |   2 +-
 stories/text.stories.tsx                |   2 +-
 stories/textarea.stories.tsx            |   4 +-
 stories/toast.stories.tsx               |   2 +-
 stories/toggle.stories.tsx              |   2 +-
 stories/tooltip.stories.tsx             |   2 +-
 stories/vegachart.stories.tsx           |   2 +-
 47 files changed, 99 insertions(+), 346 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 807b0b45f2..5339d52c5b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -47,23 +47,10 @@ export const parameters = {
       order: [
         'Introduction',
         'Style',
-        ['Color', 'Icons'],
+        'Guidelines',
+        'Templates',
         'Components',
-        [
-          'Navigation',
-          'Button',
-          'Chips',
-          'Checkbox',
-          'Toggle',
-          'Dropdown',
-          'Input',
-          'Selector',
-          'Chart',
-          'Progress & loading',
-          'Table',
-          'Notification',
-        ],
-        'Guideline',
+        
       ],
     },
   },
diff --git a/stories/areachart.stories.tsx b/stories/areachart.stories.tsx
index 367c567a34..c575682d96 100644
--- a/stories/areachart.stories.tsx
+++ b/stories/areachart.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { AreaChart } from '../src/lib/components/areachart/AreaChart.component';
 import { area_charts } from './data/areachart';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 const xAxis_area_chart = {
   field: 'time',
   type: 'temporal',
@@ -104,7 +104,7 @@ const area2 = {
 const areas = [area, area2];
 const id_area_chart = 'vis_area_chart';
 export default {
-  title: 'Components/Chart/AreaChart',
+  title: 'Components/Data Display/Charts/Area Chart',
   component: AreaChart,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
 };
diff --git a/stories/banner.stories.tsx b/stories/banner.stories.tsx
index 0b5e38e0ab..02d0e47e5f 100644
--- a/stories/banner.stories.tsx
+++ b/stories/banner.stories.tsx
@@ -5,7 +5,7 @@ import { Wrapper } from './common';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Notification/Banner',
+  title: 'Components/Feedback/Banner',
   component: Banner,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/barchart.stories.tsx b/stories/barchart.stories.tsx
index dc243d38ee..c19ededc22 100644
--- a/stories/barchart.stories.tsx
+++ b/stories/barchart.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BarChart } from '../src/lib/components/barchart/BarChart.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 import {
   verticalStackedData,
   horizontalStackedData,
@@ -9,7 +9,6 @@ import {
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
 
 import { Component } from '@storybook/blocks';
-import { minHeight } from 'styled-system';
 
 const width = 800;
 // the size control the size of each small item of the bar
@@ -112,7 +111,7 @@ const horizontalBarChartArgs = {
 };
 
 export default {
-  title: 'Components/Chart/BarChart',
+  title: 'Components/Data Display/Charts/BarChart',
   component: BarChart,
   decorators: [
     (story: Component) => (
diff --git a/stories/box.stories.tsx b/stories/box.stories.tsx
index ebaf33b85e..5ccdc117e6 100644
--- a/stories/box.stories.tsx
+++ b/stories/box.stories.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Box } from '../src/lib/components/box/Box';
 
 const info = {
-  title: 'Components/Box',
+  title: 'Components/Styling/Box',
   component: Box,
   decorators: [(story) => <HighlightBorder>{story()}</HighlightBorder>],
 };
diff --git a/stories/breadcrumb.stories.tsx b/stories/breadcrumb.stories.tsx
index d02ef51446..392dc4bab9 100644
--- a/stories/breadcrumb.stories.tsx
+++ b/stories/breadcrumb.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
   title: 'Components/Navigation/Breadcrumb',
   component: Breadcrumb,
diff --git a/stories/card.stories.tsx b/stories/card.stories.tsx
index 566403b620..849051dbe5 100644
--- a/stories/card.stories.tsx
+++ b/stories/card.stories.tsx
@@ -15,7 +15,7 @@ import { action } from '@storybook/addon-actions';
 const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
 
 export default {
-  title: 'Components/Card',
+  title: 'Components/Data Display/Card',
   component: Card,
   decorators: [
     (story) => (
diff --git a/stories/checkbox.stories.tsx b/stories/checkbox.stories.tsx
index 6c96edd8e8..1bcdff2963 100644
--- a/stories/checkbox.stories.tsx
+++ b/stories/checkbox.stories.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Checkbox } from '../src/lib/components/checkbox/Checkbox.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
-  title: 'Components/Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   decorators: [
     (story) => (
diff --git a/stories/circularprogressbar.stories.tsx b/stories/circularprogressbar.stories.tsx
index e33adab663..5d09964874 100644
--- a/stories/circularprogressbar.stories.tsx
+++ b/stories/circularprogressbar.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
-import { Wrapper, Title, Text } from './common';
+import { Wrapper, Text } from './common';
 export default {
   title: 'Components/Progress & loading/CircularProgressBar',
   component: CircularProgressBar,
diff --git a/stories/collapsiblepanel.stories.tsx b/stories/collapsiblepanel.stories.tsx
index df9260664e..61d6cd3684 100644
--- a/stories/collapsiblepanel.stories.tsx
+++ b/stories/collapsiblepanel.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Title, Wrapper } from './common';
+import { Wrapper } from './common';
 import { CollapsiblePanel } from '../src/lib/components/collapsiblepanel/CollapsiblePanel.component';
 const items = [<i className="fas fa-carrot" />, 'banana', 'apple', 'grape'];
 export default {
diff --git a/stories/dropdown.stories.tsx b/stories/dropdown.stories.tsx
index c521ad0fee..5ccc19cfb2 100644
--- a/stories/dropdown.stories.tsx
+++ b/stories/dropdown.stories.tsx
@@ -28,7 +28,7 @@ const items = [
 ];
 
 export default {
-  title: 'Components/Dropdown',
+  title: 'Components/Navigation/Dropdown',
   component: Dropdown,
   decorators: [
     (story) => (
diff --git a/stories/dropzone.stories.tsx b/stories/dropzone.stories.tsx
index c2bbec1dad..a53c8b82fb 100644
--- a/stories/dropzone.stories.tsx
+++ b/stories/dropzone.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropzone } from '../src/lib/components/dropzone/Dropzone';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
-  title: 'Components/Dropzone',
+  title: 'Components/Inputs/Dropzone',
   component: Dropzone,
   decorators: [
     (story) => <Wrapper style={{ minHeight: '10vh' }}>{story()}</Wrapper>,
diff --git a/stories/emptystate.stories.tsx b/stories/emptystate.stories.tsx
index 60d659c424..f9cd477490 100644
--- a/stories/emptystate.stories.tsx
+++ b/stories/emptystate.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
 import { Wrapper } from './common';
 export default {
-  title: 'Components/EmptyState',
+  title: 'Components/Data Display/EmptyState',
   component: EmptyState,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/errorpage401.stories.tsx b/stories/errorpage401.stories.tsx
index 21eed1d6e7..22c4baa1c3 100644
--- a/stories/errorpage401.stories.tsx
+++ b/stories/errorpage401.stories.tsx
@@ -3,7 +3,7 @@ import { ErrorPage401 } from '../src/lib/components/error-pages/ErrorPage401.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/401',
+  title: 'Components/Navigation/Error Pages/401',
   component: ErrorPage401,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
diff --git a/stories/errorpage404.stories.tsx b/stories/errorpage404.stories.tsx
index 463210f857..dbf79ad713 100644
--- a/stories/errorpage404.stories.tsx
+++ b/stories/errorpage404.stories.tsx
@@ -3,7 +3,7 @@ import { ErrorPage404 } from '../src/lib/components/error-pages/ErrorPage404.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/404',
+  title: 'Components/Navigation/Error Pages/404',
   component: ErrorPage404,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
diff --git a/stories/errorpage500.stories.tsx b/stories/errorpage500.stories.tsx
index d354b5e423..6f62e654fa 100644
--- a/stories/errorpage500.stories.tsx
+++ b/stories/errorpage500.stories.tsx
@@ -3,7 +3,7 @@ import { ErrorPage500 } from '../src/lib/components/error-pages/ErrorPage500.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/500',
+  title: 'Components/Navigation/Error Pages/500',
   component: ErrorPage500,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
diff --git a/stories/errorpageauth.stories.tsx b/stories/errorpageauth.stories.tsx
index 915437a44f..be60a3b3eb 100644
--- a/stories/errorpageauth.stories.tsx
+++ b/stories/errorpageauth.stories.tsx
@@ -3,7 +3,7 @@ import { ErrorPageAuth } from '../src/lib/components/error-pages/ErrorPageAuth.c
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/Auth',
+  title: 'Components/Navigation/Error Pages/Auth',
   component: ErrorPageAuth,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
diff --git a/stories/form.stories.tsx b/stories/form.stories.tsx
index 29a42da5be..73957d355c 100644
--- a/stories/form.stories.tsx
+++ b/stories/form.stories.tsx
@@ -16,7 +16,7 @@ import { Select } from '../src/lib/components/selectv2/Selectv2.component';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Form',
+  title: 'Templates/Form',
   component: Form,
   args: {
     kind: 'page',
diff --git a/stories/globalhealthbar.stories.tsx b/stories/globalhealthbar.stories.tsx
index b403676be3..d611e94ce3 100644
--- a/stories/globalhealthbar.stories.tsx
+++ b/stories/globalhealthbar.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 const alerts = [
   {
     id: '1',
@@ -104,7 +104,7 @@ const startNotFirstDay = '2021-02-23T23:00:00Z';
 const endNotFirstDay = '2021-03-01T23:00:00Z';
 
 export default {
-  title: 'Components/Chart/GlobalHealthBar',
+  title: 'Components/Data Display/Charts/GlobalHealthBar',
   component: GlobalHealthBar,
   decorators: [
     (story) => (
diff --git a/stories/guideline/button-guideline.mdx b/stories/guideline/button-guideline.mdx
index 2030b719f4..abb293bddd 100644
--- a/stories/guideline/button-guideline.mdx
+++ b/stories/guideline/button-guideline.mdx
@@ -1,21 +1,21 @@
 import { Meta, Story, Canvas } from '@storybook/blocks';
-import {Button} from '../../src/lib/components/button/Button.component';
+import { Button } from '../../src/lib/components/button/Button.component';
 
-<Meta title="Guideline/Button"/>
+<Meta title="Guideline/Button" />
 
 # Button
 
 ## Size & style
 
-*   Only 1 size is used - Height: 32px
-*   Border-radius: 3px
-*   Minimum width: 80px
+- Only 1 size is used - Height: 32px
+- Border-radius: 3px
+- Minimum width: 80px
 
 {/* <Story id="components-button--size" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
-{/*<Story id="components-button--size" /> */}
+{/* <Story id="components-button--size" /> */}
 
-|     | px  |
+|         | px  |
 | ------- | --- |
 | Smaller | 24  |
 | Small   | 28  |
@@ -27,10 +27,10 @@ import {Button} from '../../src/lib/components/button/Button.component';
 
 Button’s label measurement:
 
-*   Line height: 20px
-*   Vertical padding: 8px
-*   Horizontal padding of 16px
-*   Space between icon & label: 8px
+- Line height: 20px
+- Vertical padding: 8px
+- Horizontal padding of 16px
+- Space between icon & label: 8px
 
 ## Type
 
@@ -60,11 +60,11 @@ color: #313131; /*border*/
 
 ### Links
 
-*to add*
+_to add_
 
 ## States
 
-*to produce*
+_to produce_
 
 ### Disabled button
 
@@ -72,16 +72,16 @@ Disabled state only if an action on the current screen can enable it (action pos
 
 ## Placement
 
-*   Primary buttons placed on the right of a group.
-*   Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process.
+- Primary buttons placed on the right of a group.
+- Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process.
 
 Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently.
 
 ### Button spacing
 
-*   Horizontal spacing: 16px
-*   Vertical spacing: 12px
-*   Space between 2 buttons: 24px - when there is no space constraint
+- Horizontal spacing: 16px
+- Vertical spacing: 12px
+- Space between 2 buttons: 24px - when there is no space constraint
 
 ## Icon & label on buttons
 
@@ -112,20 +112,20 @@ Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study,
 
 Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons.
 
-*   Use sentence case.
-*   Capitalize proper nouns.
-*   Use specific action-oriented text for CTAs.
+- Use sentence case.
+- Capitalize proper nouns.
+- Use specific action-oriented text for CTAs.
 
 Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc.
 
 Be sure to:
 
-*   Check for consistent use across the UI.
-*   Reserve enough space for translation to other languages.
-*   Avoid excessive use of exclamation points (!).
+- Check for consistent use across the UI.
+- Reserve enough space for translation to other languages.
+- Avoid excessive use of exclamation points (!).
 
 Don't:
 
-*   Use icons only.
-*   Use punctuation.
-*   Write “Click here.”
+- Use icons only.
+- Use punctuation.
+- Write “Click here.”
diff --git a/stories/guideline/chart-guideline.mdx b/stories/guideline/chart-guideline.mdx
index f7d82821f5..61097e4d91 100644
--- a/stories/guideline/chart-guideline.mdx
+++ b/stories/guideline/chart-guideline.mdx
@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/blocks';
 import { ChartExample } from './mdxExampleComponents';
 import { SuccessBanner } from '../banner.stories';
 
-<Meta title="Guideline/Chart"/>
+<Meta title="Guidelines/Chart" />
 
 # Charts
 
@@ -20,11 +20,11 @@ Only use grid lines when it’s helpful. Possible to use only horizontal or vert
 
 ### Elements
 
-*   Title
-*   Axis
-*   Legend
+- Title
+- Axis
+- Legend
 
-*produce an example WIP*
+_produce an example WIP_
 
 ## Type
 
@@ -32,24 +32,24 @@ Only use grid lines when it’s helpful. Possible to use only horizontal or vert
 
 ### Pie charts
 
-*   No more than 6 categories
-*   Values should be different enough (otherwise select Bar charts)
-*   Should be a 100% total
-*   Categories in the desc order
+- No more than 6 categories
+- Values should be different enough (otherwise select Bar charts)
+- Should be a 100% total
+- Categories in the desc order
 
-*produce an example WIP*
+_produce an example WIP_
 
-*(Currently, there is no Pie chart in the UI)*
+_(Currently, there is no Pie chart in the UI)_
 
 ### Bar and column charts
 
-*   Should start at a baseline of zero.
-{/* <ChartExample /> */}
+- Should start at a baseline of zero.
+  {/* <ChartExample /> */}
 
 ### Line charts
 
-*   No more than 5–7 different lines
-*   Avoid randomly chosen color (otherwise risk of contrast issues)
+- No more than 5–7 different lines
+- Avoid randomly chosen color (otherwise risk of contrast issues)
 
 Here, the colors for Get and List are too close.
 
@@ -57,7 +57,7 @@ Components/Chart/LineChart
 
 Area charts
 
-*   Could be a single area, overlapping area, or stacked area
-*   Max 3-4 categories
+- Could be a single area, overlapping area, or stacked area
+- Max 3-4 categories
 
 {/* <SuccessBanner /> */}
diff --git a/stories/healthselectorv2.stories.tsx b/stories/healthselectorv2.stories.tsx
index 4100d14d9d..bb8a3f5d81 100644
--- a/stories/healthselectorv2.stories.tsx
+++ b/stories/healthselectorv2.stories.tsx
@@ -5,7 +5,7 @@ import {
   Healthselector,
   optionsDefaultConfiguration,
 } from '../src/lib/components/healthselectorv2/HealthSelector.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 import { Icon } from '../src/lib/components/icon/Icon.component';
 export default {
   title: 'Components/v2/Healthselector',
diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx
index f2e2f37df3..9f7e2a3203 100644
--- a/stories/icon.stories.tsx
+++ b/stories/icon.stories.tsx
@@ -18,10 +18,6 @@ export default {
   },
 };
 
-/**
- * #### Subtitle
- * This is the description
- * */
 export const Playground = {
   args: {
     name: 'Exclamation-triangle',
diff --git a/stories/input.stories.tsx b/stories/input.stories.tsx
index 002ce92819..e9ce441355 100644
--- a/stories/input.stories.tsx
+++ b/stories/input.stories.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
-import { Input } from '../src/lib/components/input/Input.component';
+import React from 'react';
 import { Input as InputV2 } from '../src/lib/components/inputv2/inputv2';
 import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 
 const sizes = ['1/3', '1/2', '2/3', '1'];
 
@@ -13,7 +12,7 @@ const InputWrapper = styled.div`
 `;
 
 export default {
-  title: 'Components/Input/Input',
+  title: 'Components/Inputs/Input',
   component: InputV2,
   decorators: [
     (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
diff --git a/stories/lateralnavbarlayout.stories.tsx b/stories/lateralnavbarlayout.stories.tsx
index 57763f824e..56463a1e70 100644
--- a/stories/lateralnavbarlayout.stories.tsx
+++ b/stories/lateralnavbarlayout.stories.tsx
@@ -32,7 +32,7 @@ const sideBarActions = [
 ];
 
 export default {
-  title: 'Components/Navigation/LateralNavbarLayout',
+  title: 'Templates/LateralNavbarLayout',
   component: LateralNavbarLayout,
   args: {
     children: <Loader size="massive" />,
diff --git a/stories/layout.stories.tsx b/stories/layout.stories.tsx
index 942bdec488..c486c8a7f6 100644
--- a/stories/layout.stories.tsx
+++ b/stories/layout.stories.tsx
@@ -1,10 +1,7 @@
-import React, { useState } from 'react';
-import { Layout } from '../src/lib/components/layout/Layout.component';
+import React from 'react';
 import { Layout as Layout2 } from '../src/lib/components/layout/v2';
 import { TwoPanelLayout } from '../src/lib/components/layout/v2/panels';
 import { AppContainer } from '../src/lib/components/layout/v2/AppContainer';
-import { Loader } from '../src/lib/components/loader/Loader.component';
-import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { Stack } from '../src/lib/spacing';
 import { Icon } from '../src/lib/components/icon/Icon.component';
@@ -12,99 +9,10 @@ import { Link, Text } from '../src/lib/components/text/Text.component';
 import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
 import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component';
 import { ScrollbarWrapper } from '../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component';
-import { DefaultSidebar } from './sidebar.stories';
 import { Meta } from '@storybook/react';
 
-const sideBarActions = [
-  {
-    label: 'Dashboard',
-    icon: <i className="fas fa-tachometer-alt" />,
-    onClick: action('dashboard clicked'),
-    active: true,
-    'data-cy': 'Dashboard',
-  },
-  {
-    label: 'Servers',
-    icon: <i className="fas fa-server" />,
-    onClick: action('server clicked'),
-    'data-cy': 'Servers',
-  },
-  {
-    label: 'Disks',
-    icon: <i className="fas fa-hdd" />,
-    onClick: action('disk clicked'),
-    'data-cy': 'Disks',
-  },
-];
-const rightActions = [
-  {
-    type: 'dropdown',
-    text: 'FR',
-    icon: <i className="fas fa-globe" />,
-    items: [
-      {
-        label: 'English',
-        name: 'EN',
-        onClick: action('English selected'),
-      },
-    ],
-  },
-  {
-    type: 'dropdown',
-    icon: <i className="fas fa-th" />,
-    items: [
-      {
-        label: 'Hyperdrive UI',
-        onClick: action('Hyperdrive UI clicked'),
-      },
-    ],
-  },
-  {
-    type: 'dropdown',
-    icon: <i className="fas fa-question-circle" />,
-    items: [
-      {
-        label: 'About',
-        onClick: action('About clicked'),
-      },
-      {
-        label: 'Documentation',
-        onClick: action('Documentation clicked'),
-      },
-      {
-        label: 'Onboarding',
-        onClick: action('Onboarding clicked'),
-      },
-    ],
-  },
-  {
-    type: 'dropdown',
-    text: 'Carlito',
-    icon: <i className="fas fa-user" />,
-    items: [
-      {
-        label: 'Log out',
-        onClick: action('Logout clicked'),
-      },
-    ],
-  },
-];
-// const  meta: Meta<typeof Layout> = {
-//   title: 'Components/Navigation/Layout',
-//   component: Layout,
-//   args:{
-//     sidebar:{
-//       actions: sideBarActions,
-//     },
-//     navbar:{
-//       productName: 'Harware UI',
-//       rightActions,
-//     }
-//   }
-// };
-
 const meta: Meta<typeof Layout2> = {
-  title: 'Components/Navigation/Layout',
+  title: 'Templates/Layout',
   component: Layout2,
   args: {},
 };
diff --git a/stories/linechart.stories.tsx b/stories/linechart.stories.tsx
index 3b959dbb24..dce407a2c3 100644
--- a/stories/linechart.stories.tsx
+++ b/stories/linechart.stories.tsx
@@ -252,7 +252,7 @@ const tooltipConfigInOut = {
   },
 };
 export default {
-  title: 'Components/Chart/LineChart',
+  title: 'Components/Data Display/Charts/LineChart',
   component: LineChart,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/linecharttemporal.stories.tsx b/stories/linecharttemporal.stories.tsx
index 8a121dc32c..a1c204143c 100644
--- a/stories/linecharttemporal.stories.tsx
+++ b/stories/linecharttemporal.stories.tsx
@@ -10,7 +10,7 @@ import { Wrapper } from './common';
 import { dataLineChartV2, dataLineChartV2_readwrite } from './data/linechart';
 import { defaultRenderTooltipSerie } from '../src/lib/components/linetemporalchart/tooltip';
 export default {
-  title: 'Components/v2/LineTemporalChart',
+  title: 'Components/Data Display/Charts/v2/LineTemporalChart',
   component: LineTemporalChart,
   decorators: [
     (story) => (
diff --git a/stories/modal.stories.tsx b/stories/modal.stories.tsx
index 46ea407a9d..468d344001 100644
--- a/stories/modal.stories.tsx
+++ b/stories/modal.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Modal } from '../src/lib/components/modal/Modal.component';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
@@ -9,7 +9,7 @@ import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
 import { useArgs } from '@storybook/preview-api';
 
 export default {
-  title: 'Components/Notification/Modal',
+  title: 'Components/Feedback/Modal',
   component: Modal,
   decorators: [
     (story) => <Wrapper style={{ minHeight: '10vh' }}>{story()}</Wrapper>,
@@ -81,93 +81,6 @@ export const CustomizeTitle = {
   },
 };
 
-/*
-export const Default = {
-  render: ({}) => {
-    return (
-      <Wrapper>
-        <Modal
-          close={action('close clicked')}
-          isOpen={true}
-          title="Hello"
-          footer={
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                text="No"
-                size="base"
-                outlined
-                onClick={action('No clicked')}
-              />
-              <Button
-                variant="buttonSecondary"
-                text="Yes"
-                size="base"
-                onClick={action('Yes clicked')}
-              />
-            </div>
-          }
-        >
-          <span>Do you want a cookie?</span>
-        </Modal>
-      </Wrapper>
-    );
-  },
-};
-
-export const CustomizeTitle = {
-  render: ({}) => {
-    return (
-      <Wrapper>
-        <Modal
-          isOpen={true}
-          title="Hello"
-          footer={
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                label="No"
-                size="default"
-                variant='outline'
-                onClick={action('No clicked')}
-              />
-              <Button
-                variant="secondary"
-                label="Yes"
-                size="base"
-                onClick={action('Yes clicked')}
-              />
-            </div>
-          }
-          subTitle={
-            <Stack>
-              <>Step 1/2</>
-              <IconHelp
-                tooltipMessage={
-                  <ul>
-                    <li>Hello, this is the tooltip of the modal</li>
-                  </ul>
-                }
-              />
-            </Stack>
-          }
-        >
-          <div>Do you want some chocolate? :D</div>
-        </Modal>
-      </Wrapper>
-    );
-  },
-};
-*/
-
 const Demo = (myargs, args) => () => {
   const [{ isOpen }, updateArgs] = myargs;
   return (
@@ -206,46 +119,6 @@ const Demo = (myargs, args) => () => {
   );
 };
 
-const Action = {
-  render: ({}) => {
-    const [displayed, setDisplayed] = useState(false);
-    return (
-      <>
-        <Button
-          label={'Show modal'}
-          onClick={() => setDisplayed((disp) => !disp)}
-        />
-        <Modal
-          close={() => setDisplayed((disp) => !disp)}
-          isOpen={displayed}
-          title="Hello Table"
-          footer={
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                label="No"
-                variant="outline"
-                onClick={action('No clicked')}
-              />
-              <Button
-                variant="secondary"
-                label="Yes"
-                onClick={action('Yes clicked')}
-              />
-            </div>
-          }
-        >
-          <span>Do you want a cookie?</span>
-        </Modal>
-      </>
-    );
-  },
-};
-
 export const WithinTable = {
   render: (args) => {
     const myArgs = useArgs();
diff --git a/stories/multiselect.stories.tsx b/stories/multiselect.stories.tsx
index b97a185912..98bf5e2b11 100644
--- a/stories/multiselect.stories.tsx
+++ b/stories/multiselect.stories.tsx
@@ -62,7 +62,7 @@ const search = {
   selectedOption: null,
 };
 export default {
-  title: 'Components/Selector/MultiSelect',
+  title: 'Components/Inputs/Selector/MultiSelect',
   component: MultiSelect,
 };
 export const Default = {
diff --git a/stories/notifications.stories.tsx b/stories/notifications.stories.tsx
index ddc10f9e12..b148adc986 100644
--- a/stories/notifications.stories.tsx
+++ b/stories/notifications.stories.tsx
@@ -64,7 +64,7 @@ const brNotifications: Array<Props> = [
   },
 ];
 export default {
-  title: 'Components/Notification/Notifications',
+  title: 'Components/Feedback/Notifications',
   component: Notifications,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
 };
diff --git a/stories/searchinput.stories.tsx b/stories/searchinput.stories.tsx
index c55d4931b7..d6eba65a04 100644
--- a/stories/searchinput.stories.tsx
+++ b/stories/searchinput.stories.tsx
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
 import { Wrapper, Title } from './common';
 export default {
-  title: 'Components/Input/SearchInput',
+  title: 'Components/Inputs/SearchInput',
   component: SearchInput,
 };
 export const Default = {
diff --git a/stories/select.stories.tsx b/stories/select.stories.tsx
index 66186f6164..1831e42ac3 100644
--- a/stories/select.stories.tsx
+++ b/stories/select.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Select } from '../src/lib/components/select/Select.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 const options = Array.from(new Array(100), (_, index) => ({
   label: `Item ${index}`,
   value: index,
@@ -15,7 +15,7 @@ const customFormatOptionLabel = ({ value, label, ...rest }) => (
 );
 
 export default {
-  title: 'Components/Selector/Select',
+  title: 'Components/Inputs/Selector/Select',
   component: Select,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   argTypes: {
diff --git a/stories/selectinput.stories.tsx b/stories/selectinput.stories.tsx
index 4815efd9a0..14123c9ed9 100644
--- a/stories/selectinput.stories.tsx
+++ b/stories/selectinput.stories.tsx
@@ -19,7 +19,7 @@ const SelectWrapper = styled.div`
 `;
 
 export default {
-  title: 'Components/v2/SelectInput',
+  title: 'Components/Inputs/v2/SelectInput',
   component: Select,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/selectv2.stories.tsx b/stories/selectv2.stories.tsx
index fb4e586aa1..765dd743b0 100644
--- a/stories/selectv2.stories.tsx
+++ b/stories/selectv2.stories.tsx
@@ -3,7 +3,6 @@ import {
   Option,
 } from '../src/lib/components/selectv2/Selectv2.component';
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import { Wrapper } from './common';
 import { Icon } from '../src/lib/components/icon/Icon.component';
 export default {
@@ -13,12 +12,6 @@ export default {
     (story) => <Wrapper className="storybook-select">{story()}</Wrapper>,
   ],
 };
-const SelectWrapper = styled.div`
-  max-width: 300px;
-  min-height: 100vh;
-  flex-direction: column;
-  display: flex;
-`;
 
 const generateOptions = (n = 10) =>
   Array.from(new Array(n), (_, index) => ({
diff --git a/stories/spacing.stories.tsx b/stories/spacing.stories.tsx
index 403103aabf..4c29d0e47a 100644
--- a/stories/spacing.stories.tsx
+++ b/stories/spacing.stories.tsx
@@ -11,7 +11,7 @@ import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
 import { brand } from '../src/lib/style/theme';
 
 export default {
-  title: 'Components/Spacing Utils',
+  title: 'Components/Styling/Spacing Utils',
   component: Stack,
 };
 
diff --git a/stories/sparkline.stories.tsx b/stories/sparkline.stories.tsx
index afdeffa7d8..e2ae8d3585 100644
--- a/stories/sparkline.stories.tsx
+++ b/stories/sparkline.stories.tsx
@@ -32,7 +32,7 @@ const lineConfig = {
   interpolate: 'monotone',
 };
 export default {
-  title: 'Components/Chart/SparkLine',
+  title: 'Components/Data Display/Charts/SparkLine',
   component: SparkLine,
   args: {
     xAxis,
diff --git a/stories/statuswrapper.stories.tsx b/stories/statuswrapper.stories.tsx
index c993450918..0d4a60ee8b 100644
--- a/stories/statuswrapper.stories.tsx
+++ b/stories/statuswrapper.stories.tsx
@@ -16,7 +16,7 @@ const PreviewWrapper = styled(Wrapper)`
   min-height: 0;
 `;
 export default {
-  title: 'Components/StatusWrapper',
+  title: 'Components/Data Display/StatusWrapper',
   component: StatusWrapper,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/stepper.stories.tsx b/stories/stepper.stories.tsx
index 2ca1667cbd..53e38af4ee 100644
--- a/stories/stepper.stories.tsx
+++ b/stories/stepper.stories.tsx
@@ -108,7 +108,7 @@ enum StepIndexes {
 
 const meta: Meta<typeof Stepper> = {
   tags: ['autodocs'],
-  title: 'Components/Stepper',
+  title: 'Components/Progress & loading/Stepper',
   component: Stepper,
 };
 export default meta;
diff --git a/stories/tablev2.stories.tsx b/stories/tablev2.stories.tsx
index 63d49756dc..cf43fded42 100644
--- a/stories/tablev2.stories.tsx
+++ b/stories/tablev2.stories.tsx
@@ -16,7 +16,7 @@ const Flex = styled(Box)`
 `;
 
 const info = {
-  title: 'Components/V2/Table',
+  title: 'Components/Data Display/V2/Table',
   component: Table,
 };
 
diff --git a/stories/tabsv2.stories.tsx b/stories/tabsv2.stories.tsx
index 5be663d879..903dbb39ce 100644
--- a/stories/tabsv2.stories.tsx
+++ b/stories/tabsv2.stories.tsx
@@ -11,7 +11,7 @@ const Content = styled.div`
   color: ${(props) => props.theme.textPrimary};
 `;
 export default {
-  title: 'Components/v2/Tabs',
+  title: 'Components/Navigation/v2/Tabs',
   component: Tabs,
   decorators: [
     (story) => (
diff --git a/stories/text.stories.tsx b/stories/text.stories.tsx
index c316970a01..912075fe60 100644
--- a/stories/text.stories.tsx
+++ b/stories/text.stories.tsx
@@ -17,7 +17,7 @@ const TextWrapper = styled(Wrapper)`
   min-height: 0;
 `;
 export default {
-  title: 'Components/Text',
+  title: 'Components/Styling/Text',
   component: StatusText,
   argTypes: {
     status: {
diff --git a/stories/textarea.stories.tsx b/stories/textarea.stories.tsx
index 97ad416efd..92f017098c 100644
--- a/stories/textarea.stories.tsx
+++ b/stories/textarea.stories.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-import { Wrapper, Title } from './common';
 import { action } from '@storybook/addon-actions';
 import { TextArea } from '../src/lib';
 export default {
-  title: 'Components/Input/TextArea',
+  title: 'Components/Inputs/TextArea',
   component: TextArea,
   args: {
     onChange: action('onChange'),
diff --git a/stories/toast.stories.tsx b/stories/toast.stories.tsx
index 459972fdfc..196a32a811 100644
--- a/stories/toast.stories.tsx
+++ b/stories/toast.stories.tsx
@@ -9,7 +9,7 @@ import {
 } from '../src/lib/components/toast/Toast.component';
 
 export default {
-  title: 'Components/Toast',
+  title: 'Components/Feedback/Toast',
   component: Toast,
   tags: ['autodocs'],
   argTypes: {
diff --git a/stories/toggle.stories.tsx b/stories/toggle.stories.tsx
index 6bf8851c7c..863674208c 100644
--- a/stories/toggle.stories.tsx
+++ b/stories/toggle.stories.tsx
@@ -3,7 +3,7 @@ import { Toggle } from '../src/lib/components/toggle/Toggle.component';
 import { Wrapper } from './common';
 import { useArgs } from '@storybook/preview-api';
 export default {
-  title: 'Components/Toggle',
+  title: 'Components/Inputs/Toggle',
   component: Toggle,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
diff --git a/stories/tooltip.stories.tsx b/stories/tooltip.stories.tsx
index dcd6ec6fe2..66ca1e6fcd 100644
--- a/stories/tooltip.stories.tsx
+++ b/stories/tooltip.stories.tsx
@@ -5,7 +5,7 @@ import { Wrapper, Title, SubTitle } from './common';
 import { placementOptions } from './controls';
 
 export default {
-  title: 'Components/Notification/Tooltip',
+  title: 'Components/Feedback/Tooltip',
   component: Tooltip,
   argTypes: {
     placement: {
diff --git a/stories/vegachart.stories.tsx b/stories/vegachart.stories.tsx
index f2252cf902..521a9b6ee7 100644
--- a/stories/vegachart.stories.tsx
+++ b/stories/vegachart.stories.tsx
@@ -83,7 +83,7 @@ const spec = {
 };
 const id = 'vis';
 export default {
-  title: 'Components/Chart/VegaChart',
+  title: 'Components/Data Display/Charts/VegaChart',
   component: VegaChart,
 };
 export const Default = {

From fe8e41cc7afc92e2fbcd7a5b17dbcb696ca6b462 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 16 Nov 2023 16:39:17 +0100
Subject: [PATCH 2/6] add stories in the button guidelines

---
 stories/buttonv2.stories.tsx           | 50 ++++++++++++++-
 stories/common.tsx                     |  2 +-
 stories/guideline/button-guideline.mdx | 84 ++++++++++++++------------
 3 files changed, 93 insertions(+), 43 deletions(-)

diff --git a/stories/buttonv2.stories.tsx b/stories/buttonv2.stories.tsx
index e40276c6d9..c830f87f32 100644
--- a/stories/buttonv2.stories.tsx
+++ b/stories/buttonv2.stories.tsx
@@ -6,14 +6,19 @@ import {
 } from '../src/lib/components/buttonv2/Buttonv2.component';
 import { Wrapper } from './common';
 import { CopyButton } from '../src/lib/next';
-import { Icon } from '../src/lib';
+
 import { tooltipArgTypes, iconArgType } from './controls';
+import { Form, Icon, Input, Stack } from '../src/lib';
 
 export default {
   title: 'Components/v2/Button',
   component: Button,
   decorators: [
-    (story) => <Wrapper className="storybook-button">{story()}</Wrapper>,
+    (story) => (
+      <Wrapper className="storybook-button" style={{ height: 'auto' }}>
+        {story()}
+      </Wrapper>
+    ),
   ],
   args: {
     onClick: action('Button clicked'),
@@ -83,10 +88,49 @@ export const DefaultButtons = {
   },
 };
 
+export const Primary = {
+  args: {
+    variant: 'primary',
+    label: 'Primary',
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+    label: 'Secondary',
+  },
+};
+
+export const Tertiary = {
+  args: {
+    variant: 'outline',
+    label: 'Tertiary',
+  },
+};
+
+export const SimpleForm = {
+  render: ({ ...args }) => {
+    return (
+      <Form
+        layout={{ kind: 'page', title: 'Simple Form' }}
+        rightActions={
+          <Stack gap={'r16'}>
+            <Button variant="outline" label="Cancel" />
+            <Button variant="primary" label="Save" />
+          </Stack>
+        }
+      >
+        <Input name="name" label="Name" value="" onChange={() => {}} />
+      </Form>
+    );
+  },
+};
+
 export const ButtonsWithIcon = {
   ...DefaultButtons,
   args: {
-    icon: <i className="fas fa-arrow-right"></i>,
+    icon: <Icon name="Sync"></Icon>,
   },
 };
 
diff --git a/stories/common.tsx b/stories/common.tsx
index 65ac243120..5864717b2c 100644
--- a/stories/common.tsx
+++ b/stories/common.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { getThemePropSelector } from '../src/lib/utils';
 const StyledWrapper = styled.div`
   padding: 30px;
-  min-height: 30vh;
+  height: 30vh;
   background-color: ${getThemePropSelector('backgroundLevel1')};
   color: ${getThemePropSelector('textPrimary')};
 `;
diff --git a/stories/guideline/button-guideline.mdx b/stories/guideline/button-guideline.mdx
index abb293bddd..0710f23f19 100644
--- a/stories/guideline/button-guideline.mdx
+++ b/stories/guideline/button-guideline.mdx
@@ -1,7 +1,8 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas, Primary, Controls } from '@storybook/blocks';
 import { Button } from '../../src/lib/components/button/Button.component';
+import * as ButtonStories from '../buttonv2.stories';
 
-<Meta title="Guideline/Button" />
+<Meta title="Button" of={ButtonStories} />
 
 # Button
 
@@ -11,10 +12,6 @@ import { Button } from '../../src/lib/components/button/Button.component';
 - Border-radius: 3px
 - Minimum width: 80px
 
-{/* <Story id="components-button--size" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
-
-{/* <Story id="components-button--size" /> */}
-
 |         | px  |
 | ------- | --- |
 | Smaller | 24  |
@@ -32,31 +29,53 @@ Button’s label measurement:
 - Horizontal padding of 16px
 - Space between icon & label: 8px
 
+## Explicit button label
+
+Button labels should be as short and clear as possible and should describe the action the button performs.\
+Use one or two words if possible. Remove most prepositions and articles (a, an, the).
+
+Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc.
+
+Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons.
+
+- Use sentence case.
+- Capitalize proper nouns.
+- Use specific action-oriented text for CTAs.
+
+Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc.
+
+Be sure to:
+
+- Check for consistent use across the UI.
+- Reserve enough space for translation to other languages.
+- Avoid excessive use of exclamation points (!).
+
+Don't:
+
+- Use icons only.
+- Use punctuation.
+- Write “Click here.”
+
 ## Type
 
 ### Primary
 
 Used for the main action. It appears once within a group of buttons. For example, “Continue” in a form.
 
-> Color: #055DFF - secondary
+<Story of={ButtonStories.Primary} />
 
 ### Secondary/base
 
-{/* <Button variant="base" text="base"></Button> */}
-
 Use for the secondary action within a group of buttons.
 
-### Tertiary
+<Story of={ButtonStories.Secondary} />
 
-<div>
-  <Button outlined text="base" />
-</div>
+### Tertiary
 
 Dismissive action, such as the cancel button.
 
-```css
-color: #313131; /*border*/
-```
+<Story of={ButtonStories.Tertiary} />
+<Canvas of={ButtonStories.Tertiary} withToolbar />
 
 ### Links
 
@@ -70,6 +89,8 @@ _to produce_
 
 Disabled state only if an action on the current screen can enable it (action possibility).
 
+<Story of={ButtonStories.ButtonDisabled} />
+
 ## Placement
 
 - Primary buttons placed on the right of a group.
@@ -77,13 +98,15 @@ Disabled state only if an action on the current screen can enable it (action pos
 
 Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently.
 
+<Story of={ButtonStories.SimpleForm} />
+
 ### Button spacing
 
 - Horizontal spacing: 16px
 - Vertical spacing: 12px
 - Space between 2 buttons: 24px - when there is no space constraint
 
-## Icon & label on buttons
+## Icon on buttons
 
 ### Which icon
 
@@ -103,29 +126,12 @@ Seeing the icon first help users to scan the page more easily, except for few ca
 
 The icon should be (approximately) the same height as the text, or a lot bigger.
 
-### Explicit button label
-
-Button labels should be as short and clear as possible and should describe the action the button performs.\
-Use one or two words if possible. Remove most prepositions and articles (a, an, the).
+<Story of={ButtonStories.ButtonsWithIcon} />
 
-Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc.
+<Story of={ButtonStories.IconButtonWithTooltip} />
 
-Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons.
+### Playground
 
-- Use sentence case.
-- Capitalize proper nouns.
-- Use specific action-oriented text for CTAs.
+<Canvas of={ButtonStories.Playground} />
 
-Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc.
-
-Be sure to:
-
-- Check for consistent use across the UI.
-- Reserve enough space for translation to other languages.
-- Avoid excessive use of exclamation points (!).
-
-Don't:
-
-- Use icons only.
-- Use punctuation.
-- Write “Click here.”
+<Controls of={ButtonStories.Playground} />

From 9400528f922e8af35d064dfe8a20f423530bc606 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Fri, 17 Nov 2023 13:26:35 +0100
Subject: [PATCH 3/6] put the stories of deprecated component in a Deprecated
 folder

---
 stories/chips.stories.tsx            | 2 +-
 stories/cloudprogressbar.stories.tsx | 2 +-
 stories/collapsiblepanel.stories.tsx | 2 +-
 stories/multiselect.stories.tsx      | 2 +-
 stories/searchinput.stories.tsx      | 2 +-
 stories/select.stories.tsx           | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/stories/chips.stories.tsx b/stories/chips.stories.tsx
index 432090ec7b..aefb9c3e63 100644
--- a/stories/chips.stories.tsx
+++ b/stories/chips.stories.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../src/lib/components/icon/Icon.component';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Chips',
+  title: 'Components/Deprecated/Chips',
   component: Chips,
   decorators: [
     (story) => (
diff --git a/stories/cloudprogressbar.stories.tsx b/stories/cloudprogressbar.stories.tsx
index 4ce919c1c5..2106a169f4 100644
--- a/stories/cloudprogressbar.stories.tsx
+++ b/stories/cloudprogressbar.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CloudProgressBar } from '../src/lib/components/cloudprogressbar/CloudProgressBar.component';
 import { Wrapper, Title, SubTitle } from './common';
 export default {
-  title: 'Components/Progress & loading/CloudProgressBar',
+  title: 'Components/Deprecated/CloudProgressBar',
   component: CloudProgressBar,
   decorators: [
     (story) => (
diff --git a/stories/collapsiblepanel.stories.tsx b/stories/collapsiblepanel.stories.tsx
index 61d6cd3684..75e289f744 100644
--- a/stories/collapsiblepanel.stories.tsx
+++ b/stories/collapsiblepanel.stories.tsx
@@ -4,7 +4,7 @@ import { Wrapper } from './common';
 import { CollapsiblePanel } from '../src/lib/components/collapsiblepanel/CollapsiblePanel.component';
 const items = [<i className="fas fa-carrot" />, 'banana', 'apple', 'grape'];
 export default {
-  title: 'Components/Navigation/CollapsiblePanel',
+  title: 'Components/Deprecated/Navigation/CollapsiblePanel',
   component: CollapsiblePanel,
   decorators: [
     (story) => (
diff --git a/stories/multiselect.stories.tsx b/stories/multiselect.stories.tsx
index 98bf5e2b11..b7f51483d2 100644
--- a/stories/multiselect.stories.tsx
+++ b/stories/multiselect.stories.tsx
@@ -62,7 +62,7 @@ const search = {
   selectedOption: null,
 };
 export default {
-  title: 'Components/Inputs/Selector/MultiSelect',
+  title: 'Components/Deprecated/Selector/MultiSelect',
   component: MultiSelect,
 };
 export const Default = {
diff --git a/stories/searchinput.stories.tsx b/stories/searchinput.stories.tsx
index d6eba65a04..12b2c7eb19 100644
--- a/stories/searchinput.stories.tsx
+++ b/stories/searchinput.stories.tsx
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
 import { Wrapper, Title } from './common';
 export default {
-  title: 'Components/Inputs/SearchInput',
+  title: 'Components/Deprecated/SearchInput',
   component: SearchInput,
 };
 export const Default = {
diff --git a/stories/select.stories.tsx b/stories/select.stories.tsx
index 1831e42ac3..e5c262604f 100644
--- a/stories/select.stories.tsx
+++ b/stories/select.stories.tsx
@@ -15,7 +15,7 @@ const customFormatOptionLabel = ({ value, label, ...rest }) => (
 );
 
 export default {
-  title: 'Components/Inputs/Selector/Select',
+  title: 'Components/Deprecated/Selector/Select',
   component: Select,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   argTypes: {

From d0b25fe786be255fc30152c4703fb7716eebf211 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Fri, 17 Nov 2023 14:08:37 +0100
Subject: [PATCH 4/6] put select v2 story with inputs, start new story in
 sidebar to merge sidebar story a,d lateralnavbarlayout

---
 stories/selectv2.stories.tsx |  2 +-
 stories/sidebar.stories.tsx  | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/stories/selectv2.stories.tsx b/stories/selectv2.stories.tsx
index 765dd743b0..bcd76f77f0 100644
--- a/stories/selectv2.stories.tsx
+++ b/stories/selectv2.stories.tsx
@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { Wrapper } from './common';
 import { Icon } from '../src/lib/components/icon/Icon.component';
 export default {
-  title: 'Components/v2/Select',
+  title: 'Components/Inputs/v2/Select',
   component: Select,
   decorators: [
     (story) => <Wrapper className="storybook-select">{story()}</Wrapper>,
diff --git a/stories/sidebar.stories.tsx b/stories/sidebar.stories.tsx
index 35059df523..d8418752c6 100644
--- a/stories/sidebar.stories.tsx
+++ b/stories/sidebar.stories.tsx
@@ -6,6 +6,7 @@ import { Wrapper } from './common';
 import { useArgs } from '@storybook/preview-api';
 
 type Story = StoryObj<typeof Sidebar>;
+import { LateralNavbarLayout, Loader } from '../src/lib';
 
 const actions = [
   {
@@ -70,3 +71,13 @@ export const HoverableSidebar: Story = {
     hoverable: true,
   },
 };
+
+// export const SidebarInLayout = {
+//   render: ({ children, ...args }) => {
+//     return <LateralNavbarLayout>{children}</LateralNavbarLayout>;
+//   },
+//   args: {
+//     children: <Loader size="massive" />,
+//     actions,
+//   },
+// };

From 249bffbe7c0c91e3d66da29a2f32b98fe775fdc8 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Fri, 17 Nov 2023 15:52:20 +0100
Subject: [PATCH 5/6] add stories of sidebar in layout

---
 stories/sidebar.stories.tsx | 58 ++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/stories/sidebar.stories.tsx b/stories/sidebar.stories.tsx
index d8418752c6..76641ad3ac 100644
--- a/stories/sidebar.stories.tsx
+++ b/stories/sidebar.stories.tsx
@@ -1,12 +1,11 @@
-import React, { useState } from 'react';
-import { Sidebar } from '../src/lib/components/sidebar/Sidebar.component';
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { Wrapper } from './common';
 import { useArgs } from '@storybook/preview-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { LateralNavbarLayout, Loader } from '../src/lib';
+import { Sidebar } from '../src/lib/components/sidebar/Sidebar.component';
 
 type Story = StoryObj<typeof Sidebar>;
-import { LateralNavbarLayout, Loader } from '../src/lib';
 
 const actions = [
   {
@@ -30,18 +29,12 @@ const actions = [
 const meta: Meta<typeof Sidebar> = {
   title: 'Components/Navigation/Sidebar',
   component: Sidebar,
-  decorators: [
-    (story) => {
-      return (
-        <Wrapper style={{ padding: '0' }}>
-          <div style={{ width: '130px' }}>{story()}</div>
-        </Wrapper>
-      );
-    },
-  ],
   args: {
     actions,
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 export default meta;
 
@@ -72,12 +65,31 @@ export const HoverableSidebar: Story = {
   },
 };
 
-// export const SidebarInLayout = {
-//   render: ({ children, ...args }) => {
-//     return <LateralNavbarLayout>{children}</LateralNavbarLayout>;
-//   },
-//   args: {
-//     children: <Loader size="massive" />,
-//     actions,
-//   },
-// };
+export const SidebarInLayout: StoryObj<typeof Sidebar> = {
+  render: (args) => {
+    return (
+      <LateralNavbarLayout sidebar={{ ...args }}>
+        <Loader size="massive" />
+      </LateralNavbarLayout>
+    );
+  },
+};
+
+export const SidebarinLayoutWithToggle: Story = {
+  render: (args) => {
+    const [expandedWithToggle, setExpandedWithToggle] = useState(false);
+    return (
+      <LateralNavbarLayout
+        sidebar={{
+          expanded: expandedWithToggle,
+          onToggleClick: () => {
+            setExpandedWithToggle(!expandedWithToggle);
+          },
+          ...args,
+        }}
+      >
+        <Loader size="massive" />
+      </LateralNavbarLayout>
+    );
+  },
+};

From b7447c5b87ca50732f8af7627a319f8acd9ce61b Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Mon, 20 Nov 2023 15:01:31 +0100
Subject: [PATCH 6/6] delete v2 folder

---
 stories/buttonv2.stories.tsx         | 2 +-
 stories/healthselectorv2.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/stories/buttonv2.stories.tsx b/stories/buttonv2.stories.tsx
index c830f87f32..422b30c2fc 100644
--- a/stories/buttonv2.stories.tsx
+++ b/stories/buttonv2.stories.tsx
@@ -11,7 +11,7 @@ import { tooltipArgTypes, iconArgType } from './controls';
 import { Form, Icon, Input, Stack } from '../src/lib';
 
 export default {
-  title: 'Components/v2/Button',
+  title: 'Components/Button',
   component: Button,
   decorators: [
     (story) => (
diff --git a/stories/healthselectorv2.stories.tsx b/stories/healthselectorv2.stories.tsx
index bb8a3f5d81..8f23ef4d81 100644
--- a/stories/healthselectorv2.stories.tsx
+++ b/stories/healthselectorv2.stories.tsx
@@ -8,7 +8,7 @@ import {
 import { Wrapper } from './common';
 import { Icon } from '../src/lib/components/icon/Icon.component';
 export default {
-  title: 'Components/v2/Healthselector',
+  title: 'Components/Healthselector',
   component: Healthselector,
   decorators: [
     (story) => (