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

package/src/components/bs5/textbox/textInput.scss

@@ -1,7 +1,7 @@
+@use "../../../css/functions" as f;
+
 .qld-text-input {
-  padding: 12px 16px;
-  border-radius: 4px;
-  border: 2px solid $qld-soft-grey;
+  @extend %form-control;
 
   @media (prefers-color-scheme: dark) {
     --table-row-border-color: var(--qld-white);
@@ -9,44 +9,18 @@
 
   //Table dark
   @include table-variant("dark", $qld-brand-primary);
-
-  &:hover {
-    background-color: $qld-extra-light-grey;
-    border-color: $qld-textbox-border-color;
-  }
-
-  &:focus {
-    outline: 3px solid $qld-light-blue;
-    outline-offset: 2px;
-    background-color: $qld-white !important;
-    border: 2px solid $qld-light-grey !important;
-  }
-
-  &.form-style-filled {
-    background-color: $qld-light-grey-alt;
-    border-width: 0 0 2px 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    &:focus {
-      border-radius: 4px;
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
 }
 
 .qld-text-input-label {
   color: var(--#{$prefix}text-grey);
   display: block;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 1.5;
-  margin-bottom: 0.5rem;
+  line-height: $input-line-height;
+  margin-bottom: f.remify(8px);
 
   .label-text-optional {
+    font-size: f.remify(14px);
     color: $qld-dark-grey-muted;
     font-weight: 400;
   }
@@ -64,146 +38,19 @@
   }
 }
 
-* + .qld-hint-text,
-* + .qld-input-error,
-* + .qld-input-success,
 * + .date-container {
-  margin-top: 8px;
+  margin-top: f.remify(4px);
 }
 
 .qld-hint-text {
   color: $qld-hint-text-color;
   display: block;
-  font-size: 1em;
-  line-height: 1.5;
-  margin-bottom: 0.5rem;
-}
-
-* + p.qld-input-error,
-* + span.qld-input-error,
-* + p.qld-input-success,
-* + span.qld-input-success {
-  font-size: 1rem;
-  line-height: 1.5;
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -6px;
-  align-items: center;
-}
-
-span.qld-input-success {
-  &:before {
-    content: "";
-    height: 2rem;
-    width: 2rem;
-    transform: scale(0.6);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' enable-background='new 0 0 64 64'%3E%3Cpath d='M32,2C15.431,2,2,15.432,2,32c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30C62,15.432,48.568,2,32,2z M25.025,50 l-0.02-0.02L24.988,50L11,35.6l7.029-7.164l6.977,7.184l21-21.619L53,21.199L25.025,50z' fill='%2343a047'/%3E%3C/svg%3E");
-  }
-}
-
-span.qld-input-error {
-  color: $qld-notify-warning;
-
-  &:before {
-    content: "";
-    height: 2rem;
-    width: 2rem;
-    //background-image: url('../../../img/icon-exclamation.svg');
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z' fill='%23E22339'/%3E%3Cpath d='M11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18Z' fill='white'/%3E%3Cpath d='M11 5C11 4.44771 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V5Z' fill='white'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    transform: scale(0.6);
-  }
-
-  .dark & {
-    color: $qld-color-error-light;
-  }
-}
-
-.qld-hint-text + select,
-.qld-hint-text + input,
-.qld-hint-text + textarea,
-.sq-form-question-note + select,
-.sq-form-question-note + input,
-.sq-form-question-note + textarea {
-  margin-top: 0.5rem;
-}
-
-.qld-input-success + input[type="text"],
-.qld-input-error + input[type="text"],
-.qld-input-success + input[type="email"],
-.qld-input-error + input[type="email"],
-.qld-input-success + input[type="date"],
-.qld-input-error + input[type="date"],
-.qld-input-success + .qld-text-input,
-.qld-input-error + .qld-text-input,
-.qld-input-success + textarea,
-.qld-input-error + textarea {
-  margin-top: 8px;
-  margin-top: 0.5rem;
-}
-
-input.qld-text-input.qld-input-error:not(:focus),
-input.qld-text-input.qld-input-error.form-style-filled:not(:focus),
-textarea.qld-text-input.qld-input-error:not(:focus),
-select.qld-select.qld-input-error:not(:focus) {
-  border-color: $qld-notify-warning;
-  background-color: $qld-color-error-light;
-  color: $qld-text-grey;
-}
-
-input.qld-text-input.qld-input-success:not(:focus),
-input.qld-text-input.qld-input-success.form-style-filled:not(:focus),
-textarea.qld-text-input.qld-input-success:not(:focus),
-select.qld-select.qld-input-success:not(:focus) {
-  border-color: $qld-notify-success;
-  background-color: $qld-color-success-light;
-  color: $qld-text-grey;
-}
-
-.qld-select {
-  padding: 12px 18px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23008635' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  appearance: none;
-  background-position: right 11px center;
-  background-size: 1rem auto;
-  width: 100%;
-  color: var(--#{$prefix}color-default-color-light-text-lighter);
-
-  &.disabled,
-  &:disabled {
-    background-color: var(
-      --#{$prefix}color-default-color-light-background-default-shade
-    );
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23636363' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
-  }
-
-  &.qld-input-error {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23E22339' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
-
-    &:not([multiple]):not([size]),
-    &:not([multiple])[size="1"] {
-      background-size: 1rem auto;
-    }
-  }
-
-  &.qld-input-success {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23339d37' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
-
-    &:not([multiple]):not([size]),
-    &:not([multiple])[size="1"] {
-      background-size: 1rem auto;
-    }
-  }
+  font-size: f.remify(14px);
+  line-height: f.snap-line-height(1.5);
+  margin-block: f.remify(8px);
 }
 
-.qld-input-success {
-  @extend .is-valid;
-}
-
-.qld-input-error {
-  @extend .is-invalid;
-}
+// .qld-select style moved to formcheck.scss
 
 @include media-breakpoint-up(md) {
   input.qld-field-width-1-quarter,
@@ -223,73 +70,6 @@ select.qld-select.qld-input-success:not(:focus) {
 }
 
 .dark {
-  .form-control.qld-text-input:not(:hover):not(:focus):not(
-      .qld-input-error
-    ):not(.qld-input-success)::-webkit-input-placeholder {
-    color: $qld-hint-text-color-muted;
-  }
-
-  .form-control.qld-text-input:not(:hover):not(:focus):not(
-      .qld-input-error
-    ):not(.qld-input-success)::-moz-placeholder {
-    color: $qld-hint-text-color-muted;
-  }
-
-  .form-control.qld-text-input:not(:hover):not(:focus):not(
-      .qld-input-error
-    ):not(.qld-input-success)::-ms-placeholder {
-    color: $qld-hint-text-color-muted;
-  }
-
-  .form-control.qld-text-input:not(:hover):not(:focus):not(
-      .qld-input-error
-    ):not(.qld-input-success)::placeholder {
-    color: $qld-hint-text-color-muted;
-  }
-
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
-      .qld-input-success
-    )::-webkit-input-placeholder {
-    color: $qld-white;
-  }
-
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
-      .qld-input-success
-    )::-moz-placeholder {
-    color: $qld-white;
-  }
-
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
-      .qld-input-success
-    )::-ms-placeholder {
-    color: $qld-white;
-  }
-
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
-      .qld-input-success
-    )::placeholder {
-    color: $qld-white;
-  }
-}
-
-.dark {
-  .qld-text-input {
-    border-color: $qld-dark-alt-border;
-    background-color: var(--qld-dark-background);
-    color: $qld-hint-text-color-muted;
-
-    &:hover {
-      color: $qld-white;
-      background-color: $qld-color-dark-background--shade;
-      border-color: $color-default-color-dark-action-primary-hover;
-    }
-
-    &:focus {
-      outline: 3px solid $qld-dark-focus;
-      color: $qld-text-grey;
-    }
-  }
-
   .qld-select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23FFEF60' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
   }

package/src/components/bs5/textbox/textbox.data.json

@@ -1,12 +1,15 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Label",
-	"placeholder": "Hello World",
-	"optional-text": "optional",
-	"hint-text": "Hint",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "value": "",
+  "isDisabled": false,
+  "isRequired": true,
+  "isValid": null,
+  "isFilled": false,
+  "customClass": "",
+  "label-text": "Label",
+  "placeholder": "",
+  "optional-text": "optional",
+  "hint-text": "Hint",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/src/components/bs5/textbox/textbox.hbs

@@ -1,32 +1,31 @@
 <!-- QGDS Component: Textbox -->
 
-<!-- Label for the first input field -->
 <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text for the first input field -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
+<span class="qld-input-success">{{successMessageText}}</span>
+{{else}}
+{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
+<span class="qld-input-error">{{errorMessageText}}</span>
+{{else}}
+{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<!-- First text input field, described by the hint text above -->
-<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
-    isRequired}}required aria-required="true" {{/if}} />
+<input id={{id}} {{#if value}}value="{{value}}"{{/if}}  class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
+    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
+    isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />

package/src/css/functions/_index.scss

@@ -1 +1,3 @@
 @forward "in-list";
+@forward "remify";
+@forward "snap-line-height";

package/src/css/functions/remify.scss

@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
+
+///
+/// Easily convert px to rems
+/// @param {Number} $value The px value to convert to rem. May be unitless or supplied as px units.
+/// @param {Number} $baseline [16px] The assumed px value of 1rem.
+/// @todo support complex property values eg: `border: remify(4px 8px 12px 2rem)`;
+@function remify($value, $baseline: 16px) {
+  @if (math.is-unitless($baseline)) {
+    $baseline-px: $baseline * 1px;
+  }
+
+  @if (math.unit($baseline) != "px") {
+    @error "parameter $baseline may only use px units";
+  }
+
+  @if (meta.type-of($value) == "list") {
+    $result: ();
+    @each $item in $value {
+      $result: list.append($result, remify($item));
+    }
+    @return $result;
+  }
+
+  @if (math.is-unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return (math.div($value, $baseline) * 1rem);
+}

package/src/css/functions/snap-line-height.scss

@@ -0,0 +1,7 @@
+@use "remify" as *;
+///
+/// Calculate a lineheight snapped to nearest 4px value, based on current font size
+/// The returned value is absolute, so only use on leaf nodes where relative line-height value doesn't need to cascade.
+@function snap-line-height($ideal-line-height: 1.4, $grid-size: 4px) {
+  @return round(nearest, calc(1em * $ideal-line-height), remify($grid-size));
+}

package/src/css/main.scss

@@ -100,7 +100,7 @@ $enable-dark-mode: true;
 @import "../../node_modules/bootstrap/scss/utilities/api";
 
 // Themes
-@import "qld-theme";
+@import "qld-palettes";
 
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";

package/src/css/mixins/focusable.scss

@@ -4,6 +4,7 @@
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
 /// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+/// @content
 
 @mixin focusable(
   $offsetOutline: true,
@@ -39,5 +40,7 @@
       ); // --qld-focus-color defined in qld-type.scss
       offset: $offsetOutline;
     }
+
+    @content;
   }
 }

package/src/css/{qld-theme.scss → qld-palettes.scss}

@@ -2,7 +2,7 @@
 // Provides complete theme styling including color, background-color, and CSS variables
 
 // Theme properties mixins to avoid duplication
-@mixin light-theme-properties {
+%qld-palette-default {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-light-action-secondary);
@@ -15,7 +15,6 @@
   --qld-headings-color: #{$headings-color};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
-  --qld-link-font-weight: 400;
   --qld-link-hover-color: var(--qld-link-color);
   --qld-link-visited-color: #{$color-default-color-light-link-visited};
   --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
@@ -30,12 +29,26 @@
   --qld-selection-color: var(--qld-white);
 }
 
-@mixin dark-theme-properties {
+%qld-palette-light {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-background);
+  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
+}
+
+%qld-palette-alt {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-alt-background);
+  --qld-border-color: var(--qld-soft-grey);
+}
+
+%qld-palette-dark {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-dark-action-secondary);
   --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
+  --qld-body-bg: var(--qld-dark-background);
   --qld-body-color: #fff;
+  --qld-border-color: var(--qld-dark-border);
   --qld-focus-color: var(--qld-dark-focus);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
   --qld-link-color: #{$color-default-color-dark-link-default};
@@ -54,42 +67,36 @@
   --qld-selection-color: var(--qld-brand-primary);
 }
 
+%qld-palette-dark-alt {
+  @extend %qld-palette-dark;
+  --qld-body-bg: var(--qld-dark-alt-background);
+  --qld-border-color: var(--qld-dark-alt-border);
+}
+
 // Default theme (inherits :root variables) and root variables
 :root,
 .default {
-  @include light-theme-properties;
+  @extend %qld-palette-default;
 }
 
 // Light theme
 .light {
-  @include light-theme-properties;
-  --qld-body-bg: var(--qld-light-background);
-  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
+  @extend %qld-palette-light;
 }
 
 // Alt theme (light alternative)
 .alt {
-  @include light-theme-properties;
-  --qld-body-bg: var(--qld-light-alt-background);
-  --qld-border-color: var(--qld-soft-grey);
+  @extend %qld-palette-alt;
 }
 
 // Dark theme
-.dark {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-background);
-  --qld-border-color: var(--qld-dark-border);
+// Bootstrap dark mode support
+.dark,
+:root[data-bs-theme="dark"] {
+  @extend %qld-palette-dark;
 }
 
 // Dark alt theme
 .dark-alt {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-alt-background);
-  --qld-border-color: var(--qld-dark-alt-border);
-}
-
-// Bootstrap dark mode support
-:root[data-bs-theme="dark"] {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-brand-primary);
+  @extend %qld-palette-dark-alt;
 }