@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,165 @@
+{{#with component.data}}
+
+<!--@@ Banner @@-->
+<section 
+    id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}banner-intermediate-{{assetid}}{{/if}}" 
+    class="
+        qld__banner qld__banner__intermediate
+        {{#ifCond metadata.background_colour.value '==' 'alternate'}}qld__banner--alt{{/ifCond}} 
+        {{#ifCond metadata.background_colour.value '==' 'dark'}}qld__banner--dark{{/ifCond}} 
+        {{#ifCond metadata.background_colour.value '==' 'dark-alternate'}}qld__banner--alt-dark{{/ifCond}} 
+        {{#ifCond metadata.breadcrumbs_display.value '==' 'yes'}}qld__banner--breadcrumbs{{/ifCond}}
+        
+        {{#ifAny metadata.hero_image.value metadata.background_image_sm.value}}qld__banner--has-hero{{/ifAny}}
+        {{#ifCond metadata.hero_image_alignment.value '==' 'page'}}qld__banner--hero-right{{/ifCond}}
+        {{#ifCond metadata.hero_image_responsive_treatment.value '==' 'crop'}}{{else}}{{#ifCond metadata.hero_image_padding.value '==' 'yes'}}qld__banner--padded{{/ifCond}}{{/ifCond}} 
+    "
+>
+
+    <style>
+    
+    {{#ifCond metadata.background_type.value '==' 'image'}}
+        @media (min-width:699px) {
+            #banner-{{assetid}} {
+                background-image: url(./?a={{metadata.background_image_lg.value}});
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position-x: {{metadata.background_image_alignment.value}};
+            }
+        }
+    {{/ifCond}}
+
+    {{#ifCond metadata.background_type.value '==' 'texture'}}
+        {{#ifCond metadata.background_colour.value '==' 'light'}}
+        #banner-{{assetid}} {
+            background-image: url(./?a={{../site.metadata.defaultBannerTexture.value}});
+        }
+        {{/ifCond}}
+        {{#ifCond metadata.background_colour.value '==' 'alternate'}}
+        #banner-{{assetid}} {
+            background-image: url(./?a={{../site.metadata.defaultBannerTexture.value}});
+        }
+        {{/ifCond}}
+        {{#ifCond metadata.background_colour.value '==' 'dark'}}
+         #banner-{{assetid}} {
+            background-image: url(./?a={{../site.metadata.defaultBannerTextureDark.value}});
+        }
+        {{/ifCond}}
+        {{#ifCond metadata.background_colour.value '==' 'dark-alternate'}}
+         #banner-{{assetid}} {
+            background-image: url(./?a={{../site.metadata.defaultBannerTextureDark.value}});
+        }
+        {{/ifCond}}
+    {{/ifCond}}
+
+    </style>
+
+    <!--@@ Breadcrumbs - Mobile @@-->
+    {{#ifCond metadata.breadcrumbs_display.value '==' 'yes'}}
+    <nav class="qld__breadcrumbs {{#ifCond metadata.background_colour.value '==' 'alternate'}}qld__breadcrumbs--alt{{/ifCond}} 
+    {{#ifCond metadata.background_colour.value '==' 'dark'}}qld__breadcrumbs--dark{{/ifCond}} 
+    {{#ifCond metadata.background_colour.value '==' 'dark-alternate'}}qld__breadcrumbs--alt-dark{{/ifCond}} qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
+        <ul class="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}}
+
+    <div class="container-fluid">
+        <div class="qld__banner__wrapper">
+            
+            <div class="qld__banner__main row">
+
+                <!--@@ Hero image @@-->
+                <div class="qld__banner__hero col-xs-12  
+                {{#ifCond metadata.hero_image_responsive_treatment.value '==' 'scale'}}
+                qld__banner__hero--scale {{#ifCond metadata.hero_image_alignment.value '==' 'grid'}}col-md-6 col-lg-5 col-xl-5{{else}}col-md-6 col-lg-5 col-xl-5{{/ifCond}}
+                {{/ifCond}}
+                {{#ifCond metadata.hero_image_responsive_treatment.value '==' 'crop'}}
+                    {{#ifCond metadata.hero_image_alignment.value '==' 'grid'}}col-md-6 col-lg-5 col-xl-5{{else}}col-md-7 col-lg-5 col-xl-4{{/ifCond}}
+                {{/ifCond}}">
+
+                    <div class="qld__banner__image {{#if metadata.background_image_sm.value}}qld__banner__image--mobile-hide{{/if}}" style="background-image: url('./?a={{metadata.hero_image.value}}');"></div>
+                    {{#if metadata.background_image_sm.value}}
+                    <div class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide" style="background-image: url('./?a={{metadata.background_image_sm.value}}');"></div>
+                    {{/if}}
+                </div>
+                
+                <div class="qld__banner__content col-xs-12 {{#if metadata.hero_image.value}}col-md-6 col-lg-7{{else}}col-md-8 col-lg-8{{/if}}">
+        
+                    <!--@@ Breadcrumbs - Desktop @@-->
+                    {{#ifCond metadata.breadcrumbs_display.value '==' 'yes'}}
+                        <nav class="qld__breadcrumbs 
+                        {{#ifCond metadata.background_colour.value '==' 'dark'}}qld__breadcrumbs--dark{{/ifCond}} 
+                        {{#ifCond metadata.background_colour.value '==' 'dark-alternate'}}qld__breadcrumbs--dark{{/ifCond}} 
+                        qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb">
+                            <ul class="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>
+                        </nav>
+                    {{/ifCond}}
+
+                    <!--@@ Heading(s) @@-->
+                    {{#ifCond metadata.heading_background_display.value '==' 'yes'}}
+                        <h1 class="qld__banner__heading__wrapper">
+                            {{#if metadata.heading_primary.value}}
+                            <span class="qld__banner__heading qld__banner__heading--dark">{{metadata.heading_primary.value}}</span>
+                            {{/if}}
+
+                            {{#if metadata.heading_secondary.value}}
+                            <span class="qld__banner__heading qld__banner__heading--light">{{metadata.heading_secondary.value}}</span>
+                            {{/if}}
+                        </h1>
+                    
+                    {{else}}
+                        <h1>{{metadata.heading_primary.value}}</h1>
+                    
+                    {{/ifCond}}
+
+                    <!--@@ Abstract @@-->
+                    {{#if metadata.abstract.value}}
+                        <div class="qld__banner__content--body qld__abstract">{{{metadata.abstract.value}}}</div>
+                    {{/if}}
+                        
+                    <!--@@ CTA Buttons @@-->
+                    {{#ifAny metadata.cta_button_primary_text.value metadata.cta_button_secondary_text.value}}
+                        <ul class="qld__banner__content--cta qld__link-list">
+                            {{#if metadata.cta_button_primary_text.value}}
+                            <li>
+                                <a class="qld__btn qld__btn--primary" data-type="class" href="./?a={{metadata.cta_button_primary_link.value}}" >{{metadata.cta_button_primary_text.value}}</a>
+                            </li>
+                            {{/if}}
+
+                            {{#if metadata.cta_button_secondary_text.value}}
+                            <li>
+                                <a class="qld__btn qld__btn--secondary" data-type="class" href="./?a={{metadata.cta_button_secondary_link.value}}" >{{metadata.cta_button_secondary_text.value}}</a>
+                            </li>
+                            {{/if}}
+                        </ul> 
+                    {{/ifAny}}
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{{/with}}

package/src/components/banner_intermediate/js/global.js

@@ -0,0 +1,6 @@
+(function () {
+    'use strict';
+
+
+    
+}());

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

@@ -0,0 +1,248 @@
+{
+	"component": {
+		"name": "Banner - Intermediate",
+		"description": "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+		"version": "0",
+		"status": "In Development",
+		"data": {
+            "assetid": "123",
+			"metadata": {
+				"breadcrumbs_display": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Display Breadcrumbs?",
+					"value": "yes",
+					"options": {
+						"": "No",
+						"yes": "Yes"
+					},
+					"required": false,
+					"editable": true
+				},
+				"heading_primary": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Primary Heading",
+					"value": "Banner Intermediate",
+					"required": false,
+					"editable": true
+				},
+				"heading_secondary": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Secondary Heading",
+					"value": "Heading Secondary",
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": false,
+                        "operator": "OR",
+                        "rules": [{
+                            "field": "heading_background_display",
+                            "operator": "equals",
+                            "value": ""
+                        }]
+                    }
+				},
+				"heading_background_display": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Display block background?",
+					"value": "no",
+					"options": {
+						"": "No",
+						"yes": "Yes"
+					},
+					"required": false,
+					"editable": true
+				},
+				"abstract": {
+					"type": "metadata_field_wysiwyg",
+					"description": "",
+					"friendly_name": "Abstract",
+					"value": "<p>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.</p>",
+					"required": false,
+					"editable": true
+				},
+				"hero_image": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Image",
+					"value2": "/mysource_files/banner.png",
+					"value": "https://via.placeholder.com/782x520",
+					"required": false,
+					"editable": true
+				},
+				"hero_image_responsive_treatment": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Responsive treatment",
+					"value": "crop",
+					"options": {
+						"crop": "Crop",
+						"scale": "Scale"
+					},
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": false,
+                        "operator": "AND",
+                        "rules": [{
+                            "field": "hero_image",
+                            "operator": "equals",
+                            "value": ""
+                        }]
+                    }
+				},
+				"hero_image_padding": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Display Padding?",
+					"value": "no",
+					"options": {
+						"no": "No",
+						"yes": "Yes"
+					},
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": false,
+                        "operator": "OR",
+                        "rules": [{
+                            "field": "hero_image",
+                            "operator": "equals",
+                            "value": ""
+                        }, {
+                            "field": "hero_image_responsive_treatment",
+                            "operator": "equals",
+                            "value": "crop"
+                        }]
+                    }
+				},
+				"background_type": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Background type",
+					"value": "image",
+					"options": {
+						"colour": "Colour",
+						"texture": "Texture",
+						"image": "Background Image"
+					},
+					"required": false,
+					"editable": true
+				},
+				"background_colour": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Background Colour",
+					"value": "dark",
+					"options": {
+						"light": "Light",
+						"alternate": "Alternate",
+						"dark": "Dark",
+						"dark-alternate": "Dark Alternate"
+					},
+					"required": false,
+					"editable": true
+				},
+				"background_image_sm": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Background Image - Mobile",
+					"value": "/mysource_files/banner-bg.png",
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": true,
+                        "operator": "AND",
+                        "rules": [{
+                            "field": "background_type",
+                            "operator": "equals",
+                            "value": "image"
+                        }]
+                    }
+				},
+				"background_image_lg": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Background Image - Desktop and Tablet",
+					"value": "/mysource_files/banner-bg.png",
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": true,
+                        "operator": "AND",
+                        "rules": [{
+                            "field": "background_type",
+                            "operator": "equals",
+                            "value": "image"
+                        }]
+                    }
+				},
+				"background_image_alignment": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Background alignment",
+					"value": "center",
+					"options": {
+						"left": "Left",
+						"right": "Right",
+						"center": "Center"
+					},
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": true,
+                        "operator": "AND",
+                        "rules": [{
+                            "field": "background_type",
+                            "operator": "equals",
+                            "value": "image"
+                        }]
+                    }
+				},
+				"cta_button_primary_text": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Primary Button Text",
+					"value": "Primary Button",
+					"required": false,
+					"editable": true
+				},
+				"cta_button_primary_link": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Primary Button Link",
+					"value": "#",
+					"required": false,
+					"editable": true
+				},
+				"cta_button_secondary_text": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Secondary Button Text",
+					"value": "Secondary Button",
+					"required": false,
+					"editable": true
+				},
+				"cta_button_secondary_link": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Secondary Button Link",
+					"value": "#",
+					"required": false,
+					"editable": true
+				},
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,16 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Body
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+body {
+    z-index: 1;
+
+    @include QLD-media( md ) {
+        z-index: 2;
+    }
+
+    @include QLD-media( lg ) {
+        z-index: 3;
+    }
+}

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

@@ -0,0 +1,5 @@
+<section class="qld__body {{component.data.metadata.background.value}} {{component.data.metadata.body_width.value}}" id="{{#if component.data.metadata.id_field.value}}{{component.data.metadata.id_field.value}}{{else}}body-{{component.data.assetid}}{{/if}}">
+    <div class="container-fluid">
+        {{{content}}}
+    </div>
+</section>

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

@@ -0,0 +1,46 @@
+{
+	"component": {
+		"name": "Body",
+		"description": "",
+		"version": "0",
+		"status": "In Development",
+		"data": {
+			"assetid": "123",
+			"metadata": {
+				"background": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Card background",
+					"value": "",
+					"options": {
+						"": "Light",
+						"qld__body--dark": "Dark",
+						"qld__body--alt": "Alternate"
+					},
+					"required": false,
+					"editable": true
+				},
+				"body_width": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Body width",
+					"value": "qld__body--full-width",
+					"options": {
+						"qld__body--half-width":"Half-width",
+						"qld__body--full-width": "Full-width"
+					},
+					"required": false,
+					"editable": true
+				},
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}