@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.0

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

@@ -1,89 +1,99 @@
 @use "../../../css/mixins";
+@use "../../../css/variables/animation";
 
 .qld-search-input {
   // Input variables
   --background-color: var(--#{$prefix}white);
+  --background-color-hover: var(--#{$prefix}neutral-lightest);
   --border-color: var(--#{$prefix}light-border-alt);
+  --border-color-focus: var(--#{$prefix}default-border);
+  --border-color-hover: var(--#{$prefix}light-action-primary-hover);
   --placeholder-color: var(--#{$prefix}light-text-lighter);
   --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);
+  --suggestions-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+  --border-radius: 0.25rem;
+  --hover-background-color: var(--#{$prefix}neutral-light);
+  --_size: 3rem;
 
   .dark &,
   .dark-alt & {
-    --text-heading: var(--#{$prefix}dark-text-lighter);
-    --qld-focus-color: var(--#{$prefix}dark-focus);
+    --border-color: var(--#{$prefix}dark-alt-border);
+    --border-color-focus: var(--#{$prefix}dark-alt-border);
+    --border-color-hover: var(--#{$prefix}dark-action-primary-hover);
+    --background-color: var(--#{$prefix}dark-background);
+    --text-color: var(--#{$prefix}dark-text-default);
+    --background-color-hover: var(--#{$prefix}dark-background-shade);
+
+    --qld-selection-bg: var(--qld-dark-background);
+    --qld-selection-color: var(--qld-neutral-white);
+
+    .btn:active {
+      background-color: var(--#{$prefix}neutral-lightest);
+      border-color: var(--#{$prefix}neutral-lightest);
+      text-decoration: underline;
+    }
+    .form-control:focus {
+      border-color: var(--#{$prefix}neutral-lighter);
+      --text-color: var(--#{$prefix}light-text-text);
+    }
   }
 
-  .suggestions.d-none {
-    display: unset !important; // !important to override bootstrap d-none
-  }
-  .suggestions.d-none {
-    display: none !important; // !important to override bootstrap d-none
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius);
+
+  .suggestions {
+    transition-behavior: allow-discrete;
+    opacity: 0;
+    display: none;
+    transition:
+      opacity 0.5s,
+      display 0.5s;
   }
+
   &:focus-within {
-    .suggestions.d-none {
-      display: block !important; // !important to override bootstrap d-none
+    .suggestions {
+      display: block; // !important to override bootstrap d-none
+      opacity: 1;
+      transition:
+        opacity 0.5s,
+        display 0.5s;
     }
-  }
-
-  // Suggestions variables
-  --suggestions-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-  --suggestions-bg: var(
-    --#{$prefix}color-default-color-light-background-default-shade
-  );
-  --suggestions-hover: var(
-    --#{$prefix}color-default-color-light-border-default
-  );
-  --suggestions-hover-border-color: var(
-    --#{$prefix}color-default-color-light-accent-design-accent
-  );
-  --suggestions-feature-bg: var(
-    --#{$prefix}color-default-color-dark-background-default
-  );
-  --suggestions-feature-hover: var(
-    --#{$prefix}color-default-color-dark-background-default-shade
-  );
-  --suggestions-feature-text-color: var(
-    --#{$prefix}color-default-color-dark-text-default
-  );
-
-  // local variables
-  $border-radius: 0.25rem;
-  --_size: 3rem;
 
-  display: flex;
-  position: relative;
-  border-radius: $border-radius;
+    // &:has(#search-button:active) {
+    //   .suggestions {
+    //     display: none;
+    //   }
+    // }
+  }
 
   @include mixins.focusable($customSelector: ":has(.form-control:focus)");
 
   &:has(.form-control:focus) {
     > button {
-      border-bottom-right-radius: $border-radius;
+      border-bottom-right-radius: var(--border-radius);
     }
   }
 
   .form-control {
     min-height: var(--_size);
     padding: 0 4rem 0 1rem;
-    border: {
-      color: var(--border-color);
-      style: solid;
-      top-width: 0.125rem;
-      right-width: 0;
-      bottom-width: 0.125rem;
-      left-width: 0.125rem;
-      radius: $border-radius 0 0 $border-radius;
-    }
+    border: var(--border-color) solid 0.125rem;
+    border-inline-end-width: 0;
+    border-radius: 0;
+    border-start-start-radius: var(--border-radius);
+    border-end-start-radius: var(--border-radius);
     background: var(--background-color);
-    padding-right: 7.5rem;
+    padding-inline-end: 7.5rem;
     color: var(--text-color);
+
     transition: {
       property: border-color, background-color, color;
-      timing-function: ease-out;
-      duration: 0.2s;
+      timing-function: animation.$timing-function;
+      duration: animation.$duration-fast;
     }
 
     &::placeholder {
@@ -91,20 +101,20 @@
     }
 
     &:hover {
-      --background-color: var(--#{$prefix}neutral-lightest);
-      --border-color: var(--#{$prefix}light-action-primary-hover);
+      --background-color: var(--background-color-hover);
+      --border-color: var(--border-color-hover);
     }
 
     &:active,
     &:focus {
-      --border-color: var(--#{$prefix}light-border-alt);
+      --border-color: var(--border-color-focus);
       --background-color: var(--#{$prefix}white);
       outline: none;
     }
   }
 
   > button {
-    border-radius: 0 $border-radius $border-radius 0;
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
     padding: 0;
     margin: 0;
     width: var(--_size);
@@ -133,7 +143,8 @@
     --_size: 3.25rem;
 
     > button {
-      padding: calc(0.75rem - 0.125rem) var(--qld-btn-padding-x);
+      padding-block: calc(0.75rem - 0.125rem);
+      padding-inline: var(--qld-btn-padding-x);
       margin: 0;
       width: auto;
 
@@ -143,65 +154,123 @@
 
       .btn-icon {
         display: none;
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
 
     .form-control {
-      padding: 0.75rem 1rem 0.75rem 2.5rem;
-    }
-
-    @include mixins.make-icon($name: "search", $size: "xs", $pseudo: "before") {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: calc(1rem - 0.125rem);
-      pointer-events: none;
+      padding-block: 0.75rem;
+      padding-inline: 1rem;
     }
   }
 
   //Search dropdown
   .suggestions {
     position: absolute;
-    left: 0;
-    top: 100%;
+    inset-inline-start: 0;
     width: 100%;
+    inset-block-start: calc(3.25rem + 7px) !important;
     z-index: 1;
     border-radius: 0.5rem;
-    background: var(--suggestions-bg);
-    box-shadow: var(--suggestions-shadow);
-    border-bottom: solid 0.25rem var(--suggestions-hover-border-color);
+    background: var(--#{$prefix}neutral-lightest);
+
+    & > div:has(> div) {
+      box-shadow: var(--suggestions-shadow);
+      border-radius: 0.5rem;
+      border-bottom: 0.25rem solid
+        var(--#{$prefix}color-default-color-light-accent-design-accent);
+    }
 
     .suggestions-category {
-      &-view-more {
-        text-decoration: underline;
-        text-decoration-thickness: 0.5px;
-        text-decoration-color: rgba(
-          $color-default-color-light-text-default,
-          0.5
-        );
-        &:hover {
-          background-color: var(--suggestions-hover);
-          text-decoration-color: rgba(
-            $color-default-color-light-text-default,
-            1
-          );
-          text-decoration-thickness: var(
-            --#{$prefix}link-underline-thickness-hover
-          );
-        }
-      }
+      padding-block: 0.75rem;
 
+      &:not(:first-of-type) {
+        border-block-start: 1px solid
+        var(--#{$prefix}light-alt-background-shade);
+      }
+      
+      // Question
       &-label {
-        padding: 0 1rem;
+        padding-block: 0.75rem;
+        padding-inline: 1rem;
       }
 
       ul {
         li {
           a {
-            padding: 0.75rem 1rem;
-            display: inline-block;
+            display: flex;
+            align-items: center;
+            padding-block: 0.75rem;
+            padding-inline: 1rem;
+            color: var(--#{$prefix}light-text-text);
             width: 100%;
+            text-decoration: underline;
+            text-decoration-thickness: 0.5px;
+            text-decoration-color: transparent;
+            transition:
+              text-decoration-thickness animation.$duration-fast
+                animation.$timing-function,
+              text-decoration-color animation.$duration-fast
+                animation.$timing-function;
+
+            &:hover,
+            &:hover strong {
+              text-decoration-color: inherit;
+              text-decoration-thickness: var(
+                --#{$prefix}link-underline-thickness-hover
+              );
+              transition:
+                text-decoration-thickness animation.$duration-fast
+                  animation.$timing-function,
+                text-decoration-color animation.$duration-fast
+                  animation.$timing-function;
+            }
+
+            &:not(.view-more) {
+              &::before {
+                content: "";
+                height: 1.25rem;
+                width: 1.25rem;
+                min-width: 1.25rem;
+                margin-inline-end: 0.5rem;
+                mask-image: var(--qgds-icon-arrow-right);
+                mask-position: center center;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                background-color: var(--#{$prefix}light-action-secondary);
+              }
+
+              &:hover {
+                &::before {
+                  background-color: var(
+                    --#{$prefix}light-action-secondary-hover
+                  );
+                }
+              }
+            }
+
+            &.view-more {
+              text-decoration-color: inherit;
+            }
+          }
+        }
+      }
+    }
+
+    &:has(.dynamic-suggestions > div) {
+      background-color: var(--#{$prefix}default-background);
+    }
+    .dynamic-suggestions {
+      .suggestions-category:not(.feature) {
+        ul {
+          li {
+            a {
+              &:not(.view-more) {
+                &::before {
+                  mask-image: var(--qgds-icon-search);
+                }
+              }
+            }
           }
         }
       }
@@ -213,23 +282,9 @@
 
     // Featured search result styles
     .feature {
-      background-color: var(--suggestions-feature-bg);
-
-      strong {
-        color: var(--suggestions-feature-text-color);
-      }
-
-      ul {
-        li {
-          &:hover {
-            background-color: var(--suggestions-feature-hover);
-          }
-
-          a {
-            color: var(--suggestions-feature-text-color);
-          }
-        }
-      }
+      background-color: var(
+        --#{$prefix}color-default-color-light-background-default-shade
+      );
     }
 
     // Show when active
@@ -243,7 +298,6 @@
       a,
       strong {
         font-size: 1rem;
-        text-decoration: none;
       }
 
       strong {
@@ -254,30 +308,40 @@
       ul {
         padding: 0;
         margin: 0;
+
         li {
           min-height: 3rem;
           list-style: none;
           cursor: pointer;
-          margin-top: 0;
+          margin-block-start: 0;
 
           a {
             vertical-align: middle;
             vertical-align: -webkit-baseline-middle;
 
-            &:hover {
-              text-decoration: underline;
+            &:focus {
+              outline-color: var(--#{$prefix}light-focus);
+              background-color: var(--hover-background-color);
+              outline-offset: -4px;
             }
           }
 
           &:hover {
-            background-color: var(--suggestions-hover);
+            background-color: var(--hover-background-color);
+          }
+        }
+      }
 
-            a {
-              text-decoration: underline;
-              text-decoration-thickness: var(
-                --#{$prefix}link-underline-thickness-hover
-              );
-            }
+      .dynamic-suggestions .suggestions-category:not(.feature) {
+        strong {
+          color: var(--#{$prefix}light-text-text);
+        }
+        ul li {
+          &:hover {
+            --hover-background-color: var(--#{$prefix}default-background-shade);
+          }
+          a:focus {
+            --hover-background-color: var(--#{$prefix}default-background-shade);
           }
         }
       }
@@ -289,91 +353,24 @@
   }
 
   &.is-filled {
-    --background-color: var(--#{$prefix}neutral-lightest);
+    --background-color: var(--background-color-hover);
 
     .form-control {
-      border: {
-        top-width: 0;
-        right-width: 0;
-        bottom-width: 0.125rem;
-        left-width: 0;
-        radius: $border-radius 0 0 0;
-      }
+      border-width: 0;
+      border-block-end-width: 0.125rem;
+      border-radius: 0;
+      border-start-start-radius: var(--border-radius);
 
       &:active,
       &:focus {
         --border-color: var(--#{$prefix}neutral-lighter);
-        border-bottom-left-radius: $border-radius;
+        border-bottom-left-radius: var(--border-radius);
       }
     }
 
     > button {
-      border-radius: 0 $border-radius 0 0;
-    }
-  }
-
-  .dark &,
-  .dark-alt & {
-    --background-color: var(--#{$prefix}dark-background-background);
-    --border-color: var(--#{$prefix}dark-alt-border);
-    --placeholder-color: var(--${prefix}dark-text-lighter);
-    --qld-icon-color: var(--#{$prefix}white);
-    --text-color: var(--#{$prefix}dark-text-text);
-
-    // Suggestions variables
-    --suggestions-bg: var(
-      --#{$prefix}color-default-color-dark-background-default-shade
-    );
-    --suggestions-hover: var(
-      --#{$prefix}color-default-color-dark-background-default
-    );
-    --suggestions-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-accent-design-accent
-    );
-    --suggestions-feature-bg: var(
-      --#{$prefix}color-default-color-dark-background-alt
-    );
-    --suggestions-feature-hover: var(
-      --#{$prefix}color-default-color-dark-background-alt-shade
-    );
-    --suggestions-feature-text-color: var(
-      --#{$prefix}color-default-color-dark-text-default
-    );
-
-    &:has(.form-control:focus) {
-      --qld-icon-color: var(--#{$prefix}light-text-lighter);
-      --text-color: var(--#{$prefix}light-text-text);
-    }
-
-    .form-control {
-      &:hover {
-        --background-color: var(--#{$prefix}dark-background-shade);
-        --border-color: var(--#{$prefix}dark-action-primary-hover);
-      }
-
-      &:active,
-      &:focus {
-        --text-color: var(--#{$prefix}light-text-text);
-        --border-color: var(--#{$prefix}neutral-lighter);
-        --background-color: var(--#{$prefix}white);
-      }
-    }
-
-    &.is-filled {
-      --background-color: var(--#{$prefix}dark-background-shade);
-
-      .form-control {
-        &:hover {
-          --background-color: var(--#{$prefix}dark-background-shade);
-          --border-color: var(--#{$prefix}dark-action-primary-hover);
-        }
-
-        &:active,
-        &:focus {
-          --background-color: var(--#{$prefix}white);
-          --border-color: var(--#{$prefix}neutral-lighter);
-        }
-      }
+      border-radius: 0;
+      border-start-end-radius: var(--border-radius);
     }
   }
 }

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

@@ -2,34 +2,56 @@
 import { SearchInput } from "./SearchInput.js";
 import defaultdata from "./searchInput.data.json";
 
+// Save the initial defaultSuggestions data with fallback
+const initData = defaultdata.defaultSuggestions || null;
+
 export default {
   tags: ["autodocs"],
   title: "3. Components/Search Input",
   render: (args) => {
     return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search p-3">${new SearchInput(args).html}</form>`;
   },
-
-  argTypes: {},
+  argTypes: {
+    buttonLabel: {
+      description: "The label for the search button",
+      control: { type: "text" },
+    },
+    hasDefaultSuggestions: {
+      description:
+        "This manipulates defaultSuggestions to on focus, shows default suggestions below the search input",
+      control: { type: "boolean" },
+    },
+    hasDynamicSuggestions: {
+      description: "This produces dynamic suggestions as the user types",
+      control: { type: "boolean" },
+    },
+    "dynamicSuggestionsServiceLink.href": {
+      description: "URL for the dynamic suggestions Related Services link",
+      control: { type: "text" },
+    },
+  },
   parameters: {
     docs: {
       controls: {
-        include: ["buttonLabel", "suggestions"],
+        include: [
+          "buttonLabel",
+          "hasDynamicSuggestions",
+          "hasDefaultSuggestions",
+          "dynamicSuggestionsServiceLink.href",
+        ],
       },
-      story: { height: "400px" },
-    },
-    backgrounds: {
-      disable: false,
-    },
-  },
-  globals: {
-    backgrounds: {
-      value: "default",
+      story: { height: "800px" },
     },
   },
+  // globals: {
+  //   backgrounds: {
+  //     value: "default",
+  //   },
+  // },
 };
 
 export const Default = {
-  args: defaultdata,
+  args: { ...defaultdata, showDefaultSuggestions: true },
   name: "Default - Outline Variant",
 };