@qhealth-design-system/core 1.16.5 → 1.17.0

package/src/components/mega_main_navigation/js/global.js

@@ -1,46 +1,41 @@
 (function () {
-   
     /**
      * The mega menu module
-     * 
+     *
      * @module megaMenu
      */
     var megaMenu = {
-
         /**
          * Initialise the mega menu listeners for keyboard navigation
-         * 
+         *
          * @memberof module:megaMenu
          */
-        'init': function () {
-
+        init: function () {
             // Top level items
-            var topNavItems = document.querySelectorAll('.qld__main-nav__item-title > a');
+            var topNavItems = document.querySelectorAll(".qld__main-nav__item-title > a");
             topNavItems.forEach(function (item) {
-                item.addEventListener('keydown', handleTopNavKeydown);
-                item.addEventListener('focusin', toggleMenu);
-                item.addEventListener('focusout', handleTopNavFocusout);
+                item.addEventListener("keydown", handleTopNavKeydown);
+                item.addEventListener("focusin", toggleMenu);
+                item.addEventListener("focusout", handleTopNavFocusout);
             });
 
             // Mega menu items
-            var menuItems = document.querySelectorAll('.qld__main-nav__menu-sub a');
+            var menuItems = document.querySelectorAll(".qld__main-nav__menu-sub a");
             menuItems.forEach(function (item) {
-                item.addEventListener('keydown', handleMenuKeypress);
+                item.addEventListener("keydown", handleMenuKeypress);
             });
-        
         },
-
     };
 
     /**
      * Handle keydown on top level nav item to close the menu
      * if ESCAPE or UP key are pressed
-     * 
+     *
      * @memberof module:megaMenu
      * @instance
      * @private
-     * 
-     * @param {Document.event} e 
+     *
+     * @param {Document.event} e
      */
     function handleTopNavKeydown(e) {
         var key = e.keyCode;
@@ -54,23 +49,26 @@
     /**
      * Handle focusout of top level nav items.
      * Close the menu, unless we have tabbed within
-     * 
+     *
      * @memberof module:megaMenu
      * @instance
      * @private
-     * 
-     * @param {Document.event} e 
+     *
+     * @param {Document.event} e
      */
     function handleTopNavFocusout(e) {
         var link = e.target;
-        var navItem = link.closest('.qld__main-nav__item');
-        var expanded = navItem.classList.contains('expanded') ? true : false;
-        var menu = navItem.querySelector('.qld__main-nav__menu-sub');
-        
+        var navItem = link.closest(".qld__main-nav__item");
+        var expanded = navItem.classList.contains("expanded") ? true : false;
+        var menu = navItem.querySelector(".qld__main-nav__menu-sub");
+
         // Short delay to ensure we are on the new active element
         // Close the menu, unless we have tabbed within
-        setTimeout(function() {
-            var menuHasFocus = menu.contains(document.activeElement) ? true : false;
+        setTimeout(function () {
+            let menuHasFocus;
+            if (menu) {
+                menuHasFocus = menu.contains(document.activeElement) ? true : false;
+            }
             if (!menuHasFocus && expanded) {
                 toggleMenu(e);
             }
@@ -79,52 +77,51 @@
 
     /**
      * Toggle the mega menu open/closed
-     * 
+     *
      * @memberof module:megaMenu
      * @instance
      * @private
-     * 
-     * @param {Document.event} e 
+     *
+     * @param {Document.event} e
      */
     function toggleMenu(e) {
         var link = e.target;
-        var navItem = link.closest('.qld__main-nav__item');
-        var expanded = navItem.classList.contains('expanded') ? true : false;
+        var navItem = link.closest(".qld__main-nav__item");
+        var expanded = navItem.classList.contains("expanded") ? true : false;
 
         if (!expanded) {
-            navItem.classList.add('expanded');
-            setTimeout(function() {
-                document.addEventListener('click', handleBackgroundClick);
+            navItem.classList.add("expanded");
+            setTimeout(function () {
+                document.addEventListener("click", handleBackgroundClick);
             }, 30);
         } else {
-            navItem.classList.remove('expanded');
-            document.removeEventListener('click', handleBackgroundClick);
+            navItem.classList.remove("expanded");
+            document.removeEventListener("click", handleBackgroundClick);
         }
     }
 
     /**
      * Close the mega menu if the user clicks outside of it while opened
-     * 
+     *
      * @memberof module:megaMenu
      * @instance
      * @private
-     * 
-     * @param {Document.event} e 
+     *
+     * @param {Document.event} e
      */
     function handleBackgroundClick(e) {
         var target = e.target;
-        var nav = document.querySelector('.qld__main-nav__menu-inner');
+        var nav = document.querySelector(".qld__main-nav__menu-inner");
 
         // If clicked outside nav
         if (!nav.contains(target)) {
-
             // Close any expanded menu(s)
-            document.querySelectorAll('.qld__main-nav__item.expanded').forEach(function(item) {
-                item.classList.remove('expanded');
+            document.querySelectorAll(".qld__main-nav__item.expanded").forEach(function (item) {
+                item.classList.remove("expanded");
             });
 
             // Remove listener
-            document.removeEventListener('click', handleBackgroundClick);
+            document.removeEventListener("click", handleBackgroundClick);
         }
     }
 
@@ -133,38 +130,36 @@
      * Close the menu on press of ESCAPE or UP
      * After TAB press, check if focus is still within menu,
      * and close if it's not
-     * 
+     *
      * @memberof module:megaMenu
      * @instance
      * @private
-     * 
-     * @param {Document.event} e 
+     *
+     * @param {Document.event} e
      */
     function handleMenuKeypress(e) {
         var link = e.target;
         var key = e.keyCode;
-        var navItem = link.closest('.qld__main-nav__item');
-        var menu = link.closest('.qld__main-nav__menu-sub');
+        var navItem = link.closest(".qld__main-nav__item");
+        var menu = link.closest(".qld__main-nav__menu-sub");
 
         // ESC or UP ARROW
         if (key === 27 || key == 38) {
-            navItem.querySelector('.qld__main-nav__item-title > a').focus();
+            navItem.querySelector(".qld__main-nav__item-title > a").focus();
         }
 
         // If TAB key is pressed only (not SHIFT + TAB)
         if (key === 9 && !e.shiftKey) {
-            setTimeout(function() {
+            setTimeout(function () {
                 var menuHasFocus = menu.contains(document.activeElement) ? true : false;
                 if (!menuHasFocus) {
                     toggleMenu(e);
                 }
             }, 20);
         }
-        
     }
 
-    window.addEventListener('DOMContentLoaded', function () {
+    window.addEventListener("DOMContentLoaded", function () {
         megaMenu.init();
     });
-
-}());
+})();

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

@@ -2,230 +2,192 @@
 // Page alerts
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 .qld__page-alerts {
-	@include QLD-space( padding, 1unit );
-	@include QLD-fontgrid( sm );
-	position: relative;
-	border: solid $QLD-border-width-default $QLD-color-status__info;
-	@include QLD-space( border-left-width, 3unit );
-	border-radius: $QLD-border-radius-xs;
-	word-wrap: break-word;
-	background-color: $QLD-color-neutral--white;
-	max-width: 48rem;
-
-	&.qld__page-alerts--svg {
-		.qld__page-alerts--heading {
-			@include QLD-space( margin-top, 0unit );
-		}
-		.qld__page-alerts__icon {
-			position: absolute;
-			@include QLD-space( left, -1.5unit );
-			top: 50%;
-			transform: translate(-50%, -50%);
-			vertical-align: text-top;
-		}
-
-		.qld__icon {
-			color: $QLD-color-neutral--white;
-		}
-
-		/**
+    @include QLD-space(padding, 1unit);
+    @include QLD-fontgrid(sm);
+    position: relative;
+    border: solid $QLD-border-width-default $QLD-color-status__info;
+    @include QLD-space(border-left-width, 3unit);
+    border-radius: $QLD-border-radius-xs;
+    word-wrap: break-word;
+    background-color: $QLD-color-neutral--white;
+    max-width: 48rem;
+
+    &.qld__page-alerts--svg {
+        .qld__page-alerts--heading {
+            @include QLD-space(margin-top, 0unit);
+        }
+        .qld__page-alerts__icon {
+            position: absolute;
+            @include QLD-space(left, -1.5unit);
+            top: 50%;
+            transform: translate(-50%, -50%);
+            vertical-align: text-top;
+        }
+
+        .qld__icon {
+            color: $QLD-color-neutral--white;
+        }
+
+        /**
 		* Page alert success
 		*/
-		&.qld__page-alerts--success {
-			border-color: $QLD-color-status__success;
+        &.qld__page-alerts--success {
+            border-color: $QLD-color-status__success;
 
-			.qld__icon {
-				color: $QLD-color-neutral--white;
-			}
-		}
+            .qld__icon {
+                color: $QLD-color-neutral--white;
+            }
+        }
 
-		/**
+        /**
 		* Page alert warning.
 		*/
-		&.qld__page-alerts--warning {
-			border-color: $QLD-color-status__caution;
+        &.qld__page-alerts--warning {
+            border-color: $QLD-color-status__caution;
 
-			.qld__icon {
-				color: $QLD-color-neutral--black;
-			}
-		}
+            .qld__icon {
+                color: $QLD-color-neutral--black;
+            }
+        }
 
-		/**
+        /**
 		* Page alert error.
 		*/
-		&.qld__page-alerts--error {
-			border-color: $QLD-color-status__error;
-
-			.qld__icon {
-				color: $QLD-color-neutral--white;
-			}
-		}
-	}
-	
-	& .qld__page-alerts--heading.qld__display-lg {
-		color: var(--QLD-color-light__heading);
-		@include QLD-space(margin-bottom, 1unit);
-		line-height: 2.25rem;
-	}
-
-	& a{
-		color: var(--QLD-color-light__link);
-		@include QLD-underline('light');
-	}
-
-
-
-	/**
+        &.qld__page-alerts--error {
+            border-color: $QLD-color-status__error;
+
+            .qld__icon {
+                color: $QLD-color-neutral--white;
+            }
+        }
+    }
+
+    & .qld__page-alerts--heading.qld__display-lg {
+        color: var(--QLD-color-light__heading);
+        @include QLD-space(margin-bottom, 1unit);
+        line-height: 2.25rem;
+    }
+
+    & a {
+        color: var(--QLD-color-light__link);
+        @include QLD-underline("light");
+    }
+
+    /**
 	* Page alert warning.
 	*/
-	&.qld__page-alerts--warning {
-		border-color: $QLD-color-status__caution;
+    &.qld__page-alerts--warning {
+        border-color: $QLD-color-status__caution;
+    }
 
-		&::before{
-			background-color: $QLD-color-neutral--black;
-			mask-image: QLD-svguri($QLD-icon-warning);
-		}
-	}
-
-	/**
+    /**
 	* Page alert error.
 	*/
-	&.qld__page-alerts--error {
-		border-color: $QLD-color-status__error;
-
-		&::before{
-			background-color: $QLD-color-neutral--white;
-			mask-image: QLD-svguri($QLD-icon-error);
-		}
-	}
-
-	// // dark and dark alt
-	.qld__body--dark &,
-	.qld__body--dark-alt &{
-		color: var(--QLD-color-light__text);
-		
-		h3{
-			color: var(--QLD-color-light__heading);
-		}
-
-		& a{
-			color: var(--QLD-color-light__link);
-			@include QLD-underline('light');
-			&:hover{
-				color: var(--QLD-color-light__link);
-			}
-		}
-	}
+    &.qld__page-alerts--error {
+        border-color: $QLD-color-status__error;
+    }
+
+    // dark and dark alt
+    .qld__body--dark &,
+    .qld__body--dark-alt & {
+        color: var(--QLD-color-light__text);
+
+        h3 {
+            color: var(--QLD-color-light__heading);
+        }
+
+        & a {
+            color: var(--QLD-color-light__link);
+            @include QLD-underline("light");
+            &:hover {
+                color: var(--QLD-color-light__link);
+            }
+        }
+    }
 }
 
 /**
 * This section can be removed in the future once all WYSIWYG codes are updated to use SVG instead of pseudo. 
 */
 .qld__page-alerts:not(.qld__page-alerts--svg) {
-	&::before{
-		content: ' ';
-		@include QLD-space( width, 1.25unit );
-		@include QLD-space( height, 1.25unit );
-		display: inline-block;
-		vertical-align: text-top;
-		mask-image: QLD-svguri($QLD-icon-info);
-		mask-repeat: no-repeat;
-		mask-position: center;
-		background-color: $QLD-color-neutral--white;
-		position: absolute;
-		@include QLD-space( left, -1.5unit );
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
-
-	/**
+    &::before {
+        content: " ";
+        @include QLD-space(width, 1.25unit);
+        @include QLD-space(height, 1.25unit);
+        display: inline-block;
+        vertical-align: text-top;
+        mask-image: QLD-svguri($QLD-icon-info);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: $QLD-color-neutral--white;
+        position: absolute;
+        @include QLD-space(left, -1.5unit);
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    /**
 	* Page alert success
 	*/
-	&.qld__page-alerts--success {
-		border-color: $QLD-color-status__success;
+    &.qld__page-alerts--success {
+        border-color: $QLD-color-status__success;
 
-		&::before{
-			background-color: $QLD-color-neutral--white;
-			mask-image: QLD-svguri($QLD-icon-success);
-		}
-	}
+        &::before {
+            background-color: $QLD-color-neutral--white;
+            mask-image: QLD-svguri($QLD-icon-success);
+        }
+    }
 
-	/**
+    /**
 	* Page alert warning.
 	*/
-	&.qld__page-alerts--warning {
-		border-color: $QLD-color-status__caution;
+    &.qld__page-alerts--warning {
+        border-color: $QLD-color-status__caution;
 
-		&::before{
-			background-color: $QLD-color-neutral--black;
-			mask-image: QLD-svguri($QLD-icon-warning);
-		}
-	}
+        &::before {
+            background-color: $QLD-color-neutral--black;
+            mask-image: QLD-svguri($QLD-icon-warning);
+        }
+    }
 
-	/**
+    /**
 	* Page alert error.
 	*/
-	&.qld__page-alerts--error {
-		border-color: $QLD-color-status__error;
-
-		&::before{
-			background-color: $QLD-color-neutral--white;
-			mask-image: QLD-svguri($QLD-icon-error);
-		}
-	}
+    &.qld__page-alerts--error {
+        border-color: $QLD-color-status__error;
+
+        &::before {
+            background-color: $QLD-color-neutral--white;
+            mask-image: QLD-svguri($QLD-icon-error);
+        }
+    }
 }
 
 /**
 * Remove up to here
 */
 
-
-.qld__body #content > * + .qld__page-alerts  {
-	@include QLD-space( margin-top, 2unit );
+.qld__body #content > * + .qld__page-alerts {
+    @include QLD-space(margin-top, 2unit);
 }
 
-
 /**
  * Screen-reader only class for interlinking error messages and corresponding form elements.
  */
 .qld__page-alerts__sronly {
-	@include QLD-sronly;
+    @include QLD-sronly;
 }
 
-
 // Print styles
 @media print {
-	.qld__page-alerts {
-		border-color: #000 !important;
-		background-color: #fff !important;
-		border-left: 2px solid #000 !important;
-		padding-top: 3em !important;
-
-		&:after {
-			background: none !important;
-			content: 'info' !important;
-			top: 1em !important;
-			left: 0 !important;
-			font-size: 12px !important;
-			border-right: 1px solid #000 !important;
-			border-bottom: 1px solid #000 !important;
-			padding: 0.5em !important;
-			width: auto !important;
-		}
-	}
-
-	.qld__page-alerts--success:after {
-		content: 'success' !important;
-	}
-
-	.qld__page-alerts--warning:after {
-		content: 'warning' !important;
-	}
-
-	.qld__page-alerts--error:after {
-		content: 'error' !important;
-	}
-	.qld__page-alerts__icon {
-		display: none;
-	}
+    .qld__page-alerts {
+        border-color: #000 !important;
+        background-color: #fff !important;
+        border-left: 2px solid #000 !important;
+        padding-top: 3em !important;
+    }
+
+    .qld__page-alerts__icon {
+        display: none;
+    }
 }

package/src/data/site.json

@@ -619,7 +619,7 @@
             "use_default": true
         },
         "mainNavCtaOneIcon": {
-            "value": "fa-light fa-atom",
+            "value": "extended_health_alert",
             "fieldid": "72410",
             "type": "metadata_field_text",
             "is_contextable": true,
@@ -643,7 +643,7 @@
             "use_default": true
         },
         "mainNavCtaTwoIcon": {
-            "value": "fa-light fa-avocado",
+            "value": "speech",
             "fieldid": "72410",
             "type": "metadata_field_text",
             "is_contextable": true,
@@ -755,7 +755,7 @@
             "use_default": true
         },
         "footerCTAContactIcon": {
-            "value": "",
+            "value": "email",
             "fieldid": "72414",
             "type": "metadata_field_text",
             "is_contextable": true,