From 7e7b444fb24ded53fde84a23d21f4ce8b521c4ab Mon Sep 17 00:00:00 2001
From: EricDunsworth <1907279+EricDunsworth@users.noreply.github.com>
Date: Wed, 24 Jul 2024 11:10:45 -0400
Subject: [PATCH] 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 <garneauma@gmail.com>
---
 _data/sites.json                              | 145 +++++++++++++++---
 ...ils-4-en.html => page-details-3.1-en.html} |   0
 ...ils-4-fr.html => page-details-3.1-fr.html} |   0
 .../page-details/page-details-3.2-en.html     |  20 +++
 .../page-details/page-details-3.2-fr.html     |  20 +++
 docs/static-header-footer/bootstrap-3.html    |  23 +--
 sites/layouts/documentation.html              |   2 +-
 sites/layouts/documentation_pattern.html      |   2 +-
 .../demoted/page-details-v3.1-en.html         |  55 +++++++
 .../demoted/page-details-v3.1-fr.html         |  55 +++++++
 sites/page-details/includes/footer-3.1.html   |  12 ++
 sites/page-details/includes/footer.html       |   2 +-
 sites/page-details/index.json-ld              | 145 +++++++++++++++---
 .../page-details/page-details-default-en.html |   2 +-
 .../page-details/page-details-default-fr.html |   2 +-
 sites/page-details/page-details-pft-en.html   |   4 +-
 sites/page-details/page-details-pft-fr.html   |   4 +-
 ...ils-4-en.html => page-details-3.1-en.html} |   0
 ...ils-4-fr.html => page-details-3.1-fr.html} |   0
 .../samples/page-details-3.2-en.html          |  20 +++
 .../samples/page-details-3.2-fr.html          |  20 +++
 21 files changed, 460 insertions(+), 73 deletions(-)
 rename _includes/sites/page-details/{page-details-4-en.html => page-details-3.1-en.html} (100%)
 rename _includes/sites/page-details/{page-details-4-fr.html => page-details-3.1-fr.html} (100%)
 create mode 100644 _includes/sites/page-details/page-details-3.2-en.html
 create mode 100644 _includes/sites/page-details/page-details-3.2-fr.html
 create mode 100644 sites/page-details/demoted/page-details-v3.1-en.html
 create mode 100644 sites/page-details/demoted/page-details-v3.1-fr.html
 create mode 100644 sites/page-details/includes/footer-3.1.html
 rename sites/page-details/samples/{page-details-4-en.html => page-details-3.1-en.html} (100%)
 rename sites/page-details/samples/{page-details-4-fr.html => page-details-3.1-fr.html} (100%)
 create mode 100644 sites/page-details/samples/page-details-3.2-en.html
 create mode 100644 sites/page-details/samples/page-details-3.2-fr.html

diff --git a/_data/sites.json b/_data/sites.json
index f94c072995..6b960b1aa8 100644
--- 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,7 +2518,7 @@
 						"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"
 						}
 					},
 					{
@@ -2518,7 +2526,7 @@
 						"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,7 +2536,7 @@
 						"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"
 						}
 					},
 					{
@@ -2536,7 +2544,7 @@
 						"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"
 						}
 					}
 				]
@@ -2544,7 +2552,7 @@
 		},
 		{
 			"@id": "_:implement_pd_gcweb",
-			"iteration": "_:iteration_pd_4",
+			"iteration": "_:iteration_pd_5",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -2579,22 +2587,24 @@
 			}
 		},
 		{
-			"@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."
 				]
@@ -2602,12 +2612,61 @@
 		}
 	],
 	"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/_includes/sites/page-details/page-details-4-en.html b/_includes/sites/page-details/page-details-3.1-en.html
similarity index 100%
rename from _includes/sites/page-details/page-details-4-en.html
rename to _includes/sites/page-details/page-details-3.1-en.html
diff --git a/_includes/sites/page-details/page-details-4-fr.html b/_includes/sites/page-details/page-details-3.1-fr.html
similarity index 100%
rename from _includes/sites/page-details/page-details-4-fr.html
rename to _includes/sites/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
new file mode 100644
index 0000000000..403e0ade3c
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..87e9214c62
--- /dev/null
+++ 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
index e46538e8e5..0a14642122 100644
--- 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
index deb9fd46a0..da8b42a4b2 100644
--- 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
index 94876321bf..1f63ff81c1 100644
--- 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 }
 			]
 		}
 
diff --git a/sites/page-details/demoted/page-details-v3.1-en.html b/sites/page-details/demoted/page-details-v3.1-en.html
new file mode 100644
index 0000000000..0efcb0a027
--- /dev/null
+++ b/sites/page-details/demoted/page-details-v3.1-en.html
@@ -0,0 +1,55 @@
+---
+{
+	"layout": null,
+	"title": "Content page including complete page details version 3.1 (demoted)",
+	"language": "en",
+	"altLangPage": "page-details-v3.1-fr.html",
+	"secondlevel": false,
+	"dateModified": "2024-07-24",
+	"share": "true",
+	"feedback": "true"
+}
+---
+{%- include variable-core.liquid -%}
+{%- capture page-title -%}
+	{%- if page.title -%}
+		{{ page.title }}
+	{%- else -%}
+		Page untitled
+	{%- endif -%}
+{%- endcapture -%}
+<!DOCTYPE html>
+<html class="no-js" lang="{{ i18nText-lang | default: 'en' }}" dir="{{ i18nText-langDir | default: 'ltr' }}">
+<head>
+<meta charset="utf-8">
+{% include license.html %}
+<title>{{ page-title }} - {{ i18nText-siteTitle }}</title>
+<meta content="width=device-width, initial-scale=1" name="viewport">
+{% include metadata.html %}
+{% include resources-inc/head.html %}
+</head>
+<body {% if page.pageclass %}class="{{ page.pageclass }}" {% endif %}vocab="http://schema.org/" typeof="WebPage">
+{% include skiplinks/skiplinks.html %}
+{% include header/header.html %}
+<main class="container" property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
+<div class="wb-prettify all-pre hidden"></div>
+<h1 id="wb-cont" property="name">{{ page-title }}</h1>
+<p>This is version 3.1 (demoted) of the page details.</p>
+<pre><code>&lt;section class="pagedetails">
+	&lt;h2 class="wb-inv">Page details&lt;/h2>
+	&lt;div class="row">
+		&lt;div class="col-sm-8 col-md-9 col-lg-9">
+			&lt;div data-ajax-replace="https://www.canada.ca/etc/designs/canada/wet-boew/assets/feedback/page-feedback-en.html" class="wb-disable-allow">&lt;!-- Will always be replaced by data-ajax -->&lt;/div>
+		&lt;/div>
+		&lt;dl id="wb-dtmd">
+			&lt;dt>Date modified:&lt;/dt>
+			&lt;dd>&lt;time property="dateModified">2024-07-24&lt;/time>&lt;/dd>
+		&lt;/dl>
+	&lt;/div>
+&lt;/section></code></pre>
+{% include page-details/footer-3.1.html %}
+</main>
+{% include footers/footer.html %}
+{% include resources-inc/footer.html %}
+</body>
+</html>
diff --git a/sites/page-details/demoted/page-details-v3.1-fr.html b/sites/page-details/demoted/page-details-v3.1-fr.html
new file mode 100644
index 0000000000..327c698027
--- /dev/null
+++ b/sites/page-details/demoted/page-details-v3.1-fr.html
@@ -0,0 +1,55 @@
+---
+{
+	"layout": null,
+	"title": "Page de contenu comprenant les détails de la page version 3.1 (rétrogradé)",
+	"language": "fr",
+	"altLangPage": "page-details-v3.1-en.html",
+	"secondlevel": false,
+	"dateModified": "2024-07-24",
+	"share": "true",
+	"feedback": "true"
+}
+---
+{%- include variable-core.liquid -%}
+{%- capture page-title -%}
+	{%- if page.title -%}
+		{{ page.title }}
+	{%- else -%}
+		Page untitled
+	{%- endif -%}
+{%- endcapture -%}
+<!DOCTYPE html>
+<html class="no-js" lang="{{ i18nText-lang | default: 'en' }}" dir="{{ i18nText-langDir | default: 'ltr' }}">
+<head>
+<meta charset="utf-8">
+{% include license.html %}
+<title>{{ page-title }} - {{ i18nText-siteTitle }}</title>
+<meta content="width=device-width, initial-scale=1" name="viewport">
+{% include metadata.html %}
+{% include resources-inc/head.html %}
+</head>
+<body {% if page.pageclass %}class="{{ page.pageclass }}" {% endif %}vocab="http://schema.org/" typeof="WebPage">
+{% include skiplinks/skiplinks.html %}
+{% include header/header.html %}
+<main class="container" property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
+<div class="wb-prettify all-pre hidden"></div>
+<h1 id="wb-cont" property="name">{{ page-title }}</h1>
+<p>Il s'agit de la version 3.1 (rétrogradée) des détails de la page.</p>
+<pre><code>&lt;section class="pagedetails">
+	&lt;h2 class="wb-inv">Détails de la page&lt;/h2>
+	&lt;div class="row">
+		&lt;div class="col-sm-8 col-md-9 col-lg-9">
+			&lt;div data-ajax-replace="https://www.canada.ca/etc/designs/canada/wet-boew/assets/feedback/page-feedback-fr.html" class="wb-disable-allow">&lt;!-- Sera toujours remplacé par data-ajax -->&lt;/div>
+		&lt;/div>
+		&lt;dl id="wb-dtmd">
+			&lt;dt>Date de modification&nbsp;:&lt;/dt>
+			&lt;dd>&lt;time property="dateModified">2024-07-24&lt;/time>&lt;/dd>
+		&lt;/dl>
+	&lt;/div>
+&lt;/section></code></pre>
+{% include page-details/footer-3.1.html %}
+</main>
+{% include footers/footer.html %}
+{% include resources-inc/footer.html %}
+</body>
+</html>
diff --git a/sites/page-details/includes/footer-3.1.html b/sites/page-details/includes/footer-3.1.html
new file mode 100644
index 0000000000..5d6ebd8b5a
--- /dev/null
+++ b/sites/page-details/includes/footer-3.1.html
@@ -0,0 +1,12 @@
+<section class="pagedetails{% if include.addContainer %} container{% endif %}">
+	<h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
+
+	{%- if page.feedback and page.feedback != "" -%}
+	<div class="row">
+		<div class="col-sm-8 col-md-9 col-lg-9">
+			{% include feedback/feedback.html %}
+		</div>
+	</div>
+	{%- endif -%}
+	{%- include date-modified/date-modified.html -%}
+</section>
diff --git a/sites/page-details/includes/footer.html b/sites/page-details/includes/footer.html
index 5d6ebd8b5a..b69f2f2f3a 100644
--- a/sites/page-details/includes/footer.html
+++ b/sites/page-details/includes/footer.html
@@ -3,7 +3,7 @@ <h2 class="wb-inv">{{ i18nText-pageDetails }}</h2>
 
 	{%- if page.feedback and page.feedback != "" -%}
 	<div class="row">
-		<div class="col-sm-8 col-md-9 col-lg-9">
+		<div class="col-sm-8 col-md-9">
 			{% include feedback/feedback.html %}
 		</div>
 	</div>
diff --git a/sites/page-details/index.json-ld b/sites/page-details/index.json-ld
index ac75e16a66..f7d4896637 100644
--- a/sites/page-details/index.json-ld
+++ b/sites/page-details/index.json-ld
@@ -14,8 +14,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",
@@ -112,21 +112,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.",
@@ -142,7 +150,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_pd",
-			"iteration": "_:iteration_pd_4",
+			"iteration": "_:iteration_pd_5",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -163,10 +171,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": {
@@ -176,7 +184,7 @@
 						"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"
 						}
 					},
 					{
@@ -184,7 +192,7 @@
 						"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"
 						}
 					}
 				],
@@ -194,7 +202,7 @@
 						"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"
 						}
 					},
 					{
@@ -202,7 +210,7 @@
 						"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"
 						}
 					}
 				]
@@ -210,7 +218,7 @@
 		},
 		{
 			"@id": "_:implement_pd_gcweb",
-			"iteration": "_:iteration_pd_4",
+			"iteration": "_:iteration_pd_5",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -245,22 +253,24 @@
 			}
 		},
 		{
-			"@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."
 				]
@@ -268,12 +278,61 @@
 		}
 	],
 	"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."
 			],
@@ -284,7 +343,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"
 					}
 				},
 				{
@@ -293,7 +352,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"
 					}
 				},
 				{
@@ -302,7 +361,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"
 					}
 				},
 				{
@@ -311,7 +370,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"
 					}
 				}
 			]
@@ -466,6 +525,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",
@@ -488,7 +585,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-default-en.html b/sites/page-details/page-details-default-en.html
index fd6e4ee2b0..fea1984777 100644
--- a/sites/page-details/page-details-default-en.html
+++ b/sites/page-details/page-details-default-en.html
@@ -16,7 +16,7 @@ <h2>HTML code</h2>
 <p>This HTML code will generate the same page details section as seen right below:</p>
 <pre>
 	<code data-wb-ajax='{
-		"url": "samples/page-details-4-en.html#default",
+		"url": "samples/page-details-3.2-en.html#default",
 		"type": "replace",
 		"encode": true
 	}'></code>
diff --git a/sites/page-details/page-details-default-fr.html b/sites/page-details/page-details-default-fr.html
index cd76db28b0..ac7c4e44d0 100644
--- a/sites/page-details/page-details-default-fr.html
+++ b/sites/page-details/page-details-default-fr.html
@@ -16,7 +16,7 @@ <h2>Code HTML</h2>
 <p>Ce code HTML générera la même section de détails de page que celle illustrée ci-dessous&nbsp;:</p>
 <pre>
 	<code data-wb-ajax='{
-		"url": "samples/page-details-4-fr.html#default",
+		"url": "samples/page-details-3.2-fr.html#default",
 		"type": "replace",
 		"encode": true
 	}'></code>
diff --git a/sites/page-details/page-details-pft-en.html b/sites/page-details/page-details-pft-en.html
index c9b7360273..e174c8b81f 100644
--- a/sites/page-details/page-details-pft-en.html
+++ b/sites/page-details/page-details-pft-en.html
@@ -4,7 +4,7 @@
 	"language": "en",
 	"altLangPage": "page-details-pft-fr.html",
 	"secondlevel": false,
-	"dateModified": "2024-06-03",
+	"dateModified": "2024-07-24",
 	"feedback": true,
 	"breadcrumbs": [
 		{ "title": "Page details documentation", "link": "sites/page-details/page-details-docs-en.html" }
@@ -17,7 +17,7 @@ <h2>HTML code</h2>
 <p>This HTML code will generate the same page details section as seen right below:</p>
 <pre>
 	<code data-wb-ajax='{
-		"url": "samples/page-details-4-en.html#pft",
+		"url": "samples/page-details-3.2-en.html#pft",
 		"type": "replace",
 		"encode": true
 	}'></code>
diff --git a/sites/page-details/page-details-pft-fr.html b/sites/page-details/page-details-pft-fr.html
index 700e747dde..e3ccd1887b 100644
--- a/sites/page-details/page-details-pft-fr.html
+++ b/sites/page-details/page-details-pft-fr.html
@@ -4,7 +4,7 @@
 	"language": "fr",
 	"altLangPage": "page-details-pft-en.html",
 	"secondlevel": false,
-	"dateModified": "2024-06-03",
+	"dateModified": "2024-07-24",
 	"feedback": true,
 	"breadcrumbs": [
 		{ "title": "Documentation de Détails de la page", "link": "sites/page-details/page-details-docs-fr.html" }
@@ -17,7 +17,7 @@ <h2>Code HTML</h2>
 <p>Ce code HTML générera la même section de détails de page que celle illustrée ci-dessous&nbsp;:</p>
 <pre>
 	<code data-wb-ajax='{
-		"url": "samples/page-details-4-fr.html#pft",
+		"url": "samples/page-details-3.2-fr.html#pft",
 		"type": "replace",
 		"encode": true
 	}'></code>
diff --git a/sites/page-details/samples/page-details-4-en.html b/sites/page-details/samples/page-details-3.1-en.html
similarity index 100%
rename from sites/page-details/samples/page-details-4-en.html
rename to sites/page-details/samples/page-details-3.1-en.html
diff --git a/sites/page-details/samples/page-details-4-fr.html b/sites/page-details/samples/page-details-3.1-fr.html
similarity index 100%
rename from sites/page-details/samples/page-details-4-fr.html
rename to sites/page-details/samples/page-details-3.1-fr.html
diff --git a/sites/page-details/samples/page-details-3.2-en.html b/sites/page-details/samples/page-details-3.2-en.html
new file mode 100644
index 0000000000..403e0ade3c
--- /dev/null
+++ b/sites/page-details/samples/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/sites/page-details/samples/page-details-3.2-fr.html b/sites/page-details/samples/page-details-3.2-fr.html
new file mode 100644
index 0000000000..87e9214c62
--- /dev/null
+++ b/sites/page-details/samples/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>