@qhealth-design-system/core 1.0.38

package/dist/components/banner_basic/manifest.json

@@ -0,0 +1,151 @@
+{
+	"component": {
+		"name": "Banner - Basic",
+		"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 Basic",
+					"required": false,
+					"editable": true
+				},
+				"abstract": {
+					"type": "metadata_field_wysiwyg",
+					"description": "",
+					"friendly_name": "Abstract",
+					"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+					"required": false,
+					"editable": true
+				},
+				"hero_image": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Image",
+					"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"
+                        }]
+                    }
+				},
+				"hero_image_alignment": {
+					"type": "metadata_field_select",
+					"description": "",
+					"friendly_name": "Align Hero Image",
+					"value": "grid",
+					"options": {
+						"grid": "To Grid",
+						"page": "To Page"
+					},
+					"required": false,
+					"editable": true,
+                    "display_if": {
+                        "show": false,
+                        "operator": "AND",
+                        "rules": [{
+                            "field": "hero_image",
+                            "operator": "equals",
+                            "value": ""
+                        }]
+                    }
+				},
+				"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-alternate",
+					"options": {
+						"light": "Light",
+						"alternate": "Alternate",
+						"dark": "Dark",
+						"dark-alternate": "Dark Alternate"
+					},
+					"required": false,
+					"editable": true
+				},
+				"id_field": {
+					"type": "metadata_field_text",
+					"description": "",
+					"friendly_name": "Id field",
+					"value": "",
+					"required": false,
+					"editable": true
+				}
+			}
+		}
+	}
+}

package/dist/components/banner_basic/presentation.js

@@ -0,0 +1,325 @@
+{"1":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "\n<!--@@ Banner @@-->\n<section id=\""
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"id_field") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.program(4, data, 0, blockParams, depths),"data":data,"loc":{"start":{"line":4,"column":13},"end":{"line":4,"column":104}}})) != null ? stack1 : "")
+    + "\" \n    class=\"\n        qld__banner qld__banner__basic\n        "
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(6, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":7,"column":8},"end":{"line":7,"column":69}}})) != null ? stack1 : "")
+    + "\n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","alternate",{"name":"ifCond","hash":{},"fn":container.program(8, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":8},"end":{"line":8,"column":96}}})) != null ? stack1 : "")
+    + " \n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark",{"name":"ifCond","hash":{},"fn":container.program(10, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":9,"column":8},"end":{"line":9,"column":92}}})) != null ? stack1 : "")
+    + " \n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark-alternate",{"name":"ifCond","hash":{},"fn":container.program(12, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":8},"end":{"line":10,"column":106}}})) != null ? stack1 : "")
+    + " \n        \n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"breadcrumbs_display") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","yes",{"name":"ifCond","hash":{},"fn":container.program(14, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":8},"end":{"line":12,"column":100}}})) != null ? stack1 : "")
+    + "\n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_responsive_treatment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","scale",{"name":"ifCond","hash":{},"fn":container.program(16, data, 0, blockParams, depths),"inverse":container.program(18, data, 0, blockParams, depths),"data":data,"loc":{"start":{"line":13,"column":8},"end":{"line":13,"column":207}}})) != null ? stack1 : "")
+    + " \n        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_alignment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","page",{"name":"ifCond","hash":{},"fn":container.program(21, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":14,"column":8},"end":{"line":14,"column":101}}})) != null ? stack1 : "")
+    + "\n    \"\n\n>\n    <style>\n    \n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_type") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","image",{"name":"ifCond","hash":{},"fn":container.program(23, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":20,"column":4},"end":{"line":29,"column":15}}})) != null ? stack1 : "")
+    + "\n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_type") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","texture",{"name":"ifCond","hash":{},"fn":container.program(25, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":31,"column":4},"end":{"line":52,"column":15}}})) != null ? stack1 : "")
+    + "\n    </style>\n    <!--@@ Breadcrumbs - Mobile @@-->\n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"breadcrumbs_display") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","yes",{"name":"ifCond","hash":{},"fn":container.program(30, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":56,"column":4},"end":{"line":74,"column":15}}})) != null ? stack1 : "")
+    + "    <div class=\"container-fluid\">\n        <div class=\"qld__banner__wrapper\">\n            \n            <div class=\"qld__banner__main row\">\n\n                <!--@@ Hero image @@-->\n                <div class=\"qld__banner__hero col-xs-12  \n                "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_responsive_treatment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","scale",{"name":"ifCond","hash":{},"fn":container.program(42, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":82,"column":16},"end":{"line":82,"column":149}}})) != null ? stack1 : "")
+    + "\n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_responsive_treatment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","crop",{"name":"ifCond","hash":{},"fn":container.program(44, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":83,"column":16},"end":{"line":85,"column":27}}})) != null ? stack1 : "")
+    + "\">\n"
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(49, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":86,"column":20},"end":{"line":88,"column":27}}})) != null ? stack1 : "")
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_image_sm") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(52, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":89,"column":20},"end":{"line":91,"column":27}}})) != null ? stack1 : "")
+    + "                </div>\n                \n                <div class=\"qld__banner__content col-xs-12 "
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(54, data, 0, blockParams, depths),"inverse":container.program(56, data, 0, blockParams, depths),"data":data,"loc":{"start":{"line":94,"column":59},"end":{"line":94,"column":141}}})) != null ? stack1 : "")
+    + "\">\n        \n                    <!--@@ Breadcrumbs - Desktop @@-->\n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"breadcrumbs_display") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","yes",{"name":"ifCond","hash":{},"fn":container.program(58, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":97,"column":20},"end":{"line":114,"column":31}}})) != null ? stack1 : "")
+    + "\n                    <!--@@ Heading(s) @@-->\n                    <h1>"
+    + container.escapeExpression(container.lambda(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"heading_primary") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + "</h1>\n\n                    <!--@@ Abstract @@-->\n"
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"abstract") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(69, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":120,"column":20},"end":{"line":122,"column":27}}})) != null ? stack1 : "")
+    + "                    \n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n\n";
+},"2":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return container.escapeExpression(container.lambda(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"id_field") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0));
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "banner-"
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"assetid") || (depth0 != null ? lookupProperty(depth0,"assetid") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"assetid","hash":{},"data":data,"loc":{"start":{"line":4,"column":86},"end":{"line":4,"column":97}}}) : helper)));
+},"6":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--has-hero";
+},"8":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--alt";
+},"10":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--dark";
+},"12":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--dark-alt";
+},"14":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--breadcrumbs";
+},"16":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--hero-scale";
+},"18":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||container.hooks.helperMissing).call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_padding") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","yes",{"name":"ifCond","hash":{},"fn":container.program(19, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":13,"column":110},"end":{"line":13,"column":196}}})) != null ? stack1 : "");
+},"19":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--padded";
+},"21":function(container,depth0,helpers,partials,data) {
+    return "qld__banner--hero-right";
+},"23":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=container.escapeExpression, alias2=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "        @media (min-width:699px) {\n            #banner-"
+    + alias1(((helper = (helper = lookupProperty(helpers,"assetid") || (depth0 != null ? lookupProperty(depth0,"assetid") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"assetid","hash":{},"data":data,"loc":{"start":{"line":22,"column":20},"end":{"line":22,"column":31}}}) : helper)))
+    + " {\n                background-image: url(./?a="
+    + alias1(alias2(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_image_lg") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + ");\n                background-size: cover;\n                background-repeat: no-repeat;\n                background-position-x: "
+    + alias1(alias2(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_image_alignment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + ";\n            }\n        }\n";
+},"25":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","light",{"name":"ifCond","hash":{},"fn":container.program(26, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":32,"column":8},"end":{"line":36,"column":19}}})) != null ? stack1 : "")
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","alternate",{"name":"ifCond","hash":{},"fn":container.program(26, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":37,"column":8},"end":{"line":41,"column":19}}})) != null ? stack1 : "")
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark",{"name":"ifCond","hash":{},"fn":container.program(28, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":42,"column":8},"end":{"line":46,"column":19}}})) != null ? stack1 : "")
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark-alternate",{"name":"ifCond","hash":{},"fn":container.program(28, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":47,"column":8},"end":{"line":51,"column":19}}})) != null ? stack1 : "");
+},"26":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, helper, alias1=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "        #banner-"
+    + alias1(((helper = (helper = lookupProperty(helpers,"assetid") || (depth0 != null ? lookupProperty(depth0,"assetid") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"assetid","hash":{},"data":data,"loc":{"start":{"line":33,"column":16},"end":{"line":33,"column":27}}}) : helper)))
+    + " {\n            background-image: url(./?a="
+    + alias1(container.lambda(((stack1 = ((stack1 = ((stack1 = (depths[1] != null ? lookupProperty(depths[1],"site") : depths[1])) != null ? lookupProperty(stack1,"metadata") : stack1)) != null ? lookupProperty(stack1,"defaultBannerTexture") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + ");\n        }\n";
+},"28":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, helper, alias1=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "         #banner-"
+    + alias1(((helper = (helper = lookupProperty(helpers,"assetid") || (depth0 != null ? lookupProperty(depth0,"assetid") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"assetid","hash":{},"data":data,"loc":{"start":{"line":43,"column":17},"end":{"line":43,"column":28}}}) : helper)))
+    + " {\n            background-image: url(./?a="
+    + alias1(container.lambda(((stack1 = ((stack1 = ((stack1 = (depths[1] != null ? lookupProperty(depths[1],"site") : depths[1])) != null ? lookupProperty(stack1,"metadata") : stack1)) != null ? lookupProperty(stack1,"defaultBannerTextureDark") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + ");\n        }\n";
+},"30":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "    <nav class=\"qld__breadcrumbs "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","alternate",{"name":"ifCond","hash":{},"fn":container.program(31, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":57,"column":33},"end":{"line":57,"column":126}}})) != null ? stack1 : "")
+    + " \n    "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark",{"name":"ifCond","hash":{},"fn":container.program(33, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":58,"column":4},"end":{"line":58,"column":93}}})) != null ? stack1 : "")
+    + " \n    "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark-alternate",{"name":"ifCond","hash":{},"fn":container.program(35, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":59,"column":4},"end":{"line":59,"column":107}}})) != null ? stack1 : "")
+    + " qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile\" aria-label=\"breadcrumb\">\n        <ul class=\"qld__link-list qld__link-list--inline\">\n"
+    + ((stack1 = lookupProperty(helpers,"with").call(alias1,(lookupProperty(helpers,"itemAt")||(depth0 && lookupProperty(depth0,"itemAt"))||alias2).call(alias1,((stack1 = (depths[1] != null ? lookupProperty(depths[1],"current") : depths[1])) != null ? lookupProperty(stack1,"lineage") : stack1),-2,{"name":"itemAt","hash":{},"data":data,"loc":{"start":{"line":61,"column":20},"end":{"line":61,"column":50}}}),{"name":"with","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":61,"column":12},"end":{"line":71,"column":21}}})) != null ? stack1 : "")
+    + "        </ul>\n    </nav>\n";
+},"31":function(container,depth0,helpers,partials,data) {
+    return "qld__breadcrumbs--alt";
+},"33":function(container,depth0,helpers,partials,data) {
+    return "qld__breadcrumbs--dark";
+},"35":function(container,depth0,helpers,partials,data) {
+    return "qld__breadcrumbs--dark-alt";
+},"37":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                <li>\n                    <a href=\""
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"asset_url") || (depth0 != null ? lookupProperty(depth0,"asset_url") : depth0)) != null ? helper : alias2),(typeof helper === "function" ? helper.call(alias1,{"name":"asset_url","hash":{},"data":data,"loc":{"start":{"line":63,"column":29},"end":{"line":63,"column":42}}}) : helper)))
+    + "\">\n"
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,(depth0 != null ? lookupProperty(depth0,"asset_is_site_asset") : depth0),"==","1",{"name":"ifCond","hash":{},"fn":container.program(38, data, 0),"inverse":container.program(40, data, 0),"data":data,"loc":{"start":{"line":64,"column":24},"end":{"line":68,"column":35}}})) != null ? stack1 : "")
+    + "                    </a>    \n                </li>\n";
+},"38":function(container,depth0,helpers,partials,data) {
+    return "                            Home\n";
+},"40":function(container,depth0,helpers,partials,data) {
+    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                            "
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"asset_short_name") || (depth0 != null ? lookupProperty(depth0,"asset_short_name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"asset_short_name","hash":{},"data":data,"loc":{"start":{"line":67,"column":28},"end":{"line":67,"column":48}}}) : helper)))
+    + "\n";
+},"42":function(container,depth0,helpers,partials,data) {
+    return "qld__banner__hero--scale col-md-6 col-lg-5 col-xl-4";
+},"44":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                    "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||container.hooks.helperMissing).call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image_alignment") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","grid",{"name":"ifCond","hash":{},"fn":container.program(45, data, 0),"inverse":container.program(47, data, 0),"data":data,"loc":{"start":{"line":84,"column":20},"end":{"line":84,"column":141}}})) != null ? stack1 : "")
+    + "\n                ";
+},"45":function(container,depth0,helpers,partials,data) {
+    return "col-md-6 col-lg-5";
+},"47":function(container,depth0,helpers,partials,data) {
+    return "col-md-7 col-lg-5 col-xl-4";
+},"49":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                    <div class=\"qld__banner__image "
+    + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_image_sm") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),{"name":"if","hash":{},"fn":container.program(50, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":87,"column":51},"end":{"line":87,"column":131}}})) != null ? stack1 : "")
+    + "\" style=\"background-image: url('./?a="
+    + container.escapeExpression(container.lambda(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"hero_image") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + "');\"></div>\n";
+},"50":function(container,depth0,helpers,partials,data) {
+    return "qld__banner__image--mobile-hide";
+},"52":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                    <div class=\"qld__banner__image qld__banner__image--desktop-hide\" style=\"background-image: url('./?a="
+    + container.escapeExpression(container.lambda(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_image_sm") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0))
+    + "');\"></div>\n";
+},"54":function(container,depth0,helpers,partials,data) {
+    return "col-md-6 col-lg-7";
+},"56":function(container,depth0,helpers,partials,data) {
+    return "col-md-8 col-lg-8";
+},"58":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                        <nav class=\"qld__breadcrumbs \n                        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark",{"name":"ifCond","hash":{},"fn":container.program(33, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":99,"column":24},"end":{"line":99,"column":113}}})) != null ? stack1 : "")
+    + " \n                        "
+    + ((stack1 = (lookupProperty(helpers,"ifCond")||(depth0 && lookupProperty(depth0,"ifCond"))||alias2).call(alias1,((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"background_colour") : stack1)) != null ? lookupProperty(stack1,"value") : stack1),"==","dark-alternate",{"name":"ifCond","hash":{},"fn":container.program(33, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":100,"column":24},"end":{"line":100,"column":123}}})) != null ? stack1 : "")
+    + " \n                        qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop\" aria-label=\"breadcrumb\">\n                            <ul class=\"qld__link-list qld__link-list--inline\">\n"
+    + ((stack1 = lookupProperty(helpers,"each").call(alias1,((stack1 = (depths[1] != null ? lookupProperty(depths[1],"current") : depths[1])) != null ? lookupProperty(stack1,"lineage") : stack1),{"name":"each","hash":{},"fn":container.program(59, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":103,"column":32},"end":{"line":111,"column":41}}})) != null ? stack1 : "")
+    + "                            </ul>\n                        </nav>\n";
+},"59":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                                    <li "
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(data && lookupProperty(data,"last")),{"name":"if","hash":{},"fn":container.program(60, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":104,"column":40},"end":{"line":104,"column":79}}})) != null ? stack1 : "")
+    + ">\n"
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(data && lookupProperty(data,"last")),{"name":"if","hash":{},"fn":container.program(62, data, 0),"inverse":container.program(64, data, 0),"data":data,"loc":{"start":{"line":105,"column":40},"end":{"line":109,"column":47}}})) != null ? stack1 : "")
+    + "                                    </li>\n";
+},"60":function(container,depth0,helpers,partials,data) {
+    return "aria-current=\"page\"";
+},"62":function(container,depth0,helpers,partials,data) {
+    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                                            "
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"asset_short_name") || (depth0 != null ? lookupProperty(depth0,"asset_short_name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"asset_short_name","hash":{},"data":data,"loc":{"start":{"line":106,"column":44},"end":{"line":106,"column":64}}}) : helper)))
+    + "\n";
+},"64":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                                        <a href=\""
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"asset_url") || (depth0 != null ? lookupProperty(depth0,"asset_url") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"asset_url","hash":{},"data":data,"loc":{"start":{"line":108,"column":49},"end":{"line":108,"column":62}}}) : helper)))
+    + "\">"
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(data && lookupProperty(data,"first")),{"name":"if","hash":{},"fn":container.program(65, data, 0),"inverse":container.program(67, data, 0),"data":data,"loc":{"start":{"line":108,"column":64},"end":{"line":108,"column":117}}})) != null ? stack1 : "")
+    + "</a>   \n";
+},"65":function(container,depth0,helpers,partials,data) {
+    return "Home";
+},"67":function(container,depth0,helpers,partials,data) {
+    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return container.escapeExpression(((helper = (helper = lookupProperty(helpers,"asset_short_name") || (depth0 != null ? lookupProperty(depth0,"asset_short_name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"asset_short_name","hash":{},"data":data,"loc":{"start":{"line":108,"column":90},"end":{"line":108,"column":110}}}) : helper)));
+},"69":function(container,depth0,helpers,partials,data) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "                        <div class=\"qld__banner__content--body qld__abstract\">"
+    + ((stack1 = container.lambda(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,"metadata") : depth0)) != null ? lookupProperty(stack1,"abstract") : stack1)) != null ? lookupProperty(stack1,"value") : stack1), depth0)) != null ? stack1 : "")
+    + "</div>\n";
+},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return ((stack1 = lookupProperty(helpers,"with").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"component") : depth0)) != null ? lookupProperty(stack1,"data") : stack1),{"name":"with","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":0},"end":{"line":130,"column":9}}})) != null ? stack1 : "");
+},"useData":true,"useDepths":true}

package/dist/components/banner_basic/static.html

@@ -0,0 +1,86 @@
+
+<!--@@ Banner @@-->
+<section id="banner-123" 
+    class="
+        qld__banner qld__banner__basic
+        qld__banner--has-hero
+         
+         
+        qld__banner--dark-alt 
+        
+        qld__banner--breadcrumbs
+         
+        
+    "
+
+>
+    <style>
+    
+        @media (min-width:699px) {
+            #banner-123 {
+                background-image: url(./?a=);
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position-x: ;
+            }
+        }
+
+
+    </style>
+    <!--@@ Breadcrumbs - Mobile @@-->
+    <nav class="qld__breadcrumbs  
+     
+    qld__breadcrumbs--dark-alt qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
+        <ul class="qld__link-list qld__link-list--inline">
+                <li>
+                    <a href="/">
+                            Design
+                    </a>    
+                </li>
+        </ul>
+    </nav>
+    <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  
+                
+                    col-md-6 col-lg-5
+                ">
+                    <div class="qld__banner__image " style="background-image: url('./?a=https://via.placeholder.com/782x520');"></div>
+                </div>
+                
+                <div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">
+        
+                    <!--@@ Breadcrumbs - Desktop @@-->
+                        <nav class="qld__breadcrumbs 
+                         
+                        qld__breadcrumbs--dark 
+                        qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb">
+                            <ul class="qld__link-list qld__link-list--inline">
+                                    <li >
+                                        <a href="/home.html">Home</a>   
+                                    </li>
+                                    <li >
+                                        <a href="/">Design</a>   
+                                    </li>
+                                    <li aria-current="page">
+                                            Components
+                                    </li>
+                            </ul>
+                        </nav>
+
+                    <!--@@ Heading(s) @@-->
+                    <h1>Banner Basic</h1>
+
+                    <!--@@ Abstract @@-->
+                        <div class="qld__banner__content--body qld__abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+