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

package/src/components/bs5/blockquote/blockquote.scss

@@ -1,9 +1,15 @@
 //PREP REUSABLE VARIABLES, SCOPED TO .blockquote
 .blockquote {
   // Colours
-  --#{$prefix}quote-border-color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-  --#{$prefix}quote-text-color: var(--#{$prefix}color-default-color-light-text-heading);
-  --#{$prefix}quote-ref-text-color: var(--#{$prefix}color-default-color-light-text-default);
+  --#{$prefix}quote-border-color: var(
+    --#{$prefix}color-default-color-light-accent-design-accent
+  );
+  --#{$prefix}quote-text-color: var(
+    --#{$prefix}color-default-color-light-text-heading
+  );
+  --#{$prefix}quote-ref-text-color: var(
+    --#{$prefix}color-default-color-light-text-default
+  );
   //Measurements
   --#{$prefix}quote-spacing: 1rem;
   --#{$prefix}quote-border-width: 0.25rem;
@@ -11,13 +17,38 @@
   // Fonts
   --#{$prefix}quote-font-size: 1rem;
   --#{$prefix}quote-heavy-font-weight: 600;
+  --#{$prefix}blockquote-bg: var(--#{$prefix}body-bg);
+
+  .light & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}light-background);
+  }
+
+  .alt & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}light-grey-alt);
+  }
+
+  .dark & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}brand-primary);
+  }
+
+  .dark-alt & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}dark-blue);
+  }
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}quote-text-color: var(--#{$prefix}white);
+    --#{$prefix}quote-ref-text-color: var(--#{$prefix}white);
+  }
 }
 
 //Ruleset for COMPONENT, reference our scoped variables, or use variables of ::root node
 .blockquote {
-  border-inline-start: var(--#{$prefix}quote-border-width) solid var(--#{$prefix}quote-border-color);
+  background: var(--#{$prefix}blockquote-bg);
+  border-inline-start: var(--#{$prefix}quote-border-width) solid
+    var(--#{$prefix}quote-border-color);
   padding-block: calc(var(--#{$prefix}quote-spacing) * 0.5);
-  padding-inline-start: calc(var(--#{$prefix}quote-spacing) * 1.5);
+  padding-inline-start: calc(var(--#{$prefix}quote-spacing) * 1.25);
   padding-inline-end: calc(var(--#{$prefix}quote-spacing) * 1);
 
   blockquote {
@@ -25,7 +56,7 @@
     margin-block-end: 0;
     color: var(--#{$prefix}quote-text-color);
     font-size: calc(var(--#{$prefix}quote-font-size) * 1.25);
-    line-height: calc(var(--#{$prefix}quote-font-size) * 1.4);
+    line-height: calc(var(--#{$prefix}quote-font-size) * 1.75);
     font-weight: var(--#{$prefix}quote-heavy-font-weight);
     p:last-child {
       margin-block-end: 0;
@@ -34,6 +65,15 @@
   .quote-source {
     color: var(--#{$prefix}quote-ref-text-color);
     font-size: calc(var(--#{$prefix}quote-font-size) * 0.875);
-    margin-block-start: calc(var(--#{$prefix}quote-spacing) * 0.625);
+    margin-block-start: calc(var(--#{$prefix}quote-spacing) * 0.75);
+  }
+
+  > figcaption {
+    background: transparent;
+    color: var(--figure-color);
+
+    display: block;
+    caption-side: bottom;
+    padding: 0;
   }
 }

package/src/components/bs5/button/button.scss

@@ -165,6 +165,10 @@ a.btn,
   min-height: 3.25rem;
   text-align: center;
 
+  .qld-icon {
+    flex-shrink: 0;
+  }
+
   span[class^="icon-"],
   span[class^="fa-"] {
     margin: 0 0.5rem;

package/src/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/src/components/bs5/directionLinks/directionLinks.scss

@@ -1,116 +1,63 @@
 // QGDS QOL Direction Links
 
 a.qld-dir-link {
-
-  --dir-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z'/%3E%3C/svg%3E");
-  --link-colour: var(--qld-light-action-primary);
-  --icon-colour: var(--qld-light-action-secondary);
-  --icon-colour-hover: var(--qld-light-action-secondary-hover);
+  --link-colour: var(--#{$prefix}light-action-primary);
+  --icon-colour: var(--#{$prefix}light-action-secondary);
+  --icon-colour-hover: var(--#{$prefix}light-action-secondary-hover);
 
   color: var(--link-colour);
   text-decoration-color: var(--link-colour);
   display: flex;
+  gap: 0.5rem;
   width: fit-content;
   justify-content: space-between;
   align-self: flex-start;
 
   &:focus {
     border-radius: 4px;
-    outline: 3px solid var(--qld-focus-color);
+    outline: 3px solid var(--#{$prefix}focus-color);
     outline-offset: 2px;
   }
 
-  &.small {
-    font-size: 0.875rem;
-    line-height: 1rem;
-
-    .icon {
-      &::after {
-        zoom: 0.7;
-        mask-position: 0;
-      }
-    }
-  }
-
-  .icon {
-    &::after {
-      content: "";
-      display: inline-block;
-      width: 1rem;
-      height: 1.25rem;
-      mask-image: var(--dir-icon);
-      mask-repeat: no-repeat;
-      mask-position: 0 0.25rem;
-      background-color: var(--icon-colour);
-      margin-inline: 0.5rem;
-    }
-  }
-
   &:hover {
-
-    .icon {
-      &::after {
-        background-color: var(--icon-colour-hover);
-      }
+    .qld-icon {
+      background-color: var(--icon-colour-hover);
     }
   }
-
-  &.up {
-    .icon {
-      transform: rotate(270deg);
-    }
-  }
-
-  &.down {
-    .icon {
-      transform: rotate(90deg);
-    }
-  }
-
-  &.left {
-    flex-direction: row-reverse;
-
-    .icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  &.right {
-    .icon {
-      transform: rotate(0deg);
-    }
+}
+a[aria-disabled="true"] {
+  pointer-events: none;
+  color: var(--#{$prefix}hint-text-color-muted);
+  text-decoration-color: var(--#{$prefix}dark-grey-muted);
+  .qld-icon {
+    background-color: var(--#{$prefix}dark-grey-muted);
   }
 }
-
 .light,
 .alt {
   .qld-dir-link {
-    --link-colour: var(--qld-light-action-primary);
-    --icon-colour: var(--qld-light-action-secondary);
-    --icon-colour-hover: var(--qld-light-action-secondary-hover);
+    --link-colour: var(--#{$prefix}light-action-primary);
+    --icon-colour: var(--#{$prefix}light-action-secondary);
+    --icon-colour-hover: var(--#{$prefix}light-action-secondary-hover);
   }
 }
 
 .dark,
 .dark-alt {
   .qld-dir-link {
-    --link-colour: var(--qld-dark-text);
-    --icon-colour: var(--qld-dark-action-secondary);
-    --icon-colour-hover: var(--qld-dark-action-secondary-hover);
+    --link-colour: var(--#{$prefix}dark-text);
+    --icon-colour: var(--#{$prefix}dark-action-secondary);
+    --icon-colour-hover: var(--#{$prefix}dark-action-secondary-hover);
+  }
+  a[aria-disabled="true"] {
+    color: var(--#{$prefix}dark-text-lighter);
+    text-decoration-color: var(--#{$prefix}dark-text-lighter);
+    .qld-icon {
+      background-color: var(--#{$prefix}dark-text-lighter);
+    }
   }
 }
 
 li .qld-dir-link {
   width: auto;
 }
-
-a[aria-disabled="true"] {
-  pointer-events: none;
-  color: var(--qld-dark-grey-muted);
-
-  .icon {
-    &::after {
-      background-color: var(--qld-dark-grey-muted);
-    }
-  }
-}

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

@@ -15,29 +15,21 @@ export default {
     <!-- Grid container -->
     <div class="container">
       <div class="row">
-        <div class="col">
-          
+        <div class="col">          
           <!-- Component HTML -->
-          ${new DirectionLinks({ ...args, class: "up", label: "Up" }).html}
-        
+          ${new DirectionLinks({ ...args, class: "up", label: "Up" }).html}        
           </div>
         <div class="col">
-          
           <!-- Component HTML -->
-          ${new DirectionLinks({ ...args, class: "down", label: "Down" }).html}
-        
+            ${new DirectionLinks({ ...args, class: "down", label: "Down" }).html}
         </div>
         <div class="col">
-          
           <!-- Component HTML -->
-          ${new DirectionLinks({ ...args, class: "left", label: "Left" }).html}
-        
+            ${new DirectionLinks({ ...args, class: "left", label: "Left" }).html}        
         </div>
-        <div class="col">
-          
+        <div class="col">          
           <!-- Component HTML -->
-          ${new DirectionLinks({ ...args, class: "right", label: "Right" }).html}
-        
+            ${new DirectionLinks({ ...args, class: "right", label: "Right" }).html}        
         </div>
       </div>
     </div>
@@ -59,6 +51,7 @@ export default {
     label: { control: "text" },
   },
   parameters: {
+    controls: { disable: true },
     design: {
       name: "QGDS Figma Reference",
       type: "figma",

package/src/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/src/components/bs5/inpagenav/inpagenav.scss

@@ -3,9 +3,8 @@
 
 // QGDS specific In-page Navigation variables.
 .qld-inpage-nav {
-  --#{$prefix}inpage-nav-padding-left: 1.5rem;
-  --#{$prefix}inpage-nav-title-padding-left: $nav-link-padding-x;
-  --#{$prefix}inpage-nav-link-padding-left: $nav-link-padding-x;
+  --#{$prefix}inpage-nav-padding-left: 1.25rem;
+  --#{$prefix}inpage-nav-title-padding-left: 0;
   --#{$prefix}inpage-nav-link-padding-y: 0.25rem;
   --#{$prefix}inpage-nav-border-color: var(--#{$prefix}brand-primary);
 }
@@ -46,10 +45,15 @@
       padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
       color: var(--#{$prefix}nav-link-color);
+      text-decoration-line: underline;
     }
 
     &:first-child .nav-link {
       padding-top: 0;
     }
+
+    &:last-child .nav-link {
+      padding-bottom: 0;
+    }
   }
 }

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

@@ -12,70 +12,87 @@
       "alternativeColor": false,
       "mobileOnly": false,
       "hideLabel": true,
+      "currentPage": true,
       "target": ""
     },
     {
       "text": "Simple list",
       "iconName": "",
-      "url": "index.html",
-      "alternativeColor": true,
+      "url": "https://www.wired.html",
+      "alternativeColor": false,
       "mobileOnly": false,
+      "currentPage": false,
       "hideLabel": false,
       "target": "_blank",
       "dropdownOptions": {
-        "alternativeText": "Patients and visitors",
-        "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
-        "viewAllHref": "https://example.com"
+        "hasNoLink": false,
+        "alternativeText": "",
+        "description": "",
+        "viewAllHref": ""
       },
       "navigationItems": [
         {
           "text": "Find your reason",
           "description": "",
           "url": "index.html",
-          "mobileOnly": true,
-          "target": ""
+          "mobileOnly": false,
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Quit stories",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Vaping (e-cigarettes)",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Choose your method",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Pregnancy and smoking",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Sign up for our support program",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Plan your journey",
           "description": "",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         }
       ]
     },
@@ -83,11 +100,13 @@
       "text": "Mega menu",
       "iconName": "qld-icon-calendar",
       "url": "https://example.com",
-      "alternativeColor": true,
+      "alternativeColor": false,
       "mobileOnly": false,
+      "currentPage": false,
       "hideLabel": false,
       "target": "",
       "dropdownOptions": {
+        "hasNoLink": true,
         "alternativeText": "Mega menu alt title",
         "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
         "viewAllHref": "index.html"
@@ -98,56 +117,72 @@
           "description": "One of the best motivations for quitting is having a clear reason in mind so you know exactly why you’re doing it in the first place.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Aboriginal and Torres Strait Islander support",
           "description": "Be encouraged and motivated by listening to stories of others who've quit smoking for life.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Your healthcare rights and responsibilities",
           "description": "Vaping products are also known as e-cigarettes, e-cigars, vape pens or personal vapourisers. Vapes are harmful. The safest option is to not vape at all.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Going to hospital",
           "description": "There are plenty of ways to quit smoking cigarettes and vapes. Find one that suits you best and commit to it.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Interpreter services",
           "description": "Whether you’re thinking about getting pregnant, you're pregnant or have recently given birth, quitting smoking or vaping is the best thing you can do for the health of  you and your baby.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Health costs, insurance and financial support",
           "description": "Sign up for My Quit Journey to support you to stop smoking.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Leaving hospital",
           "description": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         },
         {
           "text": "Your health record",
           "description": "Congratulations on taking the first step in your journey and deciding to make one of the best choices of your life.",
           "url": "index.html",
           "mobileOnly": false,
-          "target": ""
+          "target": "",
+          "isHTML": false,
+          "htmlContent": ""
         }
       ]
     },
@@ -157,6 +192,7 @@
       "url": "/iframe.html?viewMode=story&id=3-components-navbar--default",
       "alternativeColor": false,
       "mobileOnly": false,
+      "currentPage": false,
       "hideLabel": false,
       "target": ""
     },
@@ -166,24 +202,54 @@
       "url": "/?path=/docs/3-components-navbar--overview",
       "alternativeColor": false,
       "mobileOnly": false,
+      "currentPage": false,
       "hideLabel": false,
       "target": ""
     },
     {
-      "text": "Mobile only",
+      "text": "Full screen view 2",
       "iconName": "",
       "url": "index.html",
-      "alternativeColor": false,
+      "alternativeColor": true,
       "mobileOnly": true,
+      "currentPage": false,
       "hideLabel": false,
       "target": ""
     },
+    {
+      "text": "Login",
+      "iconName": "qld-icon-login",
+      "url": "",
+      "alternativeColor": true,
+      "mobileOnly": true,
+      "currentPage": false,
+      "hideLabel": false,
+      "target": "",
+      "dropdownOptions": {
+        "hasNoLink": true,
+        "alternativeText": "",
+        "description": "",
+        "viewAllHref": ""
+      },
+      "navigationItems": [
+        {
+          "text": "",
+          "description": "",
+          "url": "",
+          "mobileOnly": true,
+          "target": "",
+          "isHTML": true,
+          "htmlContent": "<div class='someClass'><h4 class='mt-2 mb-3'>Log in to For government</h4><p>Most employees can log in using single sign on (SSO).</p><div class='someClass'><a class='btn btn-secondary justify-content-center' href='/someLink'>Log in with single sign-on</a><div class='group'><a class='mt-2 qld__header__cta-group-list' href='/somelink'>If your agency doesn't use SSO.</a></div></div><hr><h4 class='mt-2 mb-3'>Select your agency</h4><p>See information relevant to your agency.</p></div>"
+        }
+      ]
+    },
     {
       "text": "Mobile only with icon",
       "iconName": "qld-icon-chart",
       "url": "index.html",
-      "alternativeColor": false,
+      "alternativeColor": true,
       "mobileOnly": true,
+      "currentPage": false,
       "hideLabel": false,
       "target": ""
     }

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

@@ -26,6 +26,10 @@ export function initializeNavbar() {
     // Toggle dropdown functionality based on screen size
     dropdownToggles.forEach((toggle) => {
       if (isMobile) {
+        // Skip toggle items with hasNoLink class
+        if (toggle.classList.contains("hasNoLink")) {
+          return;
+        }
         toggle.classList.replace("dropdown-toggle", "no-dropdown-toggle");
         toggle.removeAttribute("data-bs-toggle");
       } else {