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

package/src/components/bs5/promotionalPanel/promotionalPanel.scss

@@ -9,7 +9,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-areas: "content graphic";
-    &>* {
+    & > * {
       padding: 0;
     }
     &.content-right {
@@ -18,8 +18,8 @@
         align-items: start;
       }
     }
-    &.bg-img { 
-      background-repeat: no-repeat; 
+    &.bg-img {
+      background-repeat: no-repeat;
       background-size: cover;
       .content-panel {
         padding: 4rem;
@@ -48,7 +48,7 @@
     flex-direction: column;
     gap: 2rem;
     align-items: end;
-    &>* {
+    & > * {
       max-width: 65ch;
       padding: 0;
       margin: 0;
@@ -64,7 +64,7 @@
       justify-content: center;
     }
     .qld-icon {
-      --#{$prefix}icon-color: var(--icon-colour);  
+      --#{$prefix}icon-color: var(--icon-colour);
       width: 2rem;
       height: 2rem;
       mask-size: 100%;
@@ -79,7 +79,7 @@
       gap: 1.5rem;
     }
     h2 {
-      margin:0;
+      margin: 0;
       line-height: 1.25;
     }
     .btn-container {
@@ -87,7 +87,7 @@
       gap: 1rem;
       flex-direction: row;
       justify-content: start;
-      flex-wrap:wrap;
+      flex-wrap: wrap;
     }
     .cta-container {
       .qld-cta-link {
@@ -121,7 +121,7 @@
     }
     @include media-breakpoint-down(xl) {
       .row {
-      border-radius: 0;
+        border-radius: 0;
       }
     }
   }
@@ -130,12 +130,12 @@
       border-radius: 0;
       padding: 0;
       background-color: transparent;
-      gap:0;
+      gap: 0;
       .content-panel {
         border-radius: 3rem;
         border-start-end-radius: 0;
         padding: 4rem;
-      }  
+      }
       .image-panel {
         .promo-panel-image {
           border-radius: 0;
@@ -183,7 +183,7 @@
       &.content-right {
         .content-panel {
           border-radius: 0;
-          border-start-end-radius: 3rem;        
+          border-start-end-radius: 3rem;
           border-end-end-radius: 3rem;
         }
         .image-panel {
@@ -209,14 +209,14 @@
     &.indent .row {
       .content-panel {
         border-radius: 0;
-        border-end-end-radius: 3rem ;
+        border-end-end-radius: 3rem;
         padding-inline: 3rem;
         padding-block: 2.5rem;
         gap: 1.5rem;
       }
       &.content-right {
         .content-panel {
-          border-radius: 0 ;
+          border-radius: 0;
           border-end-start-radius: 3rem;
         }
         .image-panel {
@@ -236,10 +236,10 @@
     &.indent-img .row {
       .image-panel {
         margin-block-end: -2.75rem;
-          .promo-panel-image {
-            border-radius: 0;
-            border-end-start-radius: 2.5rem;
-          }
+        .promo-panel-image {
+          border-radius: 0;
+          border-end-start-radius: 2.5rem;
+        }
       }
       .content-panel {
         border-radius: 0;
@@ -253,7 +253,7 @@
           }
         }
         .content-panel {
-          border-radius: 0 ;
+          border-radius: 0;
         }
       }
     }
@@ -267,7 +267,8 @@
       }
     }
   }
-  a.btn,.btn {
+  a.btn,
+  .btn {
     white-space: normal;
   }
   @include media-breakpoint-down(md) {
@@ -297,7 +298,7 @@
       }
       &.bg-img {
         border-radius: 3rem;
-        gap:0;
+        gap: 0;
         .content-panel {
           border-radius: 2rem;
         }
@@ -324,7 +325,7 @@
         margin-block-end: 0;
         .promo-panel-image {
           border-radius: 0;
-          border-end-end-radius: 2.75rem;
+          border-end-end-radius: 2rem;
         }
       }
       .content-panel {
@@ -333,4 +334,4 @@
       }
     }
   }
-}
+}

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

@@ -1,49 +1,36 @@
-export function positionQuickExit() {
-  let quickexitInstances = document.getElementsByClassName('qld-quick-exit');
-  if (quickexitInstances.length > 0) {
-    const el = document.getElementsByClassName('qld-quick-exit')[0];
-    if (document.documentElement.clientWidth > 992) {
-      if (window.pageYOffset > 200) {
-        el.setAttribute("style", "position: 'fixed', top: '0px'");
-      }
-      if (window.pageYOffset < 200) {
-        el.setAttribute("style", "position: 'sticky', top: '0px'");
-      }
-    } else {
-      el.setAttribute("style", "position: 'fixed', top: 'auto'");
-    }
-  }
-}
-
 export function initQuickexit() {
-  var quickExitElement = document.getElementsByClassName('qld-quick-exit');
-  var quickExitButton = document.querySelector('.qld-quick-exit-button');
+  var quickExitElement = document.getElementsByClassName("qld-quick-exit");
+  var quickExitButton = document.querySelector(".qld-quick-exit-button");
 
-  if (quickExitElement.length > 0 && typeof (quickExitButton) !== 'undefined' && quickExitButton != null) {
+  if (
+    quickExitElement.length > 0 &&
+    typeof quickExitButton !== "undefined" &&
+    quickExitButton != null
+  ) {
     onbtnClick();
     onKeyDown();
   }
 }
 /**
-* onbtnClick -> clicking quick exit button a page
-* @return {undefined}
-**/
+ * onbtnClick -> clicking quick exit button a page
+ * @return {undefined}
+ **/
 function onbtnClick() {
-  const escapeSite = 'https://www.google.com.au/';
-  var quickExitButton = document.querySelector('.qld-quick-exit-button');
+  const escapeSite = "https://www.google.com.au/";
+  var quickExitButton = document.querySelector(".qld-quick-exit-button");
   quickExitButton.onclick = function () {
     return quickExit(escapeSite);
-  }
+  };
 }
 
 /**
-* onKeyDown -> escape keydown event
-* @return {undefined}
-**/
+ * onKeyDown -> escape keydown event
+ * @return {undefined}
+ **/
 function onKeyDown() {
-  const escapeSite = 'https://www.google.com.au/';
+  const escapeSite = "https://www.google.com.au/";
   // add hotkey trigger
-  document.addEventListener('keydown', function (e) {
+  document.addEventListener("keydown", function (e) {
     if (e.keyCode === 27) {
       quickExit(escapeSite);
       if (e) {
@@ -58,18 +45,18 @@ function onKeyDown() {
 }
 
 /**
-* quickExit function redirects a user on click and Esc key down
-* @param {string} site - site to replace on initiating the 'quick exit' ('Esc' key or clicking 'Close this site' button) function
-* @return {undefined}
-**/
+ * quickExit function redirects a user on click and Esc key down
+ * @param {string} site - site to replace on initiating the 'quick exit' ('Esc' key or clicking 'Close this site' button) function
+ * @return {undefined}
+ **/
 function quickExit(site) {
   // then redirect to a non-sensitive site
-  window.open(site, '_blank');
+  window.open(site, "_blank");
   window.location.replace(site);
   // remove as much info from URL as possible
   if (window.history) {
     try {
-      window.history.replaceState({}, '', '/');
+      window.history.replaceState({}, "", "/");
     } catch (e) {
       e.printStackTrace();
     }

package/src/components/bs5/quickexit/quickexit.scss

@@ -264,3 +264,7 @@
     }
   }
 }
+
+body:has(.qld-quick-exit) {
+  height: auto;
+}

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

@@ -1,88 +1,89 @@
 {
-    "navtitle": "In this section",
-    "navtitlelink": "#optionallink",
-    "navlist": [
+  "collapseTitle": "In this section",
+  "navtitle": "Parent page",
+  "navtitlelink": "#optionallink",
+  "navlist": [
+    {
+      "link": "https://www.qld.gov.au/transport/registration/register/heavy",
+      "label": "Sibling page",
+      "class": "",
+      "target": "",
+      "children": [
         {
-            "link": "https://www.qld.gov.au/transport/registration/register/heavy",
-            "label": "Heavy vehicles",
-            "class": "",
-            "target": "",
-            "children": [
-                {
-                    "link": "#",
-                    "class": "",
-                    "label": "Level two item",
-                    "children": []
-                },
-                {
-                    "link": "#",
-                    "class": "active",
-                    "label": "Level two item",
-                    "children": []
-                },
-                {
-                    "link": "#",
-                    "class": "",
-
-                    "label": "Level two item",
-                    "children": [
-                        {
-                            "link": "#",
-                            "class": "",
-                            "label": "Level three item",
-                            "children": []
-                        },
-                        {
-                            "link": "#",
-                            "class": "active",
-                            "label": "Level three item that wraps to another line",
-                            "children": []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "link": "#",
-            "label": "Renew registration",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Register a motorised mobility device",
-            "class": "active",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Register a boat",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Conditional registration",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "",
+          "label": "Child page",
+          "children": []
         },
         {
-            "link": "#",
-            "label": "Vehicles registered overseas temporarily being used in Queensland",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "active",
+          "label": "Child page",
+          "children": []
         },
         {
-            "link": "#",
-            "label": "Left hand drive vehicles",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Registration Help Tool—how to register a used motor vehicle or motorcycle",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "",
+
+          "label": "Child page",
+          "children": [
+            {
+              "link": "#",
+              "class": "",
+              "label": "Grandchild page",
+              "children": []
+            },
+            {
+              "link": "#",
+              "class": "active",
+              "label": "Grandchild page",
+              "children": []
+            }
+          ]
         }
-    ]
+      ]
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "active",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    }
+  ]
 }

package/src/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>