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

package/src/components/bs5/pagination/pagination.scss

@@ -16,24 +16,11 @@ $pagination-icon-more-hover-color: $secondary;
 $pagination-icon-more-dark-color: $qld-white;
 $pagination-icon-more-dark-hover-color: $qld-golden-yellow;
 
-//SVG ICONS - Default, light and light-alt
-$pagination-icon-prevnext: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-color}"/></svg>');
-$pagination-icon-prevnext-hover: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-hover-color}"/></svg>');
-$pagination-icon-more: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-color}"/></svg>');
-
-///////////////////////EDIT
-$pagination-icon-more-hover: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-hover-color}"/></svg>');
-
-$pagination-icon-more-dark-hover: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-dark-hover-color}"/></svg>');
-
-
-//SVG ICONS - Dark and dark-alt
-$pagination-icon-prevnext-dark: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-dark-color}"/></svg>');
-$pagination-icon-prevnext-dark-hover: url('data:image/svg+xml,<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 8.50066C21.5 8.89906 21.125 9.20892 20.7031 9.20892L3.03125 9.20892L9.59375 15.8489C9.875 16.1145 9.875 16.5572 9.54688 16.8228C9.40625 16.9556 9.21875 16.9998 9.03125 16.9998C8.79688 16.9998 8.60938 16.9556 8.46875 16.7785L0.6875 8.98759C0.40625 8.72199 0.40625 8.32359 0.6875 8.05799L8.46875 0.267061C8.75 -0.0428051 9.21875 -0.0428051 9.54688 0.222795C9.875 0.488394 9.875 0.931061 9.59375 1.19666L3.03125 7.79239L20.7031 7.79239C21.125 7.79239 21.5 8.14652 21.5 8.50066Z" fill="#{$pagination-icon-prevnext-dark-hover-color}"/></svg>');
-$pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/><circle cx="16" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/><circle cx="24" cy="16" r="2" fill="#{$pagination-icon-more-dark-color}"/></svg>');
-
-
 .pagination {
+    --action-icon-color: var(--#{$prefix}light-action-secondary);
+    --action-icon-color-hover: var(--#{$prefix}light-action-secondary-hover);
+    --action-icon-more-color: var(--#{$prefix}light-text-text);
+    --action-icon-more-color-hover: var(--#{$prefix}light-action-secondary);
 
     //Padding
     --#{$prefix}pagination-padding-x: 1rem;
@@ -78,13 +65,6 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     --#{$prefix}pagination-disabled-bg: var(--#{$prefix}secondary-bg);
     --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
 
-    //SASS icons assinged to CSS properties
-    --#{$prefix}pagination-icon-prevnext: #{escape-svg($pagination-icon-prevnext)};
-    --#{$prefix}pagination-icon-prevnext-hover: #{escape-svg($pagination-icon-prevnext-hover)};
-    --#{$prefix}pagination-icon-more: #{escape-svg($pagination-icon-more)};
-    --#{$prefix}pagination-icon-more-hover: #{escape-svg($pagination-icon-more-hover)};
-    --#{$prefix}pagination-icon-more-dark-hover: #{escape-svg($pagination-icon-more-dark-hover)};
-
 }
 
 // When the parent container has a darker background (.dark), or the parent container uses attribute data-bs-theme="dark"
@@ -126,9 +106,10 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     --#{$prefix}pagination-active-focus-bg: var(--#{$prefix}dark-action-primary-hover);
 
     //SASS icons assinged to CSS properties
-    --#{$prefix}pagination-icon-prevnext: #{escape-svg($pagination-icon-prevnext-dark)};
-    --#{$prefix}pagination-icon-prevnext-hover: #{escape-svg($pagination-icon-prevnext-dark-hover)};
-    --#{$prefix}pagination-icon-more: #{escape-svg($pagination-icon-more-dark)};
+    --action-icon-color: var(--#{$prefix}dark-action-secondary);
+    --action-icon-color-hover: var(--#{$prefix}dark-action-secondary-hover);
+    --action-icon-more-color: var(--#{$prefix}dark-text-text);
+    --action-icon-more-color-hover: var(--#{$prefix}dark-action-secondary);
 }
 
 
@@ -154,7 +135,7 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     .page-item {
 
         .page-link {
-            border-radius: 3px;
+            border-radius: 4px;
             width: 2rem;
             height: 2rem;
             padding: 0;
@@ -194,40 +175,41 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
         //Shared by both .prev and .next
         &.previous .page-link,
         &.next .page-link {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
 
             //.prev and .next arrows
             &:before {
                 content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 2rem;
-                height: 2rem;
-                background: var(--#{$prefix}pagination-icon-prevnext) center center;
-                background-repeat: no-repeat;
+                width: 1.5rem;
+                height: 1.5rem;
+                mask-image: var(--qgds-icon-arrow-left);
+                background-color: var(--action-icon-color);
+                mask-repeat: no-repeat;
+                mask-position: 0;
             }
 
             &:hover:before {
-                background: var(--#{$prefix}pagination-icon-prevnext-hover) center center;
-                background-repeat: no-repeat;
+                background-color: var(--action-icon-color-hover);
             }
 
             &:hover, &:focus {
             //Previous and Next "link text" 
-            span {
-                text-decoration: underline;
-                text-underline-offset: 2px;
-            }
+                span {
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                }
 
             }
-
         }
 
-        &.next .page-link:before {
-            //Replica of previous arrow (defined above), but rotated 180 degrees
-            transform: rotate(180deg);
-            right: 0;
-            left: unset;
+        &.next .page-link {
+            flex-direction: row-reverse;
+        
+            &:before {
+                transform: rotate(180deg);            
+            }
         }
 
         //Non-numeric links in pagination
@@ -276,29 +258,21 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
         //More dots
         &.more span {
             border: none;
-            position: relative;
+            // position: relative;
             height: 2rem;
             width: 2rem;
-            display: inline-block;
+            display: inline-flex;
 
             &:hover:before {
-                background: var(--#{$prefix}pagination-icon-more-hover);
+                background-color: var(--action-icon-more-color-hover);
             }
             &:before {
                 content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: var(--#{$prefix}pagination-icon-more);
+                width: 2rem;
+                height: 2rem;
                 background-repeat: no-repeat;
-            }
-            .dark &, .dark-alt & {
-                &:hover:before {
-                    background: var(--#{$prefix}pagination-icon-more-dark-hover);
-                    
-                }
+                mask-image: var(--qgds-icon-more-horizontal);
+                background-color: var(--action-icon-more-color);
             }
         }
     }
@@ -307,7 +281,7 @@ $pagination-icon-more-dark: url('data:image/svg+xml,<svg width="32" height="32"
     .dark &, .dark-alt & {
 
         .page-item {
-                    //Active link only
+            //Active link only
             &.active .page-link {
                 &:hover {
                     color: black;

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./promotionalPanel.data.json";
 
 # Promotional Panel
 
-<Canvas>
-  <Story of={promotionalPanelStories.Default} />
-</Canvas>
+<Canvas of={promotionalPanelStories.Default} />
 
 ## Design resources
 

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.hbs

@@ -5,7 +5,7 @@
     <div class="qld-quick-exit-inner container-fluid {{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
       <div class="qg-quick-exit__tips">
         {{#if hasIconInfo}}
-          <span class="qld-icon icon-info"></span>
+          <span class="icon-info"></span>
         {{/if}}
         <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
         <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">

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

@@ -1,3 +1,4 @@
+@use "../../../css/mixins" as m;
 // ----------------------------------------------------------------------------------------------------------------------
 // Header - palettes and second hand variables:
 @import "./colours";
@@ -58,8 +59,10 @@
       position: absolute;
     }
     .qld-tooltip-wrapper:after {
-      border-block-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-      border-inline-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-block-end: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-start: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
       border-inline-end: var(--#{$prefix}tooltip-arrow) solid transparent;
       border-block-start: var(--#{$prefix}tooltip-arrow) solid transparent;
       inset-block-end: calc(var(--#{$prefix}tooltip-arrow) * -1);
@@ -75,7 +78,8 @@
       &:focus-within {
         outline-offset: var(--#{$prefix}quick-exit-text-outline-offset);
         box-shadow: none;
-        outline: var(--#{$prefix}quick-exit-text-outline) solid var(--#{$prefix}quick-exit-tooltip-btn-focus);
+        outline: var(--#{$prefix}quick-exit-text-outline) solid
+          var(--#{$prefix}quick-exit-tooltip-btn-focus);
         border-radius: 0;
       }
     }
@@ -84,9 +88,13 @@
       font-weight: 500;
       text-decoration-line: underline;
       text-decoration-style: solid;
-      text-underline-offset: calc(var(--#{$prefix}quick-exit-text-outline-offset) * 2);
+      text-underline-offset: calc(
+        var(--#{$prefix}quick-exit-text-outline-offset) * 2
+      );
       &:hover {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qld-tooltip-prompt {
@@ -117,6 +125,7 @@
       border-color: var(--#{$prefix}quick-exit-button-bg-colour);
       background-color: var(--#{$prefix}quick-exit-button-bg-colour);
       color: var(--#{$prefix}quick-exit-button-text-colour);
+      display: inline-block;
       &:hover {
         border-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
         background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
@@ -129,7 +138,9 @@
       }
       &:hover,
       &:focus {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qg-quick-exit__tips {
@@ -143,9 +154,9 @@
   .icon-info {
     position: absolute;
     inset-inline-start: 0;
-    background-repeat: no-repeat;
     margin-block-start: 4px;
-    background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+    @include m.make-icon("alert-information");
+    --#{$prefix}icon-color: #{$qld-dark-action-secondary};
   }
   @include media-breakpoint-up(lg) {
     -webkit-box-pack: justify;
@@ -188,8 +199,10 @@
       .qld-tooltip-wrapper:after {
         border-block-end: var(--#{$prefix}tooltip-arrow) solid transparent;
         border-inline-start: var(--#{$prefix}tooltip-arrow) solid transparent;
-        border-inline-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-        border-block-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        border-inline-end: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
+        border-block-start: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
         inset-block-end: auto;
         inset-inline-start: 25px;
         inset-block-start: calc(var(--#{$prefix}tooltip-arrow) * -1);
@@ -251,3 +264,7 @@
     }
   }
 }
+
+body:has(.qld-quick-exit) {
+  height: auto;
+}

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

@@ -1,12 +1,12 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SearchInputStories from "./searchInput.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SearchInputStories from "./searchInput.stories";
 
 <Meta of={SearchInputStories} />
 
 # Search Input
-<Canvas>
-  <Story of={SearchInputStories.Default} />
-</Canvas>
+
+<Canvas of={SearchInputStories.Default} />
 
 ## Design resources
+
 - [Component library (Figma)]https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)./searchInput.stories

package/src/components/bs5/sidenav/Sidenav.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SidenavStories from "./sidenav.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SidenavStories from "./sidenav.stories";
 
 <Meta of={SidenavStories} />
 
 # Side navigation
-<Canvas>
-  <Story of={SidenavStories.Default} />
-</Canvas>
+
+<Canvas of={SidenavStories.Default} />
 
 ## Design resources