Minor - Page details: Remove col-lg-9 class (#2398)

There's no need for it. The col-md-9 class it was paired with already fulfils the same purpose (has the same grid width and scales up to larger views). Using #2377 as a basis, this removes the col-lg-9 class and updates code samples/documentation/etc accordingly. Also adds the following updates: * Adjust the Bootstrap 3 static header and footer page's page details section (was using the col-lg-9 class and share this page...) * Revise the page details docs' implementation notes and migration instructions * Allow HTML to be rendered in history notes (via "isHTML": true, for non-breaking spaces and HTML tags) * Base include file names on component version numbers instead of iteration numbers (i.e. renamed 4 to 3.1 and 5 to 3.2) Co-authored-by: Garneauma <[email protected]>
wet-boew · Jul 24, 2024 · 7e7b444 · 7e7b444
1 parent af9b4a2
commit 7e7b444
Show file tree

Hide file tree

Showing 21 changed files with 460 additions and 73 deletions.
diff --git a/_data/sites.json b/_data/sites.json
@@ -2348,8 +2348,8 @@
 		"en": "Documentation on how to use the page details section.",
 		"fr": "Documentation sur l'utilisation de la section des détails de la page."
 	},
-	"version": "3.1",
-	"modified": "2024-06-03",
+	"version": "3.2",
+	"modified": "2024-07-24",
 	"componentName": "page-details",
 	"componentType": "container",
 	"status": "stable",
@@ -2446,21 +2446,29 @@
 				{
 					"en": { "href": "demoted/page-details-v3-en.html", "text": "Demoted - Page details version 3.0" },
 					"fr": { "href": "demoted/page-details-v3-fr.html", "text": "Rétrogradé - Détails de la page version 3.0" }
+				},
+				{
+					"en": { "href": "demoted/page-details-v3.1-en.html", "text": "Demoted - Page details version 3.1" },
+					"fr": { "href": "demoted/page-details-v3.1-fr.html", "text": "Rétrogradé - Détails de la page version 3.1" }
 				}
 			],
 			"implementation": [
 				"_:implement_pd",
 				"_:implement_pd_gcweb",
-				"_:implement_pd_3to4"
+				"_:implement_pd_3to5"
 			],
 			"history": [
+				{
+					"en": "July 2024 - Removed \"col-lg-9\" class.",
+					"fr": "Juillet 2024 - Retrait de la classe «&nbsp;col-lg-9&nbsp;»."
+				},
 				{
 					"en": "June 2024 - Removed \"Share this page\" option.",
 					"fr": "Juin 2024 - Retrait de l'option « Partagez cette page »."
 				},
 				{
-					"en": "March 2023 - Tag <footer> changed to <section>.",
-					"fr": "Mars 2023 - Balise <footer> changée pour <section>."
+					"en": "March 2023 - Tag <code>&lt;footer&gt;</code> changed to <code>&lt;section&gt;</code>.",
+					"fr": "Mars 2023 - Balise <code>&lt;footer&gt;</code> changée pour <code>&lt;section&gt;</code>."
 				},
 				{
 					"en": "May 2022 - Total revamp.",
@@ -2476,7 +2484,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_pd",
-			"iteration": "_:iteration_pd_4",
+			"iteration": "_:iteration_pd_5",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -2497,10 +2505,10 @@
 			},
 			"notes": {
 				"en": [
-					"Although the component has been updated to version 3.1, the version 2.0 and 3.0 are still supported. However, the page content and the &lt;footer&gt; have to be located inside an &lt;article&gt; tag."
+					"Although the component has been updated to version 3.2, versions 2.0, 3.0 and 3.1 are still supported. However, for version 2.0, the page content and the &lt;footer&gt; have to be located inside an &lt;article&gt; tag."
 				],
 				"fr": [
-					"Bien que le composant ait été mis à jour vers la version 3.1, la version 2.0 and 3.0 sont toujours pris en charge. Cependant, le contenu de la page et le &lt;footer&gt; doivent être situés à l'intérieur d'une balise &lt;article&gt;."
+					"Bien que le composant ait été mis à jour vers la version 3.2, les versions 2.0, 3.0 et 3.1 sont toujours prises en charge. Cependant, pour la version 2.0, le contenu de la page et la balise &lt;footer&gt; doivent être situés à l'intérieur d'une balise &lt;article&gt;."
 				]
 			},
 			"sample": {
@@ -2510,15 +2518,15 @@
 						"description": "Default Page details:",
 						"code": {
 							"@type": [ "@id", "rdf:HTML" ],
-							"@value": "samples/page-details-4-en.html#default"
+							"@value": "samples/page-details-3.2-en.html#default"
 						}
 					},
 					{
 						"@type": "source-code",
 						"description": "Page details with Page feedback tool:",
 						"code": {
 							"@type": [ "@id", "rdf:HTML" ],
-							"@value": "samples/page-details-4-en.html#pft"
+							"@value": "samples/page-details-3.2-en.html#pft"
 						}
 					}
 				],
@@ -2528,23 +2536,23 @@
 						"description": "Détails de la page par défaut :",
 						"code": {
 							"@type": [ "@id", "rdf:HTML" ],
-							"@value": "samples/page-details-4-fr.html#default"
+							"@value": "samples/page-details-3.2-fr.html#default"
 						}
 					},
 					{
 						"@type": "source-code",
 						"description": "Détails de la page avec Outil de rétroaction sur la page :",
 						"code": {
 							"@type": [ "@id", "rdf:HTML" ],
-							"@value": "samples/page-details-4-fr.html#pft"
+							"@value": "samples/page-details-3.2-fr.html#pft"
 						}
 					}
 				]
 			}
 		},
 		{
 			"@id": "_:implement_pd_gcweb",
-			"iteration": "_:iteration_pd_4",
+			"iteration": "_:iteration_pd_5",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -2579,35 +2587,86 @@
 			}
 		},
 		{
-			"@id": "_:implement_pd_3to4",
-			"iteration": "_:iteration_pd_4",
+			"@id": "_:implement_pd_3to5",
+			"iteration": "_:iteration_pd_5",
 			"name": {
-				"en": "Migration from version 3.0 to 3.1",
-				"fr": "Migration de la version 3.0 vers 3.1"
+				"en": "Migration from version 3.0 to 3.2",
+				"fr": "Migration de la version 3.0 vers 3.2"
 			},
 			"introduction": {
-				"en": "This implementation is meant for developers or publishers trying to migrate their page from using the page details version 3.0 to 3.1 (removal of Share this page).",
-				"fr": "Cette implémentation est destinée aux développeurs ou aux éditeurs qui tentent de migrer leur page de la version 3.0 vers la version 3.1 (suppression de Partagez cette page)."
+				"en": "This implementation is meant for developers or publishers trying to migrate their page from using the page details version 3.0 to 3.2 (removal of Share this page and \"col-lg-9\" class).",
+				"fr": "Cette implémentation est destinée aux développeurs ou aux éditeurs qui tentent de migrer leur page de la version 3.0 vers la version 3.2 (suppression de Partagez cette page et de la classe «&nbsp;col-lg-9&nbsp;»)."
 			},
 			"instructions": {
 				"en": [
+					"Remove the \"col-lg-9\" class from the <code>&lt;div class=\"col-sm-8 col-md-9 col-lg-9\"&gt;</code> element.",
 					"Remove the element <code>&lt;div class=\"wb-share col-sm-4 col-md-3\" data-wb-share='{\"lnkClass\": \"btn btn-default btn-block\"}'>&lt;/div></code>.",
 					"Move the date modified component out of the grid and insert right before the closing <code>&lt;section></code> tag. Delete the <code>&lt;div class=\"col-xs-12\"></code> it was in."
 				],
 				"fr": [
+					"Supprimez la classe «&nbsp;col-lg-9&nbsp;» de l’élément <code>&lt;div class=\"col-sm-8 col-md-9 col-lg-9\"&gt;</code>.",
 					"Supprimez l'élément <code>&lt;div class=\"wb-share col-sm-4 col-md-3\" data-wb-share='{\"lnkClass\": \"btn btn-default btn-block\"}'>&lt;/div></code>.",
 					"Déplacez le composant de date de modification hors de la grille et insérez-le juste avant la balise de fermeture <code>&lt;section></code>. Supprimez le <code>&lt;div class=\"col-xs-12\"></code> dans lequel il se trouvait."
 				]
 			}
 		}
 	],
 	"iteration": [
+		{
+			"@id": "_:iteration_pd_5",
+			"name": "Page details - Iteration 5",
+			"date": "2024-07",
+			"detectableBy": "section.pagedetails",
+			"predecessor": "_:iteration_pd_4",
+			"fixes": [
+				"Removed \"col-lg-9\" class since \"col-md-9\" already fulfils the same purpose."
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Default Page details",
+					"code": {
+						"@type": [ "rdf:HTML", "@id" ],
+						"@value": "samples/page-details-3.2-en.html#default"
+					}
+				},
+				{
+					"@type": "source-code",
+					"@language": "fr",
+					"description": "Détails de la page par défaut",
+					"code": {
+						"@type": [ "rdf:HTML", "@id" ],
+						"@value": "samples/page-details-3.2-fr.html#default"
+					}
+				},
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Page details with Page feedback tool",
+					"code": {
+						"@type": [ "rdf:HTML", "@id" ],
+						"@value": "samples/page-details-3.2-en.html#pft"
+					}
+				},
+				{
+					"@type": "source-code",
+					"@language": "fr",
+					"description": "Détails de la page avec Outil de rétroaction sur la page",
+					"code": {
+						"@type": [ "rdf:HTML", "@id" ],
+						"@value": "samples/page-details-3.2-fr.html#pft"
+					}
+				}
+			]
+		},
 		{
 			"@id": "_:iteration_pd_4",
 			"name": "Page details - Iteration 4",
 			"date": "2024-06",
 			"detectableBy": "section.pagedetails",
 			"predecessor": "_:iteration_pd_3",
+			"successor": "_:iteration_pd_5",
 			"fixes": [
 				"Removed \"Share this page\" button option."
 			],
@@ -2618,7 +2677,7 @@
 					"description": "Default Page details",
 					"code": {
 						"@type": [ "rdf:HTML", "@id" ],
-						"@value": "samples/page-details-4-en.html#default"
+						"@value": "samples/page-details-3.1-en.html#default"
 					}
 				},
 				{
@@ -2627,7 +2686,7 @@
 					"description": "Détails de la page par défaut",
 					"code": {
 						"@type": [ "rdf:HTML", "@id" ],
-						"@value": "samples/page-details-4-fr.html#default"
+						"@value": "samples/page-details-3.1-fr.html#default"
 					}
 				},
 				{
@@ -2636,7 +2695,7 @@
 					"description": "Page details with Page feedback tool",
 					"code": {
 						"@type": [ "rdf:HTML", "@id" ],
-						"@value": "samples/page-details-4-en.html#pft"
+						"@value": "samples/page-details-3.1-en.html#pft"
 					}
 				},
 				{
@@ -2645,7 +2704,7 @@
 					"description": "Détails de la page avec Outil de rétroaction sur la page",
 					"code": {
 						"@type": [ "rdf:HTML", "@id" ],
-						"@value": "samples/page-details-4-fr.html#pft"
+						"@value": "samples/page-details-3.1-fr.html#pft"
 					}
 				}
 			]
@@ -2800,6 +2859,44 @@
 		}
 	],
 	"changesets": [
+		{
+			"@id": "_:cs_pd_5",
+			"name": "Page details - version 3.2",
+			"status": "stable",
+			"baseOnIteration": "_:iteration_pd_5",
+			"detectableBy": "section.pagedetails",
+			"layout": [
+				"Page feedback tool (if included) on the top left",
+				"Date modified on bottom left"
+			],
+			"style": "Not applicable",
+			"semantic": {
+				"@type": "source-code",
+				"description": "Source code",
+				"code": "<section class=\"pagedetails\">\n\t<h2>[i18nText-pageDetails]</h2>\n\t<!-- Page feedback tool (optional) -->\n\t<!-- Date modified (mandatatory) -->\n</section>"
+			},
+			"include": {
+				"@type": "source-code",
+				"collapsed": true,
+				"description": "Include with logic in Liquid.",
+				"code": {
+					"@type": [ "@id", "rdf:HTML" ],
+					"@value": "includes/footer.html"
+				}
+			},
+			"logic": "Not applicable",
+			"guidance": "Not applicable",
+			"context": "Not applicable",
+			"configuration": [
+				"Input the date when the page was last modified inside the <time> tag in the format YYYY-MM-DD."
+			],
+			"static": [
+				"Section header: \"Page details\""
+			],
+			"schema": "Not applicable",
+			"dependency": "Not applicable",
+			"file": "Not applicable"
+		},
 		{
 			"@id": "_:cs_pd_4",
 			"name": "Page details - version 3.1",
@@ -2822,7 +2919,7 @@
 				"description": "Include with logic in Liquid.",
 				"code": {
 					"@type": [ "@id", "rdf:HTML" ],
-					"@value": "includes/footer.html"
+					"@value": "includes/footer-3.1.html"
 				}
 			},
 			"logic": "Not applicable",

diff --git a/...sites/page-details/page-details-4-en.html → ...tes/page-details/page-details-3.1-en.html b/...sites/page-details/page-details-4-en.html → ...tes/page-details/page-details-3.1-en.html
diff --git a/...sites/page-details/page-details-4-fr.html → ...tes/page-details/page-details-3.1-fr.html b/...sites/page-details/page-details-4-fr.html → ...tes/page-details/page-details-3.1-fr.html
diff --git a/_includes/sites/page-details/page-details-3.2-en.html b/_includes/sites/page-details/page-details-3.2-en.html
@@ -0,0 +1,20 @@
+<!-- Default Page details -->
+<div id="default">
+<section class="pagedetails">
+	<h2 class="wb-inv">Page details</h2>
+	[Date modified component]
+</section>
+</div>
+
+<!-- Page details with Page feedback tool -->
+<div id="pft">
+<section class="pagedetails">
+	<h2 class="wb-inv">Page details</h2>
+	<div class="row">
+		<div class="col-sm-8 col-md-9">
+			[Page feedback tool component version 2.0 or newer]
+		</div>
+	</div>
+	[Date modified component]
+</section>
+</div>
diff --git a/_includes/sites/page-details/page-details-3.2-fr.html b/_includes/sites/page-details/page-details-3.2-fr.html
@@ -0,0 +1,20 @@
+<!-- Default Détails de la page -->
+<div id="default">
+<section class="pagedetails">
+	<h2 class="wb-inv">Détails de la page</h2>
+	[Composant Date de modification]
+</section>
+</div>
+
+<!-- Détails de la page with Page feedback tool -->
+<div id="pft">
+<section class="pagedetails">
+	<h2 class="wb-inv">Détails de la page</h2>
+	<div class="row">
+		<div class="col-sm-8 col-md-9">
+			[Composant Outil de rétroaction sur la page version 2.0 ou plus récente]
+		</div>
+	</div>
+	[Composant Date de modification]
+</section>
+</div>
diff --git a/docs/static-header-footer/bootstrap-3.html b/docs/static-header-footer/bootstrap-3.html
@@ -113,22 +113,13 @@ <h1>Static header and footer - Bootstrap 3 - Update to header to come...</h1>
 	<p><a href="bootstrap-4.html" class="btn btn-primary">Switch to Bootstrap 4 (experimental)</a></p>
 
 <!-- Main content footer starts -->
-	<footer class="pagedetails">
-	<h2 class="wb-inv">Page details</h2><div class="row"><div class="col-sm-8 col-md-9 col-lg-9">
-				<div data-ajax-replace="/GCWeb/sites/feedback/ajax/report-problem-en.html">
-	<div class="row row-no-gutters"><div class="col-sm-9 col-md-6 col-lg-5"><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
-		</div>
-	</div>
-</div>
-
-			</div><div class="wb-share col-sm-4 col-md-3" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div><div class="col-xs-12">
-			<dl id="wb-dtmd">
-				<dt>Date modified:</dt>
-				<dd><time property="dateModified">2022-10-18</time></dd>
-			</dl>
-		</div>
-	</div>
-</footer>
+	<section class="pagedetails">
+		<h2 class="wb-inv">Page details</h2>
+		<dl id="wb-dtmd">
+			<dt>Date modified:</dt>
+			<dd><time property="dateModified">2024-07-24</time></dd>
+		</dl>
+	</section>
 <!-- Main content footer ends -->
 </main>
 

diff --git a/sites/layouts/documentation.html b/sites/layouts/documentation.html
@@ -471,7 +471,7 @@ <h2 id="variations">{% if lng == "fr" %}Variantes{% else %}Variations{% endif %}
 
 		{ "selector": "[data-history]", "value": "/history",
 			"mapping": [
-				{ "selector": "li", "value": "/{{lng}}" }
+				{ "selector": "li", "value": "/{{lng}}", "isHTML": true }
 			]
 		}
 

diff --git a/sites/layouts/documentation_pattern.html b/sites/layouts/documentation_pattern.html
@@ -418,7 +418,7 @@ <h2 id="variations">{% if lng == "fr" %}Variantes{% else %}Variations{% endif %}
 
 		{ "selector": "[data-history]", "value": "/history",
 			"mapping": [
-				{ "selector": "li", "value": "/{{lng}}" }
+				{ "selector": "li", "value": "/{{lng}}", "isHTML": true }
 			]
 		}