Content - WET-464 -> Topic theme with stacked header (#2419)

* WET-464 -> Topic theme with stacked header * Standard * Removing settings.liquid --------- Co-authored-by: Marc-André Garneau <[email protected]>
wet-boew · Aug 27, 2024 · 8d293d1 · 8d293d1
1 parent d5d73d7
commit 8d293d1
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 16 deletions.
diff --git a/_data/templates.json b/_data/templates.json
@@ -1285,10 +1285,10 @@
 		"en": "Topic template examples",
 		"fr": "Exemples de page de sujets"
 	},
-	"modified": "2024-06-10",
+	"modified": "2024-08-27",
 	"componentName": "topic",
 	"status": "stable",
-	"version": "2.0",
+	"version": "2.1",
 	"pages": {
 		"examples": [
 			{
@@ -1301,6 +1301,16 @@
 				"language": "fr",
 				"path": "topic-fr.html"
 			},
+			{
+				"title": "[Topic title with stacked header]",
+				"language": "en",
+				"path": "topic-stackedheader-en.html"
+			},
+			{
+				"title": "[Titre du sujet avec en-tête superposé]",
+				"language": "fr",
+				"path": "topic-stackedheader-fr.html"
+			},
 			{
 				"title": "Theme/Topic page - Demoted",
 				"language": "en",
@@ -1395,6 +1405,39 @@
 					"fr": "Selon le gabarit en date de Janvier 2018 - Implémentation de la version 1 du gabarit de page."
 				}
 			]
+		},
+		{
+			"name": {
+				"en": "Topic page with stacked header",
+				"fr": "Page de sujet avec en-tête superposé"
+			},
+			"status": "stable",
+			"description": {
+				"en": "Use the stacked main page title to display the page's section title as well as the page title.",
+				"fr": "Utilisez le titre de la page principale superposé pour afficher le titre de la section de la page ainsi que le titre de la page."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/mandatory-templates/theme-topic.html",
+				"fr": "https://conception.canada.ca/modeles-obligatoire/theme-sujet.html"
+			},
+			"iteration": "_:iteration_topic_3",
+			"example": [
+				{
+					"en": { "href": "topic-stackedheader-en.html", "text": "Topic page with stacked header" },
+					"fr": { "href": "topic-stackedheader-fr.html", "text": "Page de sujet avec en-tête superposé" }
+				}
+			],
+			"implementation": [
+				"_:implement_topic_stackedheader",
+				"_:implement_topic_aem",
+				"_:implement_topic_1_to_2"
+			],
+			"history": [
+				{
+					"en": "August 2024 - Version 1 of the stacked header variant.",
+					"fr": "août 2024 - Version 1 de la variante d'en-tête superposé."
+				}
+			]
 		}
 	],
 	"implementation": [
@@ -1406,8 +1449,9 @@
 				"fr": "Standard"
 			},
 			"introduction": {
-				"en": "This implementation is meant for developers/publishers adding the template manually.",
-				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
+				"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
+				"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+
 			},
 			"instructions": {
 				"en": [
@@ -1430,8 +1474,9 @@
 				"fr": "Utilisateurs AEM"
 			},
 			"introduction": {
-				"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
-				"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+				"en": "Use the stacked main page title to display the page's section title as well as the page title.",
+				"fr": "Utilisez le titre de la page principale superposé pour afficher le titre de la section de la page ainsi que le titre de la page."
+
 			},
 			"instructions": {
 				"en": [
@@ -1463,6 +1508,30 @@
 					"Veuillez suivre les instructions d'implémentation sous l'onglet «&nbsp;Standard&nbsp;»\"."
 				]
 			}
+		},
+		{
+			"@id": "_:implement_topic_stackedheader",
+			"iteration": "_:iteration_topic_3",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the template manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
+			},
+			"instructions": {
+				"en": [
+					"Refer to the working example and guidance for more information on how to implement this page template."
+				],
+				"fr": [
+					"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
+				]
+			},
+			"ajaxSourceCode": {
+				"en": "topic-stackedheader-en.html main > *:not(.pagedetails)",
+				"fr": "topic-stackedheader-fr.html main > *:not(.pagedetails)"
+			}
 		}
 	],
 	"iteration": [

diff --git a/templates/topic/index.json-ld b/templates/topic/index.json-ld
@@ -14,10 +14,10 @@
 		"en": "Topic template examples",
 		"fr": "Exemples de page de sujets"
 	},
-	"modified": "2024-06-10",
+	"modified": "2024-08-27",
 	"componentName": "topic",
 	"status": "stable",
-	"version": "2.0",
+	"version": "2.1",
 	"pages": {
 		"examples": [
 			{
@@ -30,6 +30,16 @@
 				"language": "fr",
 				"path": "topic-fr.html"
 			},
+			{
+				"title": "[Topic title with stacked header]",
+				"language": "en",
+				"path": "topic-stackedheader-en.html"
+			},
+			{
+				"title": "[Titre du sujet avec en-tête superposé]",
+				"language": "fr",
+				"path": "topic-stackedheader-fr.html"
+			},
 			{
 				"title": "Theme/Topic page - Demoted",
 				"language": "en",
@@ -124,6 +134,39 @@
 					"fr": "Selon le gabarit en date de Janvier 2018 - Implémentation de la version 1 du gabarit de page."
 				}
 			]
+		},
+		{
+			"name": {
+				"en": "Topic page with stacked header",
+				"fr": "Page de sujet avec en-tête superposé"
+			},
+			"status": "stable",
+			"description": {
+				"en": "Use the stacked main page title to display the page's section title as well as the page title.",
+				"fr": "Utilisez le titre de la page principale superposé pour afficher le titre de la section de la page ainsi que le titre de la page."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/mandatory-templates/theme-topic.html",
+				"fr": "https://conception.canada.ca/modeles-obligatoire/theme-sujet.html"
+			},
+			"iteration": "_:iteration_topic_3",
+			"example": [
+				{
+					"en": { "href": "topic-stackedheader-en.html", "text": "Topic page with stacked header" },
+					"fr": { "href": "topic-stackedheader-fr.html", "text": "Page de sujet avec en-tête superposé" }
+				}
+			],
+			"implementation": [
+				"_:implement_topic_stackedheader",
+				"_:implement_topic_aem",
+				"_:implement_topic_1_to_2"
+			],
+			"history": [
+				{
+					"en": "August 2024 - Version 1 of the stacked header variant.",
+					"fr": "août 2024 - Version 1 de la variante d'en-tête superposé."
+				}
+			]
 		}
 	],
 	"implementation": [
@@ -135,8 +178,9 @@
 				"fr": "Standard"
 			},
 			"introduction": {
-				"en": "This implementation is meant for developers/publishers adding the template manually.",
-				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
+				"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
+				"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+
 			},
 			"instructions": {
 				"en": [
@@ -159,8 +203,9 @@
 				"fr": "Utilisateurs AEM"
 			},
 			"introduction": {
-				"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
-				"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+				"en": "Use the stacked main page title to display the page's section title as well as the page title.",
+				"fr": "Utilisez le titre de la page principale superposé pour afficher le titre de la section de la page ainsi que le titre de la page."
+
 			},
 			"instructions": {
 				"en": [
@@ -192,6 +237,30 @@
 					"Veuillez suivre les instructions d'implémentation sous l'onglet «&nbsp;Standard&nbsp;»\"."
 				]
 			}
+		},
+		{
+			"@id": "_:implement_topic_stackedheader",
+			"iteration": "_:iteration_topic_3",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the template manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
+			},
+			"instructions": {
+				"en": [
+					"Refer to the working example and guidance for more information on how to implement this page template."
+				],
+				"fr": [
+					"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
+				]
+			},
+			"ajaxSourceCode": {
+				"en": "topic-stackedheader-en.html main > *:not(.pagedetails)",
+				"fr": "topic-stackedheader-fr.html main > *:not(.pagedetails)"
+			}
 		}
 	],
 	"iteration": [

diff --git a/templates/topic/topic-doc-en.html b/templates/topic/topic-doc-en.html
@@ -7,3 +7,4 @@
 layout: documentation
 index_json: index.json-ld
 ---
+{%- include /alert-softlaunch.html genre="m" component="topic template" version="2" -%}
diff --git a/templates/topic/topic-doc-fr.html b/templates/topic/topic-doc-fr.html
@@ -7,3 +7,4 @@
 layout: documentation
 index_json: index.json-ld
 ---
+{%- include /alert-softlaunch.html genre="m" component="gabarit de sujet" version="2" -%}
diff --git a/templates/topic/topic-en.html b/templates/topic/topic-en.html
@@ -3,13 +3,13 @@
 layout: no-container
 language: "en"
 altLangPage: "topic-fr.html"
-dateModified: "2024-06-10"
+dateModified: "2024-08-27"
 ---
 
 <div class="container">
 	<div class="row">
 		<div class="col-md-6">
-			<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+			{%- include main-page-title/main-page-title.html -%}
 			<p>1-2 sentences that describe the topics and top tasks that can be accessed on this page.</p>
 		</div>
 		<div class="col-md-6 hidden-sm hidden-xs">

diff --git a/templates/topic/topic-fr.html b/templates/topic/topic-fr.html
@@ -3,13 +3,13 @@
 layout: no-container
 language: "fr"
 altLangPage: "topic-en.html"
-dateModified: "2024-06-10"
+dateModified: "2024-08-27"
 ---
 
 <div class="container">
 	<div class="row">
 		<div class="col-md-6">
-			<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+			{%- include main-page-title/main-page-title.html -%}
 			<p>1 à 2 phrases décrivant les sujets et les principales tâches accessibles sur cette page.</p>
 		</div>
 		<div class="col-md-6 hidden-sm hidden-xs">

diff --git a/templates/topic/topic-stackedheader-en.html b/templates/topic/topic-stackedheader-en.html
@@ -0,0 +1,37 @@
+---
+title: "[Topic title]"
+sectionTitle: "[Section title]"
+layout: no-container
+language: "en"
+altLangPage: "topic-stackedheader-fr.html"
+dateModified: "2024-08-27"
+---
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-6">
+			{%- include main-page-title/main-page-title.html -%}
+			<p>1-2 sentences that describe the topics and top tasks that can be accessed on this page.</p>
+		</div>
+		<div class="col-md-6 hidden-sm hidden-xs">
+			<img src="https://dummyimage.com/520x200/000000/FFFFFF.png" alt="" class="img-responsive pull-right mrgn-tp-lg">
+		</div>
+	</div>
+</div>
+
+{%- include /components/gc-most-requested/gc-most-requested.html -%}
+
+<div class="container">
+	{%- include /components/gc-srvinfo/3col-hidden-title.html -%}
+
+	<div class="row mrgn-tp-xl">
+		<div class="col-md-8">
+			{%- include /components/gc-features/one-tile-hidden-title.html -%}
+		</div>
+		<div class="col-md-4">
+			{%- include gc-follow-us/gc-follow-us.html -%}
+		</div>
+	</div>
+
+	{%- include /components/gc-contributors/gc-contributors.html -%}
+</div>
diff --git a/templates/topic/topic-stackedheader-fr.html b/templates/topic/topic-stackedheader-fr.html
@@ -0,0 +1,37 @@
+---
+title: "[Titre du sujet]"
+sectionTitle: "[Titre de la section]"
+layout: no-container
+language: "fr"
+altLangPage: "topic-stackedheader-en.html"
+dateModified: "2024-08-27"
+---
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-6">
+			{%- include main-page-title/main-page-title.html -%}
+			<p>1 à 2 phrases décrivant les sujets et les principales tâches accessibles sur cette page.</p>
+		</div>
+		<div class="col-md-6 hidden-sm hidden-xs">
+			<img src="https://dummyimage.com/520x200/000000/FFFFFF.png" alt="" class="img-responsive pull-right mrgn-tp-lg">
+		</div>
+	</div>
+</div>
+
+{%- include /components/gc-most-requested/gc-most-requested.html -%}
+
+<div class="container">
+	{%- include /components/gc-srvinfo/3col-hidden-title.html -%}
+
+	<div class="row mrgn-tp-xl">
+		<div class="col-md-8">
+			{%- include /components/gc-features/one-tile-hidden-title.html -%}
+		</div>
+		<div class="col-md-4">
+			{%- include gc-follow-us/gc-follow-us.html -%}
+		</div>
+	</div>
+
+	{%- include /components/gc-contributors/gc-contributors.html -%}
+</div>