Add main page title component

This commit adds the main page title component, which includes the SCSS file, HTML template, JSON data, and Markdown documentation for both English and French versions. The component provides a default H1 style with a short bold red underline for use in Canada.ca websites. It also includes guidance and code samples for implementing the component with and without RDFa + schema.org markup.
wet-boew · Jan 22, 2024 · eabe006 · eabe006
1 parent 652602f
commit eabe006
Show file tree

Hide file tree

Showing 11 changed files with 520 additions and 14 deletions.
diff --git a/_data/sites.json b/_data/sites.json
@@ -2132,6 +2132,279 @@
 		]
 	}
 }
+,{
+    "@context": {
+        "@version": 2.0,
+        "dct": "http://purl.org/dc/terms/",
+        "title": {
+            "@id": "dct:title",
+            "@container": "@language"
+        },
+        "description": {
+            "@id": "dct:description",
+            "@container": "@language"
+        },
+        "modified": "dct:modified"
+    },
+    "title": {
+        "en": "Main title of the page",
+        "fr": "Titre principal"
+    },
+    "description": {
+        "en": "Documentation on how to use the Main title of the page component.",
+        "fr": "Documentation sur l'utilisation du composant Titre principal."
+    },
+    "modified": "2024-01-04",
+    "componentName": "gc-main-title",
+    "status": "stable",
+    "version": "1.0.1",
+    "pages": {
+        "docs": [
+            {
+                "title": "Main page title",
+                "language": "en",
+                "path": "gc-main-page-title-en.html"
+            },
+            {
+                "title": "Titre principal",
+                "language": "fr",
+                "path": "gc-main-page-title-fr.html"
+            }
+        ]
+    },
+    "dependencies": [],
+    "a11yGuidance": "This component respects all WCAG 2.1 guidelines.",
+    "variations": [
+        {
+            "name": {
+                "en": "Main page title with [id=wb-cont]",
+                "fr": "Titre principal avec [id=wb-cont]"
+            },
+            "status": "stable",
+            "description": {
+                "en": "This variant should be used when the heading is the main content heading.",
+                "fr": "Cette variante doit être utilisée lorsque le titre est le titre principal du contenu."
+            },
+            "guidance": {
+                "en": "https://design.canada.ca/common-design-patterns/gc-h1.html",
+                "fr": "https://conception.canada.ca/configurations-conception-communes/gc-h1.html"
+            },
+            "revisedFor": "_:iteration_2",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            },
+            "implementation": [
+                "_:implement_1_upgrade",
+            ],
+            "oldImplementation": [
+                "_:implement_1_build"
+            ],
+            "history": [
+                {
+                    "en": "AAAA-MM-DD - Description 1",
+                    "fr": "AAAA-MM-DD - Description 1"
+                }
+            ]
+        },
+        {
+            "name": {
+                "en": "Main page title without [id=wb-cont]",
+                "fr": "Titre principal sans [id=wb-cont]"
+            },
+            "status": "stable",
+            "description": {
+                "en": "This variant should be used for other headings.",
+                "fr": "Cette variante doit être utilisée pour les autres titres."
+            },
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "implementation": {
+                "sample": {
+                    "rev_code": "<h1 property=\"name\" dir="ltr">Main page title</h1>"
+                }
+            },
+            "history": []
+        },
+        {
+            "name": {
+                "en": "Main page title enhanced with RDFa + schema.org with [id=wb-cont]",
+                "fr": "Titre principal enrichi avec RDFa + schema.org avec [id=wb-cont]"
+            },
+            "description": {
+                "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.",
+                "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca."
+            },
+            "status": "stable",
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "history": []
+        },
+        {
+            "name": {
+                "en": "Main page title enhanced with RDFa + schema.org without [id=wb-cont]",
+                "fr": "Titre principal enrichi avec RDFa + schema.org sans [id=wb-cont]"
+            },
+            "description": {
+                "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.",
+                "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca."
+            },
+            "status": "stable",
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "implementation": {
+                "sample": {
+                    "rev_code": "<h1 property=\"name\" typeof=\"Thing\" dir=\"ltr\">Your Heading Here</h1>"
+                }
+            },
+            "history": []
+        }
+    ],
+    "implementation": [
+        {
+            "@id": "_:implement_1_new",
+            "status": "",
+            "iteration": "_:iteration_1",
+            "name": {
+                "en": "",
+                "fr": ""
+            },
+            "sample": {
+                "@type": "code-compare",
+                "rev_title": "Version 2.0",
+                "rev_code": "",
+                "from_title": "",
+                "from_code": ""
+            },
+            "introduction": {
+                "en": "",
+                "fr": ""
+            }
+        }
+    ],
+    "changeset": [
+        {
+            "@id": "_:cs_default",
+            "name": {
+                "en": "Version 1",
+                "fr": "Version 1"
+            },
+            "status": "stable",
+            "baseOnIteration": "_:iteration_1",
+            "detectableBy": "",
+            "layout": [
+                ""
+            ],
+            "style": [
+
+            ],
+            "semantic": {
+                "@type": "",
+                "description": "",
+                "code": {
+                    "@type": [
+                        "@id",
+                        "rdf:HTML"
+                    ],
+                    "@value": "includes/gc-h1.html"
+                }
+            },
+            "logic": "",
+            "behaviour": "",
+            "recognition": "",
+            "guidance": "",
+            "context": "",
+            "configuration":[
+                ""
+            ],
+            "static": "",
+            "schema": "",
+            "dependency": [
+                ""
+            ],
+            "file": [
+                ""
+            ]
+        }
+    ],
+    "iteration": [
+        {
+            "@id": "_:iteration_1",
+            "name": {
+                "en": "v1",
+                "fr": "v1"
+            },
+            "date": "2018-09",
+            "detectableBy": "",
+            "comment": "",
+            "successor": "_:iteration_2",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            }
+        }
+        {
+            "@id": "_:iteration_2",
+            "name": {
+                "en": "v2",
+                "fr": "v2"
+            },
+            "date": "2023-08",
+            "detectableBy": "",
+            "breaking": {
+                "semantic": ""
+            },
+            "additions": {
+                "api": ""
+            },
+            "fixes": {
+                "api": ""
+            },
+            "predecessor": "_:iteration_1",
+            "comment": "",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            }
+        }
+    ]
+}
 ,{
 	"@context": {
 		"@version": 2.0,

diff --git a/components/baseline/_base.scss b/components/baseline/_base.scss
@@ -7,19 +7,6 @@
 	background-color: #355688;
 }
 
-/* H1 short bold red underline */
-h1.gc-thickline {
-	border-bottom: none;
-
-	&::after {
-		border-bottom: .18em solid #af3c43;
-		content: "";
-		display: block;
-		padding-bottom: 8px;
-		width: 70px;
-	}
-}
-
 /*
 * Panel title
 */

diff --git a/sites/_variables.scss b/sites/_variables.scss
@@ -14,6 +14,11 @@ $search-gray: #e0e0e0;
 $profile-gray: #eaebed;
 $gray-light: #6f6f6f; // Light grey colour (Bootstrap override).
 
+// Brand variables
+$rule-width: 71px;
+$rule-thickness: .18em;
+$rule-color: $border-red;
+
 // Colours for the alert styles
 $alert-danger-color: #d3080c;
 $alert-warning-color: #ee7100;

diff --git a/sites/baseline/_heading.scss b/sites/baseline/_heading.scss
@@ -8,7 +8,6 @@
  */
 
 h1 {
-	border-bottom: 1px solid $border-red;
 	margin-bottom: .2em;
 	margin-top: 1em;
 	padding-bottom: .2em;

diff --git a/sites/main-page-title/_base.scss b/sites/main-page-title/_base.scss
@@ -0,0 +1,7 @@
+/* H1 short bold red underline */
+
+h1#wb-cont {
+	border-bottom: $rule-thickness solid $rule-color;
+	border-image: linear-gradient(to right, $rule-color $rule-width, transparent $rule-width);
+	border-image-slice: 1;
+}
diff --git a/sites/main-page-title/includes/main-page-title.html b/sites/main-page-title/includes/main-page-title.html
@@ -0,0 +1 @@
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>