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

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/searchInput/SearchInput.mdx

@@ -9,4 +9,4 @@ import * as SearchInputStories from "./searchInput.stories";
 
 ## Design resources
 
-- [Component library (Figma)]https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)./searchInput.stories
+- [Component library(Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -4,44 +4,42 @@ exports[`SearchInput > Renders as expected 1`] = `
 "<!-- 
     QGDS Component: Search input 
 -->
-<div class="container ">
-    <div class="qld-search-input  d-flex">
-        <input id="search" name=" query" class="form-control" type="text"
-            autocomplete="off" aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  />
+<div class="qld-search-input ">
+    <input id="search" name="query" class="form-control" type="text" autocomplete="off"
+        aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  />
 
-        <div class="suggestions suggestions__group d-none">
-            <div class="default-suggestions">
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Popular services</strong>
-                    <ul class="mt-2">
-                            <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
-                    </ul>
-                </div>
+    <div class="suggestions suggestions__group d-none">
+        <div class="default-suggestions">
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Popular services</strong>
+                <ul class="mt-2">
+                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
+                </ul>
+            </div>
 
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Browse by category</strong>
-                    <ul class="mt-12 mb-0">
-                            <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                            <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
-                    </ul>
-                </div>
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Browse by category</strong>
+                <ul class="mt-12 mb-0">
+                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                </ul>
+            </div>
 
-                    <div class="suggestions-category">
-                        <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="/queenslanders">Browse all categories</a>
-                    </div>
+            <div class="suggestions-category">
+                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
+                    href="/queenslanders">Browse all categories</a>
             </div>
-            <div class="dynamic-suggestions"></div>
         </div>
-        <button class="btn btn-primary" type="submit" id="search-button">
-            <span class="btn-icon mx-0"></span>
-            <span class="btn-label">Search</span>
-        </button>
+        <div class="dynamic-suggestions"></div>
     </div>
-</div>
-"
+    <button class="btn btn-primary" type="submit" id="search-button">
+        <span class="btn-icon"></span>
+        <span class="btn-label">Search</span>
+    </button>
+</div>"
 `;

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

@@ -1,6 +1,5 @@
 {
   "customClass": "",
-  "variantClass": "",
   "inputID": "search",
   "inputName": "query",
   "buttonID": "search-button",

package/src/components/bs5/searchInput/searchInput.hbs

@@ -1,44 +1,43 @@
 <!-- 
     QGDS Component: Search input 
 -->
-<div class="container {{variantClass}}">
-    <div class="qld-search-input {{customClass}} d-flex">
-        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text"
-            autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+<div class="qld-search-input {{customClass}}">
+    <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
 
-        {{#if suggestions}}
-        <div class="suggestions suggestions__group d-none">
-            <div class="default-suggestions">
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Popular services</strong>
-                    <ul class="mt-2">
-                        {{#each default_suggestions.popular_services}}
-                            <li><a href="{{link}}">{{title}}</a></li>
-                        {{/each}}
-                    </ul>
-                </div>
+    {{#if suggestions}}
+    <div class="suggestions suggestions__group d-none">
+        <div class="default-suggestions">
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Popular services</strong>
+                <ul class="mt-2">
+                    {{#each default_suggestions.popular_services}}
+                    <li><a href="{{link}}">{{title}}</a></li>
+                    {{/each}}
+                </ul>
+            </div>
 
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Browse by category</strong>
-                    <ul class="mt-12 mb-0">
-                        {{#each default_suggestions.categories}}
-                            <li><a href="{{link}}">{{title}}</a></li>
-                        {{/each}}
-                    </ul>
-                </div>
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Browse by category</strong>
+                <ul class="mt-12 mb-0">
+                    {{#each default_suggestions.categories}}
+                    <li><a href="{{link}}">{{title}}</a></li>
+                    {{/each}}
+                </ul>
+            </div>
 
-                {{#if default_suggestions.options.view_more}}
-                    <div class="suggestions-category">
-                        <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
-                    </div>
-                {{/if}}
+            {{#if default_suggestions.options.view_more}}
+            <div class="suggestions-category">
+                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
+                    href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
             </div>
-            <div class="dynamic-suggestions"></div>
+            {{/if}}
         </div>
-        {{/if}}
-        <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-            <span class="btn-icon mx-0"></span>
-            <span class="btn-label">{{ buttonLabel }}</span>
-        </button>
+        <div class="dynamic-suggestions"></div>
     </div>
-</div>
+    {{/if}}
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
+</div>