Main page title: Short bord red underline - follow the title alignement

wet-boew · Oct 15, 2024 · 5021eb6 · 5021eb6
1 parent 20b6690
commit 5021eb6
Show file tree

Hide file tree

Showing 11 changed files with 363 additions and 12 deletions.
diff --git a/_data/sites.json b/_data/sites.json
@@ -2182,7 +2182,7 @@
 	"modified": "2024-08-27",
 	"componentName": "main-page-title",
 	"status": "stable",
-	"version": "1.1.1",
+	"version": "1.2",
 	"pages": {
 		"docs": [
 			{
@@ -2216,6 +2216,46 @@
 				"title": "Titre principal superposé",
 				"language": "fr",
 				"path": "main-page-title-stacked-fr.html"
+			},
+			{
+				"title": "Main page title aligned on the right",
+				"language": "en",
+				"path": "main-page-title-align-right-en.html"
+			},
+			{
+				"title": "Titre principal de la page aligné à droite",
+				"language": "fr",
+				"path": "main-page-title-align-right-fr.html"
+			},
+			{
+				"title": "Main page title in a div aligned on the right",
+				"language": "en",
+				"path": "main-page-title-div-align-right-en.html"
+			},
+			{
+				"title": "Titre principal dans une div alignée à droite",
+				"language": "fr",
+				"path": "main-page-title-div-align-right-fr.html"
+			},
+			{
+				"title": "Stacked main page title in a div aligned on the right",
+				"language": "en",
+				"path": "main-page-title-div-stacked-align-right-en.html"
+			},
+			{
+				"title": "Titre principal superposé dans une div alignée à droite",
+				"language": "fr",
+				"path": "main-page-title-div-stacked-align-right-fr.html"
+			},
+			{
+				"title": "Stacked main page title aligned on the right",
+				"language": "en",
+				"path": "main-page-title-stacked-align-right-en.html"
+			},
+			{
+				"title": "Titre principal superposé aligné à droite",
+				"language": "fr",
+				"path": "main-page-title-stacked-align-right-fr.html"
 			}
 		]
 	},
@@ -2235,18 +2275,30 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_mpt_3",
+			"iteration": "_:iteration_mpt_4",
 			"example": [
 				{
 					"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
 					"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
+				},
+				{
+					"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
+					"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
+				},
+				{
+					"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
+					"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
 				}
 			],
 			"implementation": [
 				"_:implement_mpt",
 				"_:implement_mpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-10 - Right to left support - initial implementation of the variant.",
+					"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+				},
 				{
 					"en": "2024-08 - Fixed three-sided border bug in Safari &lt;= 15.3",
 					"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari &lt;= 15.3"
@@ -2276,13 +2328,25 @@
 				{
 					"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
 					"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
+				},
+				{
+					"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
+					"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
+				},
+				{
+					"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
+					"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
 				}
 			],
 			"implementation": [
 				"_:implement_smpt",
 				"_:implement_smpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-10 - Right to left support - initial implementation of the variant.",
+					"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+				},
 				{
 					"en": "2024-08 - Initial implementation of the variant.",
 					"fr": "2024-01 - Implémentation initiale de la variation."
@@ -2293,7 +2357,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_mpt",
-			"iteration": "_:iteration_mpt_3",
+			"iteration": "_:iteration_mpt_4",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -2519,11 +2583,29 @@
 			],
 			"predecessor": "_:iteration_mpt_2"
 		},
+		{
+			"@id": "_:iteration_mpt_4",
+			"name": "Main page title aligned on the right",
+			"date": "2024-09",
+			"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
+			"additions": [
+				"Added right to left support"
+			]
+		},
 		{
 			"@id": "_:iteration_smpt_1",
 			"name": "Stacked main page title - Iteration 1",
 			"date": "2024-08",
 			"detectableBy": "hgroup > h1#wb-cont"
+		},
+		{
+			"@id": "_:iteration_smpt_2",
+			"name": "Stacked main page title - Iteration 2 (LTR support)",
+			"date": "2024-10",
+			"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
+			"additions": [
+				"Added right to left support"
+			]
 		}
 	]
 }

diff --git a/sites/main-page-title/_base.scss b/sites/main-page-title/_base.scss
@@ -9,6 +9,16 @@ h1#wb-cont, hgroup#wb-cont h1 {
 	border-top-width: 0;
 }
 
+h1#wb-cont[dir="rtl"], hgroup#wb-cont[dir="rtl"] h1, [dir="rtl"] h1#wb-cont, [dir="rtl"] hgroup#wb-cont h1 {
+	border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
+	border-image: linear-gradient(to left, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
+	border-image-slice: 1;
+	border-left-width: 0;
+	border-right-width: 0;
+	border-top-width: 0;
+}
+
+
 hgroup#wb-cont {
 	margin-top: 1em;
 

diff --git a/sites/main-page-title/index.json-ld b/sites/main-page-title/index.json-ld
@@ -17,7 +17,7 @@
 	"modified": "2024-08-27",
 	"componentName": "main-page-title",
 	"status": "stable",
-	"version": "1.1.1",
+	"version": "1.2",
 	"pages": {
 		"docs": [
 			{
@@ -51,6 +51,46 @@
 				"title": "Titre principal superposé",
 				"language": "fr",
 				"path": "main-page-title-stacked-fr.html"
+			},
+			{
+				"title": "Main page title aligned on the right",
+				"language": "en",
+				"path": "main-page-title-align-right-en.html"
+			},
+			{
+				"title": "Titre principal de la page aligné à droite",
+				"language": "fr",
+				"path": "main-page-title-align-right-fr.html"
+			},
+			{
+				"title": "Main page title in a div aligned on the right",
+				"language": "en",
+				"path": "main-page-title-div-align-right-en.html"
+			},
+			{
+				"title": "Titre principal dans une div alignée à droite",
+				"language": "fr",
+				"path": "main-page-title-div-align-right-fr.html"
+			},
+			{
+				"title": "Stacked main page title in a div aligned on the right",
+				"language": "en",
+				"path": "main-page-title-div-stacked-align-right-en.html"
+			},
+			{
+				"title": "Titre principal superposé dans une div alignée à droite",
+				"language": "fr",
+				"path": "main-page-title-div-stacked-align-right-fr.html"
+			},
+			{
+				"title": "Stacked main page title aligned on the right",
+				"language": "en",
+				"path": "main-page-title-stacked-align-right-en.html"
+			},
+			{
+				"title": "Titre principal superposé aligné à droite",
+				"language": "fr",
+				"path": "main-page-title-stacked-align-right-fr.html"
 			}
 		]
 	},
@@ -70,18 +110,30 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_mpt_3",
+			"iteration": "_:iteration_mpt_4",
 			"example": [
 				{
 					"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
 					"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
+				},
+				{
+					"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
+					"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
+				},
+				{
+					"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
+					"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
 				}
 			],
 			"implementation": [
 				"_:implement_mpt",
 				"_:implement_mpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-10 - Right to left support - initial implementation of the variant.",
+					"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+				},
 				{
 					"en": "2024-08 - Fixed three-sided border bug in Safari &lt;= 15.3",
 					"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari &lt;= 15.3"
@@ -106,18 +158,30 @@
 				"en": "https://design.canada.ca/styles/typography.html",
 				"fr": "https://conception.canada.ca/styles/typographie.html"
 			},
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"example": [
 				{
 					"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
 					"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
+				},
+				{
+					"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
+					"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
+				},
+				{
+					"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
+					"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
 				}
 			],
 			"implementation": [
 				"_:implement_smpt",
 				"_:implement_smpt_gcweb"
 			],
 			"history": [
+				{
+					"en": "2024-10 - Right to left support - initial implementation of the variant.",
+					"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+				},
 				{
 					"en": "2024-08 - Initial implementation of the variant.",
 					"fr": "2024-01 - Implémentation initiale de la variation."
@@ -128,7 +192,7 @@
 	"implementation": [
 		{
 			"@id": "_:implement_mpt",
-			"iteration": "_:iteration_mpt_3",
+			"iteration": "_:iteration_mpt_4",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -172,7 +236,7 @@
 		},
 		{
 			"@id": "_:implement_mpt_gcweb",
-			"iteration": "_:iteration_mpt_2",
+			"iteration": "_:iteration_mpt_4",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -208,7 +272,7 @@
 		},
 		{
 			"@id": "_:implement_smpt",
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
@@ -244,7 +308,7 @@
 		},
 		{
 			"@id": "_:implement_smpt_gcweb",
-			"iteration": "_:iteration_smpt_1",
+			"iteration": "_:iteration_smpt_2",
 			"name": {
 				"en": "GCWeb Jekyll",
 				"fr": "GCWeb Jekyll"
@@ -283,7 +347,7 @@
 		{
 			"@id": "_:cs_mpt",
 			"name": "Default h1",
-			"baseOnIteration": "_:iteration_mpt_3",
+			"baseOnIteration": "_:iteration_mpt_4",
 			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
 			"layout": "The line is positioned below the text.",
 			"semantic": "h1",
@@ -306,7 +370,7 @@
 		{
 			"@id": "_:cs_smpt",
 			"name": "Stacked main page title",
-			"baseOnIteration": "_:iteration_smpt_1",
+			"baseOnIteration": "_:iteration_smpt_2",
 			"detectableBy": "hgroup > h1#wb-cont",
 			"layout": "The section page title is above the page title. The line is positioned below the page title.",
 			"semantic": "hgroup > p + h1",
@@ -354,11 +418,32 @@
 			],
 			"predecessor": "_:iteration_mpt_2"
 		},
+		{
+			"@id": "_:iteration_mpt_4",
+			"name": "Main page title aligned on the right",
+			"date": "2024-09",
+			"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
+			"additions": [
+				"Added right to left support"
+			],
+			"predecessor": "_:iteration_mpt_3"
+
+		},
 		{
 			"@id": "_:iteration_smpt_1",
 			"name": "Stacked main page title - Iteration 1",
 			"date": "2024-08",
 			"detectableBy": "hgroup > h1#wb-cont"
+		},
+		{
+			"@id": "_:iteration_smpt_2",
+			"name": "Stacked main page title - Iteration 2 (LTR support)",
+			"date": "2024-10",
+			"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
+			"additions": [
+				"Added right to left support"
+			],
+			"predecessor": "_:iteration_smpt_1"
 		}
 	]
 }
diff --git a/sites/main-page-title/main-page-title-align-right-en.md b/sites/main-page-title/main-page-title-align-right-en.md
@@ -0,0 +1,19 @@
+---
+altLangPage: "main-page-title-align-right-fr.html"
+dateModified: "2024-09-26"
+language: "en"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Main page title aligned on the right"
+index_json: index.json-ld
+breadcrumbs: [
+		{ "title": "Main page title - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
+	]
+---
+<h1 id="wb-cont" dir="rtl">Main page title aligned on the right</h1>
+<p>Main title of a page with a short bold red underline aligned on the right.</p>
+
+<pre><code>
+	&lt;h1 id="wb-cont" dir="rtl">Main page title aligned on the right&lt;/h1>
+	&lt;p>Main title of a page with a short bold red underline aligned on the right.&lt;/p>
+</code></pre>