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

package/dist/components/bs5/globalAlert/globalAlert.hbs

@@ -2,7 +2,7 @@
 
 <div class="global-alert-include">
   {{#each alertItems}}
-  <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
+  <section role="region" class="global-alert d-none {{variant}}" data-variant="{{variant}}"
     {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
     {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
     {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
@@ -11,7 +11,7 @@
     {{~/if}}
     {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
-    <div class="qld-global-alert-main">
+    <div class="qld-global-alert-main container">
       <div class="global-alert-icon">
         {{#ifCond variant '==' 'global-alert-critical'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-danger" aria-hidden="true"></span>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.3","branch":"HEAD","tag":"v2.1.3","commit":"0459f9571a74eab35ed443c3d02fece2a811642c","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.5","branch":"HEAD","tag":"v2.1.5","commit":"e93e0950560c9799698822b70ccb0c1c5aa99639","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/inpagenav/inpagenav.hbs

@@ -1,15 +1,15 @@
 <!-- QGDS Partial: inpage-nav -->
 
-<div class="qld-inpage-nav">
+<nav class="qld-inpage-nav" aria-label="In page navigation">
 
-    <h2 class="nav-title">{{navtitle}}</h2>
+  <h2 class="nav-title">{{navtitle}}</h2>
 
-    <ul class="nav">
-        {{#each navitems}}
-        <li class="nav-item">
-            <a class="nav-link" href="#{{linkid}}">{{linktext}}</a>
-        </li>
-        {{/each}}
-    </ul>
+  <ul class="nav">
+    {{#each navitems}}
+      <li class="nav-item">
+        <a class="nav-link" href="#{{linkid}}">{{linktext}}</a>
+      </li>
+    {{/each}}
+  </ul>
 
-</div>
+</nav>

package/dist/components/bs5/navbar/navbar.hbs

@@ -26,7 +26,7 @@
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "selenium-webdriver": "^4.38.0",
     "storybook": "^10.0.8",
     "storybook-addon-deep-controls": "^0.10.0",
+    "storybook-addon-tag-badges": "^3.0.2",
     "vite": "^7.1.11",
     "vitest": "^4.0.10"
   },

package/dist/sample-data/globalAlert/globalAlert.data.json

@@ -6,7 +6,7 @@
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
         "dismissedExpiryDays": 0,
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       }
     ]
@@ -17,7 +17,7 @@
         "id": "service-delay-weather",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -28,7 +28,7 @@
         "id": "caretaker-period-2024",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -39,14 +39,14 @@
         "id": "cyclone-xyz-critical",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "id": "flood-warning-southeast",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       },
@@ -54,14 +54,14 @@
         "id": "transport-delays-brisbane",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       },
       {
         "id": "health-services-disruption",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>",
         "preventDismiss": true
       },
@@ -69,13 +69,13 @@
         "id": "election-caretaker-info",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "selenium-webdriver": "^4.38.0",
     "storybook": "^10.0.8",
     "storybook-addon-deep-controls": "^0.10.0",
+    "storybook-addon-tag-badges": "^3.0.2",
     "vite": "^7.1.11",
     "vitest": "^4.0.10"
   },

package/src/components/bs5/globalAlert/globalAlert.data.json

@@ -6,7 +6,7 @@
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
         "dismissedExpiryDays": 0,
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       }
     ]
@@ -17,7 +17,7 @@
         "id": "service-delay-weather",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -28,7 +28,7 @@
         "id": "caretaker-period-2024",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       }
     ]
@@ -39,14 +39,14 @@
         "id": "cyclone-xyz-critical",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "id": "flood-warning-southeast",
         "variant": "global-alert-critical",
         "ariaLabel": "Critical alert",
-        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare <a href='#'>your home and businesses</a> or check for <a href='#'>available support</a>.",
+        "content": "<strong>Severe weather:</strong> Cyclone XYZ is expected to impact the coast area. Prepare your home and businesses or check for available support.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       },
@@ -54,14 +54,14 @@
         "id": "transport-delays-brisbane",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>"
       },
       {
         "id": "health-services-disruption",
         "variant": "global-alert-warning",
         "ariaLabel": "Warning alert",
-        "content": "<strong>Service Delay:</strong> Various <a href='#'>services</a> are experiencing delays due to the weather event.",
+        "content": "<strong>Service Delay:</strong> Various services are experiencing delays due to the weather event.",
         "action": "<a href='https://www.qld.gov.au/'><span>Read more</span></a>",
         "preventDismiss": true
       },
@@ -69,13 +69,13 @@
         "id": "election-caretaker-info",
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>"
       },
       {
         "variant": "global-alert-info",
         "ariaLabel": "Information alert",
-        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a <a href='#'>caretaker period</a> until after the <a href='#'>state election</a>. Minimal updates will be made to this site until after the election results are declared.",
+        "content": "<strong>Caretaker period:</strong> The Queensland Government is in a caretaker period until after the state election. Minimal updates will be made to this site until after the election results are declared.",
         "action": "<a href='https://www.qld.gov.au/'><span>Learn more</span></a>",
         "preventDismiss": true
       }

package/src/components/bs5/globalAlert/globalAlert.hbs

@@ -2,7 +2,7 @@
 
 <div class="global-alert-include">
   {{#each alertItems}}
-  <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
+  <section role="region" class="global-alert d-none {{variant}}" data-variant="{{variant}}"
     {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
     {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
     {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
@@ -11,7 +11,7 @@
     {{~/if}}
     {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
-    <div class="qld-global-alert-main">
+    <div class="qld-global-alert-main container">
       <div class="global-alert-icon">
         {{#ifCond variant '==' 'global-alert-critical'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-danger" aria-hidden="true"></span>

package/src/components/bs5/globalAlert/globalAlert.scss

@@ -1,10 +1,13 @@
 @use "../../../css/mixins" as m;
 
 .global-alert {
+  --focus-colour: var(--#{$prefix}neutral-darkest);
+
   line-height: 1.25rem;
   border-radius: 0;
   border-top-style: solid;
   border-width: 0;
+  padding-block: 0.75rem;
 
   &:first-child:not(:only-child) {
     border-top-width: 1px;
@@ -14,13 +17,6 @@
     border-top-width: 1px;
   }
 
-  &.alert {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    padding-left: 2rem;
-    margin-bottom: 0;
-  }
-
   .qld-global-alert-main {
     display: flex;
     column-gap: 1rem;
@@ -69,7 +65,7 @@
       text-wrap: nowrap;
     }
   }
-
+  
   .global-alert-close {
     display: inline-flex;
     justify-content: center;
@@ -108,6 +104,10 @@
 
       @include m.focusable($outlineWidth: 2px);
       box-shadow: none;
+      &:focus {
+        outline-color: var(--focus-colour);
+      }
+      
 
       @include media-breakpoint-down(lg) {
         &:hover {
@@ -119,6 +119,7 @@
 
   &.global-alert-critical {
     --#{$prefix}icon-color: #{$core-default-color-neutral-white};
+    --focus-colour: var(--#{$prefix}neutral-white);
 
     background-color: $qld-notify-warning;
     color: var(--#{$prefix}white);
@@ -196,7 +197,20 @@
     }
   }
 }
-
+@include media-breakpoint-down(lg) {
+  .global-alert {
+    .global-alert-content .global-alert-action {
+      margin-inline-end: 2rem;      
+    }
+  }
+}
+@include media-breakpoint-down(md) {
+  .global-alert {
+    .global-alert-content {
+      padding: 0;
+    }
+  }
+}
 @include media-breakpoint-up(lg) {
   .global-alert {
     .global-alert-close {
@@ -215,5 +229,6 @@
         }
       }
     }
+    
   }
 }

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

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

package/src/components/bs5/globalAlert/globalAlert.test.js

@@ -155,20 +155,6 @@ describe("initGlobalAlerts", () => {
     localStorage.clear();
   });
 
-  it("Renders with proper classes applied", () => {
-    // The reason we needed to call initGlobalAlerts() manually in the tests is because:
-    // The JSDOM environment handles script execution and events differently than a real browser. Here's what happens:
-    // 1. When JSDOM loads the HTML with the scripts, the scripts execute immediately
-    // 2. The DOMContentLoaded event might fire before the test can set up localStorage properly
-    // 3. Even if DOMContentLoaded fires, the localStorage mock might not be properly injected into the script's execution context
-    initGlobalAlerts();
-
-    const alerts = d.querySelectorAll(".global-alert");
-    alerts.forEach((alert) => {
-      expect(alert.classList.contains("alert")).toBe(true);
-    });
-  });
-
   test("Alert uses default variant when data-variant is not provided", () => {
     initGlobalAlerts();
 

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

@@ -129,7 +129,7 @@ export const AllVariants = {
       <div class="mb-4">
         ${new InpageAlert(alertData).html}
       </div>
-    `
+    `,
       )
       .join("");
   },

package/src/components/bs5/inpagenav/inpagenav.hbs

@@ -1,15 +1,15 @@
 <!-- QGDS Partial: inpage-nav -->
 
-<div class="qld-inpage-nav">
+<nav class="qld-inpage-nav" aria-label="In page navigation">
 
-    <h2 class="nav-title">{{navtitle}}</h2>
+  <h2 class="nav-title">{{navtitle}}</h2>
 
-    <ul class="nav">
-        {{#each navitems}}
-        <li class="nav-item">
-            <a class="nav-link" href="#{{linkid}}">{{linktext}}</a>
-        </li>
-        {{/each}}
-    </ul>
+  <ul class="nav">
+    {{#each navitems}}
+      <li class="nav-item">
+        <a class="nav-link" href="#{{linkid}}">{{linktext}}</a>
+      </li>
+    {{/each}}
+  </ul>
 
-</div>
+</nav>

package/src/components/bs5/linkColumns/linkColumns.scss

@@ -1,7 +1,23 @@
 .link-column {
   --max-column-width: 46rem;
+  --color-border: var(--#{$prefix}neutral-lighter);
+
   background-color: var(--#{$prefix}body-bg);
   
+  &.light {
+    --color-border: var(--#{$prefix}light-border);
+  }
+
+  &.alt {
+    --color-border: var(--#{$prefix}light-border-alt);
+  }
+  &.dark {
+    --color-border: var(--#{$prefix}dark-border);
+  }
+  &.dark-alt {
+    --color-border: var(--#{$prefix}dark-alt-border);
+  }
+
   &:has(.col-1) {
     max-width: var(--max-column-width);
   }
@@ -31,12 +47,14 @@
   .col-vert-1 {
     display: block;
     column-count: 1;
-    column-gap: 1rem;
   }
   .col-vert-2 {
     display: block;
     column-count: 2;
-    column-gap: 1rem;
+    column-gap: 2rem;
+    @include media-breakpoint-down(lg) {
+      column-gap: 1.5rem;
+    }
     @include media-breakpoint-down(md) {
       column-count: 1;
     }
@@ -44,10 +62,11 @@
   .col-vert-3 {
     display: block;
     column-count: 3;
-    column-gap: 1rem;
+    column-gap: 2rem;
     @include media-breakpoint-down(lg) {
         column-count: 2;
-    }
+        column-gap: 1.5rem;
+    }    
     @include media-breakpoint-down(md) {
       column-count: 1;
     }
@@ -58,7 +77,7 @@
     gap: 1rem;
     align-items: center;
     align-content: center;
-    border-block-end: 1px solid var(--#{$prefix}light-grey);
+    border-block-end: 1px solid var(--color-border);
     // Required to reset styles from .qld-content-body li
     margin-block: 0;
     //Reset the line height too to override styles from .qld-content-body li

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

@@ -11,23 +11,24 @@ import defaultdata from "./linkColumns.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Link Columns",
-  
+
   render: (args) => new LinkColumns(args).html,
   //   args: defaultdata,
   argTypes: {
     columns: {
-      description: 'Number of coloumns of links to display',
-      control: { type: 'number', min: 1, max: 3, step: 1 },
+      description: "Number of coloumns of links to display",
+      control: { type: "number", min: 1, max: 3, step: 1 },
     },
-    id: { control: 'text' },
+    id: { control: "text" },
     theme: {
-      description: 'The types of themes that this component supports',
+      description: "The types of themes that this component supports",
       control: "select",
-      options: ["default","light", "alt", "dark", "dark-alt"],
+      options: ["default", "light", "alt", "dark", "dark-alt"],
     },
     data: {
-      description: 'The data for the link columns. Each link has a url, id, value, and target. The all_link option if available, displays a single link at the end of the list, with a optional class property.',
-      control: 'object',
+      description:
+        "The data for the link columns. Each link has a url, id, value, and target. The all_link option if available, displays a single link at the end of the list, with a optional class property.",
+      control: "object",
     },
   },
 
@@ -46,8 +47,8 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395563&t=RyMlGjeuzgl8p5Gx-0",
     },
-    pageLayout: 'with-wrapper',
-    wrapperClasses:'qld-content-body',
+    pageLayout: "with-wrapper",
+    wrapperClasses: "qld-content-body",
   },
 };