@qhealth-design-system/core 1.16.4 → 1.17.0

package/.storybook/assets/storybook.css

@@ -2,7 +2,7 @@
 
 #storybook-docs {
     /* Reset the styling of the radio buttons */
-    input[type="radio"] {
+    .docblock-argstable input[type="radio"] {
         border: initial;
         clip: auto;
         height: auto;

package/.storybook/globals.js

@@ -67,4 +67,14 @@ export const figmaLinks = {
         file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395563",
         ds: "https://www.designsystem.qld.gov.au/components/link-columns-link-list",
     },
+    checkboxes: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321348&p=f",
+        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395569",
+        ds: "https://www.designsystem.qld.gov.au/components/checkboxes",
+    },
+    radioButtons: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321347&p=f",
+        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395570",
+        ds: "https://www.designsystem.qld.gov.au/components/radio-buttons",
+    },
 };

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.17.0 - 2025-10-01
+
+## 1.16.5 - 2025-08-19
+
 ## 1.16.4 - 2025-08-12
 
 ## 1.16.3 - 2025-07-29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.16.4",
+    "version": "1.17.0",
     "description": "",
     "licence": "MIT",
     "main": "index.js",

package/src/components/_global/css/cta_links/component.scss

@@ -92,27 +92,120 @@ a.qld__cta-link {
 
 .qld__cta-link.qld__cta-link--view-all,
 a.qld__cta-link.qld__cta-link--view-all {
-    &:after {
-        mask-image: QLD-svguri($QLD-icon-arrow-view-all);
-        background-color: var(--QLD-color-light__action--secondary);
+    display: inline-block;
+    position: relative;
+    @include QLD-space(padding-right, 2.5rem);
+
+    .qld__cta-link--view-all-icon--wrapper {
+        display: block;
+        min-height: 32px;
+        line-height: 32px;
     }
 
-    &:hover {
-        &:after {
-            background-color: var(--QLD-color-light__action--secondary-hover);
+    &::before,
+    &::after,
+    .qld__cta-link--view-all-icon--wrapper::before {
+        // TODO: Remove this mask-image override after work is done for regular cta links.
+        mask-image: none;
+        @include QLD-space(margin, 0 0.5unit 0 0.5unit);
+        content: "";
+        position: absolute;
+        display: inline-block;
+        box-sizing: border-box;
+        border-bottom: 0.125rem solid;
+        transition: border-color 0.3s ease;
+        border-color: var(--QLD-color-light__action--secondary);
+        transition: margin 0.2s ease;
+        z-index: 1;
+        right: 0.5rem;
+        background-color: transparent;
+
+        .qld__body--dark &,
+        .qld__body--dark-alt &,
+        .qld__main-nav--dark &,
+        .qld__main-nav--dark-alt & {
+            border-color: var(--QLD-color-dark__action--secondary);
         }
     }
 
-    .qld__body--dark &,
-    .qld__body--dark-alt &,
-    .qld__main-nav--dark & {
-        &:after {
-            background-color: var(--QLD-color-dark__action--secondary);
+    &::before {
+        width: 0.7rem;
+        top: 14.5px;
+    }
+
+    &::after {
+        transform: rotate(315deg);
+        width: 0.5rem;
+        top: 0.72rem;
+        height: 0.5rem;
+        border-right: 0.125rem solid var(--QLD-color-light__action--secondary);
+    }
+
+    > .qld__cta-link--view-all-icon--wrapper::before {
+        border: 2px solid var(--QLD-color-light__action--secondary);
+        width: 1.5rem;
+        height: 1.5rem;
+        top: 3.5px;
+        right: 1px;
+        border-radius: 50%;
+    }
+
+    &:hover,
+    &:focus {
+        &::before,
+        &::after,
+        .qld__cta-link--view-all-icon--wrapper::before {
+            @include QLD-space(margin, 0 0 0 1unit);
+            border-color: var(--QLD-color-light__action--secondary-hover);
+            background-color: transparent;
+
+            .qld__body--dark &,
+            .qld__body--dark-alt &,
+            .qld__main-nav--dark &,
+            .qld__main-nav--dark-alt & {
+                border-color: var(--QLD-color-dark__action--secondary-hover);
+            }
         }
+    }
 
-        &:hover {
-            &:after {
-                background-color: var(--QLD-color-dark__action--secondary-hover);
+    // CTA view all link within menus
+    .qld__main-nav &,
+    .qld__main-nav--mega & {
+        @include QLD-media("lg", "down") {
+            &::before,
+            &::after,
+            .qld__cta-link--view-all-icon--wrapper::before {
+                left: 0;
+                @include QLD-space(margin, 0.65unit 0 0 5unit);
+            }
+            &::before {
+                top: 13.5px;
+                width: 0.5rem;
+                margin-left: 5.475rem;
+            }
+            &::after {
+                top: 0.66rem;
+                margin-left: 5.55rem;
+            }
+            .qld__cta-link--view-all-icon--wrapper::before {
+                left: 2px;
+                width: 1.4rem;
+                height: 1.4rem;
+            }
+
+            &:hover,
+            &:focus {
+                &::before,
+                &::after,
+                .qld__cta-link--view-all-icon--wrapper::before {
+                    @include QLD-space(margin, 0.65unit 0 0 5.25unit);
+                }
+                &::before {
+                    margin-left: 5.75rem;
+                }
+                &::after {
+                    margin-left: 5.8rem;
+                }
             }
         }
     }

package/src/components/_global/css/forms/control_inputs/component.scss

@@ -16,19 +16,18 @@ input[type="checkbox"],
         @include QLD-space(padding-left, 2.5unit);
         font-weight: 400;
 
-        &:before,
-        &:after {
+        &:before {
             @include QLD-space(width, 2unit);
             @include QLD-space(height, 2unit);
             visibility: visible;
-            content: " ";
+            content: "";
             display: block;
             position: absolute;
             box-sizing: border-box;
-            background-repeat: no-repeat;
             z-index: 9;
             @include QLD-space(left, 0unit);
             border: $QLD-border-width-default solid transparent;
+            border-color: var(--QLD-color-light__border--alt);
             top: 0;
 
             .qld__control-input--small & {
@@ -36,11 +35,6 @@ input[type="checkbox"],
                 @include QLD-space(height, 1.25unit);
             }
         }
-        &:before {
-            background-color: transparent;
-            border-color: var(--QLD-color-light__border--alt);
-            background-image: none !important;
-        }
 
         &:after {
             z-index: 101;
@@ -54,18 +48,34 @@ input[type="checkbox"],
         }
     }
 
-    // hover
+    // Hover
     &:hover:not([disabled]) {
         + label:before {
             background-color: $QLD-color-neutral--lightest;
         }
     }
 
-    // normal checked
-    &:checked {
-        + label:after {
-            @include QLD-getControlShape("checkbox", "foreground", var(--QLD-color-light__text));
-            background-size: auto;
+    // Normal checked
+    &:checked + label::after {
+        transition: border-color 0.3s ease;
+        content: "";
+        position: absolute;
+        width: 1rem;
+        height: 0.55rem;
+        transform: rotate(-45deg);
+        border: none;
+        border-bottom: 0.25rem solid;
+        border-left: 0.25rem solid;
+        top: 0.6rem;
+        left: 0.5rem;
+
+        .qld__control-input--small & {
+            width: 0.7rem;
+            height: 0.35rem;
+            border-bottom-width: 0.15rem;
+            border-left-width: 0.15rem;
+            top: 0.375rem;
+            left: 0.275rem;
         }
     }
 
@@ -78,11 +88,11 @@ input[type="checkbox"],
         outline-offset: 2px;
     }
 
-    // disabled
+    // Disabled
     &:disabled {
         + label:before {
             opacity: 0.3;
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: $QLD-color-neutral--black__opacity-10;
         }
 
         + label {
@@ -91,8 +101,7 @@ input[type="checkbox"],
         }
 
         &:checked + label:after {
-            opacity: 0.5; //amir
-            @include QLD-getControlShape("checkbox", "foreground", var(--QLD-color-light__text--lighter));
+            opacity: 0.5;
         }
     }
 
@@ -113,25 +122,16 @@ input[type="checkbox"],
     .qld__body--dark &,
     .qld__body--dark-alt & {
         + label:before {
-            // background-color: transparent;
             border-color: var(--QLD-color-dark__heading);
-            background-image: none !important;
         }
 
-        // hover
+        // Hover
         &:hover {
             + label:before {
                 background-color: var(--QLD-color-dark__background--shade);
             }
         }
 
-        // normal checked
-        &:checked {
-            + label:after {
-                @include QLD-getControlShape("checkbox", "foreground", #ffffff);
-            }
-        }
-
         // Focus
         &:focus + label:before,
         &.qld__input--valid:focus + label:before,
@@ -140,7 +140,7 @@ input[type="checkbox"],
             box-shadow: none;
         }
 
-        // disabled
+        // Disabled
         &:disabled {
             + label:before {
                 background-color: transparent;
@@ -153,8 +153,6 @@ input[type="checkbox"],
 
             &:checked + label:after {
                 opacity: 0.5;
-
-                @include QLD-getControlShape("checkbox", "foreground", #ffffff);
             }
         }
 
@@ -184,20 +182,19 @@ input[type="radio"],
         @include QLD-space(line-height, 2unit);
         @include QLD-space(padding-left, 2.5unit);
 
-        &:before,
-        &:after {
+        &:before {
             width: 30px;
             height: 30px;
             visibility: visible;
-            content: " ";
+            content: "";
             display: block;
             position: absolute;
             box-sizing: border-box;
-            background-repeat: no-repeat;
             z-index: 100;
             @include QLD-space(left, 0unit);
             border: $QLD-border-width-default solid transparent;
             border-radius: 50%;
+            border-color: var(--QLD-color-light__border--alt);
             top: 0;
 
             .qld__control-input--small & {
@@ -206,12 +203,6 @@ input[type="radio"],
             }
         }
 
-        &:before {
-            background-color: transparent;
-            border-color: var(--QLD-color-light__border--alt);
-            background-image: none !important;
-        }
-
         &:after {
             z-index: 101;
         }
@@ -224,17 +215,34 @@ input[type="radio"],
         }
     }
 
-    // hover
+    // Hover
     &:hover {
         + label:before {
             background-color: $QLD-color-neutral--lightest;
         }
     }
 
-    // normal checked
-    &:checked {
+    // Normal checked
+    &:checked,
+    &:checked:disabled {
         + label:after {
-            @include QLD-getControlShape("radio", "foreground", var(--QLD-color-light__text));
+            transition: border-color 0.3s ease;
+            content: "";
+            position: absolute;
+            display: inline-block;
+            box-sizing: border-box;
+            width: 0.75rem;
+            height: 0.75rem;
+            border-radius: 50%;
+            top: 5px;
+            left: 5px;
+            border: 10px solid;
+
+            .qld__control-input--small & {
+                top: 4px;
+                left: 4px;
+                border-width: 6.5px;
+            }
         }
     }
 
@@ -247,11 +255,11 @@ input[type="radio"],
         outline-offset: 2px;
     }
 
-    // disabled
+    // Disabled
     &:disabled {
         + label:before {
             opacity: 0.3;
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: $QLD-color-neutral--black__opacity-10;
         }
 
         + label {
@@ -260,8 +268,7 @@ input[type="radio"],
         }
 
         &:checked + label:after {
-            opacity: 0.5; //amir
-            @include QLD-getControlShape("radio", "foreground", #636363);
+            opacity: 0.5;
         }
     }
 
@@ -282,38 +289,26 @@ input[type="radio"],
         + label:before {
             background-color: transparent;
             border-color: var(--QLD-color-dark__heading);
-            background-image: none !important;
         }
 
-        // hover
+        // Hover
         &:hover {
             + label:before {
                 background-color: var(--QLD-color-dark__background--shade);
             }
         }
 
-        // normal checked
-        &:checked {
-            + label:after {
-                @include QLD-getControlShape("radio", "foreground", #ffffff);
-            }
-        }
-
         // Focus
         &:focus + label:before {
             @include QLD-outline("dark", false);
             box-shadow: none;
         }
 
-        // disabled
+        // Disabled
         &:disabled {
-            &:checked + label:after {
-                @include QLD-getControlShape("radio", "foreground", var(--QLD-color-light__text--lighter));
-            }
-
             + label:before {
                 opacity: 0.3;
-                background-color: rgba(0, 0, 0, 0.2);
+                background-color: $QLD-color-neutral--black__opacity-10;
             }
 
             + label {
@@ -322,21 +317,14 @@ input[type="radio"],
             }
 
             &:checked + label:after {
-                opacity: 0.5; //amir
-                @include QLD-getControlShape("radio", "foreground", #ffffff);
+                opacity: 0.5;
             }
         }
     }
 }
 
-// Print styles
-@media print {
-    .qld__control-input__text {
-        color: #000 !important;
-
-        &:before,
-        &:after {
-            display: none !important;
-        }
-    }
+// Ensure the groups have space between elements
+.qld__radio-buttons > div,
+.qld__checkboxes > div {
+    margin-top: 0.5rem;
 }

package/src/components/_global/css/link_columns/component.scss

@@ -26,7 +26,7 @@
         position: relative;
         flex: 0 0 100%;
 
-        a {
+        a:not(.qld__cta-link) {
             @include QLD-underline("light", "noUnderline");
             &:before {
                 content: "";
@@ -85,7 +85,7 @@
         }
 
         &:hover {
-            a {
+            a:not(:visited) {
                 color: var(--QLD-color-light__link);
             }
 

package/src/components/_global/html/scripts.html

@@ -1,7 +1,5 @@
 <script src="https://sdk.datastore.squiz.cloud/js/sdk-simulator.js"></script>
 
-<script src="https://kit.fontawesome.com/fb2f2d4cd6.js" crossorigin="anonymous"></script>
-
 <script src="externals/handlebars.min-v4.7.8.js"></script>
 <script src="externals/componentPreview.js"></script>
 <script src="js/helpers.js"></script>

package/src/components/_global/js/cta_links/global.js

@@ -0,0 +1,33 @@
+(function () {
+    "use strict";
+
+    var ctaLinks = {};
+
+    ctaLinks.init = function () {
+        document.querySelectorAll(".qld__cta-link.qld__cta-link--view-all").forEach((ctaLink) => {
+            const viewAllIconWrapperClass = "qld__cta-link--view-all-icon--wrapper";
+
+            // First check that the cta is not already wrapped
+            if (ctaLink.querySelector("." + viewAllIconWrapperClass)) return;
+
+            // Remove and store text content
+            const ctaLinkText = ctaLink.textContent;
+            ctaLink.textContent = "";
+
+            // Create wrapper span for the text
+            const wrapper = document.createElement("span");
+            wrapper.classList.add(viewAllIconWrapperClass);
+            wrapper.textContent = ctaLinkText;
+
+            // Insert wrapper
+            ctaLink.appendChild(wrapper);
+        });
+    };
+
+    // Make cta links available to public
+    QLD.ctaLinks = ctaLinks;
+
+    document.addEventListener("DOMContentLoaded", function () {
+        QLD.ctaLinks.init();
+    });
+})();