@qld-gov-au/qgds-bootstrap5 1.1.33 → 1.1.35

package/.storybook/preview.js

@@ -84,6 +84,7 @@ const preview = {
       // Optional configuration for the a11y addon
       config: {},
       options: {
+        runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'],
         checks: { "color-contrast": { options: { noScroll: true } } },
         restoreScroll: true,
       },
@@ -102,13 +103,21 @@ const preview = {
       },
       defaultTheme: "None",
     }),
-    (Story) => {
+    (Story, { parameters }) => {      
       init(Handlebars);
-      return `
-			
-					${Story()}
-			
-      		`;
+      const { pageLayout, wrapperClasses} = parameters;
+      switch (pageLayout) {
+        case 'with-wrapper':
+          return `
+            <div class="${wrapperClasses}">
+              ${Story()}	
+            </div>
+          `;
+        default:
+          return `			
+              ${Story()}			
+              `;
+      }
     },
   ],
 

package/README.md

@@ -1,4 +1,5 @@
 # Queensland Government Design System - Bootstrap 5 - Edition
+
 A Queensland Online - Design System development space
 
 Please see [For Gov - Queensland Government Design System](https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/queensland-government-design-system) for more details.
@@ -7,13 +8,13 @@ This is a BS5 flavour based on [QGDS Figma Design](https://www.figma.com/design/
 Qld Health edition can be found at [design-system.health.qld.gov.au](https://www.design-system.health.qld.gov.au/).
 
 This includes:
+
 - Public NPM Release packages:
   - https://www.npmjs.com/package/@qld-gov-au/qgds-bootstrap5
   - https://github.com/qld-gov-au/qgds-bootstrap5/pkgs/npm/qgds-bootstrap5
 - Squiz Git bridge dist/binary repo: https://github.com/qld-gov-au/qgds-bootstrap5-release
 - Git CDN repo: https://github.com/qld-gov-au/qgds-bootstrap5-cdn
 
-
 ## Technical overview
 
 - ES6 Javascript
@@ -24,36 +25,38 @@ This includes:
 - CSS/SCSS, extending Bootstrap 5.3 core components with custom CSS properties
 - NPM for package management
 
-
 ## Documentation
 
 - Storybook examples available at [https://qld-gov-au.github.io/qgds-bootstrap5/](https://qld-gov-au.github.io/qgds-bootstrap5/)
 
-
 ## Development Getting started
 
 ### Personal Development
-This repo is designed to allow easy forking.  <br/>
-Do enable GitHub Actions post forking and GitHub pages via GitHub actions  <br/>
+
+This repo is designed to allow easy forking. <br/>
+Do enable GitHub Actions post forking and GitHub pages via GitHub actions <br/>
 Also do configure your own personal chromatic to ease development in providing delta change diff-ing.
 
 We welcome external contributors, so don't be afraid to raise PR's back to this repo for inclusion into core deployment + cdn repo.
 
 ### GitHub Actions
+
 This repo includes many workflows to reduce developer overheads. This includes but not limited to:
-* CICD on all commit's and PR's
-* GitHub io static document deployment based on develop/main
-* Dependabot auto patching + storybook upgrade feature
-* One click npm versioning publish (patch, minor, major) **
-* Auto generate release notes based on PR's created (On version Tag)
-* Npm js package publish (On version Tag) ***
-* GitHub package Publish (On version Tag) ****
-
-** Must configure GitHub service account ssh private key loaded into GitHub actions secret ``DEPLOY_KEY``<br/>
-*** Must have npm js token loaded into GitHub actions secrets ``NPM_TOKEN`` to allow publishing.<br/>
-**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step ``Update package scope, export package name``.
+
+- CICD on all commit's and PR's
+- GitHub io static document deployment based on develop/main
+- Dependabot auto patching + storybook upgrade feature
+- One click npm versioning publish (patch, minor, major) **
+- Auto generate release notes based on PR's created (On version Tag)
+- Npm js package publish (On version Tag) ***
+- GitHub package Publish (On version Tag) ****
+
+** Must configure GitHub service account ssh private key loaded into GitHub actions secret `DEPLOY_KEY` <br>
+*** Must have npm js token loaded into GitHub actions secrets `NPM_TOKEN` to allow publishing. <br>
+**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step `Update package scope, export package name`.
 
 ### Quick build
+
 If you hava java and maven installed. This will pull in a local node/npm version and run through the full lifecycle build.
 
 ```bash
@@ -63,59 +66,80 @@ mvn install
 ```
 
 ### Standard build
+
 1. Download
-  
-    ```bash
-    git clone https://github.com/qld-gov-au/qgds-bootstrap5
-    ```
+
+   ```bash
+   git clone https://github.com/qld-gov-au/qgds-bootstrap5
+   ```
 
 2. Setup
 
    Prerequisites
+
    - Node 18.17.1+
    - NPM 10.2.5+
 
 3. Install dependencies
-    
-    ```bash
-    npm install
-    ```
+
+   ```bash
+   npm install
+   ```
 
 4. Build the Design System CSS, Components and templates
-    
-    ```bash
-    npm run build
-    ```
-
-6.  Start Watch and Storybook for component development
-        
-    ```bash
-    npm run dev-storybook
-    ```
-     Alt:
-     ```bash
-     npm run watch
-     npm run storybook
-     ```
-
-7. Lint
+
+   ```bash
+   npm run build
+   ```
+
+5. Start Watch and Storybook for component development
+
+   ```bash
+   npm run dev-storybook
+   ```
+
+   Alt:
+
+   ```bash
+   npm run watch
+   npm run storybook
+   ```
+
+6. Lint
    ```bash
    npm run lint
    ```
 
-* Static view, start a local server from /dist folder
-    
-    ```bash
-    npm run serve
-    ```
+- Static view, start a local server from /dist folder
+
+  ```bash
+  npm run serve
+  ```
+
+- Next steps
+
+  - HTML templating using drop in components
+
+    If you wish to use the includes handle bars, please ensure
+    "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
 
-* Next steps
+  - Dev build and testing branching
 
-   - HTML templating using drop in components 
-  
-     If you wish to use the includes handle bars, please ensure 
-   "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
-   - Dev build and testing branching
+### Unit Tests
+
+In addition to manual testing via storybook, unit tests may be created and run via `vitest`.
+
+```
+npm run test
+```
+
+or use the browser based ui
+
+```
+npm run test:ui
+```
+
+See `src/components/bs5/accordion/accordion.test.js` for example unit test including snapshot and interaction tests with JSDOM.
 
 ### IDE Development suggestions
 
@@ -125,4 +149,15 @@ We recommend using VSCode as the IDE for development with the following plugins:
 - ESLint
 - Mustache JS or Handlebars JS template support
 
-Webstorm also works.
+Webstorm also works.
+
+
+### Accessibility
+ 
+We are committed to making this project accessible and inclusive for all users.
+ 
+This project is tested against the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA to ensure it meets a high standard of accessibility.
+ 
+We follow the Queensland Government’s digital accessibility requirements to provide equal access to information, services, and opportunities for everyone.
+ 
+If you encounter any accessibility issues or have suggestions for improvement, please feel free to raise an issue or contact the project team.

package/dist/README.md

@@ -1,4 +1,5 @@
 # Queensland Government Design System - Bootstrap 5 - Edition
+
 A Queensland Online - Design System development space
 
 Please see [For Gov - Queensland Government Design System](https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/queensland-government-design-system) for more details.
@@ -7,13 +8,13 @@ This is a BS5 flavour based on [QGDS Figma Design](https://www.figma.com/design/
 Qld Health edition can be found at [design-system.health.qld.gov.au](https://www.design-system.health.qld.gov.au/).
 
 This includes:
+
 - Public NPM Release packages:
   - https://www.npmjs.com/package/@qld-gov-au/qgds-bootstrap5
   - https://github.com/qld-gov-au/qgds-bootstrap5/pkgs/npm/qgds-bootstrap5
 - Squiz Git bridge dist/binary repo: https://github.com/qld-gov-au/qgds-bootstrap5-release
 - Git CDN repo: https://github.com/qld-gov-au/qgds-bootstrap5-cdn
 
-
 ## Technical overview
 
 - ES6 Javascript
@@ -24,36 +25,38 @@ This includes:
 - CSS/SCSS, extending Bootstrap 5.3 core components with custom CSS properties
 - NPM for package management
 
-
 ## Documentation
 
 - Storybook examples available at [https://qld-gov-au.github.io/qgds-bootstrap5/](https://qld-gov-au.github.io/qgds-bootstrap5/)
 
-
 ## Development Getting started
 
 ### Personal Development
-This repo is designed to allow easy forking.  <br/>
-Do enable GitHub Actions post forking and GitHub pages via GitHub actions  <br/>
+
+This repo is designed to allow easy forking. <br/>
+Do enable GitHub Actions post forking and GitHub pages via GitHub actions <br/>
 Also do configure your own personal chromatic to ease development in providing delta change diff-ing.
 
 We welcome external contributors, so don't be afraid to raise PR's back to this repo for inclusion into core deployment + cdn repo.
 
 ### GitHub Actions
+
 This repo includes many workflows to reduce developer overheads. This includes but not limited to:
-* CICD on all commit's and PR's
-* GitHub io static document deployment based on develop/main
-* Dependabot auto patching + storybook upgrade feature
-* One click npm versioning publish (patch, minor, major) **
-* Auto generate release notes based on PR's created (On version Tag)
-* Npm js package publish (On version Tag) ***
-* GitHub package Publish (On version Tag) ****
-
-** Must configure GitHub service account ssh private key loaded into GitHub actions secret ``DEPLOY_KEY``<br/>
-*** Must have npm js token loaded into GitHub actions secrets ``NPM_TOKEN`` to allow publishing.<br/>
-**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step ``Update package scope, export package name``.
+
+- CICD on all commit's and PR's
+- GitHub io static document deployment based on develop/main
+- Dependabot auto patching + storybook upgrade feature
+- One click npm versioning publish (patch, minor, major) **
+- Auto generate release notes based on PR's created (On version Tag)
+- Npm js package publish (On version Tag) ***
+- GitHub package Publish (On version Tag) ****
+
+** Must configure GitHub service account ssh private key loaded into GitHub actions secret `DEPLOY_KEY` <br>
+*** Must have npm js token loaded into GitHub actions secrets `NPM_TOKEN` to allow publishing. <br>
+**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step `Update package scope, export package name`.
 
 ### Quick build
+
 If you hava java and maven installed. This will pull in a local node/npm version and run through the full lifecycle build.
 
 ```bash
@@ -63,59 +66,80 @@ mvn install
 ```
 
 ### Standard build
+
 1. Download
-  
-    ```bash
-    git clone https://github.com/qld-gov-au/qgds-bootstrap5
-    ```
+
+   ```bash
+   git clone https://github.com/qld-gov-au/qgds-bootstrap5
+   ```
 
 2. Setup
 
    Prerequisites
+
    - Node 18.17.1+
    - NPM 10.2.5+
 
 3. Install dependencies
-    
-    ```bash
-    npm install
-    ```
+
+   ```bash
+   npm install
+   ```
 
 4. Build the Design System CSS, Components and templates
-    
-    ```bash
-    npm run build
-    ```
-
-6.  Start Watch and Storybook for component development
-        
-    ```bash
-    npm run dev-storybook
-    ```
-     Alt:
-     ```bash
-     npm run watch
-     npm run storybook
-     ```
-
-7. Lint
+
+   ```bash
+   npm run build
+   ```
+
+5. Start Watch and Storybook for component development
+
+   ```bash
+   npm run dev-storybook
+   ```
+
+   Alt:
+
+   ```bash
+   npm run watch
+   npm run storybook
+   ```
+
+6. Lint
    ```bash
    npm run lint
    ```
 
-* Static view, start a local server from /dist folder
-    
-    ```bash
-    npm run serve
-    ```
+- Static view, start a local server from /dist folder
+
+  ```bash
+  npm run serve
+  ```
+
+- Next steps
+
+  - HTML templating using drop in components
+
+    If you wish to use the includes handle bars, please ensure
+    "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
 
-* Next steps
+  - Dev build and testing branching
 
-   - HTML templating using drop in components 
-  
-     If you wish to use the includes handle bars, please ensure 
-   "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
-   - Dev build and testing branching
+### Unit Tests
+
+In addition to manual testing via storybook, unit tests may be created and run via `vitest`.
+
+```
+npm run test
+```
+
+or use the browser based ui
+
+```
+npm run test:ui
+```
+
+See `src/components/bs5/accordion/accordion.test.js` for example unit test including snapshot and interaction tests with JSDOM.
 
 ### IDE Development suggestions
 
@@ -125,4 +149,15 @@ We recommend using VSCode as the IDE for development with the following plugins:
 - ESLint
 - Mustache JS or Handlebars JS template support
 
-Webstorm also works.
+Webstorm also works.
+
+
+### Accessibility
+ 
+We are committed to making this project accessible and inclusive for all users.
+ 
+This project is tested against the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA to ensure it meets a high standard of accessibility.
+ 
+We follow the Queensland Government’s digital accessibility requirements to provide equal access to information, services, and opportunities for everyone.
+ 
+If you encounter any accessibility issues or have suggestions for improvement, please feel free to raise an issue or contact the project team.

package/dist/assets/components/bs5/card/card.hbs

@@ -24,7 +24,16 @@
         {{/if}}
 
         {{#if iconClasses}}
-        <div class="card-icon {{iconPosition}} {{iconClasses}}"></div>
+            {{#ifCond iconPosition '==' 'icon-top'}}
+                <div class="card-icon-background">
+                    <span class="qld-icon qld-icon-xxl {{iconClasses}} {{iconPosition}}" aria-hidden="true"></span>
+                </div>
+            {{/ifCond}}
+            {{#ifCond iconPosition '==' 'icon-left'}}
+                <div class="card-icon-background">
+                    <span class="qld-icon qld-icon-lg {{iconClasses}} {{iconPosition}}" aria-hidden="true"></span>
+                </div>
+            {{/ifCond}}
         {{/if}}
 
         {{#if feature}}<div class="card-inner">{{/if}}

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.33","branch":"HEAD","tag":"v1.1.33","commit":"a5d739031a594cdffc9efc59b76409facb158d1e","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.35","branch":"HEAD","tag":"v1.1.35","commit":"7da4102f39c5b2c4bbf5f64d5a57774a0f80d2dc","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -7,7 +7,7 @@
 
             {{!-- Header for mobile navigation --}}
             <div class="navbar__header">
-                <h6 class="navbar__heading">Menu</h6>
+                <h3 class="navbar__heading">Menu</h3>
                 <button aria-controls="main-nav" class="navbar__toggle navbar__toggle--close" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Close menu">
@@ -22,7 +22,7 @@
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item nav-item-home">
                     <a class="nav-link {{#if metadata.options.home-active}}nav-link-home-active{{/if}}"
-                        href="{{metadata.target_url}}">
+                        href="{{metadata.target_url}}" {{#if metadata.options.home-active}}aria-label="Home"{{/if}}>
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
                             <use
                                 href="{{#if metadata.options.icon-root}}{{metadata.options.icon-root}}#qld__icon__home{{/if}}">

package/dist/assets/components/bs5/promotionalPanel/promotionalPanel.hbs

@@ -4,11 +4,11 @@
             style="background-image: url({{promoImage}});"
         {{/ifCond}}>
         <div class="image-panel">
-            <div class="promo-panel-image" 
-                {{#ifCond type '!=' 'promo'}}
-                    style="background-image: url({{promoImage}})"
-                {{/ifCond}}>
-            </div>
+            {{#ifCond type '!=' 'promo'}}
+            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            {{else}}
+                <div class="promo-panel-image"></div>
+            {{/ifCond}}
         </div>
         <div class="content-panel {{variantClass}}">      
             {{#if icon}}
@@ -32,20 +32,18 @@
                 {{/if}}
             </div>
             {{#if cta.items}}
-                <ul class="cta-container">                            
-                    {{#each cta.items}}
-                        <li>
-                            {{> callToAction label=value href=url target=target class=class arialabel=value id=id}}
-                        </li>
+                <div class="cta-container">                            
+                    {{#each cta.items}}                        
+                        {{> callToAction label=value href=url target=target class=class arialabel=value id=id}}                        
                     {{/each}}                            
-                </ul>
+                </div>
             {{/if}}
             {{#if btn.items}}
-                <ul class="btn-container">
+                <div class="btn-container">
                     {{#each btn.items}}
-                        <li>{{> button islink=islink variantClass=variantClass label=label href=href target=target dataatts="data-type='class'"}}</li>
+                        {{> button islink=islink variantClass=variantClass label=label href=href target=target dataatts="data-type='class'"}}
                     {{/each}}
-                </ul>
+                </div>
             {{/if}}
         </div>
     </div>

package/dist/assets/components/bs5/tabs/tabs.hbs

@@ -1,5 +1,5 @@
 
-{{#ifCond type_variant '==' 'tab-section'}}
+{{#ifCond type_variant '==' 'section-tabs'}}
     <section class="container tab-content pb-5 pt-5 mb-0 {{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}">
         <div class="row" style="padding-inline: 2.5rem;">
             <h2>{{sibiling_section_title}}</h2>
@@ -11,15 +11,14 @@
 <!-- QGDS Tabs -->    
 <section class="qld-tabs {{~#if type_variant}} {{type_variant}}{{/if~}} {{~#if variant}} {{variant}}{{else}} default{{/if~}}">        
     <div class="tabs-area container">
-        <ul class="nav nav-tabs {{#ifCond type_variant '==' 'tab-section'}}{{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}{{/ifCond}}"  role="tablist">
+        <ul class="nav nav-tabs {{#ifCond type_variant '==' 'section-tabs'}}{{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}{{/ifCond}}"  role="tablist">
             {{#each data.items }}
                 <li class="nav-item" role="presentation">
                     <button class="nav-link {{#if @first}}active{{/if}}" id="{{toCamelCase this.tab_text}}-tab" data-bs-toggle="tab" data-bs-target="#{{toCamelCase this.tab_text}}-{{../unique_id}}-tab-pane" type="button" role="tab" aria-controls="#{{this.tab_text}}-tab-pane" aria-selected="{{#if @first}}true{{else}}false{{/if}}" {{#if this.disabled}}disabled{{/if}}>
                         <span>
                             {{#if this.icon}}
                                 <i class="{{this.icon}}"></i>
-                            {{/if}}
-                            {{this.tab_text}}
+                            {{/if}}{{~this.tab_text~}}
                         </span>
                     </button>
                 </li>
@@ -35,7 +34,7 @@
     <div class="tab-content container">
         {{#each data.items }}
             <section class="tab-pane fade {{#if @first}}show active{{/if}}" id="{{toCamelCase this.tab_text}}-{{../unique_id}}-tab-pane" role="tabpanel" aria-labelledby="{{this.tab_text}}-tab" tabindex="0">
-                {{#ifCond ../type_variant '==' 'tab-section'}}
+                {{#ifCond ../type_variant '==' 'section-tabs'}}
                     <h2>{{this.title}}</h2>
                 {{else}}
                     <h3>{{this.title}}</h3>

package/dist/assets/components/bs5/video/video.hbs

@@ -8,18 +8,20 @@
 {{! By default, 'not-ready' class is added and will be removed by javascript event handler.
     When thumbnail attribute is empty / does not exist, 'empty-thumbnail' css class is added. }}
 <section class="video not-ready {{#unless thumbnail}}empty-thumbnail{{/unless}} {{videoSize}}">
+    <div class="video-description">
+        {{{ description }}}
+    </div>
+    {{#if transcriptContent}}
+        {{{ transcriptAccordion }}}
+    {{/if}}
     <div class="video-player ratio ratio-{{aspectRatio}}">
-
         <a href="#" class="video-thumbnail video-controls" title="Play Video" 
             aria-label="Watch video {{#if duration}}- duration {{formatDuration duration "long"}}{{/if}}">
-
             <div class="video-thumbnail-image" style="--thumbnail:url({{thumbnail}})"></div>
-
             <div class="video-nav">
                 <div class="video-watch">
                     <span class="icon"></span><span>Watch</span>
                 </div>
-
                 {{#if duration}}
                     <div title="Video duration" class="video-duration">
                         <span class="icon"></span><span>{{formatDuration duration}}</span>
@@ -27,32 +29,18 @@
                 {{/if}}
             </div>
         </a>
-
         <div class="video-embed ratio ratio-{{aspectRatio}}">
             {{#ifCond source '===' 'vimeo'}}
                 <iframe title="Vimeo video" class="embed-responsive-item video-vimeo" allow="autoplay; fullscreen" allowfullscreen muted="muted" src="https://player.vimeo.com/video/{{videoId}}?rel=0&autoplay={{urlParams.autoplay}}&background={{urlParams.background}}&controls={{urlParams.controls}}"></iframe>
-
             {{else ifCond source '===' 'youtube'}}
                 <iframe title="YouTube video" class="embed-responsive-item video-youtube" allow="autoplay; fullscreen" allowfullscreen src="https://www.youtube.com/embed/{{videoId}}?rel=0&autoplay={{urlParams.autoplay}}&controls={{urlParams.controls}}"></iframe>
-
             {{else ifCond source '===' 'custom'}}
                 <iframe title="Custom video" class="embed-responsive-item video-custom" allow="autoplay; fullscreen" allowfullscreen
                 src="{{videoId}}"></iframe>
-
             {{else}}
                 <p class="text-center position-absolute top-50">A video has not been provided.</p>
-
             {{/ifCond}}
         </div>
     </div>
-
-    <div class="video-description">
-        {{{ description }}}
-    </div>
-
     {{! Render the transcript content in an accordion template }}
-    {{#if transcriptContent}}
-        {{{ transcriptAccordion }}}
-    {{/if}}
-
 </section>