@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,54 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// In Page Navigation
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__inpage-nav-links {
+    @include QLD-fontgrid(sm);
+    @include QLD-space(padding-left, 1.5unit);
+    border-left: $QLD-border-width-thick solid var(--QLD-color-light-link);
+
+    & &__heading{
+        @include QLD-fontgrid(sm, heading);
+    }
+    
+    * + & {
+        @include QLD-space(margin-top, 2.3125unit);
+    }
+    
+    .qld__body & > ul,
+    .qld__body & > ol {
+        @include QLD-space(margin-top, 0.75unit);
+        list-style-type: none;
+        padding: 0;
+        
+        li {
+            margin: 0;
+        }
+        
+        * + li {
+            margin-left: 0;
+        }
+        li + li{
+            @include QLD-space(margin-top, 0.25unit);
+        }
+    }
+    
+    .qld__body--dark &{
+        border-color: var(--QLD-color-dark-button);
+    }
+    
+}
+
+
+.qld__inpage-nav-section {
+    position: relative;
+    @include QLD-space(padding-right, 8unit);
+}
+
+.qld__inpage-nav-section-link {
+    @include QLD-fontgrid(xs, nospace);
+    @include QLD-space(top, 0.25unit);
+    position: absolute;
+    right: 0;
+    font-weight: normal;
+}

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

@@ -0,0 +1,17 @@
+{{!-- {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} --}}
+<section class="qld__body">
+    <div class="container-fluid">
+{{!-- {{/ifCond}}        --}}
+
+    <nav class="qld__inpage-nav-links" aria-label="In page navigation" data-headingType="{{component.data.metadata.headingType.value}}">
+        <h2 class="qld__inpage-nav-links__heading">
+            {{component.data.metadata.heading.value}}
+        </h2>
+        <ul class="qld__link-list"></ul>
+    </nav>
+
+{{!-- {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} --}}
+</div>
+</section>
+{{!-- {{/ifCond}}     --}}
+

package/src/components/in_page_navigation/js/global.js

@@ -0,0 +1,51 @@
+(function() {
+
+    /**
+     * @module inPageNav
+     */
+    var inPageNav = {};
+
+    /**
+     * Create in page nav from headings
+     * 
+     * @memberof module:inPageNav
+     */
+    inPageNav.init = function() {
+        var navs = document.querySelectorAll('.qld__inpage-nav-links');
+        var mainEl = document.querySelector('main.main');
+        var isLandingPage = mainEl && mainEl.classList.contains('landing');
+
+        // For all In-Page Nav components
+        navs.forEach(function(nav) {
+            
+            var headingSelector = nav.getAttribute('data-headingType') ? nav.getAttribute('data-headingType') : 'h2';
+            var pageContent = isLandingPage ? mainEl : document.getElementById('content');
+            var headings = pageContent.querySelectorAll(headingSelector + ':not(.qld__inpage-nav-links__heading):not(.banner__heading)');
+            var list = nav.querySelector('.qld__link-list');
+            list.innerHTML = '';
+
+            if (headings.length === 0) {
+                nav.style.display = 'none';
+            }
+        
+            // For all headings (with matching data-headingType) in page content
+            headings.forEach(function(heading) {
+                var title = heading.innerText;
+                var id = 'section__' + title.toLowerCase().replace(/\s+/g, '-');
+                heading.setAttribute('id', id);
+                heading.setAttribute('tabindex', -1);
+                var link = '<li><a href="#' + id + '">' + title + '</a></li>';
+                
+                // Append link item if it doesn't already exist in list
+                if (list.querySelector('a[href="#' + id + '"') === null) {
+                    list.insertAdjacentHTML('beforeend', link);
+                }
+            });
+        });
+    }
+
+    QLD.inPageNav = inPageNav;
+
+    // Init In Page Nav on document load
+    document.addEventListener('DOMContentLoaded', QLD.inPageNav.init);
+})();

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

@@ -0,0 +1,35 @@
+{
+	"component": {
+		"name": "In Page Navigation",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"data": {
+			"metadata": {
+				"heading": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Navigation Heading",
+					"value": "On This Page",
+					"required": false,
+					"editable": true
+				},
+				"headingType": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Heading Type",
+					"value": "h2",
+					"options": {
+						"h2": "H2",
+						"h3": "H3",
+						"h4": "H4",
+						"h5": "H5",
+						"h6": "H6"
+					},
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,437 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Internal Navigation
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+$QLD-side-nav-depth: 3 !default;
+$QLD-side-nav-breakpoint: lg !default;
+
+// Mobile side nav spacing
+// .qld__side-nav {
+//     @include QLD-space(margin-bottom, 2.5unit);
+    
+//     @include QLD-media(sm) {
+//         @include QLD-space(margin-bottom, 0unit);
+//     }
+//     @include QLD-media(lg) {
+//         @include QLD-space(margin-right, 1unit);
+//     }
+// }
+
+.qld__side-nav {
+    @include QLD-fontgrid(sm);
+    font-family: $QLD-font;
+    background-color: var(--QLD-color-light-background__shade);
+    border-radius: $QLD-border-radius;
+    overflow: hidden;
+    @include QLD-space(margin-bottom, 2.5unit);
+    
+    @include QLD-media(lg) {
+        @include QLD-space(margin-bottom, 0unit);
+        // @include QLD-space(margin-right, 1unit);
+        border: 0;
+    }
+    
+    @include QLD-media(xl) {
+        @include QLD-space(margin-bottom, 0unit);
+    }
+    a,
+    .active > span {
+        @include QLD-space(padding, 1unit);
+        @include QLD-fontgrid(xs);
+        color: var(--QLD-color-light-text);
+        display: block;
+    }
+    
+    a {
+        text-decoration: none;
+        max-width: 100%;
+        
+        
+        &:hover {
+            text-decoration: underline;
+            text-decoration-skip-ink: auto;
+            background-color: var(--QLD-color-light-alt-background);
+        }
+        
+        @include QLD-focus();
+    }
+    
+    // Link list
+    .qld__link-list {
+        @include QLD-space(
+            border-top,
+            solid 0.0625unit var(--QLD-color-light-designAccent)
+        );
+        padding: 0;
+        margin: 0 !important;
+        
+        li {
+            margin: 0;
+
+            &:first-child{
+                a{
+                    border-top: transparent;
+                }
+            }
+        }
+
+        a,
+        span{
+            border-top:$QLD-border-width-thin solid var(--QLD-color-light-alt-border);
+
+            
+
+        }
+
+        .qld__link-list {
+            @include QLD-space(border-top-width, 0unit);
+
+            li{
+                a,
+                span{
+                    border-top:$QLD-border-width-thin solid var(--QLD-color-light-border);
+                }
+            }
+        }
+    }
+    
+    // Accordion styles
+    .qld__accordion__body {
+        overflow: visible;
+    }
+    
+    .qld__accordion__title {
+        @include QLD-fontgrid(md, heading);
+        color: var(--QLD-color-light-link);
+        font-weight: normal;
+        text-decoration: underline;
+        text-decoration-skip-ink: auto;
+        background-color: inherit;        
+        
+        &:hover {
+            text-decoration: none;
+        }
+        
+        &:focus {
+            outline-offset: -3px;
+        }
+        
+        // Hide the accordion title without javascript
+        .no-js & {
+            display: none;
+        }
+        
+        &::after {
+            background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light-alt-button));
+            margin-top: -.8rem;
+            @include QLD-space(height, 1.5unit);
+        }
+    }
+    
+    .qld__accordion__body-wrapper {
+        border: 0;
+        padding: 0;
+    }
+    
+    // Desktop styles
+    @include QLD-media($QLD-side-nav-breakpoint) {
+        background: transparent;
+        border-radius: 0;
+        overflow: visible;
+        
+        // Open the menu on desktop
+        .qld__accordion__body.qld__accordion--closed {
+            display: block;
+            height: auto;
+        }
+        
+        a:hover {
+            background-color: var(--QLD-color-light-background__shade);
+        }
+        
+        .qld__accordion__title {
+            display: none;
+        }
+    }
+}
+
+// Content inside the side navigation accordion
+.qld__side-nav__content {
+    @include QLD-space(margin, 0 1unit);
+    
+    ul {
+        @include QLD-side-nav-indent(3);
+        @include QLD-side-nav-indent(3, ".active > span");
+    }
+    
+    .active > span {
+        font-weight: bold;
+        color: var(--QLD-color-light-heading);
+    }
+    
+    ul ul ul a,
+    ul ul ul .active > span {
+        &:before {
+            content: " ";
+            @include QLD-space(width, 1unit);
+            @include QLD-space(height, 1unit);
+            @include QLD-space(background-size, 1unit);
+            @include QLD-space(margin-left, -1.5unit);
+            display: block;
+            float: left;
+            background-repeat: no-repeat;
+            background-image: QLD-svguri(
+                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+                    '<path fill="#{ var(--QLD-color-light-border) }" d="M2 10h12v1H2zM2 5h1v5H2z"/>' +
+                    "</svg>"
+            );
+        }
+    }
+    
+    & > ul > li {
+        // border-bottom: 1px solid var(--QLD-color-light-border);
+        
+        &:last-of-type {
+            border: none;
+        }
+    }
+    
+    @include QLD-media($QLD-side-nav-breakpoint) {
+        margin: 0;
+    }
+}
+
+// Side navigation title
+.qld__side-nav .qld__sidenav__title {
+    margin: 0;
+    max-width: 100%;
+    
+    a {
+        @include QLD-fontgrid(sm);
+        color: var(--QLD-color-light-heading);
+        @include QLD-space(
+            border-bottom,
+            solid 0.125unit var(--QLD-color-light-designAccent)
+        );
+        
+
+        @include QLD-media(md) {
+            font-weight: bold;
+        }
+
+        &:hover,
+        &:focus {
+            color: var(--QLD-color-light-heading);
+        }
+    }
+}
+
+// Alternate colour variation
+.qld__side-nav.qld__side-nav--alt,
+.qld__body--alt .qld__side-nav{
+    background-color: var(--QLD-color-light-alt-background__shade);
+    
+    .qld__accordion__title {
+        color: var(--QLD-color-light-heading);
+        background-color: inherit;
+    }
+    
+    a:hover {
+        background: var(--QLD-color-light-alt-background);
+    }
+    
+    @include QLD-media($QLD-side-nav-breakpoint) {
+        background: transparent;
+        
+        a:hover {
+            background-color: var(--QLD-color-light-alt-background__shade);
+        }
+    }
+    
+    .qld__link-list {
+        li {
+            @include QLD-space(
+                border-top,
+                solid 0.0625unit var(--QLD-color-light-alt-border)
+            );
+        }
+    }
+}
+
+// Dark colour variation
+.qld__side-nav.qld__side-nav--dark,
+.qld__body--dark .qld__side-nav {
+    background: var(--QLD-color-dark-background__shade);
+    
+    .qld__accordion__title {
+        color: var(--QLD-color-dark-heading);
+        background-color: inherit;
+    }
+    
+    a {
+        color: var(--QLD-color-dark-text);
+        
+        &:hover {
+            background: var(--QLD-color-dark-alt-background__shade);
+        }
+        
+        @include QLD-focus("dark");
+    }
+    
+    .qld__side-nav__content {
+        .active > span {
+            color: var(--QLD-color-dark-text);
+        }
+        
+        ul ul ul a:before,
+        ul ul ul .active > span:before {
+            background-image: QLD-svguri(
+                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+                    '<path fill="#{ var(--QLD-color-dark-border) }" d="M2 10h12v1H2zM2 5h1v5H2z"/>' +
+                    "</svg>"
+            );
+        }
+        
+        & > ul > li {
+            // border-bottom: 1px solid var(--QLD-color-dark-border);
+            
+            &:last-of-type{
+                border: none;
+            }
+        }
+    }
+    
+    .qld__sidenav__title a {
+        border-color: var(--QLD-color-dark-designAccent);
+        color: var(--QLD-color-dark-text)
+    }
+    
+    @include QLD-media($QLD-side-nav-breakpoint) {
+        background: transparent;
+        
+        a:hover {
+            background-color: var(--QLD-color-dark-background__shade);
+        }
+    }
+    
+    .qld__link-list {
+        @include QLD-space(
+            border-top,
+            solid 0.0625unit var(--QLD-color-dark-designAccent)
+        );
+        padding: 0;
+        margin: 0 !important;
+        
+        li {
+            margin: 0;
+        }
+        
+        .qld__link-list {
+            @include QLD-space(border-top-width, 0unit);
+        }
+    }
+}
+
+// Dark alternative colour variation
+// Dark colour variation
+.qld__side-nav.qld__side-nav--alt-dark,
+.qld__body--dark-alt .qld__side-nav {
+    background: var(--QLD-color-dark-alt-background__shade);
+    
+    .qld__accordion__title {
+        color: var(--QLD-color-dark-heading);
+        background-color: inherit;
+    }
+    
+    a {
+        color: var(--QLD-color-dark-text);
+        
+        &:hover {
+            background: var(--QLD-color-dark-alt-background);
+        }
+        
+        @include QLD-focus("dark");
+    }
+    
+    .qld__side-nav__content {
+        .active > span {
+            color: var(--QLD-color-dark-text);
+        }
+        
+        ul ul ul a:before,
+        ul ul ul .active > span:before {
+            background-image: QLD-svguri(
+                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+                    '<path fill="#{ var(--QLD-color-dark-border) }" d="M2 10h12v1H2zM2 5h1v5H2z"/>' +
+                    "</svg>"
+            );
+        }
+        
+        & > ul > li {
+            border-color: var(--QLD-color-dark-border);
+        }
+    }
+    
+    .qld__sidenav__title a {
+        border-color: var(--QLD-color-dark-designAccent);
+        color: var(--QLD-color-dark-text)
+    }
+    
+    @include QLD-media($QLD-side-nav-breakpoint) {
+        background: transparent;
+        
+        a:hover {
+            background-color: var(--QLD-color-dark-alt-background__shade);
+        }
+    }
+    
+    .qld__link-list {
+        @include QLD-space(
+            border-top,
+            solid 0.0625unit var(--QLD-color-dark-designAccent)
+        );
+        padding: 0;
+        margin: 0 !important;
+        
+        li {
+            margin: 0;
+        }
+        
+        .qld__link-list {
+            @include QLD-space(border-top-width, 0unit);
+        }
+    }
+}
+
+// Print styles
+@media print {
+	.qld__side-nav {
+        background: transparent !important;
+
+        a {
+            color: #000 !important;
+            text-decoration: underline !important;
+
+            &:hover {
+                background: transparent !important;
+            }
+        }
+
+        .qld__accordion__title {
+            display: none;
+        }
+	}
+
+	.qld__side-nav__content {
+
+        ul ul ul a:before {
+            background-image: QLD-svguri( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+            '<path fill="#000" d="M2 10h12v1H2zM2 5h1v5H2z"/>' +
+            '</svg>') !important;
+        }
+
+        & > ul > li {
+            border-color: #000 !important;
+        }
+	}
+}

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

@@ -0,0 +1,57 @@
+<div class="qld__side-nav qld__accordion">
+    <button class="qld__side-nav__toggle qld__accordion__title qld__accordion--closed" aria-controls="nav-default" aria-expanded="false" aria-selected="false" >
+    In {{current.top.asset_name}}
+    </button>
+    <nav aria-label="side navigation" id="nav-default" class="qld__side-nav__content qld__accordion--closed qld__accordion__body"> 
+        <h2 class="qld__sidenav__title">
+            <a href="{{current.top.asset_url}}">{{current.top.asset_name}}</a>
+        </h2>
+        <ul class="qld__link-list">
+        {{#each current.children}}
+            {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+            <li>
+                <a href="{{asset_url}}">{{asset_short_name}}</a>
+            {{/ifCond}}
+            {{#ifCond asset_assetid '==' @root.current.data.assetid}}
+            <li class="active" aria-current="page">
+                <span>{{asset_short_name}}</span>
+            {{/ifCond}}
+            {{#inArray @root.current.lineage 'asset_assetid' asset_assetid}}
+                {{#if children}}
+                    <ul class="qld__link-list">
+                    {{#each children}}
+                        {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+                        <li>
+                            <a href="{{asset_url}}">{{asset_short_name}}</a>
+                        {{/ifCond}}
+                        {{#ifCond asset_assetid '==' @root.current.data.assetid}}
+                        <li class="active" aria-current="page">
+                            <span>{{asset_short_name}}</span>
+                        {{/ifCond}}
+                        {{#inArray @root.current.lineage 'asset_assetid' asset_assetid}}
+                            {{#if children}}
+                                <ul class="qld__link-list">
+                                {{#each children}}
+                                    {{#ifCond asset_assetid '!=' @root.current.data.assetid}}
+                                    <li>
+                                        <a href="{{asset_url}}">{{asset_short_name}}</a>
+                                    {{/ifCond}}
+                                    {{#ifCond asset_assetid '==' @root.current.data.assetid}}
+                                    <li class="active" aria-current="page">
+                                        <span>{{asset_short_name}}</span>
+                                    {{/ifCond}}
+                                    </li>    
+                                {{/each}}
+                                </ul>  
+                            {{/if}}
+                        {{/inArray}}
+                        </li>
+                    {{/each}}
+                    </ul>  
+                {{/if}}
+            {{/inArray}}
+             </li>
+        {{/each}}
+        </ul>
+    </nav>
+</div>

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

@@ -0,0 +1,11 @@
+{
+	"component": {
+		"name": "Internal Navigation",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"type":"design"
+	},
+	"data": {
+	}
+}