Doc updates: Provide a faster way to github (#429)

* chore: move component tags below list of components * chore: move fr, and move text * chore: updates, Canada.ca required, doclinks * chore: add required description to required components * chore: replace Core with Canada.ca required * chore: replace de base with requis sur canada.ca
cds-snc · Oct 17, 2024 · 03c7c23 · 03c7c23
1 parent 95ae906
commit 03c7c23
Show file tree

Hide file tree

Showing 19 changed files with 65 additions and 32 deletions.
diff --git a/src/_data/componenttags.js b/src/_data/componenttags.js
@@ -0,0 +1,16 @@
+module.exports = {
+    en: {
+        heading: 'Component tags',
+        paragraphs: [
+            "Canada.ca required components help you meet federal identity standards for the Government of Canada in any product.",
+            "Experimental components point out new features we're trying out and think you might like to use.",
+            ]
+    },
+    fr: {
+        heading: 'Balises de composants',
+        paragraphs: [
+            "Les composants « Requis sur Canada.ca » vous aident à respecter les normes du gouvernement fédéral canadien en matière d'identité, quel que soit votre produit.",
+            "Les composants « À l'essai » indiquent de nouvelles fonctionnalités que nous testons ou qui devraient vous plaire.",
+        ]
+    },
+};
diff --git a/src/_includes/layouts/component-overview.njk b/src/_includes/layouts/component-overview.njk
@@ -6,4 +6,6 @@ layout: "layouts/base.njk"
 
 {% include "partials/card-list.njk" %}
 
+{% include "partials/components-tags.njk" %}
+
 {% include "partials/lookingfor.njk" %}
diff --git a/src/_includes/partials/components-tags.njk b/src/_includes/partials/components-tags.njk
@@ -0,0 +1,5 @@
+<h2 id="component-tags" class="mt-500 mb-400">{{ componenttags[locale].heading }}</h2>
+
+{% for value in componenttags[locale].paragraphs %}
+<p class="mb-400">{{ value }}</p>
+{% endfor %}
diff --git a/src/en/components/breadcrumbs/use-case.md b/src/en/components/breadcrumbs/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: A path to the current page from each preceding level of the site's hierarchy.
   thumbnail: /images/common/components/preview-breadcrumbs.svg
   alt: Two thick grey lines with a chevron between them represent breadcrumb links.
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'breadcrumbs'
 tags: ['breadcrumbsEN', 'usage']
 permalink: /en/components/breadcrumbs/
 date: 'git Last Modified'
 ---
+Breadcrumbs is a required component for Canada.ca pages.
 
 Check out use cases for breadcrumbs to see if they fit the problem you're solving for.
 

diff --git a/src/en/components/components.md b/src/en/components/components.md
@@ -11,19 +11,18 @@ date: 'git Last Modified'
 nocrawl: true
 cardlist:
   type: components
-  state: published
+  state: published 
+github: https://github.com/cds-snc/gcds-components
+figma: https://www.figma.com/design/mh2maMG2NBtk41k1O1UGHV/GC-Design-System?t=PG2QugKV1npEMJX5-0
 ---
 
 # {{ title }}
 
 GC Design System components are user interface building blocks that address different user objectives. Each comes with reusable code, best practice advice, and accessibility tips.
 
-We're sharing components as we build them.
-
-## Component tags
-
-Core components help you meet federal identity standards for the Government of Canada in any product.
-
-Experimental components point out new features we're trying out and think you might like to use.
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
 
 ## Browse components
+
+We're sharing components as we build them.
diff --git a/src/en/components/date-modified/use-case.md b/src/en/components/date-modified/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: A timestamp of the last page update.
   thumbnail: /images/common/components/preview-date-modified.svg
   alt: A thick grey line, above a representation the page footer, represents the last page update text. 
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'datemodified'
 tags: ['datemodifiedEN', 'usage']
 permalink: /en/components/date-modified/
 date: 'git Last Modified'
 ---
+Date modified is a required component for Canada.ca pages.
 
 ## Problems date modified solves
 

diff --git a/src/en/components/footer/use-case.md b/src/en/components/footer/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: The Government of Canada branded footer landmark.
   thumbnail: /images/common/components/preview-footer.svg
   alt: Footer component shows blue box showing the way text would be filled, at the bottom there is a government of Canada logo.
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'footer'
 tags: ['footerEN', 'usage']
 permalink: /en/components/footer/
 date: 'git Last Modified'
 ---
+Footer is a required component for Canada.ca pages.
 
 Take a look at what problems the footer solves to see if they fit the problem you're solving for.
 

diff --git a/src/en/components/header/use-case.md b/src/en/components/header/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: The Government of Canada branded header landmark.
   thumbnail: /images/common/components/preview-header.svg
   alt: Three horizontal banners stacked on top of each other. The first is a grey banner with three dots on the left, representing a browser banner. The second is a dark blue banner with a white outline representing a phase banner. The third is white banner holding a Canada flag and two stacked, thick grey lines that represent lines of text. 
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'header'
 tags: ['headerEN', 'usage']
 permalink: /en/components/header/
 date: 'git Last Modified'
 ---
+Header is a required component for Canada.ca pages.
 
 Take a look at what problems the header solves to see if they fit the problem you're solving for.
 

diff --git a/src/en/components/language-toggle/use-case.md b/src/en/components/language-toggle/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: A switch for displaying either French or English site content.
   thumbnail: /images/common/components/preview-lang-toggle.svg
   alt: Language toggle component shows FR for French icon double ended arrows to EN for English.
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'langtoggle'
 tags: ['langtoggleEN', 'usage']
 permalink: /en/components/language-toggle/
 date: 'git Last Modified'
 ---
+Language toggle is a required component for Canada.ca pages.
 
 Take a look at use cases for the language toggle to see if it fits the problem you're solving for.
 

diff --git a/src/en/components/search/use-case.md b/src/en/components/search/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: A space for entering keywords to find relevant information.
   thumbnail: /images/common/components/preview-search.svg
   alt: The search component shows a blank search input field with a cursor in it. At the end of the input field is a dark blue rectangle representing a button with a search icon in it.
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'search'
 tags: ['searchEN', 'usage']
 permalink: /en/components/search/
 date: "git Last Modified"
 ---
+Search is a required component for Canada.ca pages.
 
 ## Use cases for search
 

diff --git a/src/en/components/signature/use-case.md b/src/en/components/signature/use-case.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: A corporate identity marker for the Government of Canada.
   thumbnail: /images/common/components/preview-signature.svg
   alt: Signature component shows Canadian Flag and grey boxes where signature text would be.
-  tag: Core
+  tag: Canada.ca required
   state: published
 translationKey: 'signature'
 tags: ['signatureEN', 'usage']
 permalink: /en/components/signature/
 date: 'git Last Modified'
 ---
+Signature is a required component for Canada.ca pages.
 
 Check out use cases for the signature to see if they fit the problem you're solving for.
 

diff --git a/src/fr/composants/Chemin-de-navigation/cas-dutilisation.md b/src/fr/composants/Chemin-de-navigation/cas-dutilisation.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: Un chemin d'accès à la page actuelle à partir de chaque niveau précédent de la hiérarchie du site.
   thumbnail: /images/common/components/preview-breadcrumbs.svg
   alt: Deux épaisses lignes grises côte à côte, séparées par un chevron, représentent les liens d’un chemin de navigation.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'breadcrumbs'
 tags: ['breadcrumbsFR', 'usage']
 permalink: /fr/composants/chemin-de-navigation/
 date: 'git Last Modified'
 ---
+Le chemin de navigation est un composant obligatoire pour les pages Canada.ca.
 
 Examinez les cas d'utilisation des chemins de navigation pour déterminer s'ils répondent à vos besoins.
 

diff --git a/src/fr/composants/bascule-de-langue/cas-dutilisation.md b/src/fr/composants/bascule-de-langue/cas-dutilisation.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: Un bouton permettant d’afficher le contenu du site en français ou en anglais.
   thumbnail: /images/common/components/preview-lang-toggle.svg
   alt: Un aperçu du composant changement de langue qui montre les abbréviations f et r pour français suivi de e et n pour anglais, séparées d'une flèche pointant vers les deux abbréviations.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'langtoggle'
 tags: ['langtoggleFR', 'usage']
 permalink: /fr/composants/bascule-de-langue/
 date: 'git Last Modified'
 ---
+La bascule de langue est un composant obligatoire pour les pages Canada.ca.
 
 Examinez les cas d’utilisation des bascules de langue pour déterminer si elles répondent à vos besoins.
 

diff --git a/src/fr/composants/composants.md b/src/fr/composants/composants.md
@@ -12,18 +12,17 @@ nocrawl: true
 cardlist:
   type: components
   state: published
+github: https://github.com/cds-snc/gcds-components
+figma: https://www.figma.com/design/o4SguSZdar2CCFzSkWNrmB/Syst%C3%A8me-de-design-GC?t=PG2QugKV1npEMJX5-0
 ---
 
 # {{ title }}
 
 Les composants du Système de design GC sont des blocs de construction d'interface utilisateur répondant à différents objectifs. Chaque composant s'accompagne de code réutilisable, de conseils relatifs aux meilleures pratiques et d'astuces en matière d'accessibilité.
 
-Nous proposons de nouveaux composants au fur et à mesure que nous les construisons.
-
-## Balises de composants
-
-Les composants « De base » vous aident à respecter les normes du gouvernement fédéral canadien en matière d'identité, quel que soit votre produit.
-
-Les composants « À l'essai » indiquent de nouvelles fonctionnalités que nous testons ou qui devraient vous plaire.
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
 
 ## Parcourir les composants
+
+Nous proposons de nouveaux composants au fur et à mesure que nous les construisons.
diff --git a/src/fr/composants/date-de-modification/cas-dutilisation.md b/src/fr/composants/date-de-modification/cas-dutilisation.md
@@ -10,15 +10,14 @@ eleventyNavigation:
   description: Horodatage de la dernière mise à jour d'une page.
   thumbnail: /images/common/components/preview-date-modified.svg
   alt: Une épaisse ligne grise surmontant une représentation du pied-de-page représente le libellé pour la date de dernière mise à jour de la page.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'datemodified'
 tags: ['datemodifiedFR', 'usage']
 permalink: /fr/composants/date-de-modification/
 date: 'git Last Modified'
 ---
-
-## Cas d'utilisation
+La date de modification est un composant obligatoire pour les pages Canada.ca.
 
 ### Problèmes résolus par la date de modification
 

diff --git a/src/fr/composants/en-tete/cas-dutilisation.md b/src/fr/composants/en-tete/cas-dutilisation.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: L'en-tête portant l'image de marque du gouvernement du Canada.
   thumbnail: /images/common/components/preview-header.svg
   alt: Trois bandes horizontales superposées l’une au-dessus de l’autre. La première est une bande grise avec trois petits cercles à gauche et représente la barre du navigateur. La deuxième est une bande bleu foncé avec une épaisse ligne pâle représentant la bannière de phase. La troisième est une bande blanche affichant le drapeau du Canada ainsi que deux épaisses lignes grises superposées représentant du texte.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'header'
 tags: ['headerFR', 'usage']
 permalink: /fr/composants/en-tete/
 date: 'git Last Modified'
 ---
+L'en-tête est un composant obligatoire pour les pages Canada.ca.
 
 Explorez les problèmes réglés par les en-têtes et découvrez s'ils peuvent être utilisés pour résoudre votre problème en particulier.
 

diff --git a/src/fr/composants/pied-de-page/cas-dutilisation.md b/src/fr/composants/pied-de-page/cas-dutilisation.md
@@ -10,19 +10,20 @@ eleventyNavigation:
   description: Le pied de page portant l'image de marque du gouvernement du Canada.
   thumbnail: /images/common/components/preview-footer.svg
   alt: Un aperçu du composant de pied de page qui montre une boîte rectangulaire bleue foncée avec à l'intérieur six boîtes grises représentants du texte. Sous cette boîte apparait une boîte rectangulaire grise avec à l'intérieur une boîte de texte grise et le logo du gouvernement du Canada.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'footer'
 tags: ['footerFR', 'usage']
 permalink: /fr/composants/pied-de-page/
 date: 'git Last Modified'
 ---
+Le pied de page est un composant obligatoire pour les pages Canada.ca.
 
 Explorez les problèmes que règlent les pieds de page et découvrez s'ils peuvent être utilisés pour résoudre votre problème particulier.
 
 ## Problèmes résolus par les pieds de page
 
-Pour les applications, formulaires et autres services numériques transactionnels de marques fiables, utilisez ce pied de page afin d'indiquer :
+Pour les applications, formulaires et autres services numériques transactionnels de marques fiables, utilisez ce pied de page afin d'indiquer :
 
 - La fin d'une page de produit ou d'un site;
 - Un service ou produit numérique du gouvernement du Canada offrant une vaste gamme de services et de renseignements;

diff --git a/src/fr/composants/recherche/cas-dutilisation.md b/src/fr/composants/recherche/cas-dutilisation.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: Un espace où entrer des mots clés pour chercher des renseignements pertinents.
   thumbnail: /images/common/components/preview-search.svg
   alt: Le composant Recherche affiche un champ de saisie de recherche vide avec un curseur à l'intérieur. À la fin du champ de saisie se trouve un rectangle bleu foncé comprenant un bouton avec une icône de loupe.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'search'
 tags: ['searchFR', 'usage']
 permalink: /fr/composants/recherche/
 date: "git Last Modified"
 ---
+Le composant recherche est un composant obligatoire pour les pages Canada.ca.
 
 ## Cas d’utilisation du composant recherche
 

diff --git a/src/fr/composants/signature/cas-dutilisation.md b/src/fr/composants/signature/cas-dutilisation.md
@@ -10,13 +10,14 @@ eleventyNavigation:
   description: L'image de marque pour le gouvernement du Canada.
   thumbnail: /images/common/components/preview-signature.svg
   alt: Un aperçu du composant signature qui montre l'image de marque du gouvernement fédéral incluant le drapeau du Canada suivi de boîtes de texte représentants le texte en anglais et en français.
-  tag: De base
+  tag: Requis sur Canada.ca
   state: published
 translationKey: 'signature'
 tags: ['signatureFR', 'usage']
 permalink: /fr/composants/signature/
 date: 'git Last Modified'
 ---
+La signature est un composant obligatoire pour les pages Canada.ca.
 
 Examinez les cas d'utilisation de la signature pour déterminer s'ils répondent à vos besoins.