@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,157 @@
+<!-- MAIN NAVIGATION -->
+<nav class="qld__main-nav qld__main-nav--mega {{site.metadata.mainNavStyle.value}}" id="#mainmenu" aria-label="main">
+    <div class="container-fluid">
+        <div class="qld__main-nav__content {{#ifCond site.metadata.mainNavDesktopHide.value '==' 'yes'}}qld__main-nav__no-desktop{{/ifCond}}" id="main-nav">
+            <div class="qld__main-nav__menu
+            {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__menu--dark{{/ifCond}}
+            {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__menu--dark-alt{{/ifCond}}
+            ">
+                <div class="qld__main-nav__menu-inner">
+                    <div class="qld__main-nav__focus-trap-top"></div>
+                    <div class="qld__main-nav__header">
+                        <h6 class="qld__main-nav__menu-heading">Menu</h6>
+                        <button
+                            aria-controls="main-nav"
+                            class="qld__main-nav__toggle qld__main-nav__toggle--close"
+                        >
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md "><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__close"></use></svg>
+                            <span class="qld__main-nav__toggle-text">Close</span>
+                        </button>
+                    </div>
+                    <ul class="qld__link-list">
+                        {{#if site.metadata.mainNavHomeIconShow.value}}
+                        <li class="qld__main-nav__item {{#if current.home}}active{{/if}}">
+                            <div class="qld__main-nav__item-title">
+                                <a class="qld__main-nav__item-home qld__main-nav__item-link" {{#if current.home}}aria-current="page"{{/if}} href="./?a={{site.data.assetid}}">
+                                    <span class="qld__main-nav__item-icon">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md "><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__home"></use></svg>
+                                    </span>
+                                    
+                                    <span class="qld__main-nav__item-text" data-name="{{asset_short_name}}">Home</span>
+                                </a>
+                            </div>
+
+                        </li>
+                        {{/if}}
+                        {{#each site.children}} 
+                            <li class="qld__main-nav__item {{#ifCond asset_assetid '==' ../current.data.assetid}}active{{/ifCond}} {{#ifCond asset_assetid '==' ../current.top.asset_assetid}}active{{/ifCond}}">
+                                <div class="qld__main-nav__item-title">
+                                    {{#ifCond ../site.metadata.mainNavMegaMenuShow.value '!=' 'true'}} 
+                                        <a {{#ifCond asset_assetid '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{asset_assetid}}" data-name="{{asset_short_name}}" class="qld__main-nav__item-link">{{asset_short_name}}</a>
+                                    {{/ifCond}}
+                                    {{#ifCond ../site.metadata.mainNavMegaMenuShow.value '==' 'true'}}
+
+                                        <a class="qld__main-nav__item-link {{#arrayWith children 'asset_metadata_showInMegaNav' 'true'}}{{#if this}} qld__main-nav__item-link--desktop-hide{{/if}}{{/arrayWith}}"
+                                            {{#ifCond asset_assetid '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{asset_assetid}}">{{asset_short_name}}</a>
+                                            {{#arrayWith children 'asset_metadata_showInMegaNav' 'true'}}
+                                                {{#if this}}
+                                                    <button class="qld__main-nav__item-toggle qld__accordion--closed" aria-controls="mega-nav-{{../this.asset_assetid}}" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, {{../asset_short_name}}"  ><span class="qld__main-nav__item-toggle-text" data-name="{{../asset_short_name}}">{{../asset_short_name}}</span>
+                                                    <svg class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__chevron-up"></use></svg>
+                                                    </button>
+                                                {{/if}}
+                                        {{/arrayWith}}
+
+                                    {{/ifCond}}
+                                </div>
+                                {{#ifCond ../site.metadata.mainNavMegaMenuShow.value '==' 'true'}}
+                                    {{#arrayWith children 'asset_metadata_showInMegaNav' 'true'}}
+                                        {{#if this}}
+                                            <div class="qld__main-nav__menu-sub qld__accordion--closed qld__accordion__body" id="mega-nav-{{../this.asset_assetid}}" style="display: none;">
+                                                <div class="qld__main-nav__menu-sub-inner">
+                                                    <div class="qld__main-nav__sub-head">
+                                                        <a class="qld__main-nav__sub-heading " href="./?a={{../this.asset_assetid}}">
+                                                            <span class="qld__main-nav__sub-item-text qld__display-lg">{{../this.asset_name}}</span>
+                                                            <svg class="qld__icon qld__icon--lg"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__arrow-right"></use></svg>
+                                                        </a>
+                                                        {{#ifCond @root.site.metadata.mainNavPageDescLevelOne.value '==' 'true'}}
+                                                            {{#if ../this.asset_metadata_shortDescription}}
+                                                                <p class="qld__main-nav__item-desc">{{../this.asset_metadata_shortDescription}}</p>
+                                                            {{/if}}
+                                                        {{/ifCond}}
+                                                    </div>
+                                                    
+                                                    <hr class="qld__horizontal-rule qld__horizontal-rule--lg">
+                                                    {{!-- <ul class="qld__link-list"> --}}
+                                                        <ul class="qld__link-columns qld__link-columns--3-col qld__link-list">
+                                                        {{#each this}}                                                   
+                                                            {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+                                                            <li class="{{#ifCond @root.site.metadata.mainNavPageDescLevelTwo.value '==' 'true'}}{{#if asset_metadata_shortDescription}}qld__main-nav__item--has-desc{{/if}}{{/ifCond}}">
+                                                                
+                                                                
+                                                                
+                                                                <a href="{{asset_url}}">
+                                                                    <span class="qld__main-nav__sub-item-text">{{asset_short_name}}</span>
+                                                                    
+                                                                </a>
+                                                            {{/ifCond}}
+                                                            {{#ifCond asset_assetid '==' @root.current.data.assetid}}
+                                                            <li class="active {{#ifCond @root.site.metadata.mainNavPageDescLevelTwo.value '==' 'true'}}qld__main-nav__item--has-desc{{#if ../this.asset_metadata_shortDescription}}{{/if}}{{/ifCond}}">
+                                                                <span {{#ifCond asset_assetid '==' @root.data.assetid}}aria-current="page"{{/ifCond}} class="qld__main-nav__sub-item-text">{{asset_short_name}}</span>
+                                                            {{/ifCond}}
+                                                            {{#ifCond @root.site.metadata.mainNavPageDescLevelTwo.value '==' 'true'}}
+                                                                {{#if asset_metadata_shortDescription}}
+                                                                    <p class="qld__main-nav__item-desc">{{asset_metadata_shortDescription}}</p>
+                                                                {{/if}}
+                                                            {{/ifCond}}
+                                                            </li>
+                                                        {{/each}}
+                                                    </ul>
+                                                    {{#ifCond @root.site.metadata.mainNavViewAllShow.value '==' 'true'}}
+                                                        <div class="qld__main-nav__sub-footer">
+                                                            <hr class="qld__horizontal-rule qld__horizontal-rule--lg">
+                                                            <a class="qld__cta-link qld__cta-link--view-all" href="./?a={{../this.asset_assetid}}">View all</a>
+                                                         </div>
+                                                    {{/ifCond}}
+                                                </div>
+                                            </div>
+                                        {{/if}}
+                                    {{/arrayWith}}
+                                {{/ifCond}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                    {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
+                    <div class="qld__main-nav__cta-wrapper">
+                        <ul class="qld__link-list">
+                        {{#if site.metadata.mainNavCtaOne.value}}
+                            <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}active{{/ifCond}}">
+                                <div class="qld__main-nav__item-title">
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaOne.value}}" >
+                                        {{#if site.metadata.mainNavCtaOneIcon.value}}
+                                        <span class="qld__main-nav__item-icon">
+                                            <i class="{{site.metadata.mainNavCtaOneIcon.value}}"></i>
+                                        </span>
+                                        {{/if}}
+                                        <span class="qld__main-nav__item-text" data-name="{{site.metadata.mainNavCtaOneText.value}}">{{{site.metadata.mainNavCtaOneText.value}}}</span>
+                                    </a>
+                                </div>
+                            </li>
+                            {{/if}}
+                            {{#if site.metadata.mainNavCtaTwo.value}}
+                            <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}active{{/ifCond}}">
+                                <div class="qld__main-nav__item-title">
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaTwo.value}}" >
+                                        {{#if site.metadata.mainNavCtaTwoIcon.value}}
+                                        <span class="qld__main-nav__item-icon">
+                                            <i class="{{site.metadata.mainNavCtaTwoIcon.value}}"></i>
+                                        </span>
+                                        {{/if}}
+                                        <span class="qld__main-nav__item-text" data-name="{{site.metadata.mainNavCtaTwoText.value}}">{{{site.metadata.mainNavCtaTwoText.value}}}</span>
+                                    </a>
+                                </div>
+                            </li>
+                        {{/if}}
+                        </ul>
+                    </div>
+                    {{/ifCond}}
+                    <div class="qld__main-nav__focus-trap-bottom"></div>
+                </div>
+            </div>
+            <div
+                class="qld__main-nav__overlay"
+                aria-controls="main-nav"
+            ></div>
+        </div>
+    </div>
+</nav>
+<!-- MAIN NAVIGATION END -->

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

@@ -0,0 +1,170 @@
+(function () {
+   
+    /**
+     * The mega menu module
+     * 
+     * @module megaMenu
+     */
+    var megaMenu = {
+
+        /**
+         * Initialise the mega menu listeners for keyboard navigation
+         * 
+         * @memberof module:megaMenu
+         */
+        'init': function () {
+
+            // Top level items
+            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);
+            });
+
+            // Mega menu items
+            var menuItems = document.querySelectorAll('.qld__main-nav__menu-sub a');
+            menuItems.forEach(function (item) {
+                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 
+     */
+    function handleTopNavKeydown(e) {
+        var key = e.keyCode;
+
+        // ESC or UP ARROW
+        if (key === 27 || key == 38) {
+            toggleMenu(e);
+        }
+    }
+
+    /**
+     * Handle focusout of top level nav items.
+     * Close the menu, unless we have tabbed within
+     * 
+     * @memberof module:megaMenu
+     * @instance
+     * @private
+     * 
+     * @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');
+        
+        // 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;
+            if (!menuHasFocus && expanded) {
+                toggleMenu(e);
+            }
+        }, 20);
+    }
+
+    /**
+     * Toggle the mega menu open/closed
+     * 
+     * @memberof module:megaMenu
+     * @instance
+     * @private
+     * 
+     * @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;
+
+        if (!expanded) {
+            navItem.classList.add('expanded');
+            setTimeout(function() {
+                document.addEventListener('click', handleBackgroundClick);
+            }, 30);
+        } else {
+            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 
+     */
+    function handleBackgroundClick(e) {
+        var target = e.target;
+        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');
+            });
+
+            // Remove listener
+            document.removeEventListener('click', handleBackgroundClick);
+        }
+    }
+
+    /**
+     * Handle keypress for item within mega menu.
+     * 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 
+     */
+    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');
+
+        // ESC or UP ARROW
+        if (key === 27 || key == 38) {
+            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() {
+                var menuHasFocus = menu.contains(document.activeElement) ? true : false;
+                if (!menuHasFocus) {
+                    toggleMenu(e);
+                }
+            }, 20);
+        }
+        
+    }
+
+    window.addEventListener('DOMContentLoaded', function () {
+        megaMenu.init();
+    });
+
+}());

package/src/components/mega_main_navigation/js/manifest.json

@@ -0,0 +1,9 @@
+{
+	"component": {
+		"name": "Mega Main Navigation",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"type": "design"
+	}
+}

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

@@ -0,0 +1,11 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Multi column
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.text-columns {
+    h2, h3 {
+        &:first-child {
+            @include QLD-space(margin-top, 3unit);
+        }
+    }
+}

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

@@ -0,0 +1,98 @@
+{{#with component.data}}
+<section class="qld__body qld__body--full-width {{metadata.body_background.value}}" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}multi-column-{{assetid}}{{/if}}">
+
+    <div class="container-fluid">
+
+        {{#if metadata.intro_show.value}}
+        <div class="row">
+
+            <div class="col-xs-12 {{metadata.intro_width.value}}" >
+
+                {{#if metadata.intro_heading.value}}
+                <h2>{{metadata.intro_heading.value}}</h2>
+                {{/if}}
+
+                {{#if metadata.intro_body.value}}
+                {{{metadata.intro_body.value}}}
+                {{/if}}
+            </div>
+
+        </div>
+        {{/if}}
+
+            {{#ifCond metadata.row_num.value '>=' 1}}
+            <div class="row row--heading-paragraph-columns">
+
+                {{#if metadata.col_1_1.value}}
+                <div class="col-xs-12 {{columnWidth 1 metadata}}">
+                    {{{metadata.col_1_1.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_1_2.value}}
+                <div class="col-xs-12 {{columnWidth 2 metadata}}">
+                    {{{metadata.col_1_2.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_1_3.value}}
+                <div class="col-xs-12 {{columnWidth 3 metadata}}">
+                    {{{metadata.col_1_3.value}}}
+                </div>
+                {{/if}}
+
+            </div>
+            {{/ifCond}}
+
+            {{#ifCond metadata.row_num.value '>=' 2}}
+            <div class="row row--heading-paragraph-columns">
+
+                {{#if metadata.col_2_1.value}}
+                <div class="col-xs-12 {{columnWidth 1 metadata}}">
+                    {{{metadata.col_2_1.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_2_2.value}}
+                <div class="col-xs-12 {{columnWidth 2 metadata}}">
+                    {{{metadata.col_2_2.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_2_3.value}}
+                <div class="col-xs-12 {{columnWidth 3 metadata}}">
+                    {{{metadata.col_2_3.value}}}
+                </div>
+                {{/if}}
+
+            </div>
+            {{/ifCond}}
+
+            {{#ifCond metadata.row_num.value '==' 3}}
+            <div class="row row--heading-paragraph-columns">
+
+                {{#if metadata.col_3_1.value}}
+                <div class="col-xs-12 {{columnWidth 1 metadata}}">
+                    {{{metadata.col_3_1.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_3_2.value}}
+                <div class="col-xs-12 {{columnWidth 2 metadata}}">
+                    {{{metadata.col_3_2.value}}}
+                </div>
+                {{/if}}
+
+                {{#if metadata.col_3_3.value}}
+                <div class="col-xs-12 {{columnWidth 3 metadata}}">
+                    {{{metadata.col_3_3.value}}}
+                </div>
+                {{/if}}
+
+            </div>
+            {{/ifCond}}
+
+    </div>
+
+</section>
+{{/with}}