@qhealth-design-system/core 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.3.1 - 2024-01-22
+
+## 1.3.0 - 2024-01-11
+
 ## 1.2.2 - 2023-12-01
 
 ## 1.2.1 - 2023-11-28

package/README.md

@@ -413,7 +413,7 @@ Also take care to follow a 'mobile-first' approach with your SCSS code, where st
 @include QH-media( xl ) {}
 
 // >xxl breakpoint
-@include QH-media( xxl ) {}
+@include QH-media( xxl ) {} 
 
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "",
   "licence": "MIT",
   "main": "index.js",
@@ -30,7 +30,7 @@
     "eslint": "^8.43.0",
     "eslint-webpack-plugin": "^4.0.1",
     "glob": "^7.2.0",
-    "handlebars": "^4.7.7",
+    "handlebars": "^4.7.8",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^5.5.3",
     "import-glob-loader": "^1.1.0",

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

@@ -0,0 +1,180 @@
+.qld__banner_contained {
+
+    /* Some elements need to be set to position relative so that that components and backgrounds sit on the stack in the correct order */
+
+    .content {
+      position: relative;
+      /*Needed so content sits properly on the stack*/
+  }
+
+  // #content {
+  //     position: relative;
+  //     /*Needed so content sits properly on the stack*/
+  // }
+
+  main {
+      position: relative;
+  }
+
+  .qld__footer {
+      position: relative;
+      /*Needed so content sits properly on the stack*/
+  }
+
+/* --------------------------------------------------*/
+
+
+/* This set the max with for the banner and primary nav  */
+
+  .qld__main-nav {
+  
+    /*max size for the navigation component*/
+    max-width: 100rem; /* 1600px */
+    /*keeps nav in center */
+    margin: auto;
+  
+  }
+
+  .qld__banner {
+
+    /*max size for the banner component*/
+    max-width: 100rem; /* 1600px */
+    
+    /*keeps banner in center */
+    margin: auto;
+
+    /* Adds shadow to banner */
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+    
+  }
+
+  /* --------------------------------------------------*/
+
+  /* Z indext helps ensure the mega menu and the back to top button sit above the banner */
+
+  /*Needed so megamenu sits abvoe banner */
+  .qld__main-nav.qld__main-nav--mega .qld__main-nav__menu-sub {
+    z-index: 500; /*These should be variables */
+    
+  }
+
+  /* ensures back-to top button stays above content */
+  body a.qld__btn.qld__btn--floating.qld__btn--back-to-top {
+    z-index: 1000; /*These should be variables */
+    
+  }
+
+/* --------------------------------------------------*/
+
+/* Better alignment for hero image in contained style */
+
+  @media (min-width: 1312px) {
+      
+    .qld__promo-panel.qld__body--full-image.qld__promo-panel--image-right
+      .qld__promo-panel__container {
+      padding-left: 0px;
+    }
+
+    .qld__banner.qld__banner--hero-right .qld__banner__image {
+      max-width: 45vw;
+      width: 45vw;
+    }
+  }
+
+/* --------------------------------------------------*/
+
+/* The curved banner only gets applied at 1600px */
+
+  @media (min-width: 1600px) {
+
+  /*  This applies a background to the whole top of the header */
+
+    .qld__header::before {
+        width: 100%;
+        content: " ";
+        position: absolute;
+        height: 100%;
+    
+        /* img or colour set by user */
+        background-color: #D7ECF2;
+        // background-image: url('/?a=190085');
+    
+        /* These settings should be able to be changed by user */
+        background-size: contain;
+        background-position: top left;
+        background-repeat: no-repeat;    
+        }
+
+    .qld__header__main {
+        background: transparent;
+        /* removes current header background */
+        position: relative;
+      }
+
+    /* Better alignment for hero image in contained style (this may requite some more experimentation to achieve best result */
+    .qld__banner.qld__banner--hero-right .qld__banner__image {
+      max-width: 620px;
+      width: 45vw;
+    }
+
+    .qld__main-nav {
+      /* Curved edges for nav*/  
+      border-radius: 48px 48px 0px 0px; /* Should be variable */
+      /* Shadow for nav*/  
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+    }
+
+    .qld__banner {
+      /* Curved edges for banner*/
+      border-radius: 0px 0px 48px 48px; /* Should be variable */
+      /* Makes sure banner sits in the correct stack position */  
+      z-index: 200;
+    }
+
+    /* The following code adds more padding to the succeeding section and pulls the div below the banner to sit under it slightly creating the overlap */
+    /* The overlap is the trickiest part and needs to be checked on all page types and background colours this code is just set to work for standard white background */
+
+
+    /* Next div */
+    .qld__banner + div.qld__body {
+      margin-top: -64px;
+      padding-top: 128px;
+    }
+
+    /* Content pages (this needs to be updated tp work for all coloured backgrounds) */
+    .qld__banner + #content {
+      background-color: var(--QLD-color-light-background);
+      padding-top: 64px;
+      margin-top: -64px;
+    }
+    
+    /* Search pages */
+    .qld__banner + .qld__body.qld__search {
+      position: relative;
+      margin-top: -64px;
+      padding-top: 124px;
+    }
+    
+    // Body breadcrumbs 
+    // Body breadcrumbs 
+    .qld__body--breadcrumb{
+      padding-bottom: 32px;
+      padding-top: 32px;
+      max-width: 100rem;
+      margin: 0 auto -64px;
+      border-radius: 0 0 48px 48px;
+      box-shadow: 0px 1px 2px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15);
+      position: relative;
+      z-index: 200;
+    }
+
+    div.qld__body {
+      padding-top: 128px !important;
+    }
+
+    .qld__tab-section{
+      margin-top: 100px;
+    }
+
+  }
+}

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

@@ -334,8 +334,7 @@ form {
 
     p {
         margin: 0;
-        // @include QLD-space(max-width, $QLD-font-maxwidth);
-        max-width: 80ch;
+        max-width: $QLD-font-maxwidth;
         line-height: 1.75;
     }
 
@@ -420,17 +419,39 @@ form {
         @include QLD-space(margin-top, 1unit);
     }
 
-    ul:not([class]),
-    ol:not([class]) {
+    ul:not([class]) {
+        @include QLD-space(padding-inline-start, 2unit);
         > li {
-            @include QLD-space(margin-top, .5unit);
+            @include QLD-space(margin-top, 0.5unit);
             
-            > ul:not([class]),
-            > ol:not([class]) {
-                @include QLD-space(margin-top, 1unit);
-                
+            > ul:not([class]) {
+                list-style-type: none;
+                @include QLD-space(padding-inline-start, 1unit);
                 > li {
-                    list-style-type: disc;
+                    @include QLD-space(padding-left, 1unit);
+                    @include QLD-space(margin-top, 0.5unit);
+                    position: relative;
+
+                    > ul:not([class]) {
+                        @include QLD-space(padding-inline-start, 1unit);
+                        > li {
+                            @include QLD-space(margin-top, 0.5unit);
+                            list-style-type: none;
+                            &::before {
+                                position: absolute;
+                                content: "–";
+                                left: 0px;
+                                top: 0px;
+                            }
+                        }
+                    }
+
+                    &::before {
+                        position: absolute;
+                        content: "–";
+                        left: 0px;
+                        top: 0px;
+                    }
                 }
             }
             
@@ -438,9 +459,40 @@ form {
                 @include QLD-space(margin-top, 0unit);
             }
         }
-        
-        > ul:not([class]) {
-            list-style-type: disc;
+    }
+
+    ol:not([class]) {
+        @include QLD-space(padding-inline-start, 2unit);
+        > li {
+            @include QLD-space(margin-top, 0.5unit);
+            
+            > ol:not([class]) {
+                // @include QLD-space(margin-top, 1unit);
+                    > li {
+                    list-style-type: lower-alpha;
+                    @include QLD-space(margin-top, 0.5unit);
+    
+                    > ol:not([class]) {
+                        // @include QLD-space(margin-top, 1unit);
+    
+                        > li {
+                            @include QLD-space(margin-top, 0.5unit);
+                            list-style-type: lower-roman;
+                        }
+                    }
+                }
+            }
+    
+            &:first-child {
+                @include QLD-space(margin-top, 0unit);
+            }
+        }
+    }
+    
+    ol:not([class]),
+    ul:not([class]) {
+        li {
+            @include QLD-space(line-height, 1.75unit);
         }
     }
     
@@ -625,14 +677,24 @@ form {
         margin-right: 0;
     }
 
+    blockquote {
+        padding-left: 0px;
+        border-left: none;
+        margin: 0;
+    }
+
+    .qld__block-quote{
+        padding-left: 1.375rem;
+        border-left: $QLD-border-width-thick solid var(--QLD-color-light-designAccent);
+        margin: 0;
+    }
+
     blockquote,
     .qld__block-quote {
         @include QLD-fontgrid(md, small);
         color: var(--QLD-color-light-heading);
         font-weight: 600;
-        padding-left: 1.375rem;
-        border-left: $QLD-border-width-thick solid var(--QLD-color-light-designAccent);
-        margin: 0;
+        
 
         .qld__quote-source {
             @include QLD-fontgrid(xs, small);
@@ -676,7 +738,6 @@ form {
     &.qld__body--alt {
         background: var(--QLD-color-light-alt-background);
 
-        
         hr {
             background-color: var(--QLD-color-light-alt-border);
         }

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

@@ -41,7 +41,7 @@
 		&:active {
 			background-color: var(--QLD-color-light-background__shade);
 			border-color: var(--QLD-color-light-background__shade);
-			color: var(---QLD-color-light-heading);
+			color: var(--QLD-color-light-heading);
 			@include QLD-box-shadow(1);
 			text-decoration: none;
 	
@@ -80,7 +80,7 @@
 	&.qld__footer--dark-alt,
 	.qld__code-header,
 	.qld__code.singleline {
-
+ 
 		.qld__btn,
 		a.qld__btn,
 		.sq-form-submit { 

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

@@ -176,14 +176,6 @@ label{
     }
 }
 
-.qld__fieldset {
-
-}
-
-.qld__btn {
-    margin-top: 2rem;
-}
-
 //Forms spacing
 * + form {
     @include QLD-space(margin-top, 2unit);
@@ -195,11 +187,6 @@ label{
     }
 }
 
-// .qld__fieldset__legend,
-// legend {
-//     @include QLD-space(margin-bottom, 0.5unit);
-// }
-
 // Reset fieldset styling to avoid inconsistency across different browsers
 .qld__fieldset,
 fieldset {
@@ -222,6 +209,9 @@ form {
     +textarea {
         @include QLD-space(margin-top, 0.5unit);
     }
+    .qld__btn {
+        margin-top: 2rem;
+    }
 }
 
 .qld__form-group {

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

@@ -121,240 +121,6 @@ select.qld__field-width--1-quarter {
     }
 }
 
-
-/* Default text size overrides */
-
-.qld__default--xs {
-    font-size: var(--QLD-default-mobile-xs) !important;
-}
-
-.qld__default--sm {
-    font-size: var(--QLD-default-mobile-sm) !important;
-}
-
-.qld__default--md {
-    font-size: var(--QLD-default-mobile-md) !important;
-}
-
-.qld__default--lg {
-    font-size: var(--QLD-default-mobile-lg) !important;
-}
-
-.qld__default--xl {
-    font-size: var(--QLD-default-mobile-xl) !important;
-    ;
-}
-
-.qld__default--xxl {
-    font-size: var(--QLD-default-mobile-xx) !important;
-}
-
-.qld__default--xxxl {
-    font-size: var(--QLD-default-mobile-xxxl) !important;
-}
-
-
-/* Desktop sizes for default text style overrides */
-
-@media (min-width: 992px) {
-
-    .qld__default--xs {
-        font-size: var(--QLD-default-desktop-xs) !important;
-    }
-
-    .qld__default--sm {
-        font-size: var(--QLD-default-desktop-sm) !important;
-    }
-
-    .qld__default--md {
-        font-size: var(--QLD-default-desktop-md) !important;
-    }
-
-    .qld__default--lg {
-        font-size: var(--QLD-default-desktop-lg) !important;
-    }
-
-    .qld__default--xl {
-        font-size: var(--QLD-default-desktop-xl) !important;
-        ;
-    }
-
-    .qld__default--xxl {
-        font-size: var(--QLD-default-desktop-xxl) !important;
-    }
-
-    .qld__default--xxxl {
-        font-size: var(--QLD-default-desktop-xxxl) !important;
-    }
-}
-
-
-/* Default global captions' style */
-
-.qld__caption {
-    font-style: normal;
-    color: var(--QLD-color-light-text__muted);
-    font-size: var(--QLD-default-desktop-xs) !important;
-    line-height: 1.4;
-    font-weight: 400;
-}
-
-.qld__body--dark, .qld__body--dark-alt {
-    .qld__caption {
-        color: var(--QLD-color-dark-text__muted);
-    }
-}
-
-/* Default text size overrides */
-
-.qld__default--xs {
-    font-size: var(--QLD-font-size-mobile-xs) ;
-}
-
-.qld__default--sm {
-    font-size: var(--QLD-font-size-mobile-sm);
-}
-
-.qld__default--md {
-    font-size: var(--QLD-font-size-mobile-md);
-}
-
-.qld__default--lg {
-    font-size: var(--QLD-font-size-mobile-lg);
-}
-
-.qld__default--xl {
-    font-size: var(--QLD-font-size-mobile-xl);
-    ;
-}
-
-.qld__default--xxl {
-    font-size: var(--QLD-font-size-mobile-xx);
-}
-
-.qld__default--xxxl {
-    font-size: var(--QLD-font-size-mobile-xxxl);
-}
-
-
-/* Desktop sizes for default text style overrides */
-
-@media (min-width: 992px) {
-
-    .qld__default--xs {
-        font-size: var(--QLD-font-size-desktop-xs);
-    }
-
-    .qld__default--sm {
-        font-size: var(--QLD-font-size-desktop-sm);
-    }
-
-    .qld__default--md {
-        font-size: var(--QLD-font-size-desktop-md);
-    }
-
-    .qld__default--lg {
-        font-size: var(--QLD-font-size-desktop-lg);
-    }
-
-    .qld__default--xl {
-        font-size: var(--QLD-font-size-desktop-xl);
-        ;
-    }
-
-    .qld__default--xxl {
-        font-size: var(--QLD-font-size-desktop-xxl);
-    }
-
-    .qld__default--xxxl {
-        font-size: var(--QLD-font-size-desktop-xxxl);
-    }
-}
-
-/* Default global captions' style */
-
-.qld__caption {
-    font-style: normal;
-    color: var(--QLD-color-light-text__muted);
-    line-height: 1.6;
-    font-weight: 400;
-}
-
-.qld__body--dark, .qld__body--dark-alt {
-    .qld__caption {
-        color: var(--QLD-color-dark-text__muted);
-    }
-}
-
-/* Default text size overrides */
-
-.qld__default--xs {
-    font-size: var(--QLD-font-size-mobile-xs) ;
-}
-
-.qld__default--sm {
-    font-size: var(--QLD-font-size-mobile-sm);
-}
-
-.qld__default--md {
-    font-size: var(--QLD-font-size-mobile-md);
-}
-
-.qld__default--lg {
-    font-size: var(--QLD-font-size-mobile-lg);
-}
-
-.qld__default--xl {
-    font-size: var(--QLD-font-size-mobile-xl);
-    ;
-}
-
-.qld__default--xxl {
-    font-size: var(--QLD-font-size-mobile-xx);
-}
-
-.qld__default--xxxl {
-    font-size: var(--QLD-font-size-mobile-xxxl);
-}
-
-
-/* Desktop sizes for default text style overrides */
-
-@media (min-width: 992px) {
-
-    .qld__default--xs {
-        font-size: var(--QLD-font-size-desktop-xs);
-    }
-
-    .qld__default--sm {
-        font-size: var(--QLD-font-size-desktop-sm);
-    }
-
-    .qld__default--md {
-        font-size: var(--QLD-font-size-desktop-md);
-    }
-
-    .qld__default--lg {
-        font-size: var(--QLD-font-size-desktop-lg);
-    }
-
-    .qld__default--xl {
-        font-size: var(--QLD-font-size-desktop-xl);
-        ;
-    }
-
-    .qld__default--xxl {
-        font-size: var(--QLD-font-size-desktop-xxl);
-    }
-
-    .qld__default--xxxl {
-        font-size: var(--QLD-font-size-desktop-xxxl);
-    }
-}
-
-/* Default text size overrides */
-
-
 /*
  * Tablet layout
  */