@qhealth-design-system/core 1.18.3 → 1.19.0

package/src/components/_global/css/img/images.scss

@@ -1,8 +1,6 @@
-
 .qld__body,
 .qld__banner,
 .qld__footer {
-
     figure.qld__right-aligned-img {
         height: auto;
         max-width: 100%;
@@ -11,20 +9,20 @@
         @include QLD-space(margin-left, 0unit);
         @include QLD-space(margin-bottom, 1.5unit);
         overflow: clip;
-    
-        @include QLD-media(md)  {
+
+        @include QLD-media(md) {
             height: auto;
             max-width: 40%;
             float: right;
             @include QLD-space(margin-left, 1.5unit);
         }
-    
+
         img {
             aspect-ratio: 4 / 3;
             object-fit: cover;
         }
     }
-    
+
     img + figcaption {
         display: block;
         background-color: $QLD-color-neutral--lightest;
@@ -32,66 +30,52 @@
         @include QLD-space(margin-top, -0.5unit);
         font-size: var(--QLD-default-mobile-xs); //Find out the better practice/ @mixin QLD-fontgrid use this before pushin up
         @include QLD-space(margin-left, 0unit);
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
         color: var(--QLD-color-light__text--lighter);
     }
 
-
     @include QLD-media(md) {
-
         img + figcaption {
-            
-            font-size: var(--QLD-default-desktop-xs); 
-           
+            font-size: var(--QLD-default-desktop-xs);
         }
-
     }
-    
+
     .qld__responsive-media-img {
         max-width: 100%;
         height: auto;
     }
 
-	&.qld__body--light,
-	&.qld__banner--light,
-	&.qld__footer--light {
-
+    &.qld__body--light,
+    &.qld__banner--light,
+    &.qld__footer--light {
         img + figcaption {
             background-color: var(--QLD-color-light__background--shade);
         }
-        
     }
 
-	&.qld__body--alt,
-	&.qld__banner--alt,
-	&.qld__footer--alt {
-
+    &.qld__body--alt,
+    &.qld__banner--alt,
+    &.qld__footer--alt {
         img + figcaption {
             background-color: var(--QLD-color-light__background--alt-shade);
         }
-        
     }
 
-	&.qld__body--dark,
-	&.qld__banner--dark,
-	&.qld__footer--dark {
-
+    &.qld__body--dark,
+    &.qld__banner--dark,
+    &.qld__footer--dark {
         img + figcaption {
             background-color: var(--QLD-color-dark__background--shade);
             color: var(--QLD-color-dark__text--lighter);
         }
-        
     }
 
-	&.qld__body--dark-alt,
-	&.qld__banner--dark-alt,
-	&.qld__footer--dark-alt {
-
+    &.qld__body--dark-alt,
+    &.qld__banner--dark-alt,
+    &.qld__footer--dark-alt {
         img + figcaption {
             background-color: var(--QLD-color-dark__background--alt-shade);
             color: var(--QLD-color-dark__text--lighter);
         }
-        
     }
-
-}
+}

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

@@ -8,7 +8,7 @@
     list-style-type: none;
     padding: 0;
     @include QLD-fontgrid(sm);
-    font-weight: bold;
+    font-weight: $QLD-font-weight-semibold;
     overflow: hidden;
 
     * + & {
@@ -106,7 +106,7 @@
         &.qld__link-columns__all-link {
             @include QLD-fontgrid(sm);
             @include QLD-space(font-size, 1unit);
-            font-weight: bold;
+            font-weight: $QLD-font-weight-semibold;
             justify-content: flex-end;
             box-shadow: inset 0 0 - $QLD-border-width-thin 0 transparent;
 

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

@@ -6,7 +6,7 @@
     position: relative;
     display: none;
 
-    &--content-centre{
+    &--content-centre {
         text-align: center;
     }
 
@@ -24,7 +24,7 @@
         z-index: 1;
     }
 
-    &__inner{
+    &__inner {
         min-width: 17.5rem;
         max-width: 17.5rem;
         position: fixed;
@@ -50,7 +50,7 @@
         }
     }
 
-    .qld__modal__header{
+    .qld__modal__header {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -58,23 +58,23 @@
         gap: 1rem;
         line-height: 1.5rem;
 
-        .qld__modal__header-heading{
-            font-weight: bold;
+        .qld__modal__header-heading {
+            font-weight: $QLD-font-weight-semibold;
             margin-top: 0;
             color: var(--QLD-color-light__heading);
             word-break: break-all;
         }
 
-        & &-icon{
+        & &-icon {
             flex: 1 0 auto;
         }
 
-        .qld__btn.qld__btn--close{
+        .qld__btn.qld__btn--close {
             flex: 1 0 auto;
         }
     }
 
-    &__close-btn{
+    &__close-btn {
         min-width: auto;
         padding: 0;
         position: absolute;
@@ -86,26 +86,24 @@
         background-color: $QLD-color-neutral--lightest;
         border-color: $QLD-color-neutral--lightest;
 
-        &:hover{
+        &:hover {
             background: var(--QLD-color-light__background--alt-shade);
             border-color: var(--QLD-color-light__background--alt-shade);
         }
 
-        i{
+        i {
             color: $QLD-color-neutral--black;
         }
     }
 
-    &__content{
+    &__content {
         margin-top: 1.5rem;
         word-break: break-all;
     }
 
-
-
-
     //TO be removed once service finder is updated START
-    &.qld__services-modal__set-location, &.qld__services-modal__update-location {
+    &.qld__services-modal__set-location,
+    &.qld__services-modal__update-location {
         .qld__modal__body {
             min-width: pxToRem(360);
 
@@ -115,9 +113,9 @@
         }
     }
 
-    &__body__content{
-        @include QLD-space(padding, 1.5unit  0);
-        
+    &__body__content {
+        @include QLD-space(padding, 1.5unit 0);
+
         ul li a {
             text-decoration: none;
             color: var(--QLD-color-light__link--on-action);
@@ -126,10 +124,9 @@
                 background-color: var(--QLD-color-light__action--primary-hover);
             }
         }
-
     }
-   
-	.qld__modal__body {
+
+    .qld__modal__body {
         min-width: pxToRem(360);
         max-width: pxToRem(654);
         position: fixed;
@@ -150,7 +147,6 @@
         .qld__modal__body__header {
             display: flex;
             justify-content: space-between;
-            
         }
         .qld__modal__close {
             position: absolute;
@@ -168,7 +164,7 @@
                 color: var(--QLD-color-light__text);
                 font-size: 1.5rem;
             }
-            &:hover{
+            &:hover {
                 // background-color: var(--QLD-color-light__action--primary-hover);
                 svg,
                 i {
@@ -176,7 +172,6 @@
                 }
             }
         }
-
     }
 
     &.qld__modal--small {
@@ -194,5 +189,4 @@
         }
     }
     //TO be removed once service finder is updated FINISH
-
-}
+}

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

@@ -7,14 +7,13 @@
 // - globals
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-
 .qld__caption {
     font-style: normal;
     color: var(--QLD-color-light__text--lighter);
     font-size: 14px;
     font-size: 0.87rem;
     line-height: 1.6;
-    font-weight: 400;
+    font-weight: $QLD-font-weight-regular;
 
     .qld__body--dark &,
     .qld__body--dark-alt & {
@@ -32,7 +31,7 @@ table {
     caption {
         @include QLD-fontgrid(md, heading);
         line-height: 1.6;
-        font-weight: bold;
+        font-weight: $QLD-font-weight-semibold;
         text-align: left;
         display: table-caption;
         @include QLD-space(padding, 0.75unit);
@@ -63,7 +62,7 @@ table {
         padding: 1.25rem 0.75rem 1.25rem 0.75rem;
         box-shadow: inset 0 0 -$QLD-border-width-default 0 var(--QLD-color-light__design-accent);
         color: var(--QLD-color-light__heading);
-        font-weight: bold;
+        font-weight: $QLD-font-weight-semibold;
         @include QLD-fontgrid(sm, heading);
         line-height: 1.5;
         &.qld__table__cell--numeric {
@@ -111,7 +110,6 @@ table {
     @for $i from 1 through 10 {
         &.qld__table__col-#{$i}-num {
             tr {
-
                 td:nth-child(#{$i}),
                 th:nth-child(#{$i}):not([colspan]) {
                     text-align: right;
@@ -147,7 +145,7 @@ table {
 
         td {
             box-shadow: none;
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
             &:first-of-type {
                 border-radius: 0 0 $QLD-border-radius-sm 0;
             }
@@ -190,7 +188,6 @@ table {
 
     .qld__body--dark &,
     .qld__body--dark-alt & {
-
         .qld__table__head,
         thead {
             tr {
@@ -276,10 +273,8 @@ table {
     }
 
     &.qld__table--striped {
-
         .qld__table__body,
         tbody {
-
             .qld__table__row:nth-last-child(odd),
             tr:nth-last-child(odd) {
                 background-color: $QLD-color-neutral--lightest;
@@ -288,10 +283,8 @@ table {
 
         .qld__body--dark &,
         .qld__body--dark-alt & {
-
             .qld__table__body,
             tbody {
-
                 .qld__table__row:nth-last-child(odd),
                 tr:nth-last-child(odd) {
                     background-color: var(--QLD-color-dark__background--shade);
@@ -301,9 +294,11 @@ table {
     }
 }
 
-.qld__table, .qld__table--scroll, .qld__table--contained {
+.qld__table,
+.qld__table--scroll,
+.qld__table--contained {
     &:not(:first-child) {
-      @include QLD-space( margin-top, 1.5unit);
+        @include QLD-space(margin-top, 1.5unit);
     }
 }
 
@@ -337,7 +332,7 @@ table {
             min-height: 78px;
             /* 78px height so it can cater for additional information detailing table order under the caption text */
 
-            &+thead {
+            & + thead {
                 top: 78px;
             }
         }
@@ -359,7 +354,6 @@ table {
         }
     }
 
-
     .qld__body--dark &,
     .qld__body--dark-alt & {
         border: 1px solid var(--QLD-color-dark__border);
@@ -373,14 +367,15 @@ table {
     }
 }
 
-.qld__table__wrapper { //applies to the container above the table.
+.qld__table__wrapper {
+    //applies to the container above the table.
     overflow-x: auto;
 }
 
 @media print {
     .qld__table--scroll {
         max-height: none;
-    }    
+    }
 }
 
 // .qld__table {
@@ -433,7 +428,6 @@ table {
 //         }
 //     }
 
-
 //     .qld__table__cell {
 //         @include QLD-space( padding, 0.75unit);
 //         text-align: left;
@@ -468,7 +462,7 @@ table {
 //     .qld__body--dark &{
 //         .qld__table__head{
 //             @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-dark__design-accent));
-//         } 
+//         }
 
 //         .qld__table__header,
 //         .qld__table__cell{
@@ -485,7 +479,7 @@ table {
 //     .qld__body--dark-alt &{
 //         .qld__table__head{
 //             @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-dark__design-accent));
-//         } 
+//         }
 
 //         .qld__table__header,
 //         .qld__table__cell{
@@ -499,4 +493,3 @@ table {
 //         }
 //     }
 // }
-

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

@@ -28,12 +28,12 @@
 
         &[aria-selected="true"] {
             background-color: transparent !important;
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
             border-bottom: 8px solid var(--QLD-color-dark__action--secondary);
         }
 
         &:hover {
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
         }
     }
 }

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

@@ -29,7 +29,7 @@
         }
     }
     &-list--title {
-        font-weight: bold;
+        font-weight: $QLD-font-weight-semibold;
         display: block;
         white-space: nowrap;
         padding-right: 1rem;

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

@@ -101,7 +101,7 @@
             border-radius: $QLD-border-radius-xs;
             font-size: #{map-get($QLD-fontsize-map, xs)}px;
             line-height: 1.25rem;
-            font-weight: 400;
+            font-weight: $QLD-font-weight-regular;
             background-color: $QLD-color-neutral--darkest;
             color: var(--QLD-color-dark__text);
             box-shadow: $QLD-box-shaddow-level-two;
@@ -109,7 +109,7 @@
             &-heading {
                 margin-bottom: 1rem;
                 color: var(--QLD-color-dark__heading);
-                font-weight: 600;
+                font-weight: $QLD-font-weight-semibold;
                 line-height: 1rem;
             }
 
@@ -144,7 +144,7 @@
                 z-index: 8;
                 top: 0;
                 left: 0;
-                border: #{map-get($QLD-space-map, 1)}px solid transparent;
+                border: 0.25rem solid transparent;
                 border-bottom-color: $QLD-color-neutral--darkest;
             }
         }

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

@@ -284,7 +284,7 @@
          * @param {*} name
          */
         getParamaterByName: function (name) {
-            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+            name = name.replace(/[\[]/g, "\\[").replace(/[\]]/g, "\\]");
             var regexS = "[\\?&]" + name + "=([^&#]*)";
             var regex = new RegExp(regexS);
             var results = regex.exec(window.location.href);

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

@@ -1,36 +1,27 @@
-(function () {
-    "use strict";
-
-    var selectBoxes = {};
-
-    selectBoxes.init = function () {
-        document.querySelectorAll("select").forEach((select) => {
-            // First check that the select is not already wrapped
-            if (select.closest(".qld__select")) {
-                return;
-            }
-
-            // Create wrapper div
-            const wrapper = document.createElement("div");
-            wrapper.classList.add("qld__select");
-
-            // Matrix specific - add error class to wrapper if the field has an error
-            if (select.closest(".sq-form-question-error")) {
-                wrapper.classList.add("qld__select-error");
-            }
-
-            // Insert wrapper BEFORE the select
-            select.parentNode.insertBefore(wrapper, select);
-
-            // Move the select into the wrapper
-            wrapper.appendChild(select);
-        });
-    };
-
-    // Make forms available to public
-    QLD.selectBoxes = selectBoxes;
-
-    document.addEventListener("DOMContentLoaded", function () {
-        QLD.selectBoxes.init();
+/**
+ * @module selectBoxes
+ */
+
+export default function initSelectBoxes(document = document) {
+    document.querySelectorAll("select").forEach((select) => {
+        // First check that the select is not already wrapped
+        if (select.closest(".qld__select")) {
+            return;
+        }
+
+        // Create wrapper div
+        const wrapper = document.createElement("div");
+        wrapper.classList.add("qld__select");
+
+        // Matrix specific - add error class to wrapper if the field has an error
+        if (select.closest(".sq-form-question-error")) {
+            wrapper.classList.add("qld__select-error");
+        }
+
+        // Insert wrapper BEFORE the select
+        select.parentNode.insertBefore(wrapper, select);
+
+        // Move the select into the wrapper
+        wrapper.appendChild(select);
     });
-})();
+}