Minor - Merge pull request #2267 from Garneauma/app-template

Minor - Application template - Initial addition based on a refactoring of CDTS custom CSS and template.
wet-boew · Dec 12, 2023 · 6ba871d · 6ba871d
2 parents 4812c4f + 1def262
commit 6ba871d
Show file tree

Hide file tree

Showing 17 changed files with 590 additions and 7 deletions.
diff --git a/_config.yml b/_config.yml
@@ -40,7 +40,12 @@ global:
     fr:
       - link: "index-fr.html"
         title: "GCWeb"
-
+  applicationName:
+    en: "My application"
+    fr: "Mon application"
+  applicationURL:
+    en: "#"
+    fr: "#"
 #
 # Override include to use
 # includes:

diff --git a/_data/templates.json b/_data/templates.json
@@ -83,6 +83,62 @@
 		]
 	}
 }
+,{
+	"@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": {
+		"docs": [
+			{
+				"title": "Application template documentation",
+				"language": "en",
+				"path": "application-docs-en.html"
+			},
+			{
+				"title": "Documentation du gabarit de page d'application",
+				"language": "fr",
+				"path": "application-docs-fr.html"
+			}
+		],
+		"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,

diff --git a/sites/breadcrumbs/includes/breadcrumbs.html b/sites/breadcrumbs/includes/breadcrumbs.html
@@ -1,5 +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">

diff --git a/sites/footers/includes/footer.html b/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>

diff --git a/sites/header/includes/header.html b/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>
diff --git a/sites/theme.scss b/sites/theme.scss
@@ -200,6 +200,7 @@
 @import "../templates/mobile-centre/base";
 @import "../templates/campaign/base";
 @import "../templates/news/base";
+@import "../templates/application/base";
 
 
 /*! Core - Utilities */
@@ -244,6 +245,7 @@
 	@import "../components/toc/screen-xs-max";
 
 	@import "../templates/campaign/screen-xs-max";
+	@import "../templates/application/screen-xs-max";
 }
 
 /* Small view and under */
@@ -429,6 +431,7 @@
 
 	@import "../templates/pagebrand/print";
 	@import "../templates/campaign/print";
+	@import "../templates/application/print";
 }
 
 /* Testing WCAG Spacing */

diff --git a/templates/application/_base.scss b/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 .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: 10px 0 8px;
+
+		a {
+			color: #fff;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
diff --git a/templates/application/_print.scss b/templates/application/_print.scss
@@ -0,0 +1,11 @@
+/*
+ *
+ * Application template
+ *
+*/
+
+.application-bar {
+	h2 {
+		font-size: 34px;
+	}
+}
diff --git a/templates/application/_screen-xs-max.scss b/templates/application/_screen-xs-max.scss
@@ -0,0 +1,12 @@
+/*
+ *
+ * Application template
+ *
+*/
+
+.application-bar {
+	h2 {
+		font-size: 18px;
+		margin: 12px 0 9px;
+	}
+}
diff --git a/templates/application/application-docs-en.html b/templates/application/application-docs-en.html
@@ -0,0 +1,34 @@
+---
+{
+	"title": "Application template documentation",
+	"language": "en",
+	"altLangPage": "application-docs-fr.html",
+	"dateModified": "2023-11-02"
+}
+---
+
+<dl class="horizontal">
+	<dt>Status</dt>
+	<dd>Stable</dd>
+
+	<dt>Version</dt>
+	<dd>1.0</dd>
+
+	<dt>Type</dt>
+	<dd>Template</dd>
+
+	<dt>Last review</dt>
+	<dd>2023-11-02</dd>
+
+	<dt>Specification</dt>
+	<dd>There is no specification yet</dd>
+</dl>
+
+<h2>Working examples</h2>
+<ul>
+	<li><a href="default-application-en.html">Application page</a></li>
+	<li><a href="application-with-banner-en.html">Page d'application avec bannière informative</a></li>
+</ul>
+
+<h2>Accessiblity</h2>
+<p>No accessiblity conformance report yet.</p>
diff --git a/templates/application/application-docs-fr.html b/templates/application/application-docs-fr.html
@@ -0,0 +1,34 @@
+---
+{
+	"title": "Documentation du gabarit de page d'application",
+	"language": "fr",
+	"altLangPage": "application-docs-en.html",
+	"dateModified": "2023-11-02"
+}
+---
+
+<dl class="horizontal">
+	<dt>Statut</dt>
+	<dd>Stable</dd>
+
+	<dt>Version</dt>
+	<dd>1.0</dd>
+
+	<dt>Type</dt>
+	<dd>Gabarit</dd>
+
+	<dt>Dernière révision</dt>
+	<dd>2023-11-02</dd>
+
+	<dt>Spécification</dt>
+	<dd>Aucune spécification à ce jour.</dd>
+</dl>
+
+<h2>Exemples pratiques</h2>
+<ul>
+	<li><a href="default-application-fr.html">Page d'application</a></li>
+	<li><a href="application-with-banner-fr.html">Application page with informational banner</a></li>
+</ul>
+
+<h2>Accessiblité</h2>
+<p>Aucun rapport sur la conformance en accessibilité à ce jour.</p>
diff --git a/templates/application/application-with-banner-en.html b/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>