Theme and topic menu guidance (#206)

* Add topic menu guidance

* Uncomment date frontmatter

* Summary img alt text

* Update components package

* Add missing other names

src/en/components/theme-and-topic-menu/base.md

@@ -0,0 +1,20 @@
+---
+github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-topic-menu
+figma: https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=8424-2028&mode=design&t=hrO7Ny2trtHm84aD-0
+permalink: false
+tags: ['themeand-topic-menuEN', 'header']
+---
+
+# Theme and topic menu <br>`<gcds-topic-menu>`
+
+_Also called: global navigation, theme-based navigation._
+
+The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
+
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
+
+{% componentPreview "Theme and topic menu component preview" "px-0 py-400" %}
+  <gcds-topic-menu>
+  </gcds-topic-menu>
+{% endcomponentPreview %}

src/en/components/theme-and-topic-menu/code.md

@@ -0,0 +1,31 @@
+---
+title: Theme and topic menu
+layout: "layouts/component-documentation.njk"
+translationKey: "themeand-topic-menuCode"
+tags: ['themeand-topic-menuEN', 'code']
+date: "git Last Modified"
+---
+
+## Build a theme and topic menu
+
+Use the theme and topic menu to provide global navigation to Government of Canada sites.
+
+## Coding and accessibility for theme and topic menu
+
+### Use the theme and topic menu with other components
+
+Add the theme and topic menu directly to the <a href="{{ links.header }}">header</a> component by passing a child element with the `slot="menu"` attribute in the header. This will place the theme and topic menu in the header after the language toggle, signature, and search slots.
+
+**Note**: If applying the theme and topic menu to the front page of Canada.ca, use the `home` attribute to render with the correct styling.
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="iframeTitle"
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-theme-and-topic-menu--events-properties"
+  width="1200"
+  height="1700"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

src/en/components/theme-and-topic-menu/design.md

@@ -0,0 +1,23 @@
+---
+title: Theme and topic menu
+layout: "layouts/component-documentation.njk"
+translationKey: "themeand-topic-menuDesign"
+tags: ['themeand-topic-menuEN', 'design']
+date: "git Last Modified"
+---
+
+## Theme and topic menu anatomy
+
+<ol class="anatomy-list">
+  <li>The <strong>menu button</strong> toggles the Theme and topic menu open or closed.</li>
+  <li>The <strong>theme and topic list</strong> includes the pre-set main themes for Canada.ca.</li>
+  <li>The <strong>flyout</strong> is a list of relevant links to each topic that appears on hover. All links will load and update automatically.</li>
+  <li><strong>Most requested links</strong> is a list of the most frequent actions taken in each theme. All links will load and update automatically.</li>
+</ol>
+
+<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-topic-menu-anatomy.svg" alt="The theme and topic menu with numbers pointing to individual parts of the component’s anatomy." />
+
+## Accessibility and design for the theme and topic menu
+
+- Style the menu button label as capital letters, but write the label in sentence case (Menu), so screen readers don't read each letter individually.
+- Place the theme and topic menu in the header underneath the divider line.

src/en/components/theme-and-topic-menu/use-case.md

@@ -0,0 +1,34 @@
+---
+title: Theme and topic menu
+layout: "layouts/component-documentation.njk"
+eleventyNavigation:
+  key: themeand-topic-menuEN
+  title: Theme and topic menu
+  locale: en
+  parent: componentsEN
+  otherNames: global navigation, theme-based navigation.
+  description: The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
+  thumbnail: /images/common/components/preview-topic-menu.svg
+  alt: Theme and topic menu shows a grey menu button above an expanded vertical list of menu options.
+  state: published
+translationKey: "themeand-topic-menu"
+tags: ['themeand-topic-menuEN', 'usage']
+permalink: /en/components/theme-and-topic-menu/
+date: "git Last Modified"
+---
+
+## Problems the theme and topic menu solves
+
+Use theme and topic menu to:
+
+- Provide global navigation across Government of Canada web pages, when people commonly need to access these pages from your website.
+
+<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
+  <h2 class="mt-0 mb-400">Related components</h2>
+
+  <a href="{{ links.header }}" class="link-light">Header</a> for placing the Government of Canada branded header landmark.
+
+  <a href="{{ links.footer }}" class="link-light">Footer</a> for placing the Government of Canada branded footer landmark.
+
+  <a href="{{ links.topNav }}" class="link-light">Top navigation</a> and <a href="{{ links.sideNav }}" class="link-light">side navigation</a> for a more customized navigation.
+</article>

src/en/en.json

@@ -44,6 +44,7 @@
     "text": "/en/coming-soon",
     "textarea": "/en/components/textarea",
     "topNav": "/en/components/top-navigation",
+    "topicmenu": "/en/components/theme-and-topic-menu/",
     "verifyBanner": "/en/coming-soon",
 
     "about": "/en/contact/#about-gc-design-system",

src/fr/composants/menu-des-themes-et-sujets/base.md

@@ -0,0 +1,20 @@
+---
+github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-topic-menu
+figma: https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=8424-2028&mode=design&t=hrO7Ny2trtHm84aD-0
+permalink: false
+tags: ['themeand-topic-menuFR', 'header']
+---
+
+# Menu des thèmes et sujets <br>`<gcds-component-name>`
+
+_Autres noms : navigation globale, navigation par thème._
+
+Le menu des thèmes et sujets est un mécanisme de navigation vers les tâches les plus importantes des sites Web du gouvernement du Canada.
+
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
+
+{% componentPreview "Aperçu du composant de menu des thèmes et sujets" "px-0 py-400" %}
+  <gcds-topic-menu>
+  </gcds-topic-menu>
+{% endcomponentPreview %}

src/fr/composants/menu-des-themes-et-sujets/case-dusage.md

@@ -0,0 +1,34 @@
+---
+title: Menu des thèmes et sujets
+layout: "layouts/component-documentation.njk"
+eleventyNavigation:
+  key: themeand-topic-menuFR
+  title: Menu des thèmes et sujets
+  locale: fr
+  parent: componentsFR
+  otherNames: navigation globale, navigation par thème.
+  description: Le menu des thèmes et sujets est un mécanisme de navigation vers les tâches les plus importantes des sites Web du gouvernement du Canada.
+  thumbnail: /images/common/components/preview-topic-menu.svg
+  alt: Le menu des thèmes et sujets affiche un bouton de menu gris au-dessus d'une liste verticale étendue d'options de menu.
+  state: published
+translationKey: "themeand-topic-menu"
+tags: ['themeand-topic-menuFR', 'usage']
+permalink: /fr/composants/menu-des-themes-et-sujets/
+date: "git Last Modified"
+---
+
+## Problèmes résolus par le menu des thèmes et sujets
+
+Utilisez le menu des thèmes et sujets pour :
+
+- Permettre aux utilisateur·rice·s de naviguer dans l’ensemble des pages Web du gouvernement du Canada, notamment pour les pages accédées fréquemment à partir de votre site Web.
+
+<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
+  <h2 class="mt-0 mb-400">Composants connexes</h2>
+
+  <a href="{{ links.header }}" class="link-light">En-tête</a> : permet de placer l’image de marque du gouvernement du Canada dans l’en-tête.
+
+  <a href="{{ links.footer }}" class="link-light">Pied de page</a> : permet de placer l’image de marque du gouvernement du Canada en bas de page.
+
+  <a href="{{ links.topNav }}" class="link-light">Barre de navigation supérieure</a> and <a href="{{ links.sideNav }}" class="link-light">barre de navigation latérale</a> pour une navigation plus personnalisée.
+</article>

src/fr/composants/menu-des-themes-et-sujets/code.md

@@ -0,0 +1,31 @@
+---
+title: Menu des thèmes et sujets
+layout: "layouts/component-documentation.njk"
+translationKey: "themeand-topic-menuCode"
+tags: ['themeand-topic-menuFR', 'code']
+date: "git Last Modified"
+---
+
+## Création d’un menu des thèmes et sujets
+
+Utilisez le menu des thèmes et sujets pour permettre aux utilisateur·rice·s de naviguer à travers l’ensemble des sites du gouvernement du Canada.
+
+## Codage et accessibilité du menu des thèmes et sujets
+
+### Utilisation du menu des thèmes et sujets avec d’autres composants
+
+Ajoutez directement le menu des thèmes et sujets à l’<a href="{{ links.header }}">en-tête</a> en passant un élément secondaire avec l’attribut `slot="menu"` dans l’en-tête. Cela placera le menu des thèmes et sujets dans l’en-tête, à la suite de la bascule de la langue, la signature et la barre de recherche.
+
+Remarque : Si vous souhaitez ajouter un menu de thèmes et sujets à la page d’accueil de Canada.ca, utilisez l’attribut `home` pour utiliser le style approprié.
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="iframeTitle"
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-theme-and-topic-menu--events-properties"
+  width="1200"
+  height="1800"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

src/fr/composants/menu-des-themes-et-sujets/design.md

@@ -0,0 +1,23 @@
+---
+title: Menu des thèmes et sujets
+layout: "layouts/component-documentation.njk"
+translationKey: "themeand-topic-menuDesign"
+tags: ['themeand-topic-menuFR', 'design']
+date: "git Last Modified"
+---
+
+## Structure de la Menu des thèmes et sujets
+
+<ol class="anatomy-list">
+  <li>Le <strong>bouton du menu</strong> permet d’ouvrir et de fermer le menu des thèmes et sujets.</li>
+  <li>La <strong>section « Thèmes et sujets »</strong> est une liste contenant les thèmes principaux prédéfinis sur Canada.ca.</li>
+  <li>Le <strong>menu volant</strong> est une liste de liens pertinents pour chaque sujet. Tous les liens seront chargés et mis à jour automatiquement.</li>
+  <li>Les <strong>liens les plus en demande</strong> est une liste des actions les plus fréquemment effectuées pour chaque thème. Tous les liens seront chargés et mis à jour automatiquement.</li>
+</ol>
+
+<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-topic-menu-anatomy.svg" alt="Le menu des thèmes et sujets avec des flèches numérotées pointant vers les parties individuelles de la structure du composant." />
+
+## Accessibilité et design des menu des thèmes et sujets
+
+- La première lettre du libellé du bouton de menu doit être écrite en majuscule, mais le reste du libellé doit être écrit en minuscules (Menu) afin que les lecteurs d’écran ne lisent pas chaque lettre individuellement.
+- Placez le menu des thèmes et sujets dans l’en-tête sous la ligne de division.

src/fr/fr.json

@@ -44,6 +44,7 @@
     "text": "/fr/developpement-en-cours",
     "textarea": "/fr/composants/zone-de-texte",
     "topNav": "/fr/composants/barre-de-navigation-superieure",
+    "topicmenu": "/fr/composants/menu-des-themes-et-sujets/",
     "verifyBanner": "/fr/developpement-en-cours",
 
     "about": "/fr/contactez/#a-propos-de-systeme-de-design-gc",