@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.8

package/src/components/bs5/navbar/navbar.scss

@@ -168,7 +168,6 @@
                 color: var(--link-color);
                 text-decoration-color: inherit;
                 padding: 0;
-                // transition:none;
                 &:after {
                   content: "";
                   content: none;
@@ -211,6 +210,15 @@
       width: 100%;
       border-block-end: 0;
       margin-block-end: 0;
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        border-inline-start: 5px solid var(--link-border-color);
+        left: -5px;
+        top: 0;
+        bottom: calc(var(--border-width) *  -1);      
+      }
       &:hover,
       &.active {
         border-block-end: 0;
@@ -218,6 +226,9 @@
           margin-block-end: 0;
           border-block-end: 0;
         }
+      &::before {
+        border-inline-start: 0.25rem solid var(--link-border-color-hover);
+      }
       }
       &:hover {
         .qld-icon {
@@ -284,6 +295,9 @@
   /* House keeping */
   --icon-dir: 1;
   --navbar-max-width: 26.25rem;
+  --border-width: 1px;
+  --nav-link-padding-block: 0.625rem;
+
   :dir(rtl) {
     --icon-dir: -1;
   }
@@ -434,6 +448,9 @@
     display: none;
   }
   .container {
+    --padding-block-size: calc(var(--nav-link-padding-block) * 2);
+    min-height: calc(var(--padding-block-size) + 2rem);
+    min-height: round(up, calc(var(--padding-block-size) + 2rem), 1px);
     position: relative;
   }
   .nav-item {
@@ -453,6 +470,7 @@
       background-color: var(--dropdown-bg-color);
       border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
       font-weight: 600;
+      z-index: 20;
       &:hover {
         background-color: var(--dropdown-bg-color);
         border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
@@ -475,7 +493,7 @@
   .navbar-nav a.nav-link,
   a.dropdown-item {
     color: var(--link-color);
-    padding-block: 0.625rem;
+    padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
     line-height: 2rem;
@@ -517,10 +535,7 @@
     }
   }
   .dropdown-menu.show {
-    --horizontal-bar-border-widthx2: calc(
-      var(--horizontal-bar-border-width) * 2
-    );
-    margin-block-start: calc(var(--horizontal-bar-border-widthx2) - 1px);
+    margin-block-start: calc(var(--horizontal-bar-border-width) - var(--border-width));
     inset-inline: 0;
     background-color: var(--dropdown-bg-color);
     padding: 4rem;
@@ -533,16 +548,21 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
     row-gap: 0;
+    z-index: 10;
+    border-width: 0;
     @include media-breakpoint-up(xl) {
       column-gap: 4rem;
       row-gap: 0;
     }
+    @include media-breakpoint-up(md) {
+      padding-block: 3rem;
+    }
     &::before {
       content: "";
       position: absolute;
       height: var(--horizontal-bar-border-width);
       inset: 0;
-      inset-block-start: calc(var(--horizontal-bar-border-width) * -1);
+      inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
     li {
@@ -563,9 +583,9 @@
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
-        border-block-end: 1px solid var(--border-color);
+        border-block-end: var(--border-width) solid var(--border-color);
         padding-block-start: 1rem;
-        padding-block-end: calc(1rem - 1px);
+        padding-block-end: calc(1rem - var(--border-width));
         gap: 0.75rem;
         font-weight: 600;
         transition:
@@ -615,7 +635,7 @@
       grid-column: 1 / -1;
       .dropdown-item {
         border-block-end: 0;
-        padding-block-end: 0;
+        padding-block: 0;
         gap: 1rem;
         transition: gap var(--animation-time) ease-in-out;
         font-size: 1.5rem;
@@ -646,17 +666,18 @@
         flex-direction: row-reverse;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
+        font-size: 1.25rem;
         transition:
           gap var(--animation-time) ease-in-out,
           padding-inline-end var(--animation-time) ease-in-out;
         &::before {
           content: "";
-          mask-image: var(--qgds-icon-arrow-right);
+          mask-image: var(--qgds-icon-view-all);
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
-          width: 1.25rem;
+          height: 2rem;
+          width: 2rem;
           transform: scaleX(var(--icon-dir));
         }
         &::after {
@@ -803,4 +824,5 @@
 //Prevent double scrollbar when navabr is open
 body:has(.navbar.show) {
   overflow: hidden;
-}
+}
+

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

@@ -1,13 +1,11 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./searchInput.hbs?raw";
 
 export class SearchInput {
-
   // Use the global Component class to create a new instance of the Textbox component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
-  constructor( data = {} ) {
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }

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

@@ -7,7 +7,10 @@ exports[`SearchInput > Renders as expected 1`] = `
 <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"  />
-
+    <button class="btn btn-primary" type="submit" id="search-button">
+        <span class="btn-icon"></span>
+        <span class="btn-label">Search</span>
+    </button>
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
             <div class="suggestions-category mt-16">
@@ -37,9 +40,6 @@ exports[`SearchInput > Renders as expected 1`] = `
         </div>
         <div class="dynamic-suggestions"></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.hbs

@@ -4,7 +4,10 @@
 <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}} />
-
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
     {{#if suggestions}}
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
@@ -36,8 +39,5 @@
         <div class="dynamic-suggestions"></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>

package/src/components/bs5/searchInput/searchInput.scss

@@ -14,6 +14,18 @@
     --qld-focus-color: var(--#{$prefix}dark-focus);
   }
   
+  .suggestions.d-none {
+    display: unset !important; // !important to override bootstrap d-none
+  }
+  .suggestions.d-none {
+    display: none !important; // !important to override bootstrap d-none
+  }
+  &:focus-within {
+    .suggestions.d-none {
+      display: block !important; // !important to override bootstrap d-none
+    }
+  }
+
   // Suggestions variables
   --suggestions-shadow:
     0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
@@ -144,6 +156,7 @@
       top: 50%;
       transform: translateY(-50%);
       left: calc(1rem - 0.125rem);
+      pointer-events: none;
     }
   }
 

package/src/components/bs5/tag/tag--large.stories.js

@@ -0,0 +1,53 @@
+// tag--large.stories.js
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Tag/Large",
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+// Large Tag story
+export const Large = {
+  args: defaultdata.large,
+};
+
+// Large Information Tag story with all variants
+export const LargeInformation = {
+  name: "Large Information variants",
+  args: {
+    ...defaultdata.info,
+    tagItems: defaultdata.info.tagItems.map((item) => ({
+      ...item,
+      classes: `${item.classes} tag-large`,
+    })),
+  },
+};
+
+// Large Action Tag story with all variants
+export const LargeAction = {
+  name: "Large Action variants",
+  args: {
+    ...defaultdata.action,
+    tagItems: defaultdata.action.tagItems.map((item) => ({
+      ...item,
+      classes: `${item.classes} tag-large`,
+    })),
+  },
+};

package/src/components/bs5/tag/tag--standard.stories.js

@@ -0,0 +1,39 @@
+// tag--standard.stories.js
+import { Tag } from './Tag.js';
+import defaultdata from './tag.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: '3. Components/Tag/Standard',
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+// Default Tag story
+export const Default = {
+  args: defaultdata.default,
+};
+
+// Info Tag story
+export const Information = {
+  args: defaultdata.info,
+};
+
+// Action Tag story
+export const Action = {
+  args: defaultdata.action,
+};

package/src/components/bs5/tag/tag--status.stories.js

@@ -0,0 +1,97 @@
+// tag--status.stories.js
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
+
+const sizes = {
+  "": "Small (Default)",
+  "tag-large": "Large",
+};
+
+const emphasis = {
+  "tag-low": "Low",
+  "tag-high": "High",
+};
+
+const types = {
+  "tag-neutral": "Neutral",
+  "tag-success": "Success",
+  "tag-warning": "Warning",
+  "tag-error": "Error",
+  "tag-information": "Information",
+};
+
+/**
+ * Construct Status tag for all possible variants with various sizes, emphasis levels, and types.
+ * @returns {HTML} HTMLMarkup of the tags.
+ */
+function statusVariantsMarkup() {
+  //Map through the emphasis levels and sizes objects.
+  return Object.entries(emphasis)
+    .map(([emClass, emLabel]) => {
+      return Object.entries(sizes)
+        .map(([sizeClass, sizeLabel]) => {
+          //Construct tagItems for each types.
+          let tagItems = [];
+          Object.entries(types).map(([typeClass, typeLabel]) => {
+            tagItems.push({
+              content: `${typeLabel}`,
+              classes: `${typeClass}`,
+            });
+          });
+
+          //Generate Tag component markup from all possible tag types.
+          const tagHtml = new Tag({
+            variant: defaultdata.status.variant,
+            tagItems: tagItems,
+            size: sizeClass,
+            emphasis: emClass,
+          }).html;
+
+          //Return Tag component markup in grid with tag's emphasis and size as label.
+          return `<div class="d-grid mb-4">
+                <div class="fw-bold">${emLabel} ${sizeLabel}</div>
+                <div class="btn-toolbar">
+                  ${tagHtml}
+                </div>
+              </div>`;
+        })
+        .join("");
+    })
+    .join("");
+}
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Tag/Status",
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+/**
+ * Show the Default mode of Status tags in all possible variants.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllStatusVariantsInDefaultMode = {
+  render: () => {
+    return statusVariantsMarkup();
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/bs5/tag/tag.scss

@@ -93,6 +93,9 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
   list-style-type: none;
   margin: 0.5rem 0;
   padding: 30px;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 
   .tag-item {
     --_padding-y: 0;
@@ -104,12 +107,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     //
     display: inline-flex;
     align-items: center;
-    color: var(--#{$prefix}dark-grey-muted);
-    margin-top: 0.5rem;
-    gap: calc(var(--_padding-x) / 2);
+    color: var(--#{$prefix}light-text-lighter);
+    // margin: 0 1rem 1rem 0;
     padding: var(--_padding-y) var(--_padding-x);
     list-style-type: none;
-    border: var(--_border-width) solid var(--#{$prefix}light-grey);
+    border: var(--_border-width) solid var(--#{$prefix}neutral-lighter);
     border-radius: 1rem;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -121,14 +123,13 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       --_padding-x: 1rem;
       --_height: 2.5rem;
       --_icon-size: 1.5rem;
-      margin: 0 1rem 1rem 0;
       font-size: 1rem;
       border-radius: calc(var(--_height) / 2);
     }
 
     &.tag-link {
-      color: var(--#{$prefix}sapphire-blue);
-      border-color: var(--#{$prefix}sapphire-blue);
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
 
       a {
         text-decoration: none;
@@ -144,14 +145,13 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:active,
       &:focus,
       &:focus-within {
-        background-color: var(--#{$prefix}textbox-border-color);
-        color: var(--#{$prefix}white);
-        background-color: var(--#{$prefix}button-dark-blue);
+        color: var(--#{$prefix}light-link-on-action);
+        background-color: var(--#{$prefix}light-action-primary-hover);
         text-decoration: underline;
         text-underline-offset: var(--#{$prefix}link-underline-offset);
 
         a {
-          color: var(--#{$prefix}white);
+          color: var(--#{$prefix}light-link-on-action);
         }
       }
     }
@@ -166,9 +166,9 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
 
     &.tag-info {
-      color: var(--#{$prefix}dark-grey-muted);
+      color: var(--#{$prefix}light-text-lighter);
       border: 0;
-      background-color: var(--#{$prefix}extra-light-grey);
+      background-color: var(--#{$prefix}neutral-lightest);
     }
   }
 
@@ -266,20 +266,22 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
   }
 
-  &.tag-dark {
-    background-color: var(--#{$prefix}sapphire-blue);
+  &.tag-dark,
+  .dark &:not(.tag-dark):not(.tag-dark-alt):not(.tag-alt) {
+    background-color: var(--#{$prefix}dark-background);
 
     .tag-item {
       --qld-focus-color: #{$qld-dark-focus}; // because we use component-scoped context (.tag-dark) not global .dark, need to set focus color correctly here.
-      color: var(--#{$prefix}dark-text);
+      color: var(--#{$prefix}dark-text-lighter);
+      border-color: var(--#{$prefix}dark-alt-border);
     }
 
     .tag-link {
-      color: var(--#{$prefix}white);
-      border-color: var(--#{$prefix}white);
+      color: var(--#{$prefix}dark-link);
+      border-color: var(--#{$prefix}dark-link);
 
       a {
-        color: white;
+        color: var(--#{$prefix}dark-link);
       }
 
       &:hover,
@@ -287,17 +289,18 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:focus,
       &:focus-within {
         background-color: var(--#{$prefix}dark-action-primary-hover);
-        border-color: var(--#{$prefix}light-green-dark);
-        color: var(--#{$prefix}text-darkest);
+        border-color: var(--#{$prefix}dark-action-primary-hover);
+        color: var(--#{$prefix}dark-link-on-action);
 
         a {
-          color: var(--#{$prefix}text-darkest);
+          color: var(--#{$prefix}dark-link-on-action);
         }
       }
     }
 
     .tag-info {
-      background-color: var(--#{$prefix}color-dark-background--shade);
+      background-color: var(--#{$prefix}dark-background-shade);
+      color: var(--#{$prefix}dark-text-lighter);
     }
 
     .tag-clear-filter-button {
@@ -310,11 +313,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
   }
 
   &.tag-alt {
-    background-color: var(--#{$prefix}light-grey-alt);
+    background-color: var(--#{$prefix}light-alt-background);
 
     .tag-item {
-      color: var(--#{$prefix}dark-grey-muted);
-      border-color: var(--#{$prefix}soft-grey);
+      color: var(--#{$prefix}light-text-lighter);
+      border-color: var(--#{$prefix}light-alt-border);
     }
 
     .tag-link:hover,
@@ -324,27 +327,55 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
 
     .tag-link {
-      color: var(--#{$prefix}sapphire-blue);
-      border-color: var(--#{$prefix}sapphire-blue);
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
     }
   }
 
-  &.tag-dark-alt {
-    background-color: var(--#{$prefix}dark-blue);
+  &.tag-light {
+    background-color: var(--#{$prefix}light-background);
+
+    .tag-item {
+      color: var(--#{$prefix}light-text-lighter);
+      border-color: var(--#{$prefix}light-border);
+    }
+
+    .tag-link {
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
+    }
+
+    .tag-info {
+      background-color: var(--#{$prefix}light-background-shade);
+    }
+
+    .tag-clear-filter-button {
+      color: var(--#{$prefix}light-action-secondary);
+
+      &:hover {
+        color: var(--#{$prefix}light-action-secondary-hover);
+      }
+    }
+  }
+
+  &.tag-dark-alt,
+  .dark-alt &:not(.tag-dark, .tag-dark-alt, .tag-alt) {
+    background-color: var(--#{$prefix}dark-alt-background);
 
     .tag-item {
       --qld-focus-color: #{$qld-dark-focus}; // because we use component-scoped context (.tag-dark) not global .dark, need to set focus color correctly here.
 
       a {
-        color: var(--#{$prefix}dark-text);
+        color: var(--#{$prefix}dark-text-lighter);
       }
 
-      color: var(--#{$prefix}dark-text);
+      color: var(--#{$prefix}dark-text-lighter);
       border-color: var(--#{$prefix}dark-border);
     }
 
     .tag-info {
-      background-color: var(--#{$prefix}dark-blue-shade);
+      background-color: var(--#{$prefix}dark-alt-background-shade);
+      color: var(--#{$prefix}dark-text-lighter);
     }
 
     .tag-link {
@@ -353,11 +384,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:focus,
       &:focus-within {
         background-color: var(--#{$prefix}dark-action-primary-hover);
-        border-color: var(--#{$prefix}light-green-dark);
-        color: var(--#{$prefix}text-darkest);
+        border-color: var(--#{$prefix}dark-link-on-action);
+        color: var(--#{$prefix}dark-link-on-action);
 
         a {
-          color: var(--#{$prefix}text-darkest);
+          color: var(--#{$prefix}dark-link-on-action);
         }
       }
     }