diff --git a/src/en/components/theme-and-topic-menu/base.md b/src/en/components/theme-and-topic-menu/base.md new file mode 100644 index 000000000..5633f7b80 --- /dev/null +++ b/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
`` + +_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" %} + + +{% endcomponentPreview %} diff --git a/src/en/components/theme-and-topic-menu/code.md b/src/en/components/theme-and-topic-menu/code.md new file mode 100644 index 000000000..4b4e04a6a --- /dev/null +++ b/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 header 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" %} + + diff --git a/src/en/components/theme-and-topic-menu/design.md b/src/en/components/theme-and-topic-menu/design.md new file mode 100644 index 000000000..deb6f45b4 --- /dev/null +++ b/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 + +
    +
  1. The menu button toggles the Theme and topic menu open or closed.
    2. +
  2. The theme and topic list includes the pre-set main themes for Canada.ca.
    3. +
  3. The flyout is a list of relevant links to each topic that appears on hover. All links will load and update automatically.
    4. +
  4. Most requested links is a list of the most frequent actions taken in each theme. All links will load and update automatically.
    5. +
+ +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. diff --git a/src/en/components/theme-and-topic-menu/use-case.md b/src/en/components/theme-and-topic-menu/use-case.md new file mode 100644 index 000000000..687c5aa65 --- /dev/null +++ b/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. + +
+

Related components

+ + Header for placing the Government of Canada branded header landmark. + + Footer for placing the Government of Canada branded footer landmark. + + Top navigation and side navigation for a more customized navigation. +
diff --git a/src/en/en.json b/src/en/en.json index ddff0ff69..3d56f16ed 100644 --- a/src/en/en.json +++ b/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", diff --git a/src/fr/composants/menu-des-themes-et-sujets/base.md b/src/fr/composants/menu-des-themes-et-sujets/base.md new file mode 100644 index 000000000..67de8289f --- /dev/null +++ b/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
`` + +_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" %} + + +{% endcomponentPreview %} diff --git a/src/fr/composants/menu-des-themes-et-sujets/case-dusage.md b/src/fr/composants/menu-des-themes-et-sujets/case-dusage.md new file mode 100644 index 000000000..01946a516 --- /dev/null +++ b/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. + + diff --git a/src/fr/composants/menu-des-themes-et-sujets/code.md b/src/fr/composants/menu-des-themes-et-sujets/code.md new file mode 100644 index 000000000..41b9c82e0 --- /dev/null +++ b/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’en-tête 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" %} + + diff --git a/src/fr/composants/menu-des-themes-et-sujets/design.md b/src/fr/composants/menu-des-themes-et-sujets/design.md new file mode 100644 index 000000000..f38f86931 --- /dev/null +++ b/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 + +
    +
  1. Le bouton du menu permet d’ouvrir et de fermer le menu des thèmes et sujets.
    2. +
  2. La section « Thèmes et sujets » est une liste contenant les thèmes principaux prédéfinis sur Canada.ca.
    3. +
  3. Le menu volant est une liste de liens pertinents pour chaque sujet. Tous les liens seront chargés et mis à jour automatiquement.
    4. +
  4. Les liens les plus en demande 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.
    5. +
+ +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. diff --git a/src/fr/fr.json b/src/fr/fr.json index 4d424f520..05c0d076f 100644 --- a/src/fr/fr.json +++ b/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", diff --git a/src/images/common/components/preview-topic-menu.svg b/src/images/common/components/preview-topic-menu.svg new file mode 100644 index 000000000..9cdbf3dd2 --- /dev/null +++ b/src/images/common/components/preview-topic-menu.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/en/components/anatomy/gcds-topic-menu-anatomy.svg b/src/images/en/components/anatomy/gcds-topic-menu-anatomy.svg new file mode 100644 index 000000000..e7a1289bf --- /dev/null +++ b/src/images/en/components/anatomy/gcds-topic-menu-anatomy.svg @@ -0,0 +1,280 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/fr/components/anatomy/gcds-topic-menu-anatomy.svg b/src/images/fr/components/anatomy/gcds-topic-menu-anatomy.svg new file mode 100644 index 000000000..9e3a87bf6 --- /dev/null +++ b/src/images/fr/components/anatomy/gcds-topic-menu-anatomy.svg @@ -0,0 +1,280 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +