@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,280 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// {{component_name}}
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__left-nav {
+    display: none;
+}
+
+@include QLD-media(lg) {
+
+    .vertical-nav main {
+        display: flex;
+    }
+
+    .qld__body--left-nav {
+        flex-grow: 1;
+
+        .qld__body:first-of-type{
+            padding-top: 0;
+        }
+        
+        > .qld__banner > .container-fluid{
+            @include QLD-space(margin-left, 0unit); 
+                @include QLD-space(padding-left, 8unit !important) ; 
+        }
+        > .qld__body > .container-fluid{
+            max-width: 100%;
+            
+            >.row{
+                @include QLD-space(margin, 0 -3unit) ;
+            }
+
+            div[class^="col-"] > .qld__body > .container-fluid,
+            .qld__banner > .container-fluid{
+                @include QLD-space(margin-left, 0unit); 
+                @include QLD-space(padding-left, 7unit !important) ; 
+            }
+            // @include QLD-space(padding, 0 3unit);
+            
+        }
+        // > .qld__body > .container-fluid > row{
+    }
+
+    .qld__left-nav {
+        background-color: var(--QLD-color-light-background__shade);
+        border-right: $QLD-border-width-default solid var(--QLD-color-light-border);
+        display: block;
+        min-width: pxToRem(280);
+        max-width: pxToRem(280);
+
+        &__item-icon {
+            display: inline-flex;
+
+            svg {
+                @include QLD-space(height, 1.5unit);
+                @include QLD-space(width, 1.5unit);
+                @include QLD-space(margin-right, .75unit);
+
+                * {
+                    fill: var(--QLD-color-light-alt-button);
+                }
+            }
+        }
+
+        &__item-text {
+            @include QLD-space(font-size, 1unit);
+            @include QLD-space(line-height, 1.5unit);
+        }
+
+        .qld__left-nav__content {
+            border-bottom: $QLD-border-width-thin solid var(--QLD-color-light-border);
+        }
+
+        ul {
+            @include QLD-space(padding, 3.25unit 0 0 0);
+
+            li {
+                border-top: $QLD-border-width-thin solid var(--QLD-color-light-border);
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                position: relative; 
+                margin: 0;
+
+                &.has-child {
+                    > a, > span {
+                        width: calc(100% - 4rem);
+                    }
+                }
+
+                &.active {
+                    > .qld__left-nav__item-link .qld__left-nav__item-icon svg * {
+                        fill: var(--QLD-color-light-heading);
+                        stroke-width: 10px;
+                    }
+
+                    > .qld__left-nav__item-link .qld__left-nav__item-text {
+                        color: var(--QLD-color-light-heading);
+                        font-weight: bold;
+                    }
+                }
+
+                &:not(.active) {
+                    .qld__left-nav__item-link:after {
+                        content: "";
+                        background-color: var(--QLD-color-light-designAccent);
+                        position: absolute;
+                        left: 0;
+                        top: -1px;
+                        height: calc(100% + 1px);
+                        width: pxToRem(6);
+                    }
+                }
+
+                a.qld__left-nav__item-link:hover{
+                    background-color: var(--QLD-color-light-alt-background);
+
+                    .qld__left-nav__item-icon svg * {
+                        fill: var(--QLD-color-light-button__hover);
+                    }
+
+                    .qld__left-nav__item-text {
+                        text-decoration: underline;
+                    }
+
+                    &:after {
+                        background-color: var(--QLD-color-light-button__hover);
+                    }
+                }
+
+                .qld__left-nav__item-link {
+                    @include QLD-space(padding, 1.25unit 1.25unit 1.25unit 1.25unit);
+                    display: flex;
+                    align-items: center;
+                    color: var(--QLD-color-light-text);
+                    text-decoration: none;
+                    position: relative;
+                    flex-grow: 1;
+
+                    &.qld__left-nav__item-link--close {
+                        @include QLD-space(border-top-right-radius, 1unit);
+                    }
+
+                    &.qld__left-nav__item-link--open {
+                        background-color: var(--QLD-color-light-background);
+                        color: var(--QLD-color-light-link);
+                        @include QLD-space(border-top-right-radius, 1unit);
+
+                        .qld__left-nav__item-icon svg * {
+                            fill: var(--QLD-color-light-link);
+                        }
+                    }
+                }
+
+                .qld__left-nav__item-toggle {
+                    position: relative;
+                    @include QLD-space(min-height, 2unit);
+                    @include QLD-space(min-width, 2unit);
+                    background-color: transparent;
+                    @include QLD-space(margin, 0 1unit);
+                    align-self: center;
+                    @include QLD-box-shadow(1);
+                    border: none;
+                    cursor: pointer;
+                    @include QLD-space(border-radius, 50%);
+                    @include QLD-focus();
+
+                    padding: 0;
+
+                    &:hover{
+                        @include QLD-box-shadow(3);
+                    }
+
+                    &:after {
+                        content: ' ';
+                        position: absolute;
+                        @include QLD-space(margin-top, -0.5unit); // Pull it up half of it's height
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        margin: auto;
+                        @include QLD-space(height, 2unit);
+                        @include QLD-space(width, 2unit);
+                        @include QLD-space(border-radius, 50%);
+                        background-color: var(--QLD-color-light-background);
+                        background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light-alt-button));
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        @include QLD-space(background-size, 1unit);
+                        transition: transform 0.25s ease-in;
+                    }
+
+                    &.qld__accordion--closed:after {
+                        transform: rotate(-180deg);
+                    }
+                }
+
+                ul {
+                    background-color: var(--QLD-color-light-background);
+                    flex-basis: 100%;
+                    padding-top: 0;
+
+                    li .qld__left-nav__item-link {
+                        color: var(--QLD-color-light-link);
+                        &:after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        //Dark theme
+        &.qld__main-nav--dark{
+            background-color: var(--QLD-color-dark-background__shade);
+            border-color: var(--QLD-color-dark-border);
+
+            .qld__left-nav__item-icon svg * {
+                fill: var(--QLD-color-dark-alt-button);
+            }
+
+            .qld__left-nav__content {
+                border-color: var(--QLD-color-dark-border);
+            }
+
+            ul li {
+                border-color: var(--QLD-color-dark-border);
+
+                &.active {
+                    .qld__left-nav__item-icon svg * {
+                        fill: var(--QLD-color-dark-heading);
+                    }
+
+                    .qld__left-nav__item-text {
+                        color: var(--QLD-color-dark-heading);
+                    }
+                }
+
+                &:not(.active) .qld__left-nav__item-link:after {
+                    background-color: var(--QLD-color-dark-designAccent);
+                }
+
+                a.qld__left-nav__item-link:hover{
+                    background-color: var(--QLD-color-dark-alt-background);
+
+                    .qld__left-nav__item-icon svg * {
+                        fill: var(--QLD-color-dark-button__hover);
+                    }
+
+                    &:after {
+                        background-color: var(--QLD-color-dark-button__hover);
+                    }
+                }
+
+                .qld__left-nav__item-link {
+                    color: var(--QLD-color-dark-text);
+                    
+                    &.qld__left-nav__item-link--open {
+                        background-color: var(--QLD-color-dark-background);
+                        color: var(--QLD-color-dark-link);
+
+                        .qld__left-nav__item-icon svg * {
+                            fill: var(--QLD-color-dark-link);
+                        }
+                    }
+                }
+
+                ul {
+                    background-color: var(--QLD-color-dark-background);
+
+                    li .qld__left-nav__item-link {
+                        color: var(--QLD-color-dark-link);
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+<div class="qld__left-nav {{site.metadata.mainNavStyle.value}}">
+    <nav aria-label="left navigation" id="left-nav" class="qld__left-nav__content"> 
+        <ul class="qld__link-list">
+            {{#ifCond site.data.assetid '!=' @root.current.data.assetid}}
+            <li>
+                <a class="qld__left-nav__item-link" href="./?a={{site.data.assetid}}">
+                    {{#if site.metadata.mainNavHomeIconShow.value}}
+                    <span class="qld__left-nav__item-icon">
+                        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32" width="32"><path fill="currentColor" d="M277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L384 79.37V56C384 42.75 394.7 31.1 408 31.1H488C501.3 31.1 512 42.75 512 56V192.3L570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002zM480 164.1V64H416V107.6L480 164.1zM96 206.7V432C96 458.5 117.5 480 144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7zM240 320V480H336V320H240z"/></svg> 
+                    </span>
+                    {{/if}}
+                    <span class="qld__left-nav__item-text" data-name="{{asset_short_name}}">Home</span>
+                </a>
+            </li>
+            {{else}}
+            <li class="active" aria-current="page">
+                <span class="qld__left-nav__item-link">
+                    {{#if site.metadata.mainNavHomeIconShow.value}}
+                        <span class="qld__left-nav__item-icon">
+                            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32" width="32"><path fill="currentColor" d="M277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L384 79.37V56C384 42.75 394.7 31.1 408 31.1H488C501.3 31.1 512 42.75 512 56V192.3L570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002zM480 164.1V64H416V107.6L480 164.1zM96 206.7V432C96 458.5 117.5 480 144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7zM240 320V480H336V320H240z"/></svg> 
+                        </span>
+                    {{/if}}
+                    <span class="qld__left-nav__item-text" data-name="{{asset_short_name}}">Home</span>
+                </span>
+            </li>
+            {{/ifCond}}
+            {{#each site.children}}
+                {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+                <li>
+                    <a class="qld__left-nav__item-link" href="{{asset_url}}">
+                        <span class="qld__left-nav__item-text" data-name="{{asset_short_name}}">{{asset_short_name}}
+                        </span>
+                    </a>
+                {{else}}
+                <li class="active" aria-current="page">
+                    <span class="qld__left-nav__item-link">
+                        <span class="qld__left-nav__item-text">{{asset_short_name}}</span>
+                    </span>
+                {{/ifCond}}
+                {{#ifCond ../site.metadata.mainNavMegaMenuShow.value '==' 'true'}}
+                    {{#arrayWith children 'asset_metadata_showInMegaNav' 'true'}}
+                        {{#if this}}
+                            {{#inArray @root.current.lineage 'asset_assetid' ../this.asset_assetid}}
+                                <button class="qld__left-nav__item-toggle" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="true" aria-selected="true" aria-label="Toggle navigation, {{../asset_short_name}}"  ></button>
+                                <ul id="internal-nav-{{../this.asset_assetid}}" class="qld__link-list qld__accordion--open qld__accordion__body">
+                            {{else}}
+                                <button class="qld__left-nav__item-toggle qld__accordion--closed" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, {{../asset_short_name}}"  ></button>
+                                <ul id="internal-nav-{{../this.asset_assetid}}" class="qld__link-list qld__accordion--closed qld__accordion__body" style="display: none;">
+                            {{/inArray}}
+                            {{#each this}}
+                                {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+                                <li>
+                                    <a class="qld__left-nav__item-link" href="{{asset_url}}">
+                                        <span class="qld__left-nav__item-text">
+                                            {{asset_short_name}}
+                                        </span>
+                                    </a>
+                                {{/ifCond}}
+                                {{#ifCond asset_assetid '==' @root.current.data.assetid}}
+                                <li class="active" aria-current="page">
+                                    <span class="qld__left-nav__item-link">
+                                        <span class="qld__left-nav__item-text">
+                                            {{asset_short_name}}
+                                        </span>
+                                    </span>
+                                {{/ifCond}}
+                                </li>
+                            {{/each}}
+                            </ul>  
+                        {{/if}}
+                    {{/arrayWith}}
+                {{/ifCond}}
+                </li>
+            {{/each}}
+        </ul>
+    </nav>
+</div>

package/src/components/left_hand_navigation/js/global.js

@@ -0,0 +1,36 @@
+/**
+ * The left hand nav module
+ * 
+ * @module leftHandNav
+ */
+ (function () {
+    'use strict';
+
+
+    window.addEventListener('DOMContentLoaded', function () {
+
+         // Add toggle event listeners to accordion buttons
+        var itemToggles = document.querySelectorAll('.qld__left-nav__item-toggle');
+        itemToggles.forEach(function(button) {
+            button.addEventListener('click', function () {
+
+                if(button.className.split(' ').indexOf('qld__accordion--closed')>=0){
+
+                    button.parentNode.querySelector('.qld__left-nav__item-link').classList.add('qld__left-nav__item-link--open');
+                    itemToggles.forEach(function (item) {
+                        if(item.className.split(' ').indexOf('qld__accordion--open')>=0){
+                            item.parentNode.querySelector('.qld__left-nav__item-link').classList.remove('qld__left-nav__item-link--open');
+                            QLD.accordion.Close(item);
+                        }
+                    });
+                }else{
+                    button.parentNode.querySelector('.qld__left-nav__item-link').classList.remove('qld__left-nav__item-link--open');
+                }
+
+
+                QLD.accordion.Toggle(button);
+            });
+        });
+    });
+
+}());

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

@@ -0,0 +1,40 @@
+{
+	"component": {
+		"name": "left_hand_navigation",
+		"description": "",
+		"version": "1.0",
+		"status": "In Development",
+		"data": {
+			"assetid": "left_hand_navigation-123",
+			"metadata": {
+				"field1": {
+					"type": "metadata_field_text",
+					"description": "A text field",
+					"friendly_name": "Field 1",
+					"value": "Example text",
+					"required": false,
+					"editable": true
+				},
+				"root_node": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Parent asset (populates 'children' and 'childrenThumbnails')",
+					"value": "123",
+					"required": false,
+					"editable": true
+				},
+				"asset_select": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Assets to link to (populates 'assets')",
+					"value": "1; 2; 3",
+					"required": false,
+					"editable": true
+				}
+			}
+		},
+		"children": [],
+		"childrenThumbnails": [],
+		"assets": []
+	}
+}