@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.3

package/.storybook/preview.js

@@ -85,7 +85,10 @@ const preview = {
       config: {},
       options: {
         runOnly: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice"],
-        checks: { "color-contrast": { options: { noScroll: true } } },
+        checks: {
+          "color-contrast": { options: { noScroll: true } },
+          region: { enabled: false },
+        },
         restoreScroll: true,
       },
     },

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

@@ -1,6 +1,5 @@
 <!-- QGDS Component: Accordion -->
 <div class="accordion-group">
-
     {{#if toggleAll}}
         <div class="accordion-toggle">
             <button class="accordion-toggle-btn accordion-toggle-btn--closed" type="button">Open all</button>
@@ -22,7 +21,5 @@
             </div>
         </div>
         {{/each }}
-
     </div>
-
 </div>

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

@@ -5,5 +5,6 @@
     {{~#if target}} target="{{target}}"{{/if~}}
     {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
   {{{label}}}
-  <span class="icon" aria-hidden="true"></span>
+  {{!-- <span class="icon" aria-hidden="true"></span> --}}
+  <span class="qld-icon qld-icon-md qld-icon-arrow-{{class}}" aria-hidden="true"></span>
 </a>

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.2","branch":"HEAD","tag":"v2.0.2","commit":"76ae36d4b0387b0e6fd2e0c8e3c664aaf0d01a96","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.3","branch":"HEAD","tag":"v2.0.3","commit":"fa72cd132ffaf157e0fe59ce291db6db0d2f2554","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -22,7 +22,7 @@
 
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                                 class="qld-header-dropdown-icon ">
-                                <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-chevron-down"
+                                <use href="{{../assets.SVGSpritePath}}#qgds-icon-chevron-down"
                                     aria-hidden="true"></use>
                             </svg>
                         </a>
@@ -35,7 +35,7 @@
                                 <a class="qld-header-link dropdown-item " href="{{url}}" {{#if target}}target="{{target}}"{{/if}}>
                                     {{text}}
                                     <svg width="24" height="24" class="qld-header-icon qld-header-dropdown-item-icon">
-                                        <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-arrow-right"
+                                        <use href="{{ ../../assets.SVGSpritePath }}#qgds-icon-arrow-right"
                                             aria-hidden="true"></use>
                                     </svg>
                                 </a>
@@ -66,7 +66,7 @@
                     <a class="qld-header-link" href="{{url}}">
                         {{#if icon}} 
                         <svg class="qld-header-link-icon">
-                            <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-{{icon}}" aria-hidden="true"></use>
+                            <use href="{{ ../assets.SVGSpritePath }}#qgds-icon-{{icon}}" aria-hidden="true"></use>
                         </svg>{{/if}}{{{text}}}
                     </a>
                     {{/if}}
@@ -80,11 +80,8 @@
                 <button id="qld-header-toggle-search-button" aria-controls="qld-header-search"
                     class="qld-header-toggle-main-nav" aria-expanded="false">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use class="icon-search"
-                            href="{{@root.assets.SVGSpritePath}}#qgds-icon-search" aria-hidden="true"
-                            style="display: block;"></use>
-                        <use class="icon-close" href="{{@root.assets.SVGSpritePath}}#qgds-icon-close"
-                            style="display: none;"></use>
+                        <use class="icon-search" href="{{ assets.SVGSpritePath }}#qgds-icon-search" aria-hidden="true" style="display: block;"></use>
+                        <use class="icon-close" href="{{ assets.SVGSpritePath}}#qgds-icon-close" style="display: none;"></use>
                     </svg>
                     <span class="qld-header-toggle-main-nav-text">Search</span>
                 </button>
@@ -94,7 +91,7 @@
                     data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false"
                     aria-label="Open menu">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-menu" aria-hidden="true">
+                        <use href="{{assets.SVGSpritePath}}#qgds-icon-menu" aria-hidden="true">
                         </use>
                     </svg>
                     <span class="qld-header-toggle-main-nav-text">Menu</span>

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

@@ -12,8 +12,8 @@
                 <ul class="navbar-nav">
                     {{#each navigation}}
                         {{#if navigationItems}}
-                            <li class="nav-item dropdown{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
-                                <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}" aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
+                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
+                                <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}{{#if currentPage}} active{{/if}}{{#if dropdownOptions.hasNoLink}} hasNoLink{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}{{#if dropdownOptions.hasNoLink}} href="#"{{else}} href="{{url}}"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
                             aria-expanded="false">
                                 {{#if iconName}}
                                     <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
@@ -26,22 +26,29 @@
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle" aria-current="page" aria-controls="" 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" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">
-                                    <li>
-                                        <a class="dropdown-item parent-link" role="button" aria-controls aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{title}}{{/if}}</a>
-                                        {{#if dropdownOptions.description}}
-                                            <p>{{dropdownOptions.description}}</p>
-                                        {{/if}}
-                                    </li>
+                                    {{#unless dropdownOptions.hasNoLink}}
+                                        <li>
+                                            <a class="dropdown-item parent-link" role="button"{{#if currentPage}} aria-current="page"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{text}}{{/if}}</a>
+                                            {{#if dropdownOptions.description}}
+                                                <p>{{dropdownOptions.description}}</p>
+                                            {{/if}}
+                                        </li>
+                                    {{/unless}}
                                     {{#each navigationItems}}
                                         <li{{#if mobileOnly}} class="mobile-only"{{/if}}>
-                                            <a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
-                                            {{#if description}}
-                                                <p>{{description}}</p>
+                                            {{#if isHTML}}
+                                                {{{htmlContent}}}
                                             {{/if}}
+                                            {{#unless isHTML}}
+                                                <a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
+                                                {{#if description}}
+                                                    <p>{{description}}</p>
+                                                {{/if}}
+                                            {{/unless}}
                                         </li>
                                     {{/each}}
                                     {{#if dropdownOptions.viewAllHref}}
@@ -52,8 +59,8 @@
                                 </ul>
                             </li>
                         {{else}}
-                            <li class="nav-item{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
-                                <a class="nav-link" aria-current="page" href="{{url}}"{{#if target}}  target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
+                            <li class="nav-item{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
+                                <a class="nav-link{{#if currentPage}} active{{/if}}"{{#if currentPage}} aria-current="page"{{/if}} href="{{url}}"{{#if target}}  target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
                                 {{#if iconName}}
                                     <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
                                     {{#if hideLabel}}

package/dist/assets/components/bs5/pageLayout/templates/contentPageWithForm.hbs

@@ -29,7 +29,7 @@
             <div class="row">
                 {{#if sidenav}}
                 <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
                     {{> sidenav sidenav}}
                 </div>
                 {{/if}}

package/dist/assets/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs

@@ -2,122 +2,154 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
 </head>
 
 <body>
-    <!-- Global ALert -->
-    {{> globalAlert globalAlert}}
-    <!-- Header -->
-    {{> header header}}
-    <!-- Navbar -->
-    {{> navbar navbar}}
-
-    {{#if banner}}
-    {{> banner banner}}
-    {{/if}}
-
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    <!-- breadcrumbs -->
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
+
+  <!-- Header -->
+  {{> header header }} 
+
+  <!-- Navbar -->
+  {{> navbar navbar}}
+
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
+
+  <main>
+
+    <div class="container mt-40 mt-lg-64">
+      {{#if breadcrumbs}}
+      <div class="row">
+        <div class="col-12">
+          <!-- breadcrumbs -->
+          {{> breadcrumbs breadcrumbs}}
+        </div>
+      </div>
+      {{/if}}
+
+      <!-- Main Grid Layout: Side navigation and content -->
+      <div class="row">
+
+        <!-- Side navigation column -->
+        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
+          {{> sidenav sidenav}}
+        </div>
+        <!-- End Side navigation column -->
+
+        <!-- Content Column -->
+        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
+
+          {{#if inpagenav}}
+          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          {{> inpagenav inpagenav}}
+          {{/if}}
+
+
+
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="section-heading">Section heading (H2)</h2>      
+            <p>
+              Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat
+              feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum
+              libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
+            </p>
+            <p>
+              Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae
+              amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
+            </p>
+          </div>
+
+
+
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
+
+            <h2 id="content-heading">Content heading (H2)</h2>
+          
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+            {{#if calloutdata}}
+            <!-- Callout Component -->
+            {{> callout calloutdata}}
+            {{/if}}
+          </div>
+          
+
+
+          <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
+          <div class="mt-32 mt-lg-40">
+            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+            <p>Information about pre-registration inspection requirements.</p>
+
+            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
+            <p>Details about fees and charges for vehicle registration.</p>
+            
+            
+            {{#if accordionItems}}
+            <!-- QGDS Accordion Component with 1.5rem vertical spacer -->
+            <div class="mt-24">
+            {{> accordion accordionItems}}
             </div>
             {{/if}}
+          </div>
 
-            <!-- Main Grid Layout: Side navigation and content -->
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-                    {{else}}
-                    <div class="col-12">
-                        {{/if}}
-
-                        <!-- Main Content Sections -->
-                        <div class="content-section mb-5 px-1 px-md-32">
-
-                            {{#if inpagenav}}
-                            <!-- inpagenav Section -->
-                            {{> inpagenav inpagenav}}
-                            {{/if}}
-
-                            <h1 id="section-heading">Section heading (H1)</h1>
-                            <p>
-                                Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo. 
-                            </p> 
-                            <p>
-                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis. 
-                            </p>
-
-                            <h2 id="content-heading">Content heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua.</p>
-
-                            {{#if calloutdata}}
-                            <!-- callout Section -->
-                            {{> callout calloutdata}}
-                            {{/if}}
-
-                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                            <p>Information about pre-registration inspection requirements.</p>
-
-                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                            <p>Details about fees and charges for vehicle registration.</p>
-
-                        </div>
-
-                        {{#if accordionItems}}
-                        <!-- accordion Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> accordion accordionItems}}
-                        </div>
-                        {{/if}} 
-
-                        {{#if video}}
-                        <!-- video Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> video video}}
-                        </div>
-                        {{/if}}
-
-                        <div class="my-5 p-1 p-md-32 bg-light">
-                            <h2 id="inspection">Section heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
-                                est.
-                                Tincidunt ultrices commodo vestibulum non netus. </p>
-                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
-                                condimentum adipiscing augue quisque eu.</p>
-
-                            {{> callToAction callToAction}}
-                        </div>
-
-                        {{#if table}}
-                        <!-- table Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> table table}}
-                        </div>
-                        {{/if}}
-
-                    </div>
-                </div>
-
-                <!-- Content Footer -->
-                {{> contentFooter contentFooter}}
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            {{#if video}}
+            <!-- QGDS Video Component -->
+            {{> video video}}
+            {{/if}}
+          </div>
+
+          <!-- Emphasis Container, with top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-40 mt-lg-64 bg-light content-emphasis">
+            
+            <h2 id="inspection">Section heading (H2) with emphasis</h2>
+        
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            
+            <!-- QGDS Call To Action button -->
+            {{> callToAction callToAction}}
+        
+          </div>
+
+
+
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="inspection">Section heading (H2)</h2>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            
+            {{#if table}}
+            <!-- Table Component (.my-40 wrapper provides vertical spacing) -->
+            <div class="mt-24">
+            {{> table table}}
             </div>
+            {{/if}}
+          </div>
+
         </div>
-    </main>
-    <!-- Footer -->
-    {{> footer footer}}
+        <!-- End Main Content Section -->
+
+      </div>
+      <!-- End Content Column -->
+      
+
+      <!-- QGDS Content Footer Component -->
+      <div class="mt-64">
+      {{> contentFooter contentFooter}}
+      </div>
+
+  </main>
+  <!-- Footer -->
+  {{> footer footer}}
 </body>
 
 </html>

package/dist/assets/components/bs5/pageLayout/templates/homePage.hbs

@@ -83,7 +83,7 @@
 
             {{#if promotionalPanel}}
             <section class="pt-5 bg-light">
-                <div class="container">
+                <div class="container is-extended">
                     {{> promotionalPanel promotionalPanel}}
                 </div>
             </section>

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

@@ -1,66 +1,85 @@
-<div class="qld-side-navigation">
-
+<nav class="qld-side-navigation" aria-label="Side Navigation">
+  <button
+    class="accordion-button collapsed d-lg-none"
+    type="button"
+    data-bs-toggle="collapse"
+    data-bs-target="#sideNavCollapse"
+    aria-expanded="false"
+    aria-controls="sideNavCollapse"
+  >
+    {{isdefined collapseTitle "In this section"}}
+  </button>
+  <div class="nav-wrapper collapse d-lg-block" id="sideNavCollapse">
     <h2 class="nav-title">
-        {{#if navtitlelink }}
+      {{#if navtitlelink}}
         <a class="nav-link" href="{{navtitlelink}}">{{navtitle}}</a>
-        {{else}}
+      {{else}}
         {{navtitle}}
-        {{/if}}
+      {{/if}}
     </h2>
 
     <!-- Level One -->
     <ul class="nav" aria-label="section navigation">
 
-        {{#each navlist}}
+      {{#each navlist}}
         <li class="nav-item {{class}}">
-            
-            {{#contains "active" class }}
+
+          {{#contains "active" class}}
             <span class="nav-link">{{label}}</span>
-            {{else}}
+          {{else}}
             <a class="nav-link" href="{{link}}" target="{{target}}">
-                {{label}} {{class}}
+              {{label}}
+              {{class}}
             </a>
-            {{/contains}}
+          {{/contains}}
 
-            {{#if children}}
+          {{#if children}}
             <!-- Level Two -->
             <ul>
-            {{#each children}}
+              {{#each children}}
                 <li class="nav-item {{class}}">
-                    
-                {{#contains "active" class }}
-                <span class="nav-link">{{label}}</span>
-                {{else}}
-                <a class="nav-link" href="{{link}}" target="{{target}}">
-                    {{label}} {{class}}
-                </a>
-                {{/contains}}
 
-                    {{#if children}}
+                  {{#contains "active" class}}
+                    <span class="nav-link">{{label}}</span>
+                  {{else}}
+                    <a class="nav-link" href="{{link}}" target="{{target}}">
+                      {{label}}
+                      {{class}}
+                    </a>
+                  {{/contains}}
+
+                  {{#if children}}
                     <!-- Level Three -->
                     <ul class="with-stalks">
-                    {{#each children}}
+                      {{#each children}}
                         <li class="nav-item {{class}}">
-                           
-                        {{#contains "active" class }}
-                        <span class="nav-link">{{label}}</span>
-                        {{else}}
-                        <a class="nav-link" href="{{link}}" target="{{target}}">
-                            {{label}} {{class}}
-                        </a>
-                        {{/contains}}
+
+                          {{#contains "active" class}}
+                            <span class="nav-link">{{label}}</span>
+                          {{else}}
+                            <a
+                              class="nav-link"
+                              href="{{link}}"
+                              target="{{target}}"
+                            >
+                              {{label}}
+                              {{class}}
+                            </a>
+                          {{/contains}}
 
                         </li>
-                    {{/each}}
+                      {{/each}}
                     </ul>
-                    {{/if}}
+                  {{/if}}
 
                 </li>
-            {{/each}}
+              {{/each}}
             </ul>
-            {{/if}}
+          {{/if}}
 
         </li>
-        {{/each}}
+      {{/each}}
     </ul>
-</div>
+  </div>
+
+</nav>