Minor - Contributors: stabilizing component (#2374)

wet-boew · Jul 22, 2024 · c8653f3 · c8653f3
1 parent 32ebe65
commit c8653f3
Show file tree

Hide file tree

Showing 17 changed files with 477 additions and 81 deletions.
diff --git a/_data/components.json b/_data/components.json
@@ -229,6 +229,180 @@
 		]
 	}
 }
+,{
+	"@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": "Contributors",
+		"fr": "Collaborateurs"
+	},
+	"description": {
+		"en": "Links to institutions or organizations that support the content on the page.",
+		"fr": "Liens menant aux institutions ou aux organisations qui soutiennent le contenu sur la page."
+	},
+	"modified": "2024-05-28",
+	"componentName": "gc-contributors",
+	"status": "stable",
+	"version": "1.0.0",
+	"pages": {
+		"docs": [
+			{
+				"title": "Contributors",
+				"language": "en",
+				"path": "gc-contributors-doc-en.html"
+			},
+			{
+				"title": "Collaborateurs",
+				"language": "fr",
+				"path": "gc-contributors-doc-fr.html"
+			}
+		],
+		"examples": [
+			{
+				"title": "Contributors",
+				"language": "en",
+				"path": "gc-contributors-en.html"
+			},
+			{
+				"title": "Collaborateurs",
+				"language": "fr",
+				"path": "gc-contributors-fr.html"
+			}
+		]
+	},
+	"a11yGuidance": "No accessibility guidance.",
+	"variations": [
+		{
+			"name": {
+				"en": "Contributors - default",
+				"fr": "Collaborateurs - par défaut"
+			},
+			"status": "stable",
+			"description": {
+				"en": "Links to institutions or organizations that support the content on the page.",
+				"fr": "Liens menant aux institutions ou aux organisations qui soutiennent le contenu sur la page."
+			},
+			"iteration": "_:iteration_contributors_2",
+			"example": [
+				{
+					"en": { "href": "gc-contributors-en.html", "text": "Contributors" },
+					"fr": { "href": "gc-contributors-fr.html", "text": "Collaborateurs" }
+				}
+			],
+			"implementation": [
+				"_:implement_contributors"
+			],
+			"history": [
+				{
+					"en": "May 2024 - Stabilizing component.",
+					"fr": "Mai 2024 - Stabilisation du composant."
+				},
+				{
+					"en": "January 2021 - Initial provisional implementation to gather user experience data.",
+					"fr": "Janvier 2021 - Implémentation provisoire initiale pour recueillir des données sur l'expérience utilisateur."
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_contributors",
+			"iteration": "_:iteration_contributors_2",
+			"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": [
+					"Refer to the following code sample."
+				],
+				"fr": [
+					"Référez-vous au code qui suit."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<section class=\"gc-contributors\">\n\t<h2>From:</h2>\n\t<ul>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t</ul>\n</section>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<section class=\"gc-contributors\">\n\t<h2>De&nbsp;:</h2>\n\t<ul>\n\t\t<li><a href=\"#\">[Département ou agence]</a></li>\n\t\t<li><a href=\"#\">[Département ou agence]</a></li>\n\t</ul>\n</section>"
+					}
+				]
+			}
+		}
+	],
+	"iteration": [
+		{
+			"@id": "_:iteration_contributors_2",
+			"name": "Contributors - Iteration 2",
+			"date": "2024-05",
+			"detectableBy": ".gc-contributors:not(.provisional)",
+			"additions": [
+				"Stabilized component"
+			],
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"gc-contributors\">\n\t<h2>From:</h2>\n\t<ul>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t</ul>\n</section>"
+				}
+			],
+			"predecessor": "_:iteration_contributors_1"
+		},
+		{
+			"@id": "_:iteration_contributors_1",
+			"name": "Contributors - Iteration 1",
+			"date": "2021-01",
+			"detectableBy": ".provisional.gc-contributors",
+			"assets": [
+				{
+					"@type": "source-code",
+					"@language": "en",
+					"description": "Code sample",
+					"code": "<section class=\"provisional gc-contributors\">\n\t<h2>From:</h2>\n\t<ul>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t\t<li><a href=\"#\">[Department or agency]</a></li>\n\t</ul>\n</section>"
+				}
+			],
+			"successor": "_:iteration_contributors_2"
+		}
+	],
+	"changesets": [
+		{
+			"@id": "_:cs_contributors",
+			"name": "Contributors",
+			"status": "stable",
+			"baseOnIteration": "_:iteration_contributors_2",
+			"detectableBy": ".gc-contributors",
+			"layout": "Title and list are displayed inline on medium screens and up. They are displayed vertically on smaller screens.",
+			"semantic": "section>h2+ul>li*n>a",
+			"style": "The <h2> font size is smaller. The links are bolded.",
+			"static": [
+				"From:",
+				"De :"
+			],
+			"schema": [
+				"Array of contributors objects",
+				"contributors object: contributor name, contributor link"
+			]
+		}
+	]
+}
 ,{
 	"@context": {
 		"@version": 1.1,

diff --git a/_includes/components/gc-contributors/gc-contributors.html b/_includes/components/gc-contributors/gc-contributors.html
@@ -0,0 +1,7 @@
+<section class="gc-contributors">
+	<h2>{% if page.language == "en" %}From:{% else %}De&nbsp;:{% endif %}</h2>
+	<ul>
+		<li><a href="#">{% if page.language == "en" %}[Department or agency]{% else %}[Département ou agence]{% endif %}</a></li>
+		<li><a href="#">{% if page.language == "en" %}[Department or agency]{% else %}[Département ou agence]{% endif %}</a></li>
+	</ul>
+</section>
diff --git a/components/_provisional.scss b/components/_provisional.scss
@@ -162,25 +162,4 @@
 		overflow: hidden;
 		width: calc(50vw - 15px);
 	}
-
-	/* Contributors */
-	&.gc-contributors {
-		margin-top: 38px;
-
-		h2, ul {
-			display: inline;
-			font-size: $small-size;
-			margin-top: 0;
-		}
-
-		ul {
-			padding-inline-start: 0;
-
-			li {
-				display: inline-block;
-				font-weight: $bold-weight;
-				margin-right: .7em;
-			}
-		}
-	}
 }
diff --git a/components/gc-contributors/_base.scss b/components/gc-contributors/_base.scss
@@ -0,0 +1,18 @@
+/* Contributors */
+
+.gc-contributors {
+	margin-top: 38px;
+
+	h2, ul {
+		font-size: $small-size;
+		margin-top: 0;
+	}
+
+	ul {
+		padding-inline-start: 20px;
+
+		li {
+			font-weight: $bold-weight;
+		}
+	}
+}
diff --git a/components/gc-contributors/_gc-contributors.scss b/components/gc-contributors/_gc-contributors.scss
diff --git a/components/gc-contributors/_screen-md-min.scss b/components/gc-contributors/_screen-md-min.scss
@@ -0,0 +1,31 @@
+/*
+  WET-BOEW
+  @title: Medium view and over (screen only)
+  @desc:  Variable $screen-md-min >= 992px
+*/
+
+.gc-contributors {
+	display: flex;
+
+	h2 {
+		line-height: 1.8em;
+	}
+
+	ul {
+		padding-inline-start: 5px;
+
+		li {
+			display: inline-block;
+			margin-right: .5em;
+
+			&::after {
+				content: "\2022";
+				margin-left: .7em;
+			}
+
+			&:last-child::after {
+				content: none;
+			}
+		}
+	}
+}
diff --git a/components/gc-contributors/gc-contributors-doc-en.html b/components/gc-contributors/gc-contributors-doc-en.html
@@ -0,0 +1,9 @@
+---
+title: Contributors
+description: Documentation for the Contributors component
+language: en
+altLangPage: gc-contributors-doc-fr.html
+dateModified: 2024-05-28
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/components/gc-contributors/gc-contributors-doc-fr.html b/components/gc-contributors/gc-contributors-doc-fr.html
@@ -0,0 +1,9 @@
+---
+title: Collaborateurs
+description: Documentation pour la composante Collaborateurs
+language: fr
+altLangPage: gc-contributors-doc-en.html
+dateModified: 2024-05-28
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/components/gc-contributors/gc-contributors-en.html b/components/gc-contributors/gc-contributors-en.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": Contributors,
+	"description": Working example for the Contributors component,
+	"language": en,
+	"altLangPage": gc-contributors-fr.html,
+	"dateModified": 2024-05-28,
+	"breadcrumbs": [
+		{ "title": "Contributors - Documentation", "link": "components/gc-contributors/gc-contributors-doc-en.html" }
+	]
+}
+---
+<span class="wb-prettify all-pre hide"></span>
+
+<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum incidunt recusandae quae omnis laudantium mollitia minima! Vel laudantium quae dolorem et error, quas exercitationem ut. Facilis dolores nemo ullam sequi quod ea praesentium rem, consequuntur qui, sed reiciendis commodi excepturi aperiam obcaecati odit minima maiores? Nostrum illo adipisci iste consectetur.</p>
+
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tenetur, atque odit, recusandae iure illo deleniti culpa, pariatur iste suscipit doloremque quisquam reprehenderit sequi iusto! Molestiae itaque ipsa aliquid rerum atque, consequuntur vel nihil optio cumque in dolorem. Sint voluptates ipsa dicta sequi reiciendis corporis eaque ipsam omnis, quasi quo velit illo unde perspiciatis! Eaque minima, facilis corporis aperiam ea aut suscipit nulla, magni dolorem distinctio aspernatur in cupiditate? Rem nihil dolores rerum, sequi, veritatis, nobis minima adipisci qui veniam vel repudiandae. Et consectetur hic veritatis, tenetur officia architecto quos quas magnam tempora voluptatum quaerat doloremque ipsa porro harum suscipit.</p>
+
+{% highlight html %}{%- include_relative samples/gc-contributors.html -%}{% endhighlight %}
+
+{%- include_relative samples/gc-contributors.html -%}
diff --git a/components/gc-contributors/gc-contributors-fr.html b/components/gc-contributors/gc-contributors-fr.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": Collaborateurs,
+	"description": Exemple pratique de la composante Collaborateurs,
+	"language": fr,
+	"altLangPage": gc-contributors-en.html,
+	"dateModified": 2024-05-28,
+	"breadcrumbs": [
+		{ "title": "Collaborateurs - Documentation", "link": "components/gc-contributors/gc-contributors-doc-fr.html" }
+	]
+}
+---
+<span class="wb-prettify all-pre hide"></span>
+
+<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum incidunt recusandae quae omnis laudantium mollitia minima! Vel laudantium quae dolorem et error, quas exercitationem ut. Facilis dolores nemo ullam sequi quod ea praesentium rem, consequuntur qui, sed reiciendis commodi excepturi aperiam obcaecati odit minima maiores? Nostrum illo adipisci iste consectetur.</p>
+
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tenetur, atque odit, recusandae iure illo deleniti culpa, pariatur iste suscipit doloremque quisquam reprehenderit sequi iusto! Molestiae itaque ipsa aliquid rerum atque, consequuntur vel nihil optio cumque in dolorem. Sint voluptates ipsa dicta sequi reiciendis corporis eaque ipsam omnis, quasi quo velit illo unde perspiciatis! Eaque minima, facilis corporis aperiam ea aut suscipit nulla, magni dolorem distinctio aspernatur in cupiditate? Rem nihil dolores rerum, sequi, veritatis, nobis minima adipisci qui veniam vel repudiandae. Et consectetur hic veritatis, tenetur officia architecto quos quas magnam tempora voluptatum quaerat doloremque ipsa porro harum suscipit.</p>
+
+{% highlight html %}{%- include_relative samples/gc-contributors.html -%}{% endhighlight %}
+
+{%- include_relative samples/gc-contributors.html -%}