@qhealth-design-system/core 1.20.2 → 1.21.0

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

@@ -58,7 +58,6 @@ table {
 
     .qld__table__header,
     th {
-        // @include QLD-standard-space(padding, 5 4 5 4);
         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);
@@ -200,7 +199,6 @@ table {
         .qld__table__header,
         th {
             color: var(--QLD-color-dark__heading);
-            // box-shadow: inset 0 0 -$QLD-border-width-default 0 var(--QLD-color-dark__border);
             -webkit-box-shadow: inset 0 -2px 0 var(---QLD-color-dark__design-accent);
             box-shadow: inset 0 -2px 0 var(--QLD-color-dark__design-accent);
 
@@ -292,6 +290,12 @@ table {
             }
         }
     }
+
+    // Default vertical alignment for tables
+    th,
+    td {
+        vertical-align: top;
+    }
 }
 
 .qld__table,
@@ -377,119 +381,3 @@ table {
         max-height: none;
     }
 }
-
-// .qld__table {
-//     @include QLD-fontgrid( sm, 'default');
-//     font-family: $QLD-font;
-//     width: 100%;
-//     border-collapse: collapse;
-//     border-spacing: 0;
-
-//     .qld__table__head {
-//         display: table-header-group;
-//         @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-light__design-accent));
-
-//         .qld__table__header {
-//             text-align: left;
-//             @include QLD-space( padding, 0.75unit);
-
-//             // header widths
-//             &.qld__table__header--width-10 {
-//                 width: 10%;
-//             }
-
-//             &.qld__table__header--width-20 {
-//                 width: 20%;
-//             }
-
-//             &.qld__table__header--width-25 {
-//                 width: 25%;
-//             }
-
-//             &.qld__table__header--width-33 {
-//                 width: 33%;
-//             }
-
-//             &.qld__table__header--width-50 {
-//                 width: 50%;
-//             }
-
-//             &.qld__table__header--width-75 {
-//                 width: 75%;
-//             }
-
-//             &.qld__table__header--numeric {
-//                 text-align: right;
-//             }
-
-//             &:focus {
-//                 outline: 3px solid var(--QLD-color-light__focus);
-//             }
-//         }
-//     }
-
-//     .qld__table__cell {
-//         @include QLD-space( padding, 0.75unit);
-//         text-align: left;
-//         border-bottom: 1px solid var(--QLD-color-light__design-accent);
-
-//         &:focus {
-//             outline: 3px solid var(--QLD-color-light__focus);
-//         }
-
-//         //numeric cells should be aligned right and have monospaced digits
-//         &.qld__table__cell--numeric {
-//             text-align: right;
-//             font-variant: tabular-nums;
-//         }
-//     }
-
-//     &.qld__table--striped .qld__table__body {
-//         .qld__table__row:nth-last-child( odd) {
-//             background-color: var(--QLD-color-light__background--shade);
-//         }
-//     }
-
-//     //Alternate themes
-//     .qld__body--alt &{
-//         &.qld__table--striped .qld__table__body {
-//             .qld__table__row:nth-last-child( odd) {
-//                 background-color: var(--QLD-color-light__background--alt-shade);
-//             }
-//         }
-//     }
-
-//     .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{
-//             border-bottom: 1px solid var(--QLD-color-dark__design-accent);
-//         }
-
-//         &.qld__table--striped .qld__table__body {
-//             .qld__table__row:nth-last-child( odd) {
-//                 background-color: var(--QLD-color-dark__background--shade);
-//             }
-//         }
-//     }
-
-//     .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{
-//             border-bottom: 1px solid var(--QLD-color-dark__design-accent);
-//         }
-
-//         &.qld__table--striped .qld__table__body {
-//             .qld__table__row:nth-last-child( odd) {
-//                 background-color: var(--QLD-color-dark__background--alt-shade);
-//             }
-//         }
-//     }
-// }

package/src/components/accordion/js/global.js

@@ -2,9 +2,7 @@
  * @module accordion
  */
 
-(function () {
-
-    var accordion = {}
+const accordion = {};
 
     /**
      * Set the correct Aria roles for given element on the accordion title and body
@@ -138,7 +136,7 @@
             target.style.display = 'block';
 
             (function (element) {
-                QLD.animate.Toggle({
+                window.QLD.animate.Toggle({
                     element: target,
                     property: "height",
                     speed: speed || 250,
@@ -359,7 +357,7 @@
             }
             
             (function (target, speed, element) {
-                QLD.animate.Run({
+                window.QLD.animate.Run({
                     element: target,
                     property: 'height',
                     endSize: 'auto',
@@ -414,7 +412,7 @@
             }
             
             (function (target, speed) {
-                QLD.animate.Run({
+                window.QLD.animate.Run({
                     element: target,
                     property: 'height',
                     endSize: 0,
@@ -461,12 +459,13 @@
 
     }
 
-    // Make accordion public
-    QLD.accordion = accordion;
+// Make accordion public
+window.QLD = window.QLD || {};
+window.QLD.accordion = accordion;
 
-    // Add toggle event listeners to accordion buttons
-    window.addEventListener('DOMContentLoaded', function () {
-        QLD.accordion.init();
-    });
+// Add toggle event listeners to accordion buttons
+window.addEventListener('DOMContentLoaded', function () {
+    accordion.init();
+});
 
-}());
+export { accordion };

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

@@ -6,11 +6,39 @@
 
     {{#ifCond current.data.metadata.displayBreadcrumbs.value '==' 'true'}}qld__banner--breadcrumbs{{/ifCond}}
     "
-    {{#ifCond site.metadata.defaultBannerType.value '==' 'texture'}}
-    style="background-image: url(./?a={{site.metadata.defaultBannerTexture.value}});"
+    {{#ifCond @root.site.metadata.defaultBannerColour.value '==' 'light'}}
+        {{#ifCond @root.site.metadata.defaultBannerType.value '==' 'texture'}}
+            {{#if @root.site.metadata.defaultBannerTexture.value}}
+                style="background-image: url({{@root.site.metadata.defaultBannerTextureUrl.value}});"
+            {{/if}}
+        {{/ifCond}}
+    {{/ifCond}}
+
+        {{#ifCond @root.site.metadata.defaultBannerColour.value '==' 'alternate'}}
+        {{#ifCond @root.site.metadata.defaultBannerType.value '==' 'texture'}}
+            {{#if @root.site.metadata.defaultBannerTexture.value}}
+                style="background-image: url({{@root.site.metadata.defaultBannerTextureUrl.value}});"
+            {{/if}}
+        {{/ifCond}}
+    {{/ifCond}}
+
+    {{#ifCond @root.site.metadata.defaultBannerColour.value '==' 'dark'}}
+        {{#ifCond @root.site.metadata.defaultBannerType.value '==' 'texture'}}
+            {{#if @root.site.metadata.defaultBannerTextureDark.value}}
+                style="background-image: url({{@root.site.metadata.defaultBannerTextureDarkUrl.value}});"
+            {{/if}}
+        {{/ifCond}}
+    {{/ifCond}}
+
+    {{#ifCond @root.site.metadata.defaultBannerColour.value '==' 'dark-alternate'}}
+        {{#ifCond @root.site.metadata.defaultBannerType.value '==' 'texture'}}
+            {{#if @root.site.metadata.defaultBannerTextureDark.value}}
+                style="background-image: url({{@root.site.metadata.defaultBannerTextureDarkUrl.value}});"
+            {{/if}}
+        {{/ifCond}}
     {{/ifCond}}
-    
 >
+
 <!--@@ Breadcrumbs - Mobile @@-->
 {{#ifCond current.data.metadata.displayBreadcrumbs.value '==' 'true'}}
     <nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">

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

@@ -3,12 +3,308 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 /* Fixes an issue with the banner where the last element of the right-side menu disappears. */
-@media (min-width: 729px) and (max-width: $QLD-media-lg) {
+@media (width >= 729px) and (max-width: $QLD-media-lg) {
     .qld__banner__advanced{
         .qld__banner__wrapper {
             div.qld__banner__main.row {
                 min-height: 310px;
             }
         }
-    } 
+    }
+}
+
+// Advanced banner layout, right-side icon-tile nav and link-list card list.
+// These rules previously lived in the (now deleted) banner_intermediate
+// component but are still used by the banner_advanced markup.
+.qld__banner.qld__banner__advanced {
+    .qld__banner__wrapper{
+        @include QLD-media(lg) {
+            @include QLD-space(min-height, 21.5unit);
+        }
+    }
+
+    .qld__banner__content {
+        .qld__card-list.qld__banner__card-list {
+            @include QLD-space(margin-top, .5unit);
+
+            li{
+                @include QLD-space(padding, 0unit);
+                @include QLD-space(margin-top, 1unit);
+            }
+
+            @include QLD-media(lg) {
+                width: 70%;
+            }
+        }
+    }
+
+    //with breadcrumbs
+    &.qld__banner--breadcrumbs{
+        .qld__banner__content{
+            @include QLD-space(padding-top, 1unit);
+            @include QLD-space(padding-bottom, 2unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(padding-top, 3unit);
+                @include QLD-space(padding-bottom, 3unit);
+
+                .qld__banner__breadcrumbs--desktop{
+                    @include QLD-space(margin, 0 0 1.5rem);
+                }
+
+                .qld__banner__heading__wrapper{
+                    @include QLD-space(margin-bottom, 0);
+                }
+            }
+
+            @include QLD-media(lg) {
+                @include QLD-space(padding-bottom, 4unit);
+            }
+
+        }
+    }
+
+    //with breadcrumbs and hero image
+    &.qld__banner--breadcrumbs.qld__banner--has-hero{
+        .qld__banner__content{
+            @include QLD-space(padding-top, 1.5unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(padding-top, 3unit);
+            }
+        }
+    }
+
+    //with tile nav
+    &.qld__banner--nav{
+        .qld__banner__wrapper{
+            @include QLD-space(margin-right, 6.25unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-right, 0unit);
+            }
+        }
+    }
+}
+
+.qld__banner__nav {
+    @include QLD-space(width, 6.25unit);
+
+    left: auto;
+
+    @include QLD-space(right, -7.25unit);
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    .qld__banner--hero-right &{
+        @include QLD-space(right, 0unit);
+
+        @include QLD-media(lg) {
+            position: relative;
+        }
+    }
+
+    @include QLD-media(md) {
+        @include QLD-space(right, -1unit);
+    }
+
+    @include QLD-media(lg) {
+        @include QLD-space(right, 0unit);
+    }
+
+    @include QLD-media(xl) {
+        .qld__banner--padded & {
+            @include QLD-space(top, -3unit);
+        }
+
+    }
+
+    &.qld__banner__nav--fix-right {
+        @include QLD-media(xl) {
+            position: absolute;
+            top: 0;
+        }
+    }
+}
+
+
+.qld__tile-nav {
+    height: 100%;
+    background-color: var(--QLD-color-light__background);
+
+    @include QLD-media(xl) {
+        .qld__banner--padded & {
+            height: calc(100% + 96px);
+            height: calc(100% + 6rem);
+        }
+    }
+
+    .qld__banner__nav--fix-right & {
+        @include QLD-media(xl) {
+            height: 100%;
+        }
+    }
+
+    .qld__tile-nav__list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
+    }
+
+    .qld__tile-nav__item {
+        background-color: $QLD-color-neutral--white;
+        border-bottom: 1px solid var(--QLD-color-light__design-accent);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-grow: 1;
+
+        @include QLD-space(padding, 1unit 0);
+
+        position: relative;
+        text-align: center;
+        width: 100%;
+
+        &:last-child {
+            border: none;
+        }
+
+        svg,
+        i {
+            display: block;
+            margin: 0 auto;
+
+            @include QLD-space(font-size, 1.5unit );
+
+            color: var(--QLD-color-light__action--secondary);
+
+            path {
+                fill: var(--QLD-color-light__action--secondary);
+            }
+        }
+
+        .qld__tile-nav__link {
+            @include QLD-underline('light','noUnderline');
+
+            color: var(--QLD-color-light__link);
+            display: inline-block;
+            margin-top: 4px;
+
+            @include QLD-fontgrid( xs, nospace );
+
+            letter-spacing: -0.5px;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+            }
+
+            &:hover {
+                color: var(--QLD-color-light__link);
+            }
+
+            &:focus {
+                outline: 3px solid var(--QLD-color-light__focus);
+                outline-offset: 1px;
+            }
+        }
+    }
+
+
+    &--alt{
+        background-color: var(--QLD-color-light__background--alt);
+
+        .qld__tile-nav__item {
+            background-color: var(--QLD-color-light__background--alt);
+            border-bottom: 1px solid var(--QLD-color-light__design-accent);
+
+            svg path,
+            i{
+                color: var(--QLD-color-light__action--secondary);
+                fill: var(--QLD-color-light__action--secondary);
+            }
+
+            .qld__tile-nav__link {
+                color: var(--QLD-color-light__link);
+
+                &:hover {
+                    color: var(--QLD-color-light__link);
+                }
+            }
+        }
+
+
+    }
+
+    &--dark {
+        background-color: var(--QLD-color-dark__background);
+
+        .qld__tile-nav__item {
+            background-color: var(--QLD-color-dark__background);
+            border-bottom: 1px solid var(--QLD-color-dark__design-accent);
+
+            svg path,
+            i{
+                color: var(--QLD-color-dark__action--secondary);
+                fill: var(--QLD-color-dark__action--secondary);
+
+                &:hover {
+                    color: var(--QLD-color-dark__action--secondary-hover);
+                }
+            }
+
+            .qld__tile-nav__link {
+                color: var(--QLD-color-dark__link);
+
+                @include QLD-underline('dark','noUnderline');
+
+                &:hover {
+                    color: var(--QLD-color-dark__link);
+                }
+            }
+        }
+
+
+    }
+
+    &--dark-alt {
+        background-color: var(--QLD-color-dark__background--alt);
+
+        .qld__tile-nav__item {
+            background-color: var(--QLD-color-dark__background--alt);
+            border-bottom: 1px solid var(--QLD-color-dark__design-accent);
+
+            svg path,
+            i {
+                color: var(--QLD-color-dark__action--secondary);
+                fill: var(--QLD-color-dark__action--secondary);
+
+                &:hover {
+                    color: var(--QLD-color-dark__action--secondary-hover);
+                }
+            }
+
+            .qld__tile-nav__link {
+                color: var(--QLD-color-dark__link);
+
+                @include QLD-underline('dark','noUnderline');
+
+                &:hover {
+                    color: var(--QLD-color-dark__link);
+                }
+            }
+        }
+
+    }
 }

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

@@ -99,7 +99,7 @@
                         <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'}}{{#contains resultsPage.question.query 'hhsid:'}}{{else}}{{resultsPage.question.query}}{{/contains}}{{/ifCond}}">
+                                <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'}}{{#contains resultsPage.question.query 'hhsid:'}}{{else}}{{renderEncoded resultsPage.question.query}}{{/contains}}{{/ifCond}}">
                                 <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">
@@ -124,7 +124,7 @@
             <div class="col-xs-12 col-md-12">
                 <div class="qld__search__info">
                     <div class="qld__search__info-query">
-                        <h2 class="qld__display-lg">Results{{#ifCond resultsPage.question.query '!==' ''}}{{#contains resultsPage.question.query 'hhsid:'}}{{else}} for <span class="qld__search__info-query-term">‘{{resultsPage.question.query}}’</span>{{/contains}}{{/ifCond}}</h2>
+                        <h2 class="qld__display-lg">Results{{#ifCond resultsPage.question.query '!==' ''}}{{#contains resultsPage.question.query 'hhsid:'}}{{else}} for <span class="qld__search__info-query-term">'{{renderEncoded resultsPage.question.query}}'</span>{{/contains}}{{/ifCond}}</h2>
                     </div>
                     <div class="qld__search__info-inner">
                         <div class="qld__search__info-summary">
@@ -325,9 +325,9 @@
                 {{#ifCond resultsPage.resultsSummary.totalMatching '<' '1'}}
                 <div class="qld__search__results qld__search__results--no-results">
                     <div class="qld__abstract">
-                        Did you mean <a href="{{spell.url}}">‘{{{spell.text}}}’</a>
+                        Did you mean <a href="{{spell.url}}">'{{spell.text}}'</a>
                     </div>
-                    <h2 class="qld__display-lg"><span>Our search for </span><span class="qld__search__info-query-term">‘{{{question.query}}}’</span> didn't return any results.</h2>
+                    <h2 class="qld__display-lg"><span>Our search for </span><span class="qld__search__info-query-term">'{{renderEncoded resultsPage.question.query}}'</span> didn't return any results.</h2>
                     <p class="qld__abstract">You could try:</p>
                     <ul class="qld__search-link-list qld__link-list">
                         <li>Check the spelling of your keywords.</li>

package/src/components/global_alert/js/global.js

@@ -1,54 +1,38 @@
-(function () {
-    "use strict";
-    /**
-     * @module globalAlert
-     */
+/**
+ * Initialise global alert, and add close button event listener
+ */
+export function initGlobalAlert() {
+    let alerts = document.getElementsByClassName("qld__global-alert") || [];
+    let siteName = null;
+    if (document.querySelector(".qld__global-alert__include") && document.querySelector(".qld__global-alert__include").alertContainer) {
+        siteName = document.querySelector(".qld__global-alert__include").alertContainer.getAttribute("data-name");
+    }
 
-    /**
-     * Initialise global alert, and add close button event listener
-     *
-     * @memberof module:globalAlert
-     * @instance
-     * @private
-     */
-    function initGlobalAlert() {
+    if (siteName == null) {
+        siteName = "global_alert_dev";
+    }
 
-        let alerts = document.getElementsByClassName("qld__global-alert") || [];
-        let siteName = null;
-        if( document.querySelector(".qld__global-alert__include") && document.querySelector(".qld__global-alert__include").alertContainer) {
-            siteName = document.querySelector(".qld__global-alert__include").alertContainer.getAttribute("data-name");
-        }
+    for (let index = 0; index < alerts.length; index++) {
+        let alert = alerts[index];
+        let alertSeen = QLD.utils.getCookie(`${siteName}_alertSeen_${index}`);
 
-        if (siteName == null) {
-            siteName = 'global_alert_dev';
+        if (alertSeen !== null) {
+            alert.style.maxHeight = "0";
+            alert.style.display = "none";
         }
 
-        for(let index = 0; index < alerts.length; index++) {
-
-            let alert = alerts[index];
-            let alertSeen = QLD.utils.getCookie(`${siteName}_alertSeen_${index}`);
-
-            if (alertSeen !== null) {
-                alert.style.maxHeight = "0";
-                alert.style.display = "none";
-            }
-
-            let closeButton = alert.querySelector(".qld__global-alert__close button");
-
-            if (closeButton !== null) {
-                closeButton.addEventListener(
-                    "click",
-                    function () {
-                        alert.style.maxHeight = "0";
-                        alert.style.display = "none";
-                        QLD.utils.setCookie(`${siteName}_alertSeen_${index}`,"true");
-                    },
-                    false
-                );
-            }
+        let closeButton = alert.querySelector(".qld__global-alert__close button");
+
+        if (closeButton !== null) {
+            closeButton.addEventListener(
+                "click",
+                function () {
+                    alert.style.maxHeight = "0";
+                    alert.style.display = "none";
+                    QLD.utils.setCookie(`${siteName}_alertSeen_${index}`, "true");
+                },
+                false,
+            );
         }
     }
-
-    initGlobalAlert();
-    
-})();
+}