@qhealth-design-system/core 1.0.38

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

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

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

@@ -0,0 +1,7 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// {{component_name}}
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__banner_advanced {
+	
+}

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

@@ -0,0 +1,213 @@
+{{#with component.data}}
+
+<!--@@ Banner @@-->
+<section 
+    id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}banner-advanced-{{assetid}}{{/if}}" 
+    class="
+        qld__banner qld__banner__advanced
+        {{#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--dark-alt{{/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_responsive_treatment.value '==' 'crop'}}{{else}}{{#ifCond metadata.hero_image_padding.value '==' 'yes'}}qld__banner--padded{{/ifCond}}{{/ifCond}} 
+        {{#ifCond metadata.hero_image_alignment.value '==' 'page'}}qld__banner--hero-right{{/ifCond}}
+        {{#ifCond metadata.cta_type.value '==' 'icon-tiles'}}{{#if metadata.root_node.value}}qld__banner--nav{{/if}}{{/ifCond}}
+    "
+>
+    <style>
+    
+    {{#ifCond metadata.background_type.value '==' 'image'}}
+        @media (min-width:699px) {
+            #banner-advanced-{{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'}}
+        #banner-advanced-{{assetid}} {
+            background-image: url(./?a={{../site.metadata.defaultBannerTexture.value}});
+        }
+    {{/ifCond}}
+
+    {{#if metadata.background_min_height.value}}
+    @media (min-width:1312px) {
+        #banner-advanced-{{assetid}} {
+            min-height: {{metadata.background_min_height.value}};
+        }
+    }
+    {{/if}}
+
+    </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--dark-alt{{/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 col-md-6 col-lg-5 col-xl-4{{/ifCond}}
+                {{#ifCond metadata.hero_image_responsive_treatment.value '==' 'crop'}}
+                    {{#ifCond metadata.hero_image_alignment.value '==' 'grid'}}col-md-6 col-lg-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 @@-->
+                    {{#ifCond metadata.cta_type.value '==' '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}}
+                    {{/ifCond}}
+
+                     <!--@@ CTA Link List @@-->
+                    {{#ifCond metadata.cta_type.value '==' 'link-list'}}
+                        {{#if metadata.root_node.value}}
+                        
+                        <ul class="qld__card-list qld__card-list--matchheight qld__banner__card-list">
+
+                            {{#eachUpTo ../component.children 3}}
+                            <li class="col-xs-12">
+                                <div class="qld__card qld__card__action qld__card--arrow {{../component.data.metadata.background.value}}
+                                {{#ifCond ../metadata.cta_link_list_card_background.value '==' 'alternate'}}qld__card--alt{{/ifCond}} 
+                                {{#ifCond ../metadata.cta_link_list_card_background.value '==' 'dark'}}qld__card--dark{{/ifCond}} 
+                                {{#ifCond ../metadata.cta_link_list_card_background.value '==' 'dark-alternate'}}qld__card--dark-alt{{/ifCond}}" >
+                                    <div class="qld__card__inner">
+                                        <div class="qld__card__content">
+                                            <div class="qld__card__content-inner">
+                                                <h2 class="qld__card__title qld__display-lg">
+                                                    {{#if metadata.redirect_url}}
+                                                    <a class="qld__card--clickable__link" href="{{metadata.redirect_url.value}}">{{name}}</a>
+                                                    {{else}}
+                                                    <a class="qld__card--clickable__link" href="./?a={{assetid}}">{{name}}</a>
+                                                    {{/if}}
+                                                </h2> 
+                                            </div>
+                                            <div class="qld__card__arrow"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            {{/eachUpTo}}
+                        </ul>
+                        {{/if}}
+                    {{/ifCond}}
+                    
+                </div>
+            </div>
+            
+            <!--@@ Icon tile nav @@-->
+            {{#ifCond metadata.cta_type.value '==' 'icon-tiles'}}
+                {{#if metadata.root_node.value}}
+                <div class="qld__banner__nav {{#ifCond metadata.hero_image_alignment.value '==' 'page'}}qld__banner__nav--fix-right{{/ifCond}}">
+                    <nav class="
+                        qld__tile-nav 
+                        {{#ifCond metadata.cta_icon_tile_background.value '==' 'alternate'}}qld__tile-nav--alt{{/ifCond}} 
+                        {{#ifCond metadata.cta_icon_tile_background.value '==' 'dark'}}qld__tile-nav--dark{{/ifCond}} 
+                        {{#ifCond metadata.cta_icon_tile_background.value '==' 'dark-alternate'}}qld__tile-nav--alt-dark{{/ifCond}}
+                    ">
+                        <ul class="qld__tile-nav__list"> 
+                            {{#eachUpTo ../component.children 4}}
+                            <li class="qld__tile-nav__item"><i class="{{metadata.cardIcon.value}}"></i>{{#if metadata.redirect_url}}<a href="{{metadata.redirect_url.value}}" class="qld__tile-nav__link">{{name}}</a>{{else}}<a href="./?a={{assetid}}" class="qld__tile-nav__link">{{name}}</a>{{/if}}</li>
+                            {{/eachUpTo}}
+                        </ul>
+                    </nav>
+                </div>
+                {{/if}}
+            {{/ifCond}}
+
+        </div>
+    </div>
+</section>
+
+{{/with}}

package/src/components/banner_advanced/js/global.js

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