@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,41 @@
+<nav class="hidden-print qld__search-pagination" aria-label="pagination">
+    <h2 class="sr-only">Pagination</h2>
+    <ul class="qld__search-pagination__list">
+        {{#each pagination}}
+            {{#ifCond linkType '===' 'last'}}
+                <li class="ellipsis">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__ellipsis"></use></svg>
+                </li>
+            {{/ifCond}}
+
+            
+                {{#ifCond linkType '===' 'prev'}}
+                <li class="prev">
+                    <a href="{{url}}" rel="prev" aria-label="Previous page of results">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__arrow-left"></use></svg>
+                        <span>Back</span>
+                    </a>
+                {{/ifCond}}
+                
+                {{#if label}}
+                <li class="{{linkType}}{{#if isCurrent}} active{{/if}}">
+                    <a href="{{url}}">{{label}}</a></li>
+                {{/if}}
+
+                {{#ifCond linkType '===' 'next'}}
+                <li class="next">
+                    <a href="{{url}}" rel="next" aria-label="Next page of results">
+                    <span>Next</span>
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__arrow-right"></use></svg>
+                    </a>
+                {{/ifCond}}
+            </li>
+        
+            {{#ifCond linkType '===' 'first'}}
+                <li class="ellipsis">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__ellipsis"></use></svg>
+                </li>
+            {{/ifCond}}
+        {{/each}}
+    </ul>
+</nav>

package/src/components/pagination/html/default.html

@@ -0,0 +1,30 @@
+<div id="pagination" class="component" data-component-id="pagination" data-asset-id="123">
+</div>
+<script src="externals/getPagination.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function (e) {
+    var pagination = document.getElementById('pagination');
+    var startRank = parseInt(window.location.search.replace(/^.+start_rank=(\\d)/, '$1') || 1, 10);
+    var resultsSummary = {
+      "fullyMatching": 24,
+      "collapsed": 0,
+      "partiallyMatching": 0,
+      "totalMatching": 24,
+      "estimatedCounts": false,
+      "carriedOverFtd": null,
+      "totalDistinctMatchingUrls": null,
+      "numRanks": 3,
+      "currStart": startRank,
+      "currEnd": startRank + 2,
+      "prevStart": Math.max(startRank - 3, 0),
+      "nextStart": Math.min(startRank + 3, 24),
+      "totalSecurityObscuredUrls": null,
+      "anyUrlsPromoted": false,
+      "resultDiversificationApplied": true
+    };
+
+    if (pagination) {
+      pagination.outerHTML = paginationTemplate({ "pagination": getPagination(resultsSummary, '?') });
+    }
+  });
+</script>

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

@@ -0,0 +1,42 @@
+{
+    "component": {
+        "name": "Pagination",
+        "description": "",
+        "version": "1.0",
+        "status": "Released",
+        "type": "design",
+        "pagination": [{
+            "label": 1,
+            "isCurrent": true,
+            "linkType": "num",
+            "url": "?&start_rank=1"
+        }, {
+            "label": 2,
+            "isCurrent": false,
+            "linkType": "num",
+            "url": "?&start_rank=4"
+        }, {
+            "label": 3,
+            "isCurrent": false,
+            "linkType": "num",
+            "url": "?&start_rank=7"
+        }, {
+            "label": 4,
+            "isCurrent": false,
+            "linkType": "num",
+            "url": "?&start_rank=10"
+        }, {
+            "label": 5,
+            "isCurrent": false,
+            "linkType": "num",
+            "url": "?&start_rank=13"
+        }, {
+            "label": 8,
+            "linkType": "last",
+            "url": "?&start_rank=22"
+        }, {
+            "linkType": "next",
+            "url": "?&start_rank=4"
+        }]
+    }
+}

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

@@ -0,0 +1,48 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Search Box
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+// Search form
+.qld__search {
+
+	&__label {
+		@include QLD-sronly();
+	}
+
+    &__inner{
+        display: flex;
+        width: 100%;
+
+        .qld__text-input{
+            width: 100%;
+        }
+    }
+
+    .twitter-typeahead{
+        flex-grow: 1;
+    }
+
+    .qld__text-input {
+		border-bottom-right-radius: 0;
+		border-right: 0;
+		border-top-right-radius: 0;
+		display: table-cell;
+		max-width: 100%;
+		position: relative;
+		vertical-align: top;
+		width: 100%;
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration { display: none; }
+
+	}
+
+	.qld__btn {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		margin: 0;
+		width:100%;
+	}
+}

package/src/components/search_box/html/component.html

@@ -0,0 +1,11 @@
+{{#with component.data}}
+<form role="search" aria-label="sitewide" class="qld__search {{metadata.background.value}} {{metadata.responsive.value}} {{metadata.width.value}}" action="{{#if metadata.search_page.value}}./?a={{metadata.search_page.value}}{{/if}}">
+    <label for="query-{{assetid}}" class="qld__search__label">{{metadata.search_label.value}}</label>
+    <input type="search" id="query-{{assetid}}" name="{{metadata.query_key.value}}" class="qld__text-input">
+    <div class="qld__search__btn">
+        <button class="qld__btn" type="submit">
+            <span class="qld__search__submit-btn-text">Search</span>
+        </button>
+    </div>
+</form>
+{{/with}}

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

@@ -0,0 +1,73 @@
+{
+	"component": {
+		"name": "Search Box",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"data": {
+			"assetid": "123",
+			"metadata": {
+				"search_page": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Search Page",
+					"value": "123",
+					"required": false,
+					"editable": true
+				},
+				"background": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Background Colour",
+					"value": "",
+					"options": {
+						"": "Light",
+						"qhealth__search--dark": "Dark"
+					},
+					"required": false,
+					"editable": true
+				},
+				"responsive": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Responsive",
+					"value": "",
+					"options": {
+						"": "No",
+						"qhealth__search--responsive": "Yes"
+					},
+					"required": false,
+					"editable": true
+				},
+				"width": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Width",
+					"value": "",
+					"options": {
+						"": "Full Width",
+						"qhealth__search--w50": "Half Width"
+					},
+					"required": false,
+					"editable": true
+				},
+				"search_label": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Search Label",
+					"value": "Search",
+					"required": false,
+					"editable": true
+				},
+				"query_key": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Query Key",
+					"value": "query",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+{{#ifCond current.data.metadata.displayLastUpdated.value '==' 'yes'}}
+    {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} 
+        <section class="qld__body">
+            <div class="container-fluid">
+                <p><strong style="padding-right: 12px;">Last updated:</strong>&nbsp;{{formatDate current.data.updated "F Y"}}</p>
+            </div>
+        </section>
+    {{/ifCond}}
+    {{#ifCond current.data.metadata.pageType.value '==' 'news_detail'}}
+        <section class="qld__body">
+            <div class="container-fluid">
+                <p><strong style="padding-right: 12px;">Last updated:</strong>&nbsp;{{formatDate current.data.updated "F Y"}}</p>
+            </div>
+        </section>
+    {{/ifCond}}
+    {{#ifCond current.data.metadata.pageType.value '==' 'content'}}
+        <section class="qld__body">
+            <div class="container-fluid">
+                <p><strong style="padding-right: 12px;">Last updated:</strong>&nbsp;{{formatDate current.data.updated "F Y"}}</p>
+            </div>
+        </section>
+    {{/ifCond}}
+    {{#ifCond current.data.metadata.pageType.value '==' 'site_search'}} 
+        <section class="qld__body">
+            <div class="container-fluid">
+                <p><strong style="padding-right: 12px;">Last updated:</strong>&nbsp;{{formatDate current.data.updated "F Y"}}</p>
+            </div>
+        </section>
+    {{/ifCond}}
+
+{{/ifCond}}

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

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

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

@@ -0,0 +1,82 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Widgets
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__widgets {
+    @include QLD-space(bottom, 0.75unit);
+    @include QLD-space(right, 0.75unit);
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: 1;
+
+    .qld__btn--floating {
+        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+        display: inline-block;
+    }
+}
+
+.qld__widgets + .qld__footer {
+    @include QLD-space(padding-bottom, 4unit);
+
+    @include QLD-media(xl) {
+        @include QLD-space(padding-bottom, 4unit);
+    }
+}
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Back to top
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+body a.qld__btn.qld__btn--floating.qld__btn--back-to-top {
+    @include QLD-space(margin-top, 0.5unit);
+    background-color: var(--QLD-color-light-background__shade);
+    border-color:  var(--QLD-color-light-background__shade);
+    color: var(--QLD-color-light-link);
+    padding: 0.5rem 1rem;
+    
+    &:after {
+        @include QLD-space( width, 1unit );
+        @include QLD-space( height, 1unit );
+        @include QLD-space( margin, 0 0.25unit );
+        content: '↑';
+        color: var(--QLD-color-light-alt-button);
+        text-decoration: none;
+        display: inline-block;
+        width: auto;
+        height: auto;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: var(--QLD-color-light-alt-background__shade);
+        border-color:  var(--QLD-color-light-alt-background__shade);
+        text-decoration: none;
+
+        &::after{
+            content: '↑';
+            color: var(--QLD-color-light-alt-button__hover);
+        }
+    }
+}
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Quick exit
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+a.qld__btn.qld__btn--floating.qld__btn--quick-exit {
+    padding: 0.5rem 1rem;
+    background-color: var(--QLD-color-light-button);
+    border-color:  var(--QLD-color-light-button);
+    color: var(--QLD-color-light-button__text);
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: var(--QLD-color-light-button__hover);
+        border-color:  var(--QLD-color-light-button__hover);
+        color: var(--QLD-color-light-button__text);
+    }
+}

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

@@ -0,0 +1,19 @@
+{{#ifCond current.data.metadata.displayQuickExit.value '||' site.metadata.siteBackToTopShow.value}}
+<div class="qld__widgets">
+
+    {{#if current.data.metadata.siteQuickExitLink.value}}
+    <a href="{{site.metadata.siteQuickExitUrl.value}}" class="qld__btn qld__btn--floating
+    qld__btn--quick-exit" aria-label="{{site.metadata.siteQuickExitLabel.value}}">
+        <span>{{site.metadata.siteQuickExitLabel.value}}</span>
+    </a>
+    {{/if}}
+
+    {{#if site.metadata.siteBackToTopShow.value}}
+    <a href="#" class="qld__btn qld__btn--floating
+    qld__btn--back-to-top show" aria-label="Back to top">
+        <span>Back to top</span>
+    </a>
+    {{/if}}
+
+</div>
+{{/ifCond}}

package/src/components/widgets/html/default.html

@@ -0,0 +1,4 @@
+<div class="qld__widgets">
+    ${require('../../../components/quick_exit/html/default.html')}
+    ${require('../../../components/back_to_top/html/default.html')}
+</div>