@qld-gov-au/qgds-bootstrap5 2.1.3 → 2.1.4

package/src/components/bs5/navbar/navbar.scss

@@ -1,4 +1,5 @@
 @use "../../../css/mixins" as m;
+@use "../../../css/functions" as f;
 
 @mixin repeatedVerticalStyles {
   .nav-header {
@@ -128,6 +129,7 @@
           display: block;
           padding: 0;
           box-shadow: none;
+          columns: unset;
           &::before {
             display: none;
           }
@@ -211,6 +213,7 @@
     }
     a.dropdown-item {
       background-color: transparent;
+      border-radius: 0;
       &:hover {
         background-color: transparent;
       }
@@ -548,19 +551,23 @@
       background-color: var(--action-icon-color);
     }
   }
+
   .navbar-nav a.nav-link {
     color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
-    line-height: 2rem;
+    line-height: f.snap-line-height(1.4);
     gap: 0.5rem;
     align-items: center;
     &:hover {
       color: var(--link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.3rem;
-      text-decoration-thickness: 0.125rem;
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
+    }
+    &:focus {
+      z-index: 1;
+      outline-offset: -3px;
     }
   }
 
@@ -569,17 +576,18 @@
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
-    line-height: 2rem;
+    line-height: f.snap-line-height(1.4);
     gap: 0.5rem;
-    align-items: center;
+    align-items: flex-start;
+    border-radius: 0.25rem;
     &:hover {
       color: var(--link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.3rem;
-      text-decoration-thickness: 0.125rem;
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
     }
     @include m.focusable($offsetOutline: -3px) {
       box-shadow: none;
+      background-color: transparent;
     }
   }
   a.dropdown-toggle {
@@ -608,6 +616,8 @@
     }
   }
   .dropdown-menu.show {
+    display: block;
+    columns: 3;
     margin-block-start: calc(
       var(--horizontal-bar-border-width) - var(--border-width)
     );
@@ -617,21 +627,20 @@
     border-radius: 0.75rem;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    border-width: 0;
     color: var(--text-color);
     box-shadow: var(--shadow-dropdown);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
-    row-gap: 0;
     z-index: 999;
-    border-width: 0;
-    @include media-breakpoint-up(xl) {
-      column-gap: 4rem;
-      row-gap: 0;
-    }
+
     @include media-breakpoint-up(md) {
       padding-block: 3rem;
     }
+
+    @include media-breakpoint-up(xl) {
+      column-gap: 4rem;
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -640,21 +649,26 @@
       inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
+
     li {
-      display: flex;
+      break-inside: avoid-column;
+
       &.mobile-only {
         display: var(--mobile-only-display);
       }
-      &:has(p) {
-        flex-direction: column;
-        row-gap: 20px;
-        p {
-          font-size: 0.875rem;
+
+      p {
+        font-size: 0.875rem;
+        margin-block: f.remify(16px);
+
+        &:first-of-type {
+          margin-block-start: f.remify(20px);
         }
       }
+
       a {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
@@ -672,7 +686,7 @@
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
+          height: 1lh;
           width: 1.25rem;
           min-width: 1.25rem;
           margin-inline-start: auto;
@@ -690,24 +704,18 @@
           box-shadow: none;
         }
       }
-      p {
-        text-align: start;
-        margin-block-start: 1rem;
-      }
-      p:first-of-type {
-        margin-block-start: 0;
-      }
-      p:last-of-type {
-        margin-block-end: 0;
-      }
     }
+
     li:has(.parent-link) {
       border-block-end: 2px solid var(--border-color);
       padding-block-end: 2rem;
       margin-block-end: 2rem;
       gap: 1rem;
-      grid-column: 1 / -1;
+      column-span: all;
+
       .dropdown-item {
+        width: auto;
+        display: inline-flex;
         border-block-end: 0;
         padding-block: 0;
         gap: 1rem;
@@ -733,11 +741,15 @@
       border-block-start: 2px solid var(--border-color);
       padding-block-start: 2rem;
       margin-block-start: 2rem;
-      grid-column: 1 / -1;
+      text-align: end;
+      column-span: all;
+
       .dropdown-item {
         border-block-end: 0;
-        display: flex;
+        display: inline-flex;
+        width: auto;
         flex-direction: row-reverse;
+        align-items: center;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
         font-size: 1.25rem;
@@ -755,7 +767,6 @@
           transform: scaleX(var(--icon-dir));
         }
         &::after {
-          content: "";
           content: none;
         }
         &:hover {

package/src/components/bs5/promotionalPanel/promotionalPanel.stories.js

@@ -11,33 +11,34 @@ import defaultdata from "./promotionalPanel.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Promotional Panel",
-  
+
   render: (args) => new PromotionalPanel(args).html,
   args: defaultdata,
   argTypes: {
     type: {
-      description: 'The types of layouts that this component supports',
+      description: "The types of layouts that this component supports",
       control: "select",
       options: ["promo", "contained", "indent-text", "indent-img"],
     },
     variantClass: {
-      description: 'The types of themes that this component supports',
+      description: "The types of themes that this component supports",
       control: "select",
       options: ["light", "alt", "dark", "dark-alt"],
-    },  
+    },
     promoImage: {
       control: "text",
       description: "The image to be displayed in the promotional panel.",
-      defaultValue:"./assets/img/banner-example-3-to-2.jpg",
+      defaultValue: "./assets/img/banner-example-3-to-2.jpg",
     },
     contentAlignment: {
-      description: 'Position of the content in the panel within this component',
+      description: "Position of the content in the panel within this component",
       control: "select",
-      options: ["content-left","content-right"],
+      options: ["content-left", "content-right"],
     },
     icon: {
       control: "select",
-      description: "Current list of usable icons available in the icon component.",
+      description:
+        "Current list of usable icons available in the icon component.",
       options: ["icon-dot-grid", "icon-phone", "icon-email", "icon-search"],
     },
     title: {
@@ -48,20 +49,22 @@ export default {
     abstract: {
       control: "text",
       description: "The abstract of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
     },
     body: {
       control: "text",
       description: "The body of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
     },
     cta: {
-      description: 'The call to action objects for the promotional panel.',
-      control: 'object',
+      description: "The call to action objects for the promotional panel.",
+      control: "object",
     },
     btn: {
-      description: 'The button objects for the promotional panel.',
-      control: 'object',
+      description: "The button objects for the promotional panel.",
+      control: "object",
     },
   },
 
@@ -120,4 +123,3 @@ export const DarkAlternative = {
     variantClass: "dark-alt",
   },
 };
-

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

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

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

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

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

@@ -6,18 +6,16 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Spinner",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //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.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Spinner(args).html;
-  
   },
 };
 
@@ -32,15 +30,13 @@ export const Default = {
  * Dark themed Loading Spinner
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
+  args: {
+    ...defaultdata,
   },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [
@@ -59,8 +55,8 @@ export const Dark = {
  */
 export const Minimal = {
   args: {
-	  ...defaultdata,
-	  ...{minimal: true},
+    ...defaultdata,
+    ...{ minimal: true },
   },
 };
 
@@ -68,9 +64,8 @@ export const Minimal = {
  * Stacked Loading Spinner
  */
 export const Stacked = {
-  args: { 
-	  ...defaultdata,
-	  ...{stacked: true},
+  args: {
+    ...defaultdata,
+    ...{ stacked: true },
   },
 };
-

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

@@ -3,7 +3,7 @@ import { Table } from "./Table.js";
 import defaultdata from "./table.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Table",
   render: (args) => {
     

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

@@ -10,7 +10,7 @@ import { Accordion } from "../accordion/Accordion.js";
  * which is based on YouTube arguments.
  */
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Video",
   args: defaultdata.youtube,
   render: (args) => {

package/src/stories/Introduction.mdx

@@ -1,14 +1,23 @@
 import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 
-import Readme from "../../README.md?raw"
+import Readme from "../../README.md?raw";
 
 <Meta title="Welcome" />
 
-[//]: # (# Welcome to QGDS QOL BS MVP Storybook)
+[//]: # "# Welcome to QGDS QOL BS MVP Storybook"
+[//]: #
+[//]: # "Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes."
+[//]: # "For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe."
 
-[//]: # ()
-[//]: # (Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes.)
+<Markdown>{Readme}</Markdown>
 
-[//]: # (For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe.)
+---
 
-<Markdown>{Readme}</Markdown>
+## Component Badges
+
+Components are labelled as:
+
+- **Core** — Essential, broadly applicable components that serve as the single source of truth for the Queensland Government design system.
+- **Extended** — Specialised components for needs not covered by the core set.
+
+Further information is available in the [QGDS UI Kit](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=8701-244248&m=dev).