Feature/storybook layout

.storybook/preview.js

@@ -18,6 +18,10 @@ export const parameters = {
         [
           'Introduction',
           'Utils',
+          [
+            'CopyToClipboard',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+          ],
           'Form',
           [
             'Autocomplete',
@@ -67,16 +71,17 @@ export const parameters = {
             'Tooltip',
             ['Documentation', 'Live', 'Class based'],
           ],
+          'Layout',
+          [
           'Breadcrumb',
           ['Documentation', 'Live', 'Without style', 'Class based'],
-          'CopyToClipboard',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
           'Details',
           ['Documentation', 'Live', 'Without style', 'Class based'],
           'Tabs',
           ['Documentation', 'Live', 'Without style', 'Class based'],
           'Table',
           ['Documentation', 'Live', 'Without style', 'Class based'],
+          ],
           'Typography',
           [
             'Abbreviate',

stories/Breadcrumb/Classbased.stories.js

@@ -7,7 +7,7 @@ import './style.css';
  * Feel free to use your own css to style the formInput as you prefer.
  */
 export default {
-  title: 'DCXLibrary/Breadcrumb/Class based',
+  title: 'DCXLibrary/Layout/Breadcrumb/Class based',
   component: Breadcrumb,
   parameters: {
     options: {

stories/Breadcrumb/Documentation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
 import * as BreadcrumbStories from './UnStyled.stories.js';
 
-<Meta title="DCXLibrary/Breadcrumb/Documentation" />
+<Meta title="DCXLibrary/Layout/Breadcrumb/Documentation" />
 
 # Breadcrumb
 

stories/Breadcrumb/Live.stories.js

@@ -2,7 +2,7 @@ import { Breadcrumb } from '../../src/breadcrumb';
 import BreadcrumbLive from '../liveEdit/BreadcrumbLive';
 
 export default {
-  title: 'DCXLibrary/Breadcrumb/Live',
+  title: 'DCXLibrary/Layout/Breadcrumb/Live',
   component: Breadcrumb,
 
   parameters: {

stories/Breadcrumb/UnStyled.stories.js

@@ -1,7 +1,7 @@
 import { Breadcrumb, BreadcrumbItem } from '../../src/breadcrumb';
 
 export default {
-  title: 'DCXLibrary/Breadcrumb/Without style',
+  title: 'DCXLibrary/Layout/Breadcrumb/Without style',
   component: Breadcrumb,
   parameters: {
     options: {

stories/CopyToClipboard/ClassBased.stories.js

@@ -8,7 +8,7 @@ import './style.css';
  * An example of 'styled' CopyToClipboard
  */
 export default {
-  title: 'DCXLibrary/CopyToClipboard/Class based',
+  title: 'DCXLibrary/Utils/CopyToClipboard/Class based',
   component: CopyToClipboard,
   parameters: {
     options: {

stories/CopyToClipboard/Documentation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
 import * as CopyToClipboardStories from './UnStyled.stories';
 
-<Meta title="DCXLibrary/CopyToClipboard/Documentation" />
+<Meta title="DCXLibrary/Utils/CopyToClipboard/Documentation" />
 
 # CopyToClipboard
 

stories/CopyToClipboard/Live.stories.js

@@ -2,7 +2,7 @@ import { CopyToClipboard } from '../../src/copyToClipboard/CopyToClipboard';
 import CopyToClipboardLive from '../liveEdit/CopyToClipboardLive';
 
 export default {
-  title: 'DCXLibrary/CopyToClipboard/Live',
+  title: 'DCXLibrary/Utils/CopyToClipboard/Live',
   component: CopyToClipboard,
 
   parameters: {

stories/CopyToClipboard/UnStyled.stories.js

@@ -1,7 +1,7 @@
 import { CopyToClipboard } from '../../src/copyToClipboard/CopyToClipboard';
 import React, {useState, useRef} from 'react';
 export default {
-  title: 'DCXLibrary/CopyToClipboard/Without style',
+  title: 'DCXLibrary/Utils/CopyToClipboard/Without style',
   component: CopyToClipboard,
   parameters: {
     options: {

stories/Details/ClassBased.stories.js

@@ -4,7 +4,7 @@ import { Details } from '../../src/details/Details';
  * In this section the Details component is used with styling from GOV.UK. Feel free to use your own css and style the Details component as you prefer
  */
 export default {
-  title: 'DCXLibrary/Details/Class based',
+  title: 'DCXLibrary/Layout/Details/Class based',
   component: Details,
   parameters: {
     options: {

stories/Details/Documentation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs';
 import * as DetailsStories from './UnStyled.stories';
 
-<Meta title="DCXLibrary/Details/Documentation" />
+<Meta title="DCXLibrary/Layout/Details/Documentation" />
 
 # Details
 

stories/Details/Live.stories.js

@@ -2,7 +2,7 @@ import { Details } from '../../src/details/Details';
 import DetailsLive from '../liveEdit/DetailsLive';
 
 export default {
-  title: 'DCXLibrary/Details/Live',
+  title: 'DCXLibrary/Layout/Details/Live',
   component: Details,
 
   parameters: {

stories/Details/UnStyled.stories.js

@@ -1,7 +1,7 @@
 import { Details } from '../../src/details/Details';
 
 export default {
-  title: 'DCXLibrary/Details/Without style',
+  title: 'DCXLibrary/Layout/Details/Without style',
   component: Details,
   parameters: {
     options: {

stories/TabGroup/ClassBased.stories.js

@@ -7,7 +7,7 @@ import "./style.css";
  * Feel free to use your own css to style the formInput as you prefer.
  */
 export default {
-  title: 'DCXLibrary/Tabs/Class based',
+  title: 'DCXLibrary/Layout/Tabs/Class based',
   component: TabGroup,
   parameters: {
     options: {

stories/TabGroup/Documentation.mdx

@@ -4,7 +4,7 @@ import { Tab } from '../../src/tabGroup/components/Tab';
 import * as TabGroupStories from './UnStyled.stories';
 
 <Meta
-  title="DCXLibrary/Tabs/Documentation"
+  title="DCXLibrary/Layout/Tabs/Documentation"
   component={TabGroup}
   parameters={{
     viewMode: 'docs',

stories/TabGroup/Live.stories.js

@@ -1,7 +1,7 @@
 import { TabGroup } from '../../src/tabGroup';
 import TabGroupLive from '../liveEdit/TabGroupLive';
 export default {
-  title: 'DCXLibrary/Tabs/Live',
+  title: 'DCXLibrary/Layout/Tabs/Live',
   component: TabGroup,
 
   parameters: {

stories/TabGroup/UnStyled.stories.js

@@ -1,7 +1,7 @@
 import { TabGroup, Tab } from '../../src/tabGroup';
 
 export default {
-  title: 'DCXLibrary/Tabs/Without style',
+  title: 'DCXLibrary/Layout/Tabs/Without style',
   component: TabGroup,
   parameters: {
     options: {

stories/Table/ClassBased.stories.js

@@ -5,7 +5,7 @@ import './tableStyle.css';
  * In this section we're using the Table component providing the **material style** passing the relative `className`. Feel free to use your own css and style the Table as you prefer
  */
 export default {
-  title: 'DCXLibrary/Table/Class based',
+  title: 'DCXLibrary/Layout/Table/Class based',
   component: Table,
   parameters: {
     options: {

stories/Table/Documentation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs';
 import * as TableStories from './UnStyled.stories';
 
-<Meta title="DCXLibrary/Table/Documentation" />
+<Meta title="DCXLibrary/Layout/Table/Documentation" />
 
 # Table
 

stories/Table/Live.stories.js

@@ -2,7 +2,7 @@ import { Table } from '../../src/table/Table';
 import TableLive from '../liveEdit/TableLive';
 
 export default {
-  title: 'DCXLibrary/Table/Live',
+  title: 'DCXLibrary/Layout/Table/Live',
   component: Table,
 
   parameters: {

stories/Table/UnStyled.stories.js

@@ -1,7 +1,7 @@
 import { Table } from '../../src/table/Table';
 
 export default {
-  title: 'DCXLibrary/Table/Without style',
+  title: 'DCXLibrary/Layout/Table/Without style',
   component: Table,
   parameters: {
     options: {