@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/src/components/bs5/formcheck/formcheck.scss

@@ -25,7 +25,8 @@ $input-transition:
 // Checks and radios (LARGE)
 $form-check-input-width: 2rem;
 
-$form-check-input-width-small: 22px;
+// Checks and radios (SMALL)
+$form-check-input-width-small: 1.375rem;
 
 $form-check-min-height: $font-size-base * $line-height-base;
 $form-check-padding-start: $form-check-input-width + 0.5rem;
@@ -37,13 +38,13 @@ $form-check-transition: null;
 $form-check-input-active-filter: brightness(100%);
 
 $form-check-input-bg: $input-bg;
-$form-check-input-border: 2px solid var(--#{$prefix}soft-grey);
+$form-check-input-border: 2px solid var(--#{$prefix}light-text-text);
 $form-check-input-border-radius: 0.25em;
 $form-check-radio-border-radius: 50%;
 
-$form-check-input-checked-color: #414141;
+$form-check-input-checked-color: var(--#{$prefix}light-text-text);
 $form-check-input-checked-bg-color: transparent;
-$form-check-input-checked-border-color: var(--#{$prefix}soft-grey);
+$form-check-input-checked-border-color: var(--#{$prefix}light-text-text);
 
 $form-check-hover: var(--#{$prefix}dark-hover);
 
@@ -58,25 +59,27 @@ $form-check-input-outline-dark: 3px solid var(--#{$prefix}dark-focus);
 $form-check-input-border-width-small: 2px;
 
 // DARK ICON
-$form-check-input-checked-color-dark: #fff;
+$form-check-input-checked-color-dark: var(--#{$prefix}dark-text-text);
 
 // DARK BORDER
-$form-check-input-border-dark: 0.15em solid var(--#{$prefix}dark-alt-border);
+$form-check-input-border-dark: var(--#{$prefix}dark-text-text);
 
 // RADIO CHECKED LIGHT
-$form-radio-bg-image: url("data:image/svg+xml,<svg viewBox='-2 -2 4 4' xmlns='http://www.w3.org/2000/svg'><circle r='1.8' fill='#{$form-check-input-checked-color}'/></svg>");
+$form-radio-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="11" fill="#000000"/></svg>');
+$form-radio-bg-image-small: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 7.41015 14.5899 4.5 11 4.5C7.41015 4.5 4.5 7.41015 4.5 11C4.5 14.5899 7.41015 17.5 11 17.5Z" fill="#000000"/></svg>');
 
 // RADIO CHECKED DARK
 $form-radio-bg-image-dark: url("data:image/svg+xml,<svg viewBox='-2 -2 4 4' xmlns='http://www.w3.org/2000/svg'><circle r='1.8' fill='#{$form-check-input-checked-color-dark}'/></svg>");
 
 // CHECKBOX CHECKED LIGHT
-$form-check-bg-image: url("data:image/svg+xml,<svg width='18' height='13' viewBox='0 0 18 13' fill='#{$form-check-input-checked-color}' xmlns='http://www.w3.org/2000/svg'><path d='M17.5547 0.445312C17.7891 0.679688 17.7891 1.10938 17.5547 1.34375L6.92969 11.9688C6.69531 12.2031 6.26562 12.2031 6.03125 11.9688L0.40625 6.34375C0.171875 6.10938 0.171875 5.67969 0.40625 5.44531C0.640625 5.21094 1.07031 5.21094 1.30469 5.44531L6.5 10.6406L16.6562 0.445312C16.8906 0.210938 17.3203 0.210938 17.5547 0.445312Z' /></svg>");
+$form-check-bg-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5498 13.8L0.0498047 7.30002L2.2998 5.05002L6.5498 9.30002L15.6998 0.150024L17.9498 2.40002L6.5498 13.8Z' fill='currentColor'/%3E%3C/svg%3E%0A");
 
 // CHECKBOX CHECKED DARK
-$form-check-bg-image-dark: url("data:image/svg+xml,<svg width='18' height='13' viewBox='0 0 18 13' fill='#{$form-check-input-checked-color-dark}' xmlns='http://www.w3.org/2000/svg'><path d='M17.5547 0.445312C17.7891 0.679688 17.7891 1.10938 17.5547 1.34375L6.92969 11.9688C6.69531 12.2031 6.26562 12.2031 6.03125 11.9688L0.40625 6.34375C0.171875 6.10938 0.171875 5.67969 0.40625 5.44531C0.640625 5.21094 1.07031 5.21094 1.30469 5.44531L6.5 10.6406L16.6562 0.445312C16.8906 0.210938 17.3203 0.210938 17.5547 0.445312Z' /></svg>");
+$form-check-bg-image-dark: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5498 13.8L0.0498047 7.30002L2.2998 5.05002L6.5498 9.30002L15.6998 0.150024L17.9498 2.40002L6.5498 13.8Z' fill='#{$form-check-input-checked-color-dark}'/%3E%3C/svg%3E");
 
 // ESCAPE SVGs FOR ICONS
 $form-radio-button: #{escape-svg($form-radio-bg-image)};
+$form-radio-button-small: #{escape-svg($form-radio-bg-image-small)};
 $form-radio-button-dark: #{escape-svg($form-radio-bg-image-dark)};
 $form-checkbox-button: #{escape-svg($form-check-bg-image)};
 $form-checkbox-button-dark: #{escape-svg($form-check-bg-image-dark)};
@@ -92,21 +95,6 @@ $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;
 
 $form-check-inline-margin-end: 1rem;
 
-.small {
-  .form-check .form-check-input {
-    width: $form-check-input-width-small;
-    height: $form-check-input-width-small;
-
-    &[type="checkbox"],
-    &[type="radio"] {
-      border-width: #{$form-check-input-border-width-small};
-      &:checked {
-        background-size: 14px 14px;
-      }
-    }
-  }
-}
-
 .form-label {
   font-weight: 600;
   line-height: 1.5;
@@ -138,158 +126,192 @@ $form-check-inline-margin-end: 1rem;
   &:active,
   &:focus {
     border-color: var(--#{$prefix}input-border-color-hover);
-    outline: #{$form-check-input-outline};
+    outline: $form-check-input-outline;
     outline-offset: 2px;
     box-shadow: none;
   }
 }
 
-.form-check {
-  display: flex;
-  align-items: center;
-  margin-bottom: $form-check-margin-bottom;
-
-  .form-check-input {
-    width: $form-check-input-width;
-    height: $form-check-input-width;
-    margin-top: 0;
-
-    &:hover,
-    &:focus {
-      cursor: pointer;
-      background-color: var(--#{$prefix}extra-light-grey);
+.form-check-input {
+  // hides the original input element, and + label recreates it visually
+  background-size: calc(2rem - 8px);
+  border: 0;
+  clip-path: inset(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  margin-top: 0;
+
+  + label {
+    --_background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    vertical-align: bottom;
+    line-height: 2rem;
+    padding-left: 2.5rem;
+    margin-left: -1.5em;
+
+    // before is the outer box with border,
+    // after is the check or radio icon
+    &::before,
+    &::after {
+      visibility: visible;
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      background-repeat: no-repeat;
+      z-index: 9;
+      border: $form-check-input-border;
+      width: 2rem;
+      height: 2rem;
     }
-    &:active,
-    &:focus {
-      border-color: var(--#{$prefix}input-border-color-hover);
-      outline: #{$form-check-input-outline};
-      outline-offset: 3px;
-      box-shadow: none;
+    &::before {
+      background-color: var(--_background-color);
+      border-color: $form-check-input-checked-border-color;
+      background-image: none !important;
+    }
+
+    &::after {
+      z-index: 101;
+      background-color: transparent;
     }
   }
 
-  // DEFAULT RADIO
-  .form-check-input[type="radio"] {
+  &:active + label::before,
+  &:focus + label::before {
+    border-color: var(--#{$prefix}input-border-color-hover);
+    outline: $form-check-input-outline;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  &:hover + label {
+    --_background-color: var(--#{$prefix}extra-light-grey);
+  }
+
+  &:checked {
+    background-color: transparent;
     background-image: none;
-    background-size: calc(2rem - 8px);
-    border: $form-check-input-border;
 
-    &:checked {
-      background-color: transparent;
-      background-image: #{$form-radio-button};
-      background-size: calc(2rem - 8px);
+    & + label::after {
+      content: "";
+      display: block;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      background-color: $form-check-input-checked-color;
     }
   }
 
-  // DEFAULT CHECKBOX
-  .form-check-input[type="checkbox"] {
-    background-size: calc(2rem - 8px);
-    border: $form-check-input-border;
+  &[type="checkbox"] {
     border-radius: 0;
 
     &:checked {
-      background-image: #{$form-checkbox-button};
-      background-color: #{$form-check-input-checked-bg-color};
-      background-size: 1.125rem;
-      background-position: center;
-      border-color: #{$form-check-input-checked-border-color};
+      + label::after {
+        mask-image: $form-check-bg-image;
+        mask-size: 1.125rem;
+      }
     }
   }
 
-  // DEFAULT VALID
-  .valid & {
-    .form-check-input[type="radio"],
-    .form-check-input[type="checkbox"] {
-      outline: #{$form-check-valid-color} solid 2px;
-
-      &:focus {
-        outline: #{$form-check-input-outline};
-        outline-offset: 2px;
-        box-shadow: none;
+  &[type="radio"] {
+    background-image: none;
+
+    + label {
+      //
+      &::before,
+      &::after {
+        border-radius: 50%;
       }
-      &:checked:focus {
-        outline: #{$form-check-input-outline};
+
+      &::after {
+        mask-image: $form-radio-button;
+        mask-size: 100%;
       }
     }
   }
-  // DEFAULT INVALID
+
+  // DEFAULT VALID & INVALID
+  .valid &,
+  .invalid & {
+    &:focus + label::before {
+      outline: $form-check-input-outline;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+  .valid & {
+    + label::before {
+      outline: $form-check-valid-color solid 2px;
+    }
+  }
   .invalid & {
-    .form-check-input[type="radio"],
-    .form-check-input[type="checkbox"] {
-      outline: #{$form-check-invalid-color} solid 2px;
-
-      &:focus {
-        outline: #{$form-check-input-outline};
-        outline-offset: 2px;
-        box-shadow: none;
-      }
-      &:checked:focus {
-        outline: #{$form-check-input-outline};
-      }
+    + label::before {
+      outline: $form-check-invalid-color solid 2px;
     }
   }
-  // DARK
-  .dark &,
-  .dark-alt & {
-    .form-check-input {
-      &:hover,
-      &:focus {
-        background-color: #{$form-check-hover};
-      }
+
+  .small & {
+    &:checked + label::before {
+      background-size: 22px 22px;
     }
-    .form-check-input[type="checkbox"]:checked {
-      background-image: #{$form-checkbox-button-dark};
+
+    &[type="checkbox"]:checked + label:after {
+      mask-size: 0.84906rem 0.63988rem;
     }
-    .form-check-input[type="radio"]:checked {
-      background-image: #{$form-radio-button-dark};
+
+    + label {
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: $input-line-height;
+      padding-left: 1.875rem;
+
+      &:before,
+      &:after {
+        width: $form-check-input-width-small;
+        height: $form-check-input-width-small;
+        border-width: $form-check-input-border-width-small;
+      }
     }
-    .form-check-input,
-    .form-check-input:checked {
-      border: #{$form-check-input-border-dark};
+
+    &[type="radio"] + label::after {
+      mask-image: $form-radio-button-small;
     }
-    .form-check-input:focus {
-      outline: #{$form-check-input-outline-dark};
+  }
+
+  .dark &,
+  .dark-alt & {
+    &:hover + label {
+      --_background-color: $form-check-hover;
     }
-    .small & {
-      .form-check-input[type="checkbox"],
-      .form-check-input[type="radio"] {
-        &:checked {
-          background-color: transparent;
-          background-size: 14px 14px;
-        }
-      }
+    &:hover + label::after {
+      background-color: $form-check-hover;
     }
-    // DARK VALID
-    .valid & {
-      .form-check-input[type="radio"],
-      .form-check-input[type="checkbox"] {
-        outline: #{$form-check-valid-color} solid 2px;
-        &:focus {
-          outline: #{$form-check-input-outline-dark};
-          outline-offset: 2px;
-          box-shadow: none;
-        }
-        &:checked:focus {
-          outline: #{$form-check-input-outline-dark};
-        }
-      }
+    + label::before,
+    + label::after {
+      border-color: $form-check-input-border-dark;
     }
-    // DARK INVALID
-    .invalid & {
-      .form-check-input[type="radio"],
-      .form-check-input[type="checkbox"] {
-        outline: #{$form-check-invalid-color} solid 2px;
-        &:focus {
-          outline: #{$form-check-input-outline-dark};
-          outline-offset: 2px;
-          box-shadow: none;
-        }
-        &:checked:focus {
-          outline: #{$form-check-input-outline-dark};
-        }
+    &:checked {
+      & + label::after {
+        background-color: $form-check-input-checked-color-dark;
       }
     }
+    :focus {
+      outline: $form-check-input-outline-dark;
+    }
   }
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+  margin-bottom: $form-check-margin-bottom;
   &-label {
     margin-left: 0.5rem;
   }

package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json

@@ -1,48 +1,53 @@
 {
-    "questionLabel": "Which service do you need?",
-    "optionalLabel": "(Optional)",
-    "hintLabel": "Hint label",
-    "listClasses": "field-required",
-    "listitems": [
-        {
-            "type": "checkbox",
-            "id": "checkboxItem1",
-            "name": "checkboxOption",
-            "label": "Option 1",
-            "value": "1",
-            "isDisabled": false
-        },
-        {
-            "type": "checkbox",
-            "id": "checkboxItem2",
-            "name": "checkboxOption",
-            "label": "Option 2",
-            "value": "2",
-            "isDisabled": false
-        },
-        {
-            "type": "checkbox",
-            "id": "checkboxItem3",
-            "name": "checkboxOption",
-            "label": "Option 3",
-            "value": "3",
-            "isDisabled": false
-        },
-        {
-            "type": "checkbox",
-            "id": "checkboxItem4",
-            "name": "checkboxOption",
-            "label": "Option 4",
-            "value": "4",
-            "isDisabled": false
-        },
-        {
-            "type": "checkbox",
-            "id": "checkboxItem5",
-            "name": "checkboxOption",
-            "label": "Disabled",
-            "value": "",
-            "isDisabled": true
-        }
-    ]
+  "questionLabel": "Which service do you need?",
+  "optionalLabel": "(Optional)",
+  "hintLabel": "Hint label",
+  "listClasses": "field-required",
+  "listitems": [
+    {
+      "type": "checkbox",
+      "id": "checkboxItem1",
+      "name": "checkboxOption",
+      "label": "Option 1",
+      "value": "1",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "checkbox",
+      "id": "checkboxItem2",
+      "name": "checkboxOption",
+      "label": "Option 2",
+      "value": "2",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "checkbox",
+      "id": "checkboxItem3",
+      "name": "checkboxOption",
+      "label": "Option 3",
+      "value": "3",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "checkbox",
+      "id": "checkboxItem4",
+      "name": "checkboxOption",
+      "label": "Option 4",
+      "value": "4",
+      "isDisabled": false,
+      "isChecked": true
+    },
+    {
+      "type": "checkbox",
+      "id": "checkboxItem5",
+      "name": "checkboxOption",
+      "label": "Disabled",
+      "value": "",
+      "isDisabled": true,
+      "isChecked": false
+    }
+  ]
 }

package/src/components/bs5/formcheck/stories/radio/radio.data.json

@@ -1,48 +1,53 @@
 {
-    "questionLabel": "Which service do you need?",
-    "optionalLabel": "(Optional)",
-    "hintLabel": "Hint label",
-    "listClasses": "field-required",
-    "listitems": [
-        {
-            "type": "radio",
-            "id": "radioItem1",
-            "name": "radioOption",
-            "label": "Option 1",
-            "value": "1",
-            "isDisabled": false
-        },
-        {
-            "type": "radio",
-            "id": "radioItem2",
-            "name": "radioOption",
-            "label": "Option 2",
-            "value": "2",
-            "isDisabled": false
-        },
-        {
-            "type": "radio",
-            "id": "radioItem3",
-            "name": "radioOption",
-            "label": "Option 3",
-            "value": "3",
-            "isDisabled": false
-        },
-        {
-            "type": "radio",
-            "id": "radioItem4",
-            "name": "radioOption",
-            "label": "Option 4",
-            "value": "4",
-            "isDisabled": false
-        },
-        {
-            "type": "radio",
-            "id": "radioItem5",
-            "name": "radioOption",
-            "label": "Disabled",
-            "value": "",
-            "isDisabled": true
-        }
-    ]
+  "questionLabel": "Which service do you need?",
+  "optionalLabel": "(Optional)",
+  "hintLabel": "Hint label",
+  "listClasses": "field-required",
+  "listitems": [
+    {
+      "type": "radio",
+      "id": "radioItem1",
+      "name": "radioOption",
+      "label": "Option 1",
+      "value": "1",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "radio",
+      "id": "radioItem2",
+      "name": "radioOption",
+      "label": "Option 2",
+      "value": "2",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "radio",
+      "id": "radioItem3",
+      "name": "radioOption",
+      "label": "Option 3",
+      "value": "3",
+      "isDisabled": false,
+      "isChecked": true
+    },
+    {
+      "type": "radio",
+      "id": "radioItem4",
+      "name": "radioOption",
+      "label": "Option 4",
+      "value": "4",
+      "isDisabled": false,
+      "isChecked": false
+    },
+    {
+      "type": "radio",
+      "id": "radioItem5",
+      "name": "radioOption",
+      "label": "Disabled",
+      "value": "",
+      "isDisabled": true,
+      "isChecked": false
+    }
+  ]
 }

package/src/components/bs5/globalAlert/GlobalAlert.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as GlobalAlertStories from "./globalAlert.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as GlobalAlertStories from "./globalAlert.stories";
+import defaultdata from "./globalAlert.data.json";
 
 <Meta of={GlobalAlertStories} />
 
 # Global alert
+
 <Canvas>
   <Story of={GlobalAlertStories.Critical} />
 </Canvas>
@@ -13,3 +15,7 @@ import * as GlobalAlertStories from "./globalAlert.stories"
 - [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-314551&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97590&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/alerts-global)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/globalAlert/globalAlert.test.js

@@ -83,17 +83,9 @@ describe("initGlobalAlerts", () => {
     const globalAlertComponent = new GlobalAlert(testMockData);
     return `
         <!DOCTYPE html>
-        <html>
-          <head>
-            <meta charset="utf-8">
-            <link rel="stylesheet" href="${__dirname}/../../../../dist/assets/css/qld.bootstrap.css">
-          </head>
-          <body>
-            ${globalAlertComponent.html}
-            <script>${bootstrapJsFile}</script>
-            <script>${qldBootstrapJsFile}</script>
-          </body>
-        </html>
+        ${globalAlertComponent.html}
+        <script>${bootstrapJsFile}</script>
+        <script>${qldBootstrapJsFile}</script>
       `;
   };