Minor - Update institution-landing-en.html (#2161)

* Institution landing page: stabilizing page template Co-authored by: Jennifer Mealing <[email protected]> * Institutional landing page: minor doc edits --------- Co-authored-by: Marc-André Garneau <[email protected]>
wet-boew · Apr 16, 2024 · 6396e1b · 6396e1b
1 parent 5c3bc94
commit 6396e1b
Show file tree

Hide file tree

Showing 31 changed files with 1,017 additions and 94 deletions.
diff --git a/_data/design-patterns.json b/_data/design-patterns.json
@@ -113,4 +113,224 @@
 		}
 	]
 }
-]
+,{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Introduction block - Documentation and working example",
+		"fr": "Bloc d’introduction - Documentation et example pratique"
+	},
+	"description": {
+		"en": "Guidance about using the introduction block pattern on Canada.ca.",
+		"fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca."
+	},
+	"modified": "2023-08-16",
+	"componentName": "gc-intro",
+	"pages": {
+		"docs": [
+			{
+				"title": "Introduction block",
+				"language": "en",
+				"path": "gc-intro-doc-en.html"
+			},
+		{
+				"title": "Bloc d’introduction",
+				"language": "fr",
+				"path": "gc-intro-doc-fr.html"
+			}
+		],
+		"examples": [
+			{
+				"title": "Introduction block",
+				"language": "en",
+				"path": "gc-intro-en.html"
+			},
+			{
+				"title": "Bloc d’introduction",
+				"language": "fr",
+				"path": "gc-intro-fr.html"
+			},
+			{
+				"title": "Introduction block with image",
+				"language": "en",
+				"path": "gc-intro-image-en.html"
+			},
+			{
+				"title": "Bloc d’introduction avec image",
+				"language": "fr",
+				"path": "gc-intro-image-fr.html"
+			}
+		]
+	},
+	"dependencies": [
+		"bgimg"
+	],
+	"a11yGuidance": "No accessibility guidance.",
+	"variations": [
+		{
+			"name": {
+				"en": "Introduction block - default",
+				"fr": "Bloc d'introduction - par défaut"
+			},
+			"description": {
+				"en": "The introduction block pattern introduces the content of a landing page.",
+				"fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/common-design-patterns/intro-block.html",
+				"fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html"
+			},
+			"iteration": "_:iteration_intro_1",
+			"example": [
+				{
+					"en": { "href": "gc-intro-en.html", "text": "Introduction block" },
+					"fr": { "href": "gc-intro-fr.html", "text": "Bloc d'introduction" }
+				}
+			],
+			"implementation": [
+				"_:implement_intro"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Initial implementation of the variation.",
+					"fr": "Mars 2024 - Implémentation initiale de la variante."
+				}
+			]
+		},
+		{
+			"name": {
+				"en": "Introduction block with image",
+				"fr": "Bloc d'introduction avec image"
+			},
+			"description": {
+				"en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.",
+				"fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/common-design-patterns/intro-block.html",
+				"fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html"
+			},
+			"example": [
+				{
+					"en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" },
+					"fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" }
+				}
+			],
+			"implementation": [
+				"_:implement_intro_image"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Initial implementation of the variation.",
+					"fr": "Mars 2024 - Implémentation initiale de la variante."
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_intro",
+			"iteration": "_:iteration_intro_1",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the component manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
+			},
+			"instructions": {
+				"en": [
+					"The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.",
+					"According to the Canada.ca design system guidance, the introduction block with image contains the following elements:<ul><li>title (mandatory)</li><li>short description (mandatory)</li><li>supertask button (optional)</li></ul>",
+					"Refer to the code sample below."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.",
+					"Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants&nbsp;:<ul><li>titre (obligatoire)</li><li>description courte (obligatoire)</li><li> bouton de super-tâche (facultatif)</li></ul>",
+					"Référez-vous au code qui suit."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<h1 property=\"name\" id=\"wb-cont\">Introduction block</h1>\n<p>The introduction block pattern introduces the content of a landing page.</p>\n<p><a class=\"btn btn-call-to-action\" href=\"#\">Super task button</a></p>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<h1 property=\"name\" id=\"wb-cont\">Bloc d'introduction</h1>\n<p>La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.</p>\n<p><a class=\"btn btn-call-to-action\" href=\"#\">Bouton de super-tâche</a></p>"
+					}
+				]
+			}
+		},
+		{
+			"@id": "_:implement_intro_image",
+			"iteration": "_:iteration_intro_image_1",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "This implementation is meant for developers/publishers adding the component manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
+			},
+			"instructions": {
+				"en": [
+					"The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.",
+					"According to the Canada.ca design system guidance, the introduction block with image contains the following elements:<ul><li>title (mandatory)</li><li>short description (mandatory)</li><li>image (mandatory)</li><li>supertask button (optional)</li></ul>",
+					"Refer to the code sample below."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.",
+					"Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants&nbsp;:<ul><li>titre (obligatoire)</li><li>description courte (obligatoire)</li><li>image (obligatoire)</li><li> bouton de super-tâche (facultatif)</li></ul>",
+					"Référez-vous au code qui suit."
+				]
+			},
+			"techConsiderations": {
+				"en": [
+					"It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 with the background image on every breakpoint and with a zoom of up to 400%.",
+					"The background image size recommended is 1200px by 726px. For more information on the background image, please consult the official guidelines."
+				],
+				"fr": [
+					"Il est de la responsabilité de l'auteur de s'assurer que l'ensemble du texte présente un rapport de contraste minimum de 4:1 avec l'image d'arrière-plan sur chaque point d'arrêt et avec un zoom allant jusqu'à 400&nbsp;%.",
+					"La taille de l’image d’arrière-plan recommandée est de 1200px par 726px. Pour plus d'information sur l'image d'arrière-plan, veuillez consulter les directives officielles."
+				]
+			},
+			"notes": {
+				"en": [
+					"The introduction block pattern with image must be located outside of the default page container (or any element with the class <code>.container</code>)."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe <code>.container</code>)."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<div class=\"bg-center bg-cover\" data-bgimg-srcset=\"https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-md-7\">\n\t\t\t\t<h1 property=\"name\" id=\"wb-cont\">[Institution name]</h1>\n\t\t\t\t<p>Short description of the institution’s mandate.</p>\n\t\t\t\t<p><a class=\"btn btn-call-to-action\" href=\"#\">Super task button</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<div class=\"bg-center bg-cover\" data-bgimg-srcset=\"https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-md-7\">\n\t\t\t\t<h1 property=\"name\" id=\"wb-cont\">[Nom de l’institution]</h1>\n\t\t\t\t<p>Description courte du mandat de d’institution.</p>\n\t\t\t\t<p><a class=\"btn btn-call-to-action\" href=\"#\">Bouton de super-tâche</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+					}
+				]
+			}
+		}
+	]
+}
+]