@qhealth-design-system/core 1.17.2 → 1.18.0

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

@@ -19,14 +19,12 @@
         display: flex;
         align-items: flex-start;
         flex-direction: column;
-        padding-top: 20px;
         padding-top: 1.25rem;
         @include QLD-media(md) {
             flex-direction: row;
             align-items: center;
         }
         @include QLD-media(lg) {
-            padding-top: 24px;
             padding-top: 1.5rem;
         }
     }
@@ -34,14 +32,10 @@
         font-weight: bold;
         display: block;
         white-space: nowrap;
-        padding-right: 16px;
         padding-right: 1rem;
-        padding-bottom: 8px;
         padding-bottom: 0.5rem;
         @include QLD-media(md) {
-            padding-top: 4px;
             padding-top: 0.25rem;
-            padding-bottom: 0px;
             padding-bottom: 0rem;
             -ms-flex-item-align: center;
             align-self: center;
@@ -214,9 +208,9 @@ a.qld__tag,
     background-color: transparent;
     @include QLD-fontgrid(sm);
     @include QLD-space(font-size, 1unit);
-    @include QLD-space(padding, 0.5unit 1unit);
+    @include QLD-space(padding, 0 0 0 1unit);
     border-radius: $QLD-border-radius-lg;
-    text-decoration: none;
+    text-decoration: none !important; // Ensure no decoration at all for this variant
     @include QLD-underline("light", "noUnderline", "default");
     display: flex;
     align-items: center;
@@ -227,38 +221,39 @@ a.qld__tag,
         color: var(--QLD-color-light__text);
         background-color: transparent;
         border-color: $QLD-color-neutral--lighter;
-        text-decoration: none;
     }
 
     .qld__tag--filter-close {
-        @include QLD-space(margin-left, 0.5unit);
+        @include QLD-space(margin-left, 0.1unit);
+
         background-color: transparent;
         border: none;
-        height: 1.25rem;
-        width: 1.25rem;
+        height: 2.5rem;
+        width: 2.5rem;
         display: flex;
         align-items: center;
+        justify-content: center;
         padding: 0;
         border-radius: 50%;
+        cursor: pointer;
 
-        > svg {
-            cursor: pointer;
-            padding: 3px;
-            border: 1px solid var(--QLD-color-light__action--secondary);
-            border-radius: 100%;
-            color: var(--QLD-color-light__action--secondary);
-
-            &:hover {
+        &:hover,
+        &:focus {
+            > svg.qld__icon {
                 background-color: var(--QLD-color-light__action--secondary-hover);
                 border-color: var(--QLD-color-light__action--secondary-hover);
                 color: $QLD-color-neutral--white;
             }
         }
 
-        &:focus {
-            outline: 3px solid var(--QLD-color-light__focus);
-            outline-offset: 2px;
+        > svg.qld__icon {
+            padding: 3px;
+            border: 1px solid var(--QLD-color-light__action--secondary);
+            border-radius: 100%;
+            color: var(--QLD-color-light__action--secondary);
         }
+
+        @include QLD-focus("light", false, -2px);
     }
 
     .qld__body--light &,
@@ -299,11 +294,14 @@ a.qld__tag,
         }
 
         .qld__tag--filter-close {
-            > svg {
+            > svg.qld__icon {
                 border-color: var(--QLD-color-dark__action--secondary);
                 color: var(--QLD-color-dark__action--secondary);
+            }
 
-                &:hover {
+            &:hover,
+            &:focus {
+                > svg.qld__icon {
                     background-color: var(--QLD-color-dark__action--secondary-hover);
                     border-color: var(--QLD-color-dark__action--secondary-hover);
                     color: var(--QLD-color-dark__background);
@@ -330,11 +328,14 @@ a.qld__tag,
         }
 
         .qld__tag--filter-close {
-            > svg {
+            > svg.qld__icon {
                 border-color: var(--QLD-color-dark__action--secondary);
                 color: var(--QLD-color-dark__action--secondary);
+            }
 
-                &:hover {
+            &:hover,
+            &:focus {
+                > svg.qld__icon {
                     background-color: var(--QLD-color-dark__action--secondary-hover);
                     border-color: var(--QLD-color-dark__action--secondary-hover);
                     color: var(--QLD-color-dark__background--alt);

package/src/components/_global/html/head.html

@@ -2,7 +2,7 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <!-- Imports -->
-<link href="https://fonts.googleapis.com/css?family=Noto Sans:wght@300;400;600;900&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=Noto Sans:wght@300;400;600;700;900&display=swap" rel="stylesheet" />
 
 <script id="globals-loader" data-current='${JSON.stringify(require("/src/data/current.json"))}' data-site='${JSON.stringify(require("/src/data/site.json"))}'>
     var current = JSON.parse(document.getElementById("globals-loader").getAttribute("data-current"));

package/src/components/basic_search/html/component.hbs

@@ -99,8 +99,9 @@
                     <div class="qld__search-form--wrapper">
                         <form role="search" aria-label="sitewide" class="qld__search-form" id="search-form-global-basic" action="{{site.metadata.siteSearchUrl.value}}">
                             <div class="qld__search-form__inner">
+                                <svg class="qld__icon qld__icon--sm qld__search-form__inner-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><use href="{{@root.site.metadata.coreSiteIcons.value}}#search"></use></svg>
                                 <input type="search" id="search-input-global-basic-query" name="query" class="qld__text-input data-hj-allow" aria-expanded="false" autocomplete="off" disabled="true" value="{{#ifCond resultsPage.question.query '!==' '!padrenull'}}{{resultsPage.question.query}}{{/ifCond}}">
-                                 <input type="text" id="name" name="name" autocomplete="off" tabindex="-1" class="qld__text-input--validation">
+                                <input type="text" id="name" name="name" autocomplete="off" tabindex="-1" class="qld__text-input--validation">
                                 <div class="qld__search-form__btn">
                                     <button class="qld__btn qld__btn--search" type="button" aria-label="Search" disabled="true">
                                         <span class="qld__btn__icon">

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

@@ -7,8 +7,23 @@
 
     // If any element inside the card receives focus, add a focus ring around the wrapper card div
     &:focus-within {
+        // Can't use qld-focus mixin here
         outline: 3px solid var(--QLD-color-light__focus);
         outline-offset: 2px;
+
+        // Focus style change within dark ancestor
+        .qld__body--dark &,
+        .qld__body--dark-alt &,
+        .qld__card--dark &,
+        .qld__card--dark-alt &,
+        .qld__banner--dark &,
+        .qld__banner--dark-alt &,
+        .qld__footer--dark &,
+        .qld__footer--dark-alt &,
+        .qld__dark &,
+        .qld__dark-alt & {
+            outline-color: var(--QLD-color-dark__focus);
+        }
     }
 
     &:hover {

package/src/components/footer/html/component.hbs

@@ -28,16 +28,19 @@
                                 {{footerCTALead.value}}
                             </p>
                             {{/if}}
-                           {{#if footerCTAContact.value}}
-                            <p class="qld__footer__cta-content">
-                                {{#ifCond footerCTAContactIcon.value '==' 'phone'}}
-                                <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#phone"></use></svg>
-                                {{/ifCond}}
-                                {{#ifCond footerCTAContactIcon.value '==' 'email'}}
-                                <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Email"></use></svg>
-                                {{/ifCond}}
-                                {{{footerCTAContact.value}}}
-                            </p>
+                           {{#if footerCTAContactPhone.value}}
+                                <p class="qld__footer__cta-content">
+                                    <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#phone"></use></svg>
+                                    <strong>Phone: </strong>
+                                    {{#if footerCTAContactPhoneLink.value}}<a href="{{footerCTAContactPhoneLink.value}}" target="_blank">{{footerCTAContactPhone.value}}</a>{{else}}{{footerCTAContactPhone.value}}{{/if}}
+                                </p>
+                            {{/if}}
+                           {{#if footerCTAContactEmail.value}}
+                                <p class="qld__footer__cta-content">
+                                    <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#email"></use></svg>
+                                    <strong>Email: </strong>
+                                    {{#if footerCTAContactEmailLink.value}}<a href="{{footerCTAContactEmailLink.value}}" target="_blank">{{footerCTAContactEmail.value}}</a>{{else}}{{footerCTAContactEmail.value}}{{/if}}
+                                </p>
                             {{/if}}
                         </div>
                         <div class="col-xs-12 col-sm-4 col-lg-12">
@@ -116,19 +119,19 @@
                             <a class="qld__footer__clickable__link" href="{{urldecode (lookup this 'asset_url^urlencode')}}">
                             {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'facebook'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Facebook"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#facebook"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'linkedin'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#LinkedIn"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#linkedin"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'youtube'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#YouTube"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#youtube"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'instagram'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Instagram"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#instagram"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'twitter'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#X"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#x"></use></svg>
                                 {{/ifCond}}
                                 <span class="qld__footer__social__label">{{lookup this 'asset_short_name^escapequotes'}}</span>
                             </a>

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

@@ -234,7 +234,7 @@
             }
         }
 
-        //Dark theme
+        // Dark themes
         &.qld__header__pre-header--dark,
         &.qld__header__pre-header--dark-alt {
             background-color: var(--QLD-color-dark__background);
@@ -257,6 +257,7 @@
                 color: var(--QLD-color-dark__link);
 
                 &:hover {
+                    color: var(--QLD-color-dark__link);
                     .qld__header__cta-link-icon {
                         color: var(--QLD-color-dark__action--secondary-hover);
                     }
@@ -271,7 +272,6 @@
                 @include QLD-focus("dark", false, -3px);
                 color: var(--QLD-color-dark__link);
                 border-color: var(--QLD-color-dark__border);
-                @include QLD-focus("dark");
 
                 svg {
                     color: var(--QLD-color-dark__action--secondary);
@@ -287,52 +287,13 @@
             }
         }
 
-        //Dark alt theme
+        // Dark alt specific theme
         &.qld__header__pre-header--dark-alt {
             background-color: var(--QLD-color-dark__background--alt);
-            color: var(--QLD-color-dark__text);
-
-            .qld__header__pre-header-url {
-                color: var(--QLD-color-dark__link);
-            }
-
-            .qld__header__pre-header-url--mobile {
-                color: var(--QLD-color-dark__link);
-            }
-
-            a {
-                @include QLD-underline("dark", "noUnderline", "default", "noVisited");
-            }
-
-            .qld__header__cta-link {
-                color: var(--QLD-color-dark__link);
-
-                &:hover {
-                    .qld__header__cta-link-icon {
-                        color: var(--QLD-color-dark__action--secondary-hover);
-                    }
-                }
-            }
-
-            .qld__header__cta-link-icon {
-                color: var(--QLD-color-dark__action--secondary);
-            }
 
             .qld__header__toggle-main-nav {
-                @include QLD-focus("dark", false, -3px);
-                color: var(--QLD-color-dark__link);
-                border-color: var(--QLD-color-dark__border);
-
-                svg {
-                    color: var(--QLD-color-dark__action--secondary);
-                }
-
                 &:hover {
                     background-color: var(--QLD-color-dark__background--alt-shade);
-
-                    svg {
-                        color: var(--QLD-color-dark__action--secondary-hover);
-                    }
                 }
             }
         }
@@ -400,7 +361,7 @@
             display: none;
 
             @include QLD-media(lg) {
-                color: var(--QLD-color-light__site-title);
+                color: $QLD-color-neutral--black;
                 display: block;
                 @include QLD-space(padding-right, 1.5unit);
                 @include QLD-space(margin-right, 1.5unit);
@@ -434,7 +395,7 @@
                 @include QLD-fontgrid(sm, heading);
                 font-family: $QLD-font-sitename;
                 color: var(--QLD-color-light__site-title);
-                font-weight: bold;
+                font-weight: 700;
                 margin: 0;
                 padding: 0;
 
@@ -460,10 +421,9 @@
             }
         }
 
-        //Main header dark theme
-        &.qld__header__main--dark {
-            background-color: var(--QLD-color-dark__background);
-
+        // Main header dark themes
+        &.qld__header__main--dark,
+        &.qld__header__main--dark-alt {
             .qld__header__site-name {
                 .qld__header__heading {
                     color: var(--QLD-color-dark__site-title);
@@ -479,11 +439,12 @@
                     color: var(--QLD-color-dark__text);
                 }
             }
+
             a {
                 &:hover {
                     color: var(--QLD-color-dark__link);
                     .qld__header__brand-image {
-                        color: var(--QLD-color-dark__link);
+                        color: $QLD-color-neutral--white;
                     }
                     .qld__header__heading,
                     .qld__header__subline {
@@ -492,54 +453,33 @@
                 }
             }
 
-            .qld__header__search {
-                background-color: var(--QLD-color-dark__background);
-
-                .qld__display-lg {
-                    color: var(--QLD-color-dark__heading);
-                }
-            }
-        }
-
-        //Main header dark alt theme
-        &.qld__header__main--dark-alt {
-            background-color: var(--QLD-color-dark__background--alt);
-
-            .qld__header__site-name {
-                .qld__header__heading {
-                    color: var(--QLD-color-dark__site-title);
-                }
-                .qld__header__subline {
-                    color: var(--QLD-color-dark__text--lighter);
-                }
+            .qld__header__search .qld__display-lg {
+                color: var(--QLD-color-dark__heading);
             }
 
             .qld__header__brand-image {
                 @include QLD-media(lg) {
                     border-color: var(--QLD-color-dark__design-accent);
-                    color: var(--QLD-color-dark__text);
+                    color: $QLD-color-neutral--white;
                 }
             }
+        }
 
-            a {
-                &:hover {
-                    color: var(--QLD-color-dark__link);
-                    .qld__header__brand-image {
-                        color: var(--QLD-color-dark__link);
-                    }
-                    .qld__header__heading,
-                    .qld__header__subline {
-                        color: var(--QLD-color-dark__link);
-                    }
-                }
+        // Main header dark specific
+        &.qld__header__main--dark {
+            background-color: var(--QLD-color-dark__background);
+
+            .qld__header__search {
+                background-color: var(--QLD-color-dark__background);
             }
+        }
+
+        // Main header dark alt specific
+        &.qld__header__main--dark-alt {
+            background-color: var(--QLD-color-dark__background--alt);
 
             .qld__header__search {
                 background-color: var(--QLD-color-dark__background--alt);
-
-                .qld__display-lg {
-                    color: var(--QLD-color-dark__heading);
-                }
             }
         }
     }