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

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

@@ -8,12 +8,25 @@
   --qld-icon-color: var(--#{$prefix}light-text-lighter);
   --text-color: var(--#{$prefix}light-text-text);
   --text-heading: var(--#{$prefix}color-default-color-light-text-heading);
-  
-  .dark &, .dark-alt & {
+
+  .dark &,
+  .dark-alt & {
     --text-heading: var(--#{$prefix}dark-text-lighter);
     --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);
@@ -40,7 +53,6 @@
   $border-radius: 0.25rem;
   --_size: 3rem;
 
-
   display: flex;
   position: relative;
   border-radius: $border-radius;
@@ -144,6 +156,7 @@
       top: 50%;
       transform: translateY(-50%);
       left: calc(1rem - 0.125rem);
+      pointer-events: none;
     }
   }
 
@@ -363,5 +376,4 @@
       }
     }
   }
-  
 }

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);
         }
       }
     }