@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,236 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Breadcrumbs
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__breadcrumbs {
+    width: 100%;
+    
+    * + & {
+        @include QLD-space(margin-top, 1unit);
+    }
+    
+    @include QLD-media(sm) {
+        display: inline-block;
+    }
+    & &__list--desktop{
+        display: none;
+        @include QLD-media(md) {
+            display: inline-block;
+        }
+    }
+    & &__list--mobile{
+        @include QLD-media(md) {
+            display: none;
+        }
+    }
+    
+    > .qld__link-list {
+        margin: 0;
+        padding: 0;
+        @include QLD-fontgrid(xs, nospace);
+        vertical-align: text-bottom;
+
+        @include QLD-media(lg) {
+            @include QLD-fontgrid(sm);
+        }
+        
+        > li {
+            margin: 0; //Intentionally flush with the container, as breadcrumbs are designed to sit on a full viewport width bg.
+            display: none;
+            @include QLD-space(padding, 0.25unit 0);
+
+            a {
+                color: var(--QLD-color-light-link);
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+
+            // .qld__icon{
+            //     @include QLD-space(margin, 0 0.5unit);
+            //     color: var(--QLD-color-light-alt-button);
+            //     @include QLD-space(height, 1unit);
+            // }
+            
+            &:after {
+                content: " ";
+                display: inline-block;
+                @include QLD-space(width, 0.5unit);
+                @include QLD-space(height, 1unit);
+                @include QLD-space(margin, 0 0.5unit);
+                // background-image: QLD-svg-with-fill($QLD-icon-chevron-right, var(--QLD-color-light-alt-button));
+                // background-size: contain;
+                // background-repeat: no-repeat;
+                vertical-align: middle;
+                mask-image: QLD-svguri($QLD-icon-chevron-right);
+                mask-repeat: no-repeat;
+                mask-position: center;
+                background-color: var(--QLD-color-light-alt-button);
+            }
+            
+            &:last-child:after {
+                display: none;
+            }
+            
+            .ie8 &,
+            .lt-ie8 & {
+                &:after {
+                    content: " > ";
+                    display: inline-block;
+                }
+            }
+
+            // Only show last two items on mobile
+            &:nth-last-child(-n + 2) {
+                display: inline-block;
+            }
+
+            @include QLD-media(lg) {
+                display: inline-block;
+            }
+        }
+    }
+
+    &.qld__breadcrumbs--dark,
+    &.qld__breadcrumbs--alt-dark,
+    .qld__body--dark &,
+    .qld__body--dark-alt &,
+    .qld__banner--dark &,
+    .qld__banner--dark-alt &,
+    .qld__banner--dark-alt & {
+        color: var(--QLD-color-dark-text__muted);
+        
+        > .qld__link-list {
+            > li:not(:last-child){
+                &::after{
+                    background-color: var(--QLD-color-dark-alt-button);
+                }
+            }
+
+            > li {
+                a {
+                    color: var(--QLD-color-dark-text);
+                }
+            }
+        }
+    }
+}
+
+.qld__banner__breadcrumbs--mobile {
+    @include QLD-space(padding, 0.5unit 1unit);
+    margin: 0;
+
+    @include QLD-media(md) {
+        display: none;
+    }
+
+    &.qld__breadcrumbs--alt {
+        background-color: var(--QLD-color-light-alt-background);
+    }
+
+    &.qld__breadcrumbs--dark {
+        background-color: var(--QLD-color-dark-background);
+    }
+
+    &.qld__breadcrumbs--alt-dark {
+        background-color: var(--QLD-color-dark-alt-background);
+    }
+
+}
+
+
+.qld__banner__breadcrumbs--desktop {
+    display: none;
+
+    @include QLD-media(md) {
+        @include QLD-space(margin, 0 0 1rem);
+        display: inline-block;
+
+        > .qld__link-list > li {
+            
+            // Hide current page
+            &:last-child {
+                display: none;
+            }
+
+            &:after {
+                content: none;
+            }
+        }   
+    }
+
+    @include QLD-media(lg) {
+        @include QLD-space(margin, 0 0 1.5rem);
+
+        > .qld__link-list > li {
+            display: inline-block;
+
+            &:last-child {
+                display: inline-block;
+            }
+
+            &:before {
+                content: none;
+            }
+
+            &:after {
+                content: " ";
+            }
+        }
+    }
+
+    ~ *:last-child {
+        @include QLD-media(md) {
+            @include QLD-space(margin-bottom, auto);
+        }
+    }
+}
+
+.qld__banner__breadcrumbs--mobile,
+.qld__banner__breadcrumbs--desktop,
+.qld__breadcrumbs__list--mobile {
+    li .qld__icon{
+     color: var(--QLD-color-light-alt-button);
+    }
+    
+    li::before {
+        @include QLD-space(width, 0.5unit);
+        @include QLD-space(height, 1unit);
+        @include QLD-space(margin, 0 0.25unit 0 0);
+        // background-image: QLD-svg-with-fill($QLD-icon-chevron-left, var(--QLD-color-light-alt-button));
+        // background-size: 100%;
+        // background-repeat: no-repeat;
+        // background-size: contain;
+        content: " ";
+        display: inline-block;
+        vertical-align: middle;
+        background-position: center;
+        mask-image: QLD-svguri($QLD-icon-chevron-left);
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: var(--QLD-color-light-alt-button);
+    }
+
+    &.qld__breadcrumbs--dark,
+    .qld__breadcrumbs--alt-dark,
+    .qld__banner--dark &,
+    .qld__banner--dark-alt &,
+    .qld__body--dark &,
+    .qld__body--dark-alt &  {
+
+        li::before{
+            background-color: var(--QLD-color-dark-alt-button);
+           }
+
+        // li::before {
+        //     background-image: QLD-svg-with-fill($QLD-icon-chevron-left, var(--QLD-color-dark-alt-button));
+        // }
+    }
+}
+
+@media print {
+    .qld__breadcrumbs > .qld__link-list > li:after {
+        content: ">" !important;
+        background-image: none !important;
+    }
+}

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

@@ -0,0 +1,29 @@
+{{#ifCond current.data.metadata.displayBreadcrumbs.value '==' 'true'}}
+<nav class="qld__breadcrumbs" aria-label="breadcrumb">
+    <ul class="qld__breadcrumbs__list--desktop qld__link-list qld__link-list--inline">
+        {{#each current.lineage}}        
+            <li {{#if @last}}aria-current="page"{{/if}}>
+                {{#if @last}}
+                    {{asset_short_name}}
+                {{else}}
+                <a href="{{asset_url}}">{{#if @first}}Home{{else}}{{asset_short_name}}{{/if}}</a>
+                {{/if}}
+            </li>
+        {{/each}}
+    </ul>
+    <ul class="qld__breadcrumbs__list--mobile qld__link-list qld__link-list--inline">
+        {{#with (itemAt current.lineage -2)}}
+            <li>
+            <a href="{{asset_url}}">
+                {{#ifCond asset_is_site_asset '==' '1'}}
+                    Home
+                {{else}}
+                   {{asset_short_name}}
+                {{/ifCond}}
+            </a>    
+        </li>
+        {{/with}}
+    </ul>
+</nav>
+
+{{/ifCond}}

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

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

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

@@ -0,0 +1,146 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Callout
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__callout {
+    @include QLD-space(padding, 1.5unit 1unit 1.5unit 1.5unit);
+    background-color: var(--QLD-color-light-background__shade);
+    color: var(--QLD-color-light-text);
+    border-left: $QLD-border-width-thick solid var(--QLD-color-light-designAccent);
+    word-wrap: break-word;
+    @include QLD-space(max-width, $QLD-font-maxwidth);
+
+    & &__heading{
+        margin: 0;
+        color: var(--QLD-color-light-heading);
+
+        &.qld__callout__heading--sronly {
+            @include QLD-sronly();
+    
+            & + * {
+                margin-top: 0;
+            }
+        }
+    }
+
+    p {
+	    margin: 0;
+	}
+
+    a{
+        color: var(--QLD-color-light-link);
+        &:hover{
+            color: var(--QLD-color-light-text);
+        }
+    }
+
+    * + p {
+	    @include QLD-space( margin-top, 1unit );
+	}
+
+    #content > &{
+        @include QLD-space( margin-top, 0unit );
+    }
+
+    * + & {
+	    @include QLD-space( margin-top, 1.5unit );
+        @include QLD-media(lg) {
+            @include QLD-space( margin-top, 2unit );
+        }
+	}
+
+    // Visual treatment for paragraphs following callout
+	& + p {
+	    @include QLD-space( margin-top, 2unit );
+	}
+
+    //Event callout
+    &--calendar-event{
+        .qld__callout--calendar-event__lede {
+            @include QLD-fontgrid( sm, nospace );
+            margin: 0;
+        }
+
+        .qld__callout--calendar-event__time,
+        .qld__callout--calendar-event__name {
+            @include QLD-fontgrid( xl, heading );
+        }
+
+        .qld__callout--calendar-event__time {
+            font-weight: bold;
+        }
+
+        .qld__callout--calendar-event__lede,
+        .qld__callout--calendar-event__time,
+        .qld__callout--calendar-event__name {
+            display: block; // overrides body, depending on markup (eg. using `p`).
+        }
+
+        * + .qld__callout--calendar-event__time,
+        * + .qld__callout--calendar-event__name,
+        * + .qld__callout--calendar-event__lede {
+            @include QLD-space( margin-top, 0.5unit ); // overrides body, to allow for var. text markup.
+        }
+
+    }
+
+    &--alt,
+    .qld__body--alt & {
+        border-left-color: var(--QLD-color-light-designAccent);
+	    background-color: var(--QLD-color-light-alt-background__shade);
+	}
+
+    &--dark,
+    .qld__body--dark & {
+        color: var(--QLD-color-dark-text);
+        background-color: var(--QLD-color-dark-background__shade);
+        border-left-color: var(--QLD-color-dark-designAccent);
+
+        a{
+            color: var(--QLD-color-dark-link);
+
+            &:hover{
+                color: var(--QLD-color-dark-text);
+            }
+        }
+
+        &.qld__callout--calendar-event{
+            .qld__callout--calendar-event__lede {
+                color: var(--QLD-color-dark-text);
+            }
+        }
+    }
+
+    &--dark-alt,
+    .qld__body--dark-alt & {
+        color: var(--QLD-color-dark-text);
+	    background-color: var(--QLD-color-dark-alt-background__shade);
+        border-left-color: var(--QLD-color-dark-designAccent);
+
+        a{
+            color: var(--QLD-color-dark-link);
+
+            &:hover{
+                color: var(--QLD-color-dark-text);
+            }
+        }
+
+        &.qld__callout--calendar-event{
+            .qld__callout--calendar-event__lede {
+                color: var(--QLD-color-dark-text);
+            }
+        }
+    }
+
+
+}
+
+// Print styles
+@media print {
+	.qld__callout {
+        @include QLD-space( border-left-width, 1unit !important );
+        border: 1px solid #000 !important;
+        color: #000 !important;
+        background-color: transparent !important;
+	}
+}

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

@@ -0,0 +1,28 @@
+{{#with component.data}}
+<section class="qld__callout--wrapper qld__body {{metadata.body_background.value}}" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}callout-{{assetid}}{{/if}}">
+    <div class="container-fluid">
+        <div class="qld__callout {{metadata.type.value}} {{metadata.theme.value}} {{metadata.background.value}} ">  
+                {{#ifCond metadata.type.value '==' ''}}
+                    {{#if metadata.heading.value}}
+                    <h3 class="qld__callout__heading {{metadata.heading_visible.value}}">
+                        {{metadata.heading.value}}
+                    </h3>
+                    {{/if}}
+                    {{{metadata.body.value}}}
+                {{else}}
+                    {{#if metadata.calendar_intro.value}}
+                    <p class="qld__callout--calendar-event__lede" >
+                        {{metadata.calendar_intro.value}}
+                    </p>
+                    <time class="qld__callout--calendar-event__time" datetime="{{metadata.calendar_date.value}}" >
+                    {{#formatDate metadata.calendar_date.value ''}}{{/formatDate}}
+                    </time>
+                    <span class="qld__callout--calendar-event__name" >
+                        {{metadata.calendar_name.value}}
+                    </span>
+                    {{/if}}   
+                {{/ifCond}}
+        </div>
+    </div>
+</section>
+{{/with}}

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

@@ -0,0 +1,121 @@
+{
+	"component": {
+		"name": "Callout",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"data": {
+			"assetid": "123",
+			"metadata": {
+				"type": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Type",
+					"value": "",
+					"options": {
+						"": "Callout",
+						"qld__callout--calendar-event": "Calendar"
+					},
+					"required": false,
+					"editable": true
+				},
+				"body_background": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Body Background colour",
+					"value": "",
+					"options": {
+						"": "Light",
+						"qld__body--dark": "Dark"
+					},
+					"required": false,
+					"editable": true
+				},
+				"background": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Callout Background colour",
+					"value": "",
+					"options": {
+						"": "Light",
+						"qld__callout--dark": "Dark"
+					},
+					"required": false,
+					"editable": true
+				},
+				"theme": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Colours",
+					"value": "",
+					"options": {
+						"": "Default",
+						"qld__callout--alt": "Alternate"
+					},
+					"required": false,
+					"editable": true
+				},
+				"heading": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Heading",
+					"value": "Callout heading",
+					"required": false,
+					"editable": true
+				},
+				"heading_visible": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Show heading?",
+					"value": "",
+					"options": {
+						"": "Yes",
+						"qld__callout__heading--sronly": "No"
+					},
+					"required": false,
+					"editable": true
+				},
+				"body": {
+					"type": "metadata_field_wysiwyg",
+					"description": "",
+					"friendly_name": "Body",
+					"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+					"required": false,
+					"editable": true
+				},
+				"calendar_intro": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Calendar intro text",
+					"value": "Calendar intro",
+					"required": false,
+					"editable": true
+				},
+				"calendar_date": {
+					"type": "metadata_field_date",
+					"description": "",
+					"friendly_name": "Calendar date",
+					"value": "2020-01-01",
+					"required": false,
+					"editable": true
+				},
+				"calendar_name": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Calendar date name",
+					"value": "Date name",
+					"required": false,
+					"editable": true
+				},
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}