[QOLOE-523] Reorganise the components in the Storybook

.storybook/preview.js

@@ -65,6 +65,8 @@ const preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
+                // Set order of components in the Layout category
+                order: ['*', ['Header', 'Footer', 'Breadcrumbs', 'Side navigation']],
             }
         },
         a11y: {

src/components/bs5/accordion/accordion.stories.js

@@ -9,7 +9,7 @@ import defaultdata from "./accordion.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Accordion",
+  title: "3. Components/Accordion",
   render: (args) => new Accordion(args).html,
   args: defaultdata,
 

src/components/bs5/banner/banner.stories.js

@@ -9,7 +9,7 @@ import breadcrumbdata from '../breadcrumbs/breadcrumbs.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Banner (Navigation)',
+  title: '3. Components/Banner (Navigation)',
   render: (args) => new Banner(args).html,
   argTypes: {
     variantClass: {

src/components/bs5/blockquote/blockquote.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './blockquote.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Blockquote',
+  title: '3. Components/Blockquote',
   render: (args) => new Blockquote(args).html,
 };
 

src/components/bs5/breadcrumbs/breadcrumbs.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './breadcrumbs.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Core/Breadcrumbs',
+  title: '2. Layout/Breadcrumbs',
   args: defaultdata.default,
   render: (args) => new Breadcrumbs(args).html,
 

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js

@@ -3,7 +3,7 @@ import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js";
 const defaultData = { breadcrumbs: forGov };
 
 export default {
-  title: "!Layout/Components/Breadcrumbs Wrapper",
+  title: "4. Wrappers/Components/Breadcrumbs Wrapper",
   render: (args) => {
     return new BreadcrumbsWrapperTest(args).html;
   },

src/components/bs5/button/button.stories.js

@@ -46,7 +46,7 @@ function buttonVariantsMarkup() {
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Forms/Button',
+  title: '3. Components/Button',
   args: defaultdata,
   render: (args) => {
     return `

src/components/bs5/callout/callout.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './callout.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Callout',
+  title: '3. Components/Callout',
   render: (args) => new Callout(args).html,
 
   argTypes: {

src/components/bs5/card/card--multi-action.stories.js

@@ -8,7 +8,7 @@ import tagdata from "../tag/tag.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Card/Multi action",
+  title: "3. Components/Card/Multi action",
   render: (args) => {
     const tags = new Tag(tagdata.action).html;
 

src/components/bs5/card/card--no-action.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './card.data.json';
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Card/No action",
+  title: "3. Components/Card/No action",
   render: (args) => {
     return `
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

src/components/bs5/card/card--single-action.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './card.data.json';
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Card/Single action",
+  title: "3. Components/Card/Single action",
   render: (args) => {
     return `
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

src/components/bs5/contentFooter/contentFooter.stories.js

@@ -2,7 +2,7 @@ import defaultdata from "./contentFooter.data.json";
 import { ContentFooter } from "./contentFooter.js";
 
 export default {
-  title: "!Layout/Components/Content Footer",
+  title: "4. Wrappers/Components/Content Footer",
   render: (args) => {
     return new ContentFooter(args).html;
   },

src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js

@@ -2,7 +2,7 @@ import defaultdata from "./../contentFooter/contentFooter.data.json";
 import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js";
 
 export default {
-  title: "!Layout/Components/Content Footer Wrapper",
+  title: "4. Wrappers/Components/Content Footer Wrapper",
   render: (args) => {
     return new ContentFooterWrapperTest(args).html;
   },

src/components/bs5/contentWrapper/contentWrapper.stories.js

@@ -3,7 +3,7 @@ import { ContentWrapperTest } from "./ContentWrapper.test.js";
 import defaultdata from "./contentWrapper.data.json";
 
 export default {
-  title: "!Layout/Components/Content Wrapper",
+  title: "4. Wrappers/Components/Content Wrapper",
   render: (args) => {
     return new ContentWrapperTest(args).html;
   },

src/components/bs5/correctincorrect/correctincorrect.stories.js

@@ -5,7 +5,7 @@ import { Table } from '../table/Table.js';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/CorrectIncorrect',
+  title: '3. Components/CorrectIncorrect',
   render: (args) => {
     return `${new CorrectIncorrect(args).html}`
   },

src/components/bs5/dateinput/Dateinput.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./dateinput.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Forms/Dateinput",
+  title: "3. Components/Forms/Dateinput",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/footer/footer.stories.js

@@ -6,7 +6,7 @@ import defaultdata from "./footer.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "!Core/Footer",
+  title: "2. Layout/Footer",
   render: (args) => new Footer(args).html,
   // parameters: {
   //   controls: {include: []},

src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './checkbox.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Forms/Checkbox',
+  title: '3. Components/Forms/Checkbox',
   render: (args) => {
     return `${new Formcheck(args).html}`
   },

src/components/bs5/formcheck/stories/radio/radio.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./radio.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Forms/Radio",
+  title: "3. Components/Forms/Radio",
   render: (args) => {
     return `${new Formcheck(args).html}`;
   },

src/components/bs5/fullPageWrapper/fullPage.stories.js

@@ -31,7 +31,7 @@ const defaultData = {
 };
 
 export default {
-  title: "!Layout/Full Page",
+  title: "4. Wrappers/Full Page",
   render: (args) => {
     return new FullPageTest(args).html;
   },

src/components/bs5/globalAlert/globalAlert.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './globalAlert.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/GlobalAlert',
+  title: '3. Components/Global Alert',
   render: (args) => new GlobalAlert(args).html,
   argTypes: {
     variant: {

src/components/bs5/head/head.stories.js

@@ -3,7 +3,7 @@ import { Head } from "./Head.js";
 
 export default {
   tags: ["autodocs"],
-  title: "!Core/Head/Includes CDN or Local",
+  title: "1. Core Styles/Head/Includes CDN or Local",
   render: (args) => {
     return new Head(args).html;
   },

src/components/bs5/header/header.stories.js

@@ -146,7 +146,7 @@ const mergeArgs = (arg_types, variant, menu) => ({
 
 export default {
   tags: ['autodocs'],
-  title: 'Core/Header',
+  title: '2. Layout/Header',
   render: (args) => {
     return `
         ${new Header({ ...args, searchInput: new SearchInput(searchData).html }).html}

src/components/bs5/inpageAlert/inpageAlert.stories.js

@@ -20,7 +20,7 @@ export default {
    *
    * @type {string}
    */
-  title: "Components/In-page Alert",
+  title: "3. Components/In-page Alert",
 
   /**
    * Function that renders the HTML snippet for the story.

src/components/bs5/inpagenav/inpagenav.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./inpagenav.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/In-page Nav",
+  title: "3. Components/In-page Nav",
   render: (args) => new Inpagenav(args).html,
 
   parameters: {

src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js

@@ -26,7 +26,7 @@ const defaultData = {
 };
 
 export default {
-  title: "!Layout/Main Container Wrapper",
+  title: "4. Wrappers/Main Container Wrapper",
   render: (args) => {
     return new MainContainerWrapperTest(args).html;
   },

src/components/bs5/metaDcTerms/metaDcTerms.stories.js

@@ -10,7 +10,7 @@ const defaultData = {
 
 export default {
   tags: ["autodocs"],
-  title: "!Core/Head/Meta Dublin Core Terms (DCTERMS)",
+  title: "1. Core Styles/Head/Meta Dublin Core Terms (DCTERMS)",
   args: defaultData,
   render: (args) => {
     return new MetaDcTerms(args).html;

src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js

@@ -10,7 +10,7 @@ const defaultData = {
 
 export default {
   tags: ["autodocs"],
-  title: "!Core/Head/Meta OpenGraph and SEO",
+  title: "1. Core Styles/Head/Meta OpenGraph and SEO",
   args: defaultData,
   render: (args) => {
     return new MetaOpenGraph(args).html;

src/components/bs5/modal/modal.stories.js

@@ -45,7 +45,7 @@ defaultdata.footer.buttons = buttonItems.map((item) => {
 
 export default {
   tags: [''],
-  title: 'Components/Modal',
+  title: '3. Components/Modal',
   render: (args) => new Modal(args).html,
 
   argTypes: {

src/components/bs5/pagination/pagination.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './pagination.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Pagination',
+  title: '3. Components/Pagination',
   render: (args) => new Pagination(args).html,
 
   parameters: {

src/components/bs5/quickexit/quickexit.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./quickexit.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Quickexit",
+  title: "3. Components/Quickexit",
   render: (args) => {
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.

src/components/bs5/searchInput/searchInput.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./searchInput.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Search Input",
+  title: "3. Components/Search Input",
   render: (args) => {
     return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search">${new SearchInput(args).html}</form>`;
   },

src/components/bs5/select/Select.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./select.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Forms/Select",
+  title: "3. Components/Forms/Select",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/sidenav/sidenav.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./sidenav.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "!Core/Side navigation",
+  title: "2. Layout/Side navigation",
   render: (args) => {
     return new Sidenav(args).html;  
   },

src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js

@@ -3,7 +3,7 @@ import { SidenavWrapperTest } from "./SidenavWrapper.test.js";
 import defaultdata from "./../sidenav/sidenav.data.json";
 export default {
   tags: ["autodocs"],
-  title: "!Layout/Components/Side Navigation Wrapper",
+  title: "4. Wrappers/Components/Side Navigation Wrapper",
   render: (args) => {
     return new SidenavWrapperTest(args).html;
   },

src/components/bs5/spinner/Spinner.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./spinner.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Spinner",
+  title: "3. Components/Spinner",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/table/table.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./table.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Table",
+  title: "3. Components/Table",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/tag/tag.stories.js

@@ -58,7 +58,7 @@ function statusVariantsMarkup() {
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Tag',
+  title: '3. Components/Tag',
   render: (args) => new Tag(args).html,
   argTypes: {
     variant: {

src/components/bs5/textarea/Textarea.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./textarea.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Forms/Textarea",
+  title: "3. Components/Forms/Textarea",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/textbox/Textbox.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./textbox.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Forms/Textbox",
+  title: "3. Components/Forms/Textbox",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/typography/typography.stories.js

@@ -4,7 +4,7 @@
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Typography",
+  title: "1. Core Styles/Typography",
   render: () => {
     return `
     <div class="qld-content-body" id="content">

src/components/bs5/video/video.stories.js

@@ -11,7 +11,7 @@ import { Accordion } from "../accordion/Accordion.js";
  */
 export default {
   tags: ["autodocs"],
-  title: "Components/Video",
+  title: "3. Components/Video",
   args: defaultdata.youtube,
   render: (args) => {
     const transcriptAccordion = new Accordion({

src/stories/integration/integration.stories.js

@@ -41,7 +41,7 @@ const defaultData = {
 };
 
 export default {
-  title: 'Integration/Main Integration Template',
+  title: '5. Integration/Main Integration Template',
   render: (args) => {
     return new MainIntegration(args).html;
   },