@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.15

package/src/components/bs5/quickexit/quickexit.scss

@@ -1,178 +1,258 @@
+// ----------------------------------------------------------------------------------------------------------------------
+// Header - palettes and second hand variables:
+@import "./colours";
+
 /*
  * Mobile layout
  */
 .qld-quick-exit {
-    background: $qld-dark-blue;
-    color: $qld-white;
-    height: 72px;
-    left: 0;
-    bottom: 0;
-    padding: 1rem;
-    position: fixed;
-    width: 100%;
-    z-index: 200;
-
-    &-inner {
-        display: -ms-flexbox;
-        display: flex;
-        align-items: center;
-        height: 100%;
-
-        .qg-quick-exit__tips {
-            display: none;
-        }
-
-        .qld-quick-exit-input:checked+.qld-tooltip-parent .qld-tooltip-wrapper {
-            display: block
-        }
-
-        .qld-quick-exit-input:checked+.qld-quick-exit-label {
-            color: white;
-            font-weight: 500
-        }
-
-        .qld-tooltip {
-            width: 190px;
-        }
-
-        .qld-tooltip-parent {
-            position: relative
-        }
-
-        .qld-tooltip-wrapper {
-            background-color: $qld-white;
-            bottom: 50px;
-            box-shadow: 0 0 8px 0 #8a8f91;
-            color: #000;
-            display: none;
-            font-weight: 500;
-            padding: 25px;
-            position: absolute
-        }
-
-        .qld-tooltip-wrapper:after {
-            border-bottom: 14px solid $qld-white;
-            border-left: 14px solid $qld-white;
-            border-right: 14px solid transparent;
-            border-top: 14px solid transparent;
-            bottom: -14px;
-            content: " ";
-            position: absolute;
-            left: 25px;
-            transform: rotate(-45deg)
-        }
-
-        .qld-quick-exit-item.qld-tooltip-container {
-            text-decoration: underline;
+  --#{$prefix}quick-exit-spacing: 1rem;
+  --#{$prefix}quick-exit-gaps: 25px;
+  --#{$prefix}quick-exit-text-outline: 2px;
+  --#{$prefix}quick-exit-text-outline-offset: 2px;
 
-            &:focus,
-            &:active,
-            &:focus-within {
-                outline-offset: 2px;
-                box-shadow: none;
-                outline: 2px solid var(--qld-focus-color);
-                border-radius: 0px;
-            }
-        }
+  //   --#{$prefix}quick-tooltip-text-outline-thickness: 0.5px;
+  //   --#{$prefix}quick-tooltip-text-outline-offset: 5px;
 
-        .qld-quick-exit-label,
-        .qld-tooltip-prompt {
-            font-weight: 500;
-            text-decoration-line: underline;
-            text-decoration-style: solid;
-            text-underline-offset: 5px;
-            text-decoration-thickness: 0.5px;
+  --#{$prefix}tooltip-width: 190px;
+  --#{$prefix}tooltip-arrow: 8px;
+  --#{$prefix}tooltip-desktop-top-offset: 40px;
+  --#{$prefix}icon-info-spacing: 40px;
+  --#{$prefix}quick-exit-actions-right-padding: 9px;
 
-            &:hover {
-                text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-            }
-        }
+  background: var(--#{$prefix}quick-exit-bg);
+  color: var(--#{$prefix}quick-exit-text-colour);
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  padding-block: 16px;
+  padding-inline: 24px;
+  position: fixed;
+  width: 100%;
+  z-index: 200;
 
+  &-inner {
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    height: 100%;
 
-        .qld-quick-exit-list {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-            -ms-flex-align: center;
-            align-items: center;
-            display: -ms-flexbox;
-            display: flex;
-            height: 100%;
-            -ms-flex-pack: distribute;
-            justify-content: space-around
-        }
-
-        .qld-quick-exit-actions {
-            -ms-flex-positive: 1;
-            flex-grow: 1
-        }
+    .qld-quick-exit-input:checked + .qld-tooltip-parent .qld-tooltip-wrapper {
+      display: block;
+    }
+    .qld-quick-exit-input:checked + .qld-quick-exit-label {
+      color: var(--#{$prefix}quick-exit-text-colour);
+      font-weight: 500;
+    }
+    .qld-tooltip {
+      width: var(--#{$prefix}tooltip-width);
+    }
+    .qld-tooltip-parent {
+      position: relative;
+    }
+    .qld-tooltip-wrapper {
+      background-color: var(--#{$prefix}quick-exit-tooltip-bg);
+      inset-block-end: calc(var(--#{$prefix}tooltip-desktop-top-offset) + 9px);
+      box-shadow: 0 0 8px 0 var(--#{$prefix}quick-exit-tooltip-box-shadow);
+      color: var(--#{$prefix}quick-exit-tooltip-text);
+      display: none;
+      font-weight: 500;
+      padding: var(--#{$prefix}quick-exit-gaps);
+      position: absolute;
+    }
+    .qld-tooltip-wrapper:after {
+      border-block-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-end: var(--#{$prefix}tooltip-arrow) solid transparent;
+      border-block-start: var(--#{$prefix}tooltip-arrow) solid transparent;
+      inset-block-end: calc(var(--#{$prefix}tooltip-arrow) * -1);
+      content: " ";
+      position: absolute;
+      inset-inline-start: var(--#{$prefix}quick-exit-gaps);
+      transform: rotate(-45deg);
+    }
+    .qld-quick-exit-item.qld-tooltip-container {
+      text-decoration: underline;
+      margin-inline-end: var(--#{$prefix}quick-exit-gaps);
+      &:focus,
+      &:active,
+      &:focus-within {
+        outline-offset: var(--#{$prefix}quick-exit-text-outline-offset);
+        box-shadow: none;
+        outline: var(--#{$prefix}quick-exit-text-outline) solid var(--#{$prefix}quick-exit-tooltip-btn-focus);
+        border-radius: 0;
+      }
+    }
+    .qld-quick-exit-label,
+    .qld-tooltip-prompt {
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-underline-offset: calc(var(--#{$prefix}quick-exit-text-outline-offset) * 2);
+      &:hover {
+        text-decoration-thickness: var(--qld-link-underline-thickness-hover); //
+      }
+    }
+    .qld-tooltip-prompt {
+      text-wrap: nowrap;
+    }
+    .qld-quick-exit-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      -ms-flex-align: center;
+      align-items: center;
+      display: -ms-flexbox;
+      display: flex;
+      height: 100%;
+      -ms-flex-pack: distribute;
+      justify-content: space-around;
+    }
+    .qld-quick-exit-actions {
+      -ms-flex-positive: 1;
+      flex-grow: 0;
+    }
+    .qld-quick-exit-tip-title {
+      margin-block-end: 0;
+    }
+    .qld-quick-exit-button {
+      border-color: var(--#{$prefix}quick-exit-button-bg-colour);
+      background-color: var(--#{$prefix}quick-exit-button-bg-colour);
+      color: var(--#{$prefix}quick-exit-button-text-colour);
+      &:hover {
+        border-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
+        background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
+      }
+    }
+    .qld-quick-exit-tip-link {
+      color: var(--#{$prefix}quick-exit-link-text-colour);
     }
+    .qg-quick-exit__tips {
+      flex-grow: 1;
+    }
+    &.has-icon-info .qg-quick-exit__tips {
+      display: block;
+      padding-inline-start: var(--#{$prefix}icon-info-spacing);
+    }
+  }
 }
 
-
 /*
  * Desktop layout
  */
 @media screen and (min-width: 992px) {
-    .qld-quick-exit {
-        -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-        position: relative;
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-        z-index: 999;
-
-        &-inner {
-            justify-content: space-between;
-
-            .qg-quick-exit__tips {
-                display: block;
-                padding-left: 40px
-            }
-
-            .qld-quick-exit-tip-link {
-                -ms-flex-align: center;
-                align-items: center;
-                color: $qld-white;
-                display: -ms-flexbox;
-                display: flex;
-            }
-
-            .qld-quick-exit-actions {
-                padding-right: 9px;
-                -ms-flex-positive: 0;
-                flex-grow: 0
-            }
+  .qld-quick-exit {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    position: relative;
+    position: -webkit-sticky;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 999;
+    padding-block: 20px; //
+    padding-inline: 40px; //
 
-            .qld-quick-exit-item {
-                margin-left: 25px;
-            }
-
-            .qld-tooltip-wrapper {
-                bottom: auto;
-                top: 40px;
-                padding: 1rem;
-            }
+    &-inner {
+      justify-content: space-between;
 
-            .qld-tooltip-wrapper:after {
-                border-bottom: 8px solid $qld-white;
-                border-left: 8px solid $qld-white;
-                border-right: 8px solid transparent;
-                border-top: 8px solid transparent;
-                bottom: auto;
-                left: 25px;
-                top: -7px;
-                transform: rotate(135deg)
-            }
-        }
+      .qld-quick-exit-tip-link {
+        -ms-flex-align: center;
+        align-items: center;
+        color: $qld-white; //
+        display: -ms-flexbox;
+        display: flex;
+      }
+      .qld-quick-exit-actions {
+        padding-inline-end: var(--#{$prefix}quick-exit-actions-right-padding);
+        -ms-flex-positive: 0;
+        flex-grow: 0;
+      }
+      .qld-tooltip-wrapper {
+        inset-block-end: auto;
+        inset-block-start: var(--#{$prefix}tooltip-desktop-top-offset);
+        padding: var(--#{$prefix}quick-exit-spacing);
+      }
+      .qld-tooltip-wrapper:after {
+        border-block-end: var(--#{$prefix}tooltip-arrow) solid transparent;
+        border-inline-start: var(--#{$prefix}tooltip-arrow) solid transparent;
+        border-inline-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        border-block-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        inset-block-end: auto;
+        inset-inline-start: 25px; //
+        inset-block-start: calc(var(--#{$prefix}tooltip-arrow) * -1);
+      }
+      .not-mobile,
+      .qld-quick-exit-tip-link {
+        display: inline;
+      }
     }
+  }
 }
-
 .icon-info {
-    background-repeat: no-repeat;
-    margin-top: 4px;
-    margin-right: 5px;
-    background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+  position: absolute;
+  inset-inline-start: calc(var(--#{$prefix}quick-exit-spacing) * 2.5);
+  background-repeat: no-repeat;
+  margin-block-start: 4px; //
+  background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+}
+.qld-quick-exit-inner {
+  padding: 0;
+}
+.qld-quick-exit-inner.has-tooltip {
+  .qg-quick-exit__tips {
+    padding-inline-start: 0;
+  }
+  @media screen and (max-width: 925px) {
+    .not-mobile {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 520px) {
+    .very-small-mobile {
+      display: none;
+    }
+  }
+}
+.qld-quick-exit-inner.has-icon-info {
+  .qg-quick-exit__tips {
+    padding-inline-start: var(--#{$prefix}icon-info-spacing);
+  }
+}
+.qld-quick-exit-inner.has-icon-info.has-tooltip {
+  @media screen and (max-width: 1020px) {
+    .icon-info {
+      display: none;
+    }
+    .qg-quick-exit__tips {
+      padding-inline-start: 0;
+    }
+  }
+  @media screen and (max-width: 925px) {
+    .not-mobile {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 520px) {
+    .very-small-mobile {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .not-mobile,
+  .qld-quick-exit-tip-link {
+    display: none;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+/// This is only for Responsive Design and keeping important info available to view
+@media screen and (max-width: 365px) {
+  .qld-quick-exit-button {
+    padding-inline: 10px; //
+  }
+  .very-small-mobile {
+    display: none;
+  }
 }

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

@@ -6,18 +6,16 @@ export default {
   tags: ["autodocs"],
   title: "Components/Quickexit",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Quickexit(args).html;
-  
   },
 };
 
@@ -32,15 +30,39 @@ export const Default = {
  * Dark themed Loading Quickexit
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
+  args: {
+    ...defaultdata,
+  },
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Forgov Quickexit
+ */
+export const Forgov = {
+  args: {
+    ...defaultdata,
+    hasIconInfo: false,
+    hasTooltip: false,
   },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [

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

@@ -0,0 +1,63 @@
+.qld-search-input {
+    // ------------------------------------------------------------------------------------------------------------------
+    //  1. Common vars
+    // ------------------------------------------------------------------------------------------------------------------
+    //  Search inputs
+    --#{$prefix}site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
+    --#{$prefix}site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
+    --#{$prefix}site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
+    --#{$prefix}site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
+    --#{$prefix}site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
+    --#{$prefix}site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}site-search_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
+
+    // Search input dark
+    --#{$prefix}dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
+    --#{$prefix}dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+    --#{$prefix}dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
+    --#{$prefix}dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
+    
+    // Dropdown
+    --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
+    --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
+    --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
+    --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
+    --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
+
+    // Search bootstrap variables
+    --site-search-bg: var(--#{$prefix}site-search-bg);
+    --site-search-btn-color: var(--#{$prefix}site-search-btn-color);
+    --site-search-btn-bg: var(--#{$prefix}site-search-btn-bg);
+    --site-search-border-color: var(--#{$prefix}site-search-border-color);
+    --site-search-icon-color: var(--#{$prefix}site-search-icon-color);
+    --site-search-input-color: var(--#{$prefix}site-search-text-color);
+    --site-search-text-color: var(--#{$prefix}site-search-text-color);
+    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
+
+    
+    // ------------------------------------------------------------------------------------------------------------------
+    //  2. Colour modes
+    // ------------------------------------------------------------------------------------------------------------------
+    .dark &,
+    .dark-alt & {
+        // Search (dark/dark/alt)
+        --site-search-bg: var(--#{$prefix}dark-site-search-bg);
+        --site-search-btn-color: var(--#{$prefix}dark-site-search-btn-color);
+        --site-search-btn-bg: var(--#{$prefix}dark-site-search-btn-bg);
+        --site-search-border-color: var(--#{$prefix}dark-site-search-border-color);
+        --site-search-icon-color: var(--#{$prefix}dark-site-search-icon-color);
+        --site-search-input-color: var(--#{$prefix}dark-site-search-text-color);
+        --site-search-text-color: var(--#{$prefix}dark-site-search-text-color);
+
+        // Suggestions colours
+        --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
+        --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
+        --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
+        --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
+        --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
+    }
+}