@qhealth-design-system/core 1.8.2 → 1.8.3

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.8.3 - 2024-08-19
+
 ## 1.8.2 - 2024-08-16
 
 ## 1.8.1 - 2024-08-15

package/package.json

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

package/src/components/_global/css/global.scss

@@ -38,46 +38,3 @@ body {
         z-index: 3;
     }
 }
-
-
-/*
-Written to address squiz forms' error state issues
-*/
-
-div.sq-form-question-tickbox-list.sq-form-question-error {
-    fieldset {
-        label::before {
-                box-shadow: 0 0 0 3px $QLD-color-status__error;
-        }
-    }
-}
-
-div.sq-form-question-option-list.sq-form-question-error {
-    fieldset {
-        label::before {
-            box-shadow: 0 0 0 3px $QLD-color-status__error;
-        }
-    }
-}
-
-div.sq-form-question-error {
-    input[type=text]:not(:focus),
-    input[type=email]:not(:focus),
-    input[type=date]:not(:focus),
-    textarea:not(:focus),
-    select:not(:focus) {
-        border-color: $QLD-color-status__error;
-        background-color: $QLD-color-status__error--lightest;
-    }
-}
-
-.qld__body--dark, .qld__body--dark-alt {
-    .sq-form-error {
-        color: $QLD-color-status__error--lightest;
-    }
-}
-
-.sq-form-error {
-    color: $QLD-color-status__error;
-    margin-top: 0.5rem !important;
-}

package/src/components/breadcrumbs/css/component.scss

@@ -17,7 +17,7 @@
     }
     & &__list--desktop{
         display: none;
-        @include QLD-media(md) {
+        @include QLD-media(lg) {
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -25,13 +25,13 @@
         }
     }
     & &__list--mobile{
-        @include QLD-media(md) {
+        @include QLD-media(lg) {
             display: none;
         }
     }
     .qld__link-list.qld__link-list--inline:not(.qld__breadcrumbs .qld__breadcrumbs__list--mobile, .qld__banner__breadcrumbs--mobile ul) {
         display: none;
-        @include QLD-media(md) {
+        @include QLD-media(lg) {
             display: flex;
             flex-direction: row;
             flex-wrap: nowrap;
@@ -68,12 +68,6 @@
                 @include QLD-underline('light','underline','default','noVisited');
                 color: var(--QLD-color-light__link);
             }
-
-            // .qld__icon{
-            //     @include QLD-space(margin, 0 0.5unit);
-            //     color: var(--QLD-color-light__action--secondary);
-            //     @include QLD-space(height, 1unit);
-            // }
             
             &:after {
                 content: " ";
@@ -93,18 +87,16 @@
             
             &:last-child {
                 display: flex;
-                flex-grow: 1;
-                // overflow: hidden;
                 white-space: wrap;
                 text-overflow: ellipsis;
-                flex: 1 1 auto; 
+                flex: 0 1 auto; 
                 flex-shrink: 3;
 
                 &:after {
                     display: none;
                 }
 
-                @include QLD-media(md) {
+                @include QLD-media(lg) {
                     
                     white-space: nowrap;
                 }
@@ -162,7 +154,7 @@
     @include QLD-space(padding, 1unit 1unit);
     margin: 0;
 
-    @include QLD-media(md) {
+    @include QLD-media(lg) {
         display: none;
     }
 
@@ -184,7 +176,7 @@
 .qld__banner__breadcrumbs--desktop {
     display: none;
 
-    @include QLD-media(md) {
+    @include QLD-media(lg) {
         @include QLD-space(margin, 0 0 1rem);
         display: inline-block;
         > .qld__link-list > li {
@@ -223,7 +215,7 @@
     }
 
     ~ *:last-child {
-        @include QLD-media(md) {
+        @include QLD-media(lg) {
             @include QLD-space(margin-bottom, auto);
         }
     }

package/src/components/breadcrumbs/js/global.js

@@ -9,11 +9,6 @@
     var originalBreadCrumbUl = null;
 
     function getTheElements(resized = false) {
-        // const banner =
-        //     document.querySelector(".qld__banner--breadcrumbs") ||
-        //     document.querySelector(".qld__body--breadcrumb");
-
-        // if (document) {
             const bannerBreadCrumbsAll = document.querySelectorAll(
                 "nav.qld__banner__breadcrumbs--desktop"
             );
@@ -34,12 +29,9 @@
 
                 const containerFluidStyle = window.getComputedStyle(containerFluid);
                 
-                const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/\D/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/\D/g, ''));
+                const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/[^\d.]/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/[^\d.]/g, ''));
                 bannerBreadCrumb.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px';
                 
-    
-                // console.log('here is the containerFluid.offsetWidth ', paddings , ' here is the containerFluid.offsetWidth ', bannerBreadCrumb)
-                
                 if(!originalBreadCrumbUl) {
                     originalBreadCrumbUl = bannerBreadCrumb.querySelector("ul.qld__link-list").cloneNode(true);
                 }
@@ -56,22 +48,13 @@
                     breadCrumbsUl,
                 };
             }
-
-            
-        // }
-
-        // return null;
     }
 
     function createOverFlow() {
-        //create the over flow menu here:
 
-        //start wrapper
         const overFlowWrapper = document.createElement("div");
         overFlowWrapper.className = "qld__overflow_menu_wrapper";
-        //end wrapper
 
-        //start overflow button
         const button = document.createElement("button");
         button.className =
             "qld__btn qld__btn--toggle qld__overflow_menu__btn qld__accordion--closed";
@@ -105,11 +88,9 @@
 
         svg.appendChild(path);
         button.appendChild(svg);
-        //end overflow button
 
         overFlowWrapper.appendChild(button);
 
-        // Start menu element
         const div = document.createElement("div");
         div.className = "qld__overflow_menu qld__accordion--closed";
         div.setAttribute("id", "overflow-menu--");
@@ -119,12 +100,9 @@
         ul.setAttribute("aria-label", "qld__overflow_menu qld__link-columns");
 
         div.appendChild(ul);
-        //end menu
 
         overFlowWrapper.appendChild(div);
 
-        //This menu does not have the uls , uls are going to be created in insertfunction
-
         return overFlowWrapper;
     }
 
@@ -154,7 +132,6 @@
         breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
         breadCrumbsUlLis[1].appendChild(overflowMenu);
         breadCrumbsUlLis[1].style.display = "flex";
-        truncateLastLi(breadCrumbsUlLis, breadcrumbUL);
     }
 
     breadcrumb.init = function () {
@@ -162,7 +139,6 @@
             const { breadCrumbsUl } = getTheElements();
 
             const breadCrumbsUlLis = breadCrumbsUl.querySelectorAll("li");
-            // if (breadCrumbsUl.offsetHeight > breadCrumbsUlLis[0].offsetHeight && breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) {
             if (breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) {
                 const overflowMenu = createOverFlow();
                 let breadcrumbLisLength = breadCrumbsUlLis.length;
@@ -175,8 +151,7 @@
                     totalLisOffsetWidth += breadCrumbsUlLis[i].offsetWidth;
                 }
 
-                if(breadCrumbsUlLis.length > 5) {
-
+                if(breadcrumbLisLength > 5) {
                     insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
                     breadCrumbsUlLis[1].style.display = "none";
                     appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
@@ -190,9 +165,12 @@
 
                 } else if((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9))) {
 
-                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
-                    breadCrumbsUlLis[1].style.display = "none";
-                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                    if(breadcrumbLisLength > 3) { 
+                        insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                        breadCrumbsUlLis[1].style.display = "none";
+                        appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                    }
+
                     i = 2;
 
                     while ((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9)) &&
@@ -204,23 +182,27 @@
 
                         i++;
                     }
-                } else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/\D/g, '')) < totalLisOffsetWidth) {
-
-                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
-                    breadCrumbsUlLis[1].style.display = "none";
-                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                } else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, '')) < totalLisOffsetWidth) {
+                    
+                    if(breadcrumbLisLength > 3) {
+                        insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                        breadCrumbsUlLis[1].style.display = "none";
+                        appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                    }
+                    
                     i = 2;
 
-                    while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/\D/g, ''))< totalLisOffsetWidth) &&
+                    while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, ''))< totalLisOffsetWidth) &&
                     (i < breadcrumbLisLength - 2)
                     ) {
 
                         insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
                         breadCrumbsUlLis[i].style.display = "none";
-
                         i++;
                     }
                 }
+
+                truncateLastLi(breadCrumbsUlLis, breadCrumbsUl);
             }
         }
     };

package/src/styles/imports/utilities.scss

@@ -674,4 +674,46 @@ select.qld__text-input--block.qld__field-width--1-quarter {
     select.qld__text-input--block.qld__field-width--3-quarters {
         max-width:$QLD-fluid-width__3-quarters;
     }
+}
+
+
+/*
+Written to address squiz forms' error state issues
+*/
+
+div.sq-form-question-tickbox-list.sq-form-question-error {
+  fieldset {
+      label::before {
+              box-shadow: 0 0 0 3px $QLD-color-status__error;
+      }
+  }
+}
+
+div.sq-form-question-option-list.sq-form-question-error {
+  fieldset {
+      label::before {
+          box-shadow: 0 0 0 3px $QLD-color-status__error;
+      }
+  }
+}
+
+div.sq-form-question-error {
+  input[type=text]:not(:focus),
+  input[type=email]:not(:focus),
+  input[type=date]:not(:focus),
+  textarea:not(:focus),
+  select:not(:focus) {
+      border-color: $QLD-color-status__error;
+      background-color: $QLD-color-status__error--lightest;
+  }
+}
+
+.qld__body--dark, .qld__body--dark-alt {
+  .sq-form-error {
+      color: $QLD-color-status__error--lightest;
+  }
+}
+
+.sq-form-error {
+  color: $QLD-color-status__error;
 }