Application: adding application template and examples

_config.yml

@@ -33,7 +33,12 @@ global:
   privacyUrl:
     en: "https://www.canada.ca/en/transparency/privacy.html"
     fr: "https://www.canada.ca/fr/transparence/confidentialite.html"
-
+  applicationName:
+    en: "My application"
+    fr: "Mon application"
+  applicationURL:
+    en: "#"
+    fr: "#"
 #
 # Override include to use
 # includes:

_data/templates.json

@@ -83,6 +83,50 @@
 		]
 	}
 }
+,{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Application",
+		"fr": "Application"
+	},
+	"description": {
+		"en": "Application templates samples.",
+		"fr": "Exemples de pages d'application."
+	},
+	"modified": "2023-10-13",
+	"componentName": "application",
+	"status": "stable",
+	"pages": {
+		"examples": [
+			{
+				"title": "Default application page",
+				"language": "en",
+				"path": "default-application-en.html"
+			},
+			{
+				"title": "Page d'application par défaut",
+				"language": "fr",
+				"path": "default-application-fr.html"
+			},
+			{
+				"title": "Application page with informational banner",
+				"language": "en",
+				"path": "application-with-banner-en.html"
+			},
+			{
+				"title": "Page d'application avec bannière informative",
+				"language": "fr",
+				"path": "application-with-banner-fr.html"
+			}
+		]
+	}
+}
 ,{
 	"@context": {
 		"@version": 1.1,

_data/wet-boew.json

@@ -92,4 +92,4 @@
 		]
 	}
 }
-]
+]

sites/breadcrumbs/includes/breadcrumbs.html

@@ -1,4 +1,4 @@
-{%- unless page.pageclass contains "home" or page.breadcrumbs == false -%}
+{%- unless page.pageclass contains "home" or page.breadcrumbs == false or layout.breadcrumbs == false -%}
 <nav id="wb-bc" property="breadcrumb">
 	<h2>{{ i18nText-breadcrumb }}</h2>
 	<div class="container">

sites/footers/includes/footer.html

@@ -44,7 +44,7 @@
 
 <footer id="wb-info">
 	<h2 class="wb-inv">{{ i18nText-footerSite }}</h2>
-{% unless page.noFooterContextual %}
+{% unless page.noFooterContextual or layout.noFooterContextual %}
 {%- if contextualFooterTitle != "" and site.global.contextualFooter.links[i18nText-lang] or page.contextualFooter.links -%}
 	<div class="gc-contextual">
 		<div class="container">
@@ -72,7 +72,7 @@ <h3>{{ contextualFooterTitle }}</h3>
 	</div>
 {%- endif -%}
 {% endunless %}
-{% unless page.noFooterMain %}
+{% unless page.noFooterMain or layout.noFooterMain %}
 	<div class="gc-main-footer">
 		<div class="container">
 			<nav>
@@ -139,7 +139,7 @@ <h4><span class="wb-inv">{{ i18nText-themeLinks }}</span></h4>
 			<nav>
 				<h3 class="wb-inv">{{ i18nText-gocCorporate }}</h3>
 				<ul>
-					{% unless page.noFooterCorporate %}
+					{% unless page.noFooterCorporate or layout.noFooterCorporate %}
 					{%- if i18nText-lang == "fr" -%}
 					<li><a href="https://www.canada.ca/fr/sociaux.html">Médias sociaux</a></li>
 					<li><a href="https://www.canada.ca/fr/mobile.html">Applications mobiles</a></li>

sites/header/includes/header.html

@@ -5,11 +5,12 @@
 				{% include language/languagetoggle.html %}
 			{% endif %}
 			{% include headers-includes/brand.html %}
-			{% unless page.nositesearch %}
+			{% unless page.nositesearch or layout.nositesearch %}
 				{% include headers-includes/sitesearch.html %}
 			{% endunless %}
 		</div>
 	</div>
+	{% unless page.layout == "application" %}
 	<hr>
 	<div class="container">
 		<div class="row">
@@ -29,5 +30,6 @@
 			{%- endif -%}
 		</div>
 	</div>
+	{% endunless %}
 	{% include breadcrumbs/breadcrumbs.html %}
 </header>

sites/theme.scss

@@ -199,6 +199,7 @@
 @import "../templates/mobile-centre/base";
 @import "../templates/campaign/base";
 @import "../templates/news/base";
+@import "../templates/application/base";
 
 
 /*! Core - Utilities */

templates/application/_base.scss

@@ -0,0 +1,51 @@
+/*
+ *
+ * Application template
+ *
+*/
+
+.info-banner {
+	background-color: $alert-info-bg;
+	color: $text-color;
+	font-size: 20px;
+	line-height: 1.65em;
+	padding: 15px 0;
+
+	h2 {
+		float: left;
+		font-size: 1em;
+		line-height: 1.65em;
+		margin: 0 0.25em 0 0;
+
+		&:after {
+			content: ":";
+			margin-left: .125em;
+		}
+	}
+
+	.info-banner-actions {
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+	}
+}
+
+.application-bar {
+	background-color: #38414d;
+	color: #fff;
+	margin-top: 15px;
+
+	h2 {
+		border: none;
+		margin: 12px 0 6px;
+
+		a {
+			color: #fff;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}

templates/application/application-with-banner-en.html

@@ -0,0 +1,67 @@
+---
+{
+	"layout": "application",
+	"title": "Application page with informational banner",
+	"language": "en",
+	"altLangPage": "application-with-banner-fr.html",
+	"dateModified": "2023-10-13",
+	"infoBanner": {
+		"title": "Beta version",
+		"message": "We've made some changes to improve your experience with My Service Canada Account.",
+		"link": {
+			"text": "Learn more about the beta version",
+			"href": "https://www.canada.ca/en",
+			"external": true
+		},
+		"button": {
+			"text": "Try beta version",
+			"href": "https://www.canada.ca/en"
+		}
+	}
+}
+---
+
+{% include alert-community-stable.html %}
+
+<h2>Configuration options (GCWeb Jekyll specific)</h2>
+<ul>
+	<li><code>"infoBanner"</code> (optional, <code>Object</code>): contains the informational banner properties.
+		<ul>
+			<li><code>"title"</code> (mandatory): the banner's title.</li>
+			<li><code>"message"</code> (mandatory): the banner's message.</li>
+			<li><code>"link"</code> (optional, <code>Object</code>): contains the link properties.
+				<ul>
+					<li><code>"text"</code> (mandatory, <code>String</code>): the text of the link that is displayed.</li>
+					<li><code>"href"</code> (mandatory, <code>String</code>): the url of the link that is displayed.</li>
+					<li><code>"external"</code> (optional, <code>Boolean</code>): open the link in a new window.</li>
+				</ul>
+			</li>
+			<li><code>"button"</code>(optional, <code>Object</code>): contains the button properties.
+				<ul>
+					<li><code>"text"</code> (mandatory, <code>String</code>): the text of the button that is displayed.</li>
+					<li><code>"href"</code> (mandatory, <code>String</code>): the url of the button that is displayed.</li>
+					<li><code>"external"</code> (optional, <code>Boolean</code>): open the link in a window.</li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+</ul>
+
+<h3>Code</h3>
+<pre class="wb-prettify prettyprint"><code>{
+	...
+	"infoBanner": {
+		"title": "Beta version",
+		"message": "We've made some changes to improve your experience with My Service Canada Account.",
+		"link": {
+			"text": "Learn more about the beta version",
+			"href": "https://www.canada.ca/en",
+			"external": true
+		},
+		"button": {
+			"text": "Try beta version",
+			"href": "https://www.canada.ca/en"
+		}
+	}
+	...
+}</code></pre>

templates/application/application-with-banner-fr.html

@@ -0,0 +1,67 @@
+---
+{
+	"layout": "application",
+	"title": "Page d'application avec bannière informative",
+	"language": "fr",
+	"altLangPage": "application-with-banner-en.html",
+	"dateModified": "2023-10-13",
+	"infoBanner": {
+		"title": "Version bêta",
+		"message": "Nous avons apporté quelques changements pour améliorer votre expérience avec Mon dossier Service Canada.",
+		"link": {
+			"text": "En savoir plus sur la version bêta",
+			"href": "https://www.canada.ca/fr",
+			"external": true
+		},
+		"button": {
+			"text": "Essayez la version bêta",
+			"href": "https://www.canada.ca/fr"
+		}
+	}
+}
+---
+
+{% include alert-community-stable.html %}
+
+<h2>Options de configuration (spécifique à GCWeb Jekyll)</h2>
+<ul>
+	<li><code>"infoBanner"</code> (optionnel, <code>Object</code>): contient les propriétés de la bannière d'information.
+		<ul>
+			<li><code>"title"</code> (obligatoire): le titre de la bannière.</li>
+			<li><code>"message"</code> (obligatoire): le message de la bannière.</li>
+			<li><code>"link"</code> (optionnel, <code>Object</code>): contient les propriétés du lien.
+				<ul>
+					<li><code>"text"</code> (obligatoire, <code>String</code>): le texte du lien qui s'affiche.</li>
+					<li><code>"href"</code> (obligatoire, <code>String</code>): l'url du lien qui s'affiche.</li>
+					<li><code>"external"</code> (optionnel, <code>Boolean</code>): ouvrir le lien dans une nouvelle fenêtre.</li>
+				</ul>
+			</li>
+			<li><code>"button"</code>(optionnel, <code>Object</code>): contient les propriétés du bouton.
+				<ul>
+					<li><code>"text"</code> (obligatoire, <code>String</code>): le texte du bouton qui s'affiche.</li>
+					<li><code>"href"</code> (obligatoire, <code>String</code>): l'url du bouton qui s'affiche.</li>
+					<li><code>"external"</code> (optionnel, <code>Boolean</code>): ouvrir le lien dans une nouvelle fenêtre.</li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+</ul>
+
+<h3>Code</h3>
+<pre class="wb-prettify prettyprint"><code>{
+	...
+	"infoBanner": {
+		"title": "Version bêta",
+		"message": "&lt;strong>Beta version&lt;/strong>: We've made some changes to improve your experience with My Service Canada Account.",
+		"link": {
+			"text": "Learn more about the beta version",
+			"href": "https://www.canada.ca/en",
+			"external": true
+		},
+		"button": {
+			"text": "Try beta version",
+			"href": "https://www.canada.ca/en"
+		}
+	}
+	...
+}</code></pre>

templates/application/default-application-en.html

@@ -0,0 +1,41 @@
+---
+{
+	"layout": "application",
+	"title": "Application page",
+	"language": "en",
+	"altLangPage": "default-application-fr.html",
+	"dateModified": "2023-10-13"
+}
+---
+
+{% include alert-community-stable.html %}
+
+<h2>Configuration options (GCWeb Jekyll specific)</h2>
+<ul>
+	<li><code>"applicationName"</code> (mandatory, <code>Object</code>): contains the application name for all languages.
+		<ul>
+			<li><code>"en"</code> (mandatory): the English application name.</li>
+			<li><code>"fr"</code> (mandatory): the French application name.</li>
+		</ul>
+	</li>
+	<li><code>"applicationURL"</code> (mandatory, <code>Object</code>): contains the application URL for all languages.
+		<ul>
+			<li><code>"en"</code> (mandatory): the English application URL.</li>
+			<li><code>"fr"</code> (mandatory): the French application URL.</li>
+		</ul>
+	</li>
+</ul>
+
+<h3>Code</h3>
+<pre class="wb-prettify prettyprint"><code>{
+	...
+	"applicationName": {
+		"en": "My application",
+		"fr": "Mon application"
+	}
+	"applicationURL": {
+		"en": "/",
+		"fr": "/"
+	}
+	...
+}</code></pre>