Storybook static image accessible from html + linting fix's

.storybook/main.js

@@ -7,7 +7,10 @@ const config = {
         "../src/**/!(*_)*.mdx",
         "../src/**/!(*_)*.stories.js",
     ],
-    staticDirs: [{ from: '../dist', to: '/assets' }], //Bring dist in statically instead of having it minified
+    staticDirs: [
+        { from: '../dist', to: '/assets' },
+        { from: '../src/assets/img', to: '/assets/img' },
+    ], //Bring dist in statically instead of having it minified
     addons: [//Storybook addons
     //https://storybook.js.org/addons/
     "@storybook/addon-themes", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@chromatic-com/storybook", "@storybook/addon-mdx-gfm"],

package.json

@@ -12,7 +12,8 @@
     "serve": "live-server dist",
     "dev-storybook": "npm-run-all --parallel watch storybook",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --webpack-stats-json "
+    "build-storybook": "storybook build --webpack-stats-json ",
+    "build-storybook:serve": "live-server storybook-static"
   },
   "keywords": [],
   "author": "",

src/components/bs5/card/cardblock.stories.js

@@ -45,7 +45,7 @@ export default {
         "card-alternative",
         "card-primary",
         "card-primary--dark",
-      ]
+      ],
     },
   },
 };
@@ -55,6 +55,6 @@ export const Default = {
   parameters: {
     backgrounds: { // from .storybook > preview.js
       default: "dark",
-    }
-  }
+    },
+  },
 };

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

@@ -28,11 +28,11 @@ export default {
       control: {
         type: "check",
         labels: {
-          "form-style-filled": "Filled"
+          "form-style-filled": "Filled",
         },
       },
       options: [
-        "form-style-filled"
+        "form-style-filled",
       ],
     },
     states: {
@@ -43,13 +43,13 @@ export default {
         labels: {
           "default": "Default",
           "qld-input-success": "Success",
-          "qld-input-error": "Error"
+          "qld-input-error": "Error",
         },
       },
       options: [
         "default",
         "qld-input-success",
-        "qld-input-error"
+        "qld-input-error",
       ],
     },
   },
@@ -59,7 +59,7 @@ export default {
  * Default Date inputs
  */
 export const Default = {
-  args: defaultdata
+  args: defaultdata,
 };
 
 /**
@@ -116,7 +116,7 @@ export const Disabled = {
 export const Valid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-success"}
+    ...{states: "qld-input-success"},
   },
 };
 
@@ -126,6 +126,6 @@ export const Valid = {
 export const Invalid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-error"}
+    ...{states: "qld-input-error"},
   },
 };

src/components/bs5/formcheck/Formcheck.js

@@ -10,4 +10,4 @@ export class Formcheck {
     return new Component(template, data);
   }
 
-}
+}

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

@@ -8,69 +8,69 @@ import { menu_state } from '../navbar/navbar.data.json';
 import defaultdata from '../breadcrumbs/breadcrumbs.data.json';
 
 export default {
-    tags: ['autodocs'],
-    title: 'Components/Header',
-    render: (args) => {
-        return `
+  tags: ['autodocs'],
+  title: 'Components/Header',
+  render: (args) => {
+    return `
         ${new Header(args).html}
         ${new Navbar(args).html}
         <div class="container">
             ${new Breadcrumbs(args).html}
         </div>
         `//expand arguments, specifically turn isdisabled into true
-      },
-    argTypes: {
-    },
-    parameters: {
-        layout: 'fullscreen'  
-    }
+  },
+  argTypes: {
+  },
+  parameters: {
+    layout: 'fullscreen',  
+  },
 };
 
 // Navbar story with 'Light' color theme
 export const Default = {
-    args: {
-        ...default_variant,
-        ...menu_state,
-        ...defaultdata.default
-    },
-    parameters: {
-        backgrounds: {
-            default: "Light",
-            values: [{ name: "Light", value: "var(--qld-light-background)" }],
-        },
+  args: {
+    ...default_variant,
+    ...menu_state,
+    ...defaultdata.default,
+  },
+  parameters: {
+    backgrounds: {
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
     },
-    decorators: [
-        (Story) => {
-            return `
+  },
+  decorators: [
+    (Story) => {
+      return `
         <div class="default">
             ${Story()}
         </div>
       `;
-        },
-    ],
+    },
+  ],
 };
 
 
 // Navbar story with 'Dark' color theme
 export const Dark = {
-    args: {
-        ...dark_variant,
-        ...menu_state,
-        ...defaultdata.default
+  args: {
+    ...dark_variant,
+    ...menu_state,
+    ...defaultdata.default,
+  },
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
     },
-    parameters: {
-        backgrounds: {
-            default: "Dark",
-            values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-        },
-    },
-    decorators: [
-        (Story) => {
-            return `
+  },
+  decorators: [
+    (Story) => {
+      return `
       <div class="dark">
           ${Story()}
       </div>
       `;
-        },
-    ],
+    },
+  ],
 };

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

@@ -50,7 +50,7 @@ export default {
         "alert-success",
         "alert-info",
         "alert-warning",
-        "alert-error"
+        "alert-error",
       ],
     },
   },

src/components/bs5/navbar/Navbar.js

@@ -2,14 +2,14 @@ import Component from '../../../js/QGDSComponent.js'
 import template from "./navbar.hbs?raw";
 
 export class Navbar {
-    constructor(data = {}) {
-        // Create a new instance of the Component class
-        const component = new Component(template, data);
-        // Return the component properties
-        return {
-            template: component.template,
-            data: component.data,
-            html: component.html
-        };
-    }
+  constructor(data = {}) {
+    // Create a new instance of the Component class
+    const component = new Component(template, data);
+    // Return the component properties
+    return {
+      template: component.template,
+      data: component.data,
+      html: component.html,
+    };
+  }
 }

src/components/bs5/navbar/navbar.functions.js

@@ -11,8 +11,8 @@ export function initializeDropdownPopper(referenceElement, popperElement) {
     }, {
       name: 'preventOverflow',
       options: {
-        boundariesElement: 'viewport'
-      }
+        boundariesElement: 'viewport',
+      },
     }],
   });
 
@@ -22,56 +22,56 @@ export function initializeDropdownPopper(referenceElement, popperElement) {
 let activePoppers = [];
 
 export function initializeNavbar() {
-    const dropdownToggles = document.querySelectorAll('.navbar .dropdown-toggle');
-    const navbarCollapse = document.getElementById('navbarSupportedContent');
-    const overlay = document.getElementById('overlay');
+  const dropdownToggles = document.querySelectorAll('.navbar .dropdown-toggle');
+  const navbarCollapse = document.getElementById('navbarSupportedContent');
+  const overlay = document.getElementById('overlay');
 
-    overlay.addEventListener('click', function() {
-        // Check if the navbar is open
-        if (navbarCollapse.classList.contains('show')) {
-            // If open, close it
-            navbarCollapse.classList.remove('show');
-            overlay.classList.remove('show');
-        }
-    });
+  overlay.addEventListener('click', function() {
+    // Check if the navbar is open
+    if (navbarCollapse.classList.contains('show')) {
+      // If open, close it
+      navbarCollapse.classList.remove('show');
+      overlay.classList.remove('show');
+    }
+  });
 
-    // Overlay show/hide events
-    navbarCollapse.addEventListener('show.bs.collapse', function () {
-        overlay.classList.add('show'); // Show the overlay
-    });
+  // Overlay show/hide events
+  navbarCollapse.addEventListener('show.bs.collapse', function () {
+    overlay.classList.add('show'); // Show the overlay
+  });
 
-    navbarCollapse.addEventListener('hide.bs.collapse', function () {
-        overlay.classList.remove('show'); // Hide the overlay
-    });
+  navbarCollapse.addEventListener('hide.bs.collapse', function () {
+    overlay.classList.remove('show'); // Hide the overlay
+  });
 
-    // Initialize Popper and toggle handling
-    dropdownToggles.forEach(toggle => {
-      toggle.addEventListener('click', (event) => {
-        event.preventDefault();
-        const parentUl = toggle.closest('ul.navbar-nav');
-        const firstLi = parentUl.querySelector('.nav-item-home');
-        const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu');
+  // Initialize Popper and toggle handling
+  dropdownToggles.forEach(toggle => {
+    toggle.addEventListener('click', (event) => {
+      event.preventDefault();
+      const parentUl = toggle.closest('ul.navbar-nav');
+      const firstLi = parentUl.querySelector('.nav-item-home');
+      const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu');
 
-        // Check if a Popper instance should be activated or not
-        const resizeHandler = () => {
-          if (window.innerWidth > 992) {
-            if (!dropdownMenu.dataset.popperActive) {
-              let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
-              dropdownMenu.dataset.popperActive = 'true';
-              activePoppers.push(popperInstance);
-            }
-          } else {
-            if (dropdownMenu.dataset.popperActive) {
-              activePoppers.forEach(popperInstance => popperInstance.destroy());
-              activePoppers = []; // Clear out the array after destroying instances
-              delete dropdownMenu.dataset.popperActive;
-            }
+      // Check if a Popper instance should be activated or not
+      const resizeHandler = () => {
+        if (window.innerWidth > 992) {
+          if (!dropdownMenu.dataset.popperActive) {
+            let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
+            dropdownMenu.dataset.popperActive = 'true';
+            activePoppers.push(popperInstance);
+          }
+        } else {
+          if (dropdownMenu.dataset.popperActive) {
+            activePoppers.forEach(popperInstance => popperInstance.destroy());
+            activePoppers = []; // Clear out the array after destroying instances
+            delete dropdownMenu.dataset.popperActive;
           }
-        };
+        }
+      };
 
-        // Attach resize listener to update Popper on resize
-        window.addEventListener('resize', resizeHandler);
-        resizeHandler(); // Call handler immediately to apply correct setting on init
-      });
+      // Attach resize listener to update Popper on resize
+      window.addEventListener('resize', resizeHandler);
+      resizeHandler(); // Call handler immediately to apply correct setting on init
     });
+  });
 }

src/components/bs5/navbar/navbar.stories.js

@@ -14,21 +14,21 @@ export default {
 export const DefaultState = {
   args: { 
     ...default_state,
-  }
+  },
 }
 
 // Default megaMenu story
 export const WithFullMenuOptions = {
   args: { 
     ...menu_state,
-  }
+  },
 }
 
 // Default megaMenu story
 export const WithMenuNoDescriptions = {
   args: { 
     ...test_states,
-  }
+  },
 }
 
 // Navbar story with 'Light' color theme
@@ -117,4 +117,4 @@ export const DarkAlternative = {
       `;
     },
   ],
-};
+};