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

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/header/header.scss

@@ -400,37 +400,25 @@
   }
 
   &-site-search {
-    form {
-      display: flex;
-      position: relative;
-    }
+    display: none;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0.4rem;
+    padding: 1rem var(--qld-container-padding-x);
+    background-color: var(--#{$prefix}header-color-bg);
 
-    @include media-breakpoint-down(lg) {
-      // Mobile search open class
-      &.is-open {
-        z-index: 1;
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0.4rem;
-        padding: 1rem 0;
-        background-color: var(--#{$prefix}header-color-bg);
-      }
-      &.is-closed {
-        display: none;
-      }
+    &.is-open {
+      display: block;
     }
 
-    // Some default styling overrides.
     @include media-breakpoint-up(lg) {
-      .container {
-        display: contents;
-      }
-    }
-
-    .qld-search-input {
-      min-width: auto;
+      z-index: unset;
+      display: block;
+      position: static;
+      padding: 0;
+      background-color: transparent;
     }
   }
 }

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/logo/Logo.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from "@storybook/blocks";
-import stories from "./logo.stories";
+import * as stories from "./logo.stories";
 
 <Meta of={stories} />