@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.9

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

@@ -168,7 +168,6 @@
                 color: var(--link-color);
                 text-decoration-color: inherit;
                 padding: 0;
-                // transition:none;
                 &:after {
                   content: "";
                   content: none;
@@ -211,6 +210,15 @@
       width: 100%;
       border-block-end: 0;
       margin-block-end: 0;
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        border-inline-start: 5px solid var(--link-border-color);
+        left: -5px;
+        top: 0;
+        bottom: calc(var(--border-width) *  -1);      
+      }
       &:hover,
       &.active {
         border-block-end: 0;
@@ -218,6 +226,9 @@
           margin-block-end: 0;
           border-block-end: 0;
         }
+      &::before {
+        border-inline-start: 0.25rem solid var(--link-border-color-hover);
+      }
       }
       &:hover {
         .qld-icon {
@@ -284,6 +295,9 @@
   /* House keeping */
   --icon-dir: 1;
   --navbar-max-width: 26.25rem;
+  --border-width: 1px;
+  --nav-link-padding-block: 0.625rem;
+
   :dir(rtl) {
     --icon-dir: -1;
   }
@@ -434,6 +448,9 @@
     display: none;
   }
   .container {
+    --padding-block-size: calc(var(--nav-link-padding-block) * 2);
+    min-height: calc(var(--padding-block-size) + 2rem);
+    min-height: round(up, calc(var(--padding-block-size) + 2rem), 1px);
     position: relative;
   }
   .nav-item {
@@ -453,6 +470,7 @@
       background-color: var(--dropdown-bg-color);
       border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
       font-weight: 600;
+      z-index: 20;
       &:hover {
         background-color: var(--dropdown-bg-color);
         border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
@@ -475,7 +493,7 @@
   .navbar-nav a.nav-link,
   a.dropdown-item {
     color: var(--link-color);
-    padding-block: 0.625rem;
+    padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
     line-height: 2rem;
@@ -517,10 +535,7 @@
     }
   }
   .dropdown-menu.show {
-    --horizontal-bar-border-widthx2: calc(
-      var(--horizontal-bar-border-width) * 2
-    );
-    margin-block-start: calc(var(--horizontal-bar-border-widthx2) - 1px);
+    margin-block-start: calc(var(--horizontal-bar-border-width) - var(--border-width));
     inset-inline: 0;
     background-color: var(--dropdown-bg-color);
     padding: 4rem;
@@ -533,16 +548,21 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
     row-gap: 0;
+    z-index: 10;
+    border-width: 0;
     @include media-breakpoint-up(xl) {
       column-gap: 4rem;
       row-gap: 0;
     }
+    @include media-breakpoint-up(md) {
+      padding-block: 3rem;
+    }
     &::before {
       content: "";
       position: absolute;
       height: var(--horizontal-bar-border-width);
       inset: 0;
-      inset-block-start: calc(var(--horizontal-bar-border-width) * -1);
+      inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
     li {
@@ -563,9 +583,9 @@
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
-        border-block-end: 1px solid var(--border-color);
+        border-block-end: var(--border-width) solid var(--border-color);
         padding-block-start: 1rem;
-        padding-block-end: calc(1rem - 1px);
+        padding-block-end: calc(1rem - var(--border-width));
         gap: 0.75rem;
         font-weight: 600;
         transition:
@@ -615,7 +635,7 @@
       grid-column: 1 / -1;
       .dropdown-item {
         border-block-end: 0;
-        padding-block-end: 0;
+        padding-block: 0;
         gap: 1rem;
         transition: gap var(--animation-time) ease-in-out;
         font-size: 1.5rem;
@@ -646,17 +666,18 @@
         flex-direction: row-reverse;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
+        font-size: 1.25rem;
         transition:
           gap var(--animation-time) ease-in-out,
           padding-inline-end var(--animation-time) ease-in-out;
         &::before {
           content: "";
-          mask-image: var(--qgds-icon-arrow-right);
+          mask-image: var(--qgds-icon-view-all);
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
-          width: 1.25rem;
+          height: 2rem;
+          width: 2rem;
           transform: scaleX(var(--icon-dir));
         }
         &::after {
@@ -803,4 +824,5 @@
 //Prevent double scrollbar when navabr is open
 body:has(.navbar.show) {
   overflow: hidden;
-}
+}
+

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

@@ -1,6 +1,7 @@
 import { HomePage } from "./HomePage.js";
 import { ContentPageWithSideNavigation } from "./ContentPageWithSideNavigation.js";
 import { ContentPageWithForm } from "./ContentPageWithForm.js";
+
 //Data
 import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
 import menu_state from "../navbar/navbar.data.json";
@@ -32,23 +33,23 @@ const sideNavData = {
   navtitlelink: "#optionallink",
   navlist: [
     {
-      link: "#https://www.qld.gov.au/transport/registration/register/heavy",
-      label: "Home page",
+      link: "#",
+      label: "Page link",
       class: "",
     },
     {
       link: "#",
-      label: "Content page (no bar)",
+      label: "Page link",
       class: "",
     },
     {
       link: "#",
-      label: "Content page (with bar)",
-      class: "",
+      label: "Active Page",
+      class: "active",
     },
     {
       link: "#",
-      label: "Page with form",
+      label: "Page link",
       class: "",
     },
   ],
@@ -70,8 +71,6 @@ const defaultData = {
   },
   contentFooter: contentFooterData,
   sidenav: sideNavData,
-  // Mapping some @root header fields to this pageLayout root object, so template partials can resolve values
-  // assets: masterbrand_variant.assets,
 };
 
 export default {
@@ -118,18 +117,7 @@ export const Default = {
       bannerType: "no-banner",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        {
-          ...sideNavData.navlist[1],
-          class: "active",
-        },
-        sideNavData.navlist[2],
-        sideNavData.navlist[3],
-      ],
-    },
+    sidenav: sideNavData,
   },
 };
 
@@ -149,7 +137,7 @@ export const Home = {
       abstract: "Your gateway to government services and information.",
       bannerType: "banner-advanced",
       backgroundType: "with-hero-image",
-      "image.classes": "align-grid",
+      ["image.classes"]: "align-grid",
       callToAction: "buttons",
       buttons: [
         {
@@ -244,18 +232,7 @@ export const ContentPageBasicBanner = {
         "Everything you need to know about registering your vehicle in Queensland.",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        sideNavData.navlist[1],
-        {
-          ...sideNavData.navlist[2],
-          class: "active",
-        },
-        sideNavData.navlist[3],
-      ],
-    },
+    sidenav: sideNavData,
   },
 };
 
@@ -281,18 +258,7 @@ export const ContentPageWithSingleForm = {
       abstract: "Get in touch with us using the form below.",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        sideNavData.navlist[1],
-        sideNavData.navlist[2],
-        {
-          ...sideNavData.navlist[3],
-          class: "active",
-        },
-      ],
-    },
+    sidenav: sideNavData,
     content: `
       <h1>Contact Form</h1>
       <p>Please fill out the form below and we'll get back to you as soon as possible.</p>

package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs

@@ -2,108 +2,127 @@
 <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>
-    {{> globalAlert globalAlert}}
-    {{> header header}}
-    {{> navbar navbar}}
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
 
-    {{#if banner}}
-    {{> banner banner}}
+  <!-- Header -->
+  {{> header header }}
+
+  <!-- Navbar -->
+  {{> navbar navbar}}
+
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
+
+  <div class="container mt-40 mt-lg-64">
+
+    {{#if breadcrumbs}}
+    <!-- breadcrumbs -->
+    {{> breadcrumbs breadcrumbs}}
     {{/if}}
 
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
+    <!-- Start Main Content Body -->
+    <div class="row">
+
+      <!-- Start Side navigation column (span 3) -->
+      <div class="col-12 col-lg-3">
+        <!-- QGDS Side Navigation Component -->
+        {{> sidenav sidenav}}
+      </div>
+      <!-- End Side navigation column -->
+
+      <!-- Start Main Column (span 8) -->
+      <div class="col-12 col-lg-8 mt-40 mt-lg-0">
+
+        <!-- Main Content div, includes a 2rem/32px horizontal padding on large screens and up -->
+        <main class="px-lg-32">
+
+          <h1 id="section-heading">Single page form (H1)</h1>
+
+          <p>Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback
+            is confidential.</p>
+
+          <h2 id="form-heading">Enquiry form (H2)</h2>
+
+          {{#if inpageAlert}}
+          <!-- Inpage Alert -->
+          <div class="mb-32">
+            {{> inpageAlert inpageAlert}}
+          </div>
+          {{/if}}
+
+          <!-- Example WYSIWYG content -->
+          <p>Any information submitted using this form will be used in line with our privacy statement.</p>
+          <p>Required fields are marked with an *</p>
+
+
+          {{#if form}}
+          <!-- Example Form, with 2rem vertical spacing -->
+          <form class="qld-form my-32">
+            {{#each form.fields1}}
+            <div class="form-group mb-32">
+              {{#ifCond type '==' 'textbox'}}
+              {{> textbox this}}
+              {{else ifCond type '==' 'textarea'}}
+              {{> textarea this}}
+              {{else ifCond type '==' 'radio'}}
+              {{> formcheck this}}
+              {{/ifCond}}
             </div>
-            {{/if}}
+            {{/each}}
+
+            <h3 id="contact-details">Contact details (H3)</h3>
+
+            {{#each form.fields2}}
+            <div class="form-group mb-32">
+              {{#ifCond type '==' 'textbox'}}
+              {{> textbox this}}
+              {{else ifCond type '==' 'select'}}
+              {{> select this}}
+              {{else ifCond type '==' 'checkbox'}}
+              {{> formcheck this}}
+              {{/ifCond}}
+            </div>
+            {{/each}}
 
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                {{/if}}
-
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-
-                    <!-- Main Content Sections -->
-                    <div class="content-section mb-5 px-1 px-md-32">
-
-                        <h1 id="section-heading">Single page form (H1)</h1>
-                        <p>
-                            Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback is confidential.
-                        </p> 
-                        
-                        <h2 id="form-heading">Enquiry form (H2)</h2>
-
-                        {{#if inpageAlert}}
-                        <!-- Inpage Alert -->
-                        <div class="mb-32">
-                            {{> inpageAlert inpageAlert}}
-                        </div>
-                        {{/if}}
-
-                        <div class="mb-32">
-                            <p>Any information submitted using this form will be used in line with our privacy statement.</p>
-                            <p>Required fields are marked with an *</p>
-                        </div>
-
-                        {{#if form}}
-                        <form class="qld-form mb-5">
-                            {{#each form.fields1}}
-                            <div class="form-group mb-32">
-                                {{#ifCond type '==' 'textbox'}}
-                                {{> textbox this}}
-                                {{else ifCond type '==' 'textarea'}}
-                                {{> textarea this}}
-                                {{else ifCond type '==' 'radio'}}
-                                {{> formcheck this}}
-                                {{/ifCond}}
-                            </div>
-                            {{/each}}
-
-                            <h3 id="form-heading">Contact details (H3)</h3>
-
-                            {{#each form.fields2}}
-                            <div class="form-group mb-32">
-                                {{#ifCond type '==' 'textbox'}}
-                                {{> textbox this}}
-                                {{else ifCond type '==' 'select'}}
-                                {{> select this}}
-                                {{else ifCond type '==' 'checkbox'}}
-                                {{> formcheck this}}
-                                {{/ifCond}}
-                            </div>
-                            {{/each}}
-                            
-                            {{#if form.buttons}}
-                            <div class="form-actions d-flex mt-5 gap-4">
-                                {{#each form.buttons}}
-                                {{> button this}}
-                                {{/each}}
-                            </div>
-                            {{/if}}
-                        </form>
-                        {{/if}}
-
-                    </div>
-                </div>
-                {{> contentFooter contentFooter}}
+            {{#if form.buttons}}
+            <div class="form-actions d-flex mt-5 gap-4">
+              {{#each form.buttons}}
+              {{> button this}}
+              {{/each}}
             </div>
-        </div>
-    </main>
-    {{> footer footer}}
+            {{/if}}
+          </form>
+          {{/if}}
+
+        </main>
+
+      </div>
+      <!-- End Column (span 8) -->
+
+    </div>
+    <!-- End Content Row -->
+
+    <!-- Start QGDS Content Footer -->
+    <div class="mt-64">
+      {{> contentFooter contentFooter}}
+    </div>
+
+  </div>
+  <!-- End Main .container -->
+
+  <!-- Start QGDS Footer -->
+  {{> footer footer}}
+  <!-- End QGDS Footer -->
+
 </body>
 
+
 </html>

package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs

@@ -12,7 +12,7 @@
   {{> globalAlert globalAlert}}
 
   <!-- Header -->
-  {{> header header }} 
+  {{> header header }}
 
   <!-- Navbar -->
   {{> navbar navbar}}
@@ -21,40 +21,37 @@
   {{> banner banner}}
   {{/if}}
 
-  <main>
+  <div class="container mt-40 mt-lg-64">
 
-    <div class="container mt-40 mt-lg-64">
-      {{#if breadcrumbs}}
-      <div class="row">
-        <div class="col-12">
-          <!-- breadcrumbs -->
-          {{> breadcrumbs breadcrumbs}}
-        </div>
-      </div>
-      {{/if}}
+    {{#if breadcrumbs}}
+    <!-- breadcrumbs -->
+    {{> breadcrumbs breadcrumbs}}
+    {{/if}}
+
+    <!-- Start Main Content Body -->
+    <div class="row">
 
-      <!-- Main Grid Layout: Side navigation and content -->
-      <div class="row">
+      <!-- Start Side navigation column (span 3) -->
+      <div class="col-12 col-lg-3">
+        <!-- QGDS Side navigation Component -->
+        {{> sidenav sidenav}}
+      </div>
+      <!-- End Side navigation column -->
 
-        <!-- Side navigation column -->
-        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
-          {{> sidenav sidenav}}
-        </div>
-        <!-- End Side navigation column -->
+      <!-- Start Main Column (span 8) -->
+      <div class="col-12 col-lg-8 mt-40 mt-lg-0">
 
-        <!-- Content Column -->
-        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
+        <!-- Main Content div, includes a 2rem/32px horizontal padding on large screens and up -->
+        <main class="px-lg-32">
 
           {{#if inpagenav}}
-          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          <!-- QGDS Inpagenav Component -->
           {{> 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>      
+            <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
@@ -67,20 +64,20 @@
           </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>
+
+            <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 -->
+            <!-- QGDS Callout Component -->
             {{> callout calloutdata}}
             {{/if}}
           </div>
-          
+
 
 
           <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
@@ -90,12 +87,12 @@
 
             <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 -->
+            <!-- QGDS Accordion Component with 24px/1.5rem margin-top -->
             <div class="mt-24">
-            {{> accordion accordionItems}}
+              {{> accordion accordionItems}}
             </div>
             {{/if}}
           </div>
@@ -110,46 +107,53 @@
 
           <!-- 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>
-            
+
+            <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>
-
 
+          </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>
-            
+            <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) -->
+            <!-- QGDS Table Component -->
             <div class="mt-24">
-            {{> table table}}
+              {{> table table}}
             </div>
             {{/if}}
           </div>
 
-        </div>
-        <!-- End Main Content Section -->
+        </main>
+        <!-- End Main Content div -->
 
       </div>
-      <!-- End Content Column -->
-      
+      <!-- End Column (8) -->
+
+    </div>
+    <!-- End Row -->
 
-      <!-- QGDS Content Footer Component -->
-      <div class="mt-64">
+
+    <!-- Start QGDS Content Footer -->
+    <div class="mt-64">
       {{> contentFooter contentFooter}}
-      </div>
+    </div>
+
+  </div>
 
-  </main>
-  <!-- Footer -->
+  <!-- Start QGDS Footer -->
   {{> footer footer}}
+  <!-- End QGDS Footer -->
+
 </body>
 
+
 </html>

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

@@ -1,13 +1,11 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./searchInput.hbs?raw";
 
 export class SearchInput {
-
   // Use the global Component class to create a new instance of the Textbox component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
-  constructor( data = {} ) {
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }