From 9a1ca44e64bf55360d42b55cd8f78c23785358fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Fri, 19 Jul 2024 11:30:54 -0400 Subject: [PATCH] Removing main menu --- _data/sites.json | 584 +++++++++++++++++- .../sites/breadcrumbs/breadcrumbs-v1-en.html | 19 + .../sites/breadcrumbs/breadcrumbs-v1-fr.html | 19 + sites/authentication/_base.scss | 2 +- ...ax.scss => _screen-sm-max_deprecated.scss} | 0 .../authentication/contextual-signin-en.html | 18 +- .../authentication/contextual-signin-fr.html | 20 +- .../contextual-signin-label-extended-en.html | 24 +- .../contextual-signin-label-extended-fr.html | 22 +- .../contextual-signin-nolabels-en.html | 16 +- .../contextual-signin-nolabels-fr.html | 16 +- .../contextual-signin-nomenu-en.html | 10 +- .../contextual-signin-nomenu-fr.html | 10 +- sites/breadcrumbs/_breadcrumb.scss | 14 +- sites/breadcrumbs/breadcrumbs-en.html | 137 +--- sites/breadcrumbs/breadcrumbs-fr.html | 137 +--- sites/breadcrumbs/includes/breadcrumbs.html | 50 +- sites/breadcrumbs/index.json-ld | 184 +++++- .../samples/breadcrumbs-v1-en.html | 19 + .../samples/breadcrumbs-v1-fr.html | 19 + sites/gcweb-menu/gcweb-menu-docs-en.html | 9 +- sites/gcweb-menu/gcweb-menu-docs-fr.html | 5 + sites/gcweb-menu/index.json-ld | 2 +- sites/header/_base.scss | 44 +- .../header-auth-v3.html | 12 +- .../{deprecated => demoted}/header-v3.html | 8 +- sites/header/deprecated/header-auth-v2.html | 7 +- sites/header/deprecated/header-v1.html | 5 +- sites/header/deprecated/header-v2.html | 7 +- sites/header/header-docs-en.html | 472 +------------- sites/header/header-docs-fr.html | 475 +------------- sites/header/includes/header.html | 26 +- sites/header/index.json-ld | 398 +++++++++++- sites/layouts/documentation.html | 4 +- sites/theme.scss | 2 +- templates/home/deprecated/home-auth-v2.html | 2 +- templates/home/deprecated/home-auth-v3.html | 2 +- templates/home/deprecated/home-v2.html | 2 +- templates/home/deprecated/home-v3.html | 2 +- 39 files changed, 1430 insertions(+), 1374 deletions(-) create mode 100644 _includes/sites/breadcrumbs/breadcrumbs-v1-en.html create mode 100644 _includes/sites/breadcrumbs/breadcrumbs-v1-fr.html rename sites/authentication/{_screen-sm-max.scss => _screen-sm-max_deprecated.scss} (100%) create mode 100644 sites/breadcrumbs/samples/breadcrumbs-v1-en.html create mode 100644 sites/breadcrumbs/samples/breadcrumbs-v1-fr.html rename sites/header/{deprecated => demoted}/header-auth-v3.html (88%) rename sites/header/{deprecated => demoted}/header-v3.html (91%) diff --git a/_data/sites.json b/_data/sites.json index 6b960b1aa8..f80bf53324 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -445,9 +445,10 @@ "en": "Indicates the location of the current page in relation to its parent in the site structure to reinforce a visitor’s current location in the Canada.ca user navigation model.", "fr": "L’objectif du fil d'Ariane est de renforcer l’emplacement actuel des visiteurs dans le modèle de navigation de l’utilisateur du site Canada.ca." }, - "modified": "2023-09-06", + "modified": "2024-08-01", "componentName": "breadcrumbs", "status": "stable", + "version": "2.0", "pages": { "docs": [ { @@ -461,7 +462,186 @@ "path": "breadcrumbs-fr.html" } ] - } + }, + "dependencies": "No dependency.", + "a11yGuidance": "No accessibility guidance", + "variations": [ + { + "name": { + "en": "Breadcrumb trail - default", + "fr": "Fil d'Ariane - par défaut" + }, + "status": "stable", + "description": { + "en": "The breadcrumb trail is a horizontal series of links that gives people a sense of where they are in relation to Canada.ca's navigation model. It represents the location of a page in relation to its parent and provides a clear way to navigate to higher levels in the site structure.", + "fr": "Le fil d’Ariane est une série horizontale de liens qui permet aux gens de se situer par rapport au modèle de navigation du site Canada.ca. Il représente l’emplacement d’une page par rapport à son parent et donne un moyen clair de naviguer vers les niveaux supérieurs de la structure du site." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/breadcrumb-trail.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/fil-ariane.html" + }, + "iteration": "_:iteration_bc_3", + "example": [ + { + "en": { "href": "../../content-page/content-en.html", "text": "Content page (breadcrumb trail at top of page)" }, + "fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (fil d'Ariane au haut de la page)" } + } + ], + "implementation": [ + "_:implement_bc" + ], + "history": [ + { + "en": "August 2024 - Removing container from the breadcrumb trail.", + "fr": "Août 2024 - Retrait du conteneur situé à l'intérieur du fil d'Ariane." + }, + { + "en": "March 2023 - Updating icon between breadcrumb items.", + "fr": "Mars 2023 - Mise à jour de l'icône entre les items du fil d'Ariane." + }, + { + "en": "January 2020 - Start of components version tracking.", + "fr": "Janvier 2020 - Début du suivi de version des composants." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_bc", + "iteration": "_:iteration_bc_3", + "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 code sample below.", + "The first item is always “Canada.ca”, which always links to the Canada.ca home page in the current language", + "The current page is never displayed at the end of the breadcrumb trail", + "Use a chevron right icon () to separate levels", + "Longer page titles are to be shortened where possible to reduce the space required to display the trail" + ], + "fr": [ + "Référez-vous à l'exemple de code ci-dessous.", + "Le fil d'Ariane commence toujours par « Canada.ca », qui est toujours un lien vers la page d'accueil de Canada.ca dans la langue actuelle.", + "La page en cours n’est jamais affichée à la fin de la piste de navigation.", + "Utilisez une icône de chevron à droite () pour séparer les niveaux", + "Les longs titres de page doivent être raccourcis dans la mesure du possible, pour permettre de réduire l’espace horizontal nécessaire pour afficher la piste." + ] + }, + "notes": { + "en": [ + "Each page or section name on the Canada.ca site should be associated with a shortened version of the name, for the purposes of breadcrumb and other navigation systems. For example, when on the “Planning a business” page in the Business and industry theme, the breadcrumb trail will be:
Canada.ca > Business > Starting a business", + "The page title should not be included within the breadcrumbs list items." + ], + "fr": [ + "Le nom de chaque page ou section dans le site Canada.ca doit être associé à une version raccourcie du nom, aux fins du fil d'Ariane et d’autres systèmes de navigation. Par exemple, lorsqu'une personne est sur la page « Planification d'entreprise » dans le thème « Entreprises et industrie » le fil d'Ariane sera :
Canada.ca  >  Entreprises  >  Lancer une entreprise", + "Le titre de la page ne dois pas être inclus parmis la liste de fil d'arianne." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_bc_3", + "name": "Breadcrumb trail - Iteration 3", + "date": "2020-08", + "detectableBy": "#wb-bc:not(:has(.container))", + "breaking": [ + "The container has been removed." + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + }, + { + "@id": "_:iteration_bc_2", + "name": "Breadcrumb trail - Iteration 2", + "date": "2023-03", + "detectableBy": "#wb-bc", + "fixes": [ + "Styles: changing levels separator from a greater-than sign (>) to a chevron right icon" + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + }, + { + "@id": "_:iteration_bc_1", + "name": "Breadcrumb trail - Iteration 1", + "date": "2020-01", + "detectableBy": "#wb-bc", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + } + ], + "changesets": [ + { + "@id": "_:cs_bc", + "name": "Breadcrumb trail", + "status": "stable", + "baseOnIteration": "_:iteration_bc_3", + "detectableBy": "#wb-bc:not(:has(.container))", + "layout": "The breadcrumb items are displayed horizontally.", + "semantic": "nav > h2 + (ol > li*n > (a + meta[property=position]))", + "static": [ + "You are here:", + "Vous êtes ici :" + ], + "schema": [ + "Array of breadcrumb item objects containing the following properties:", + "STRING: name", + "STRING: url" + ], + "style": "The levels separator is a chevron right icon.", + "include": { + "@type": "source-code", + "collapsed": true, + "description": "Include with logic in Liquid.", + "code": { + "@type": [ "@id", "rdf:HTML" ], + "@value": "includes/breadcrumbs.html" + } + } + } + ] } ,{ "@context": { @@ -2023,7 +2203,7 @@ }, "modified": "2023-10-25", "componentName": "gcweb-menu", - "status": "stable", + "status": "demoted", "pages": { "docs": [ { @@ -2049,14 +2229,16 @@ }, "title": { "en": "Header", - "fr": "Entête" + "fr": "En-tête" }, "description": { "en": "Documentation on how to use the header.", "fr": "Documentation sur l'utilisation de l'entête." }, - "modified": "2024-03-29", + "version": "4.0", + "modified": "2024-08-01", "componentName": "header", + "componentType": "container", "status": "stable", "pages": { "docs": [ @@ -2093,7 +2275,397 @@ "path": "reports/a11y-8-fr.html" } ] - } + }, + "dependencies": { + "en": [ + { "title": "Language toggle link", "url": "https://wet-boew.github.io/GCWeb/sites/language/language-en.html", "component": "language" }, + { "title": "Breadcrumb trail", "url": "https://wet-boew.github.io/GCWeb/sites/breadcrumbs/breadcrumbs-en.html", "component": "breadcrumbs" }, + { "title": "Authentication patterns", "url": "https://wet-boew.github.io/GCWeb/sites/authentication/authentication-en.html", "component": "authentication" } + ], + "fr": [ + { "title": "Lien pour changer de langue", "url": "https://wet-boew.github.io/GCWeb/sites/language/language-fr.html", "component": "language" }, + { "title": "Fil d'Ariane", "url": "https://wet-boew.github.io/GCWeb/sites/breadcrumbs/breadcrumbs-fr.html", "component": "breadcrumbs" }, + { "title": "Modèles d'authentification", "url": "https://wet-boew.github.io/GCWeb/sites/authentication/authentication-fr.html", "component": "authentication" } + ] + }, + "a11yGuidance": "no accessibility guidance", + "variations": [ + { + "name": { + "en": "Header", + "fr": "En-tête" + }, + "status": "stable", + "description": { + "en": "This component may contain the following components: Language toggle link, Breadcrumb trail, and Authentication patterns. It also contains the following untracked elements: Branding and Search", + "fr": "Ce composant peut contenir les composants suivants : Lien pour changer de langue, Fil d'Ariane et Modèles d'authentification. Il contient également les éléments non suivis suivants : Image de marque et Recherche" + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/global-header.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/en-tete-general.html" + }, + "iteration": "_:iteration_header_4", + "example": [ + { + "en": { "href": "../../templates/content-page/content-en.html", "text": "Content page" }, + "fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu" } + }, + { + "en": { "href": "../authentication/contextual-signin-en.html", "text": "Content page including Authentication section" }, + "fr": { "href": "../authentication/contextual-signin-en.html", "text": "Page de contenu incluant la section d'authentification" } + } + ], + "implementation": [ + "_:implement_header", + "_:implement_header_3_to_4", + "_:implement_header_gcweb" + ], + "history": [ + { + "en": "August 2024 - The GCWeb menu has been removed. The Breadcrumbs container has been moved to the Header component", + "fr": "Août 2024 - Le Menu GCWeb a été retiré. Le conteneur anciennement situé dans le composant Fil d'Ariane a été déplacé vers le composant En-tête." + }, + { + "en": "October 2022 - Changed Menu column to make consistent whether there is a Sign in button or not (always col-md-8). Changed the value for col-xs-5 and col-xs-offset-7 have been adjusted to a \"6\" so the button text doesn't break and stays on one line for every viewport.", + "fr": "Octobre 2022 - Colonne de menu modifiée pour rendre cohérent s'il y a ou non un bouton d'authentification (toujours col-md-8). La valeur de col-xs-5 et col-xs-offset-7 a été modifiée à \"6\" afin que le texte du bouton ne soit pas coupé et reste sur une ligne pour toutes les largeurs d'écran." + }, + { + "en": "May 2022 - The container has been moved outside of the GCWeb menu component.", + "fr": "Mai 2022 - Le conteneur a été déplacé à l'extérieur du composant Menu GCWeb." + }, + { + "en": "June 2020 - Initial implementation of the variation.", + "fr": "Juin 2020 - Implémentation initiale de la variante." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_header", + "iteration": "_:iteration_header_4", + "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 code sample below." + ], + "fr": [ + "Référez-vous à l'exemple de code ci-dessous." + ] + }, + "notes": { + "en": [ + "As of version 4.0, the Header no longer includes the GCWeb menu.", + "As of version 4.0, the container located in the Breadcrumbs component has been removed and the Breadrumb component has been moved to the container located right after the <hr>." + ], + "fr": [ + "Depuis la version 4.0, l'En-tête n'inclut plus le menu GCWeb.", + "Depuis la version 4.0, le conteneur situé dans le composant Fil d'Ariane a été retiré et le composant Fil d'Ariane a été déplacé à l'intérieur du conteneur situé juste après le <hr>." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_header_3_to_4", + "iteration": "_:iteration_header_4", + "name": { + "en": "Migrating from v3.0 to v4.0", + "fr": "Migration de v3.0 vers v4.0" + }, + "introduction": { + "en": "This implementation is meant for developers or publishers trying to migrate their page from using the page details version 3.0 to 4.0.", + "fr": "Cette implémentation est destinée aux développeurs ou aux éditeurs qui tentent de migrer leur page de la version 3.0 vers la version 4.0." + }, + "instructions": { + "en": [ + "Remove the <div class=\"row\"> from inside the <div class=\"container\"> located right after the <hr>.", + "Remove the <nav class=\"gcweb-menu\">.", + "Remove the <div class=\"container\"> from inside the <nav id=\"wb-bc\">.", + "Move the <nav id=\"wb-bc\"> inside the <div class=\"container\"> located right after the <hr>." + ], + "fr": [ + "Supprimez le <div class=\"row\"> situé à l'intérieur du <div class=\"container\"> situé juste après le <hr>.", + "Supprimez le <nav class=\"gcweb-menu\">.", + "Supprimez le <div class=\"container\"> situé à l'intérieur du <nav id=\"wb-bc\">.", + "Déplacez le <nav id=\"wb-bc\"> à l'intérieur du <div class=\"container\"> situé juste après le <hr>." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Version 3.0:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\t\n
" + }, + { + "@type": "source-code", + "description": "Version 4.0:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Version 3.0 :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\t\n
" + }, + { + "@type": "source-code", + "description": "Version 4.0 :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_header_gcweb", + "iteration": "_:iteration_header_4", + "name": { + "en": "GCWeb Jekyll", + "fr": "GCWeb Jekyll" + }, + "introduction": { + "en": "This implementation is meant for developers trying to implement this component within a GCWeb Jekyll site.", + "fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll." + }, + "instructions": { + "en": [ + "To show the language toggle link, in the page's front-matter, set the property altLangPage to the URL of the alternative language's page.", + "To hide the search bar, in the page's front-matter, set the property nositesearch to true.", + "To hide the breadcrumb trail, in the page's front-matter, set the property breadcrumbs to false. For more information on how to define the breadcrumb links, refer to the breadcrumbs documentation.", + "To show the authentication link, in the page's front-matter, set the property auth to an object containing the URL and label of the link. For more information on how to define the authentication link, refer to the authentication pattern documentation." + ], + "fr": [ + "Pour afficher le lien pour changer de langue, dans l'en-tête de la page, définissez la propriété altLangPage à l'URL de la page de la langue alternative.", + "Pour cacher la barre de recherche, dans l'en-tête de la page, définissez la propriété nositesearch à true.", + "Pour cacher le fil d'Ariane, dans l'en-tête de la page, définissez la propriété breadcrumbs à false. Pour plus d'informations sur la façon de définir les liens du fil d'Ariane, consultez la documentation du fil d'Ariane.", + "Pour afficher le lien d'authentification, dans l'en-tête de la page, définissez la propriété auth à un objet contenant l'URL et l'étiquette du lien. Pour plus d'informations sur la façon de définir les liens d'authentification', consultez la documentation du modèle d'authentification." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "---\n{\n\t\"altLangPage\": \"page-url.html\",\n\t\"nositesearch\": true,\n\t\"breadcrumbs\": false,\n\t\"auth\": {\n\t\t\"type\": \"contextual\",\n\t\t\"link\": \"page-url.html\",\n\t\t\"label\": \"Sign in\"\n\t}\n}\n---" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "---\n{\n\t\"altLangPage\": \"page-url.html\",\n\t\"nositesearch\": true,\n\t\"breadcrumbs\": false,\n\t\"auth\": {\n\t\t\"type\": \"contextual\",\n\t\t\"link\": \"page-url.html\",\n\t\t\"label\": \"Sign in\"\n\t}\n}\n---" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_header_4", + "name": "Header - Iteration 4", + "date": "2024-08", + "detectableBy": "#wb-bnr:not(:has(+ hr + .container > .row))", + "predecessor": "_:iteration_header_3", + "breaking": [ + "Removing GCWeb menu" + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Include with logic in liquid", + "code": { + "@type": [ "rdf:HTML", "@id" ], + "@value": "includes/header.html" + } + } + ] + }, + { + "@id": "_:iteration_header_3", + "name": "Header - Iteration 3", + "date": "2022-10", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-8", + "successor": "_:iteration_header_4", + "predecessor": "_:iteration_header_2", + "breaking": [ + "Changed Menu column to make consistent whether there is a Sign in button or not (always col-md-8).", + "Changed the value for col-xs-5 and col-xs-offset-7 have been adjusted to a \"6\" so the button text doesn't break and stays on one line for every viewport." + ], + "example": { + "en": [ + { + "href": "demoted/header-v3.html", + "text": "Header version 3" + }, + { + "href": "demoted/header-auth-v3.html", + "text": "Header version 3 with authentication link" + } + ], + "fr": [ + { + "href": "demoted/header-v3.html", + "text": "Header version 3" + }, + { + "href": "demoted/header-auth-v3.html", + "text": "Header version 3 with authentication link" + } + ] + } + }, + { + "@id": "_:iteration_header_2", + "name": "Header - Iteration 2", + "date": "2022-05", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-12", + "successor": "_:iteration_header_3", + "predecessor": "_:iteration_header_1", + "breaking": [ + "The container has been moved outside of the GCWeb menu component." + ], + "example": { + "en": [ + { + "href": "deprecated/header-v2.html", + "text": "Header version 2" + }, + { + "href": "deprecated/header-auth-v2.html", + "text": "Header version 2 with authentication link" + } + ], + "fr": [ + { + "href": "deprecated/header-v2.html", + "text": "Header version 2" + }, + { + "href": "deprecated/header-auth-v2.html", + "text": "Header version 2 with authentication link" + } + ] + } + }, + { + "@id": "_:iteration_header_1", + "name": "Header - Iteration 1", + "date": "2020-06", + "detectableBy": "#wb-bnr + .gcweb-menu", + "successor": "_:iteration_header_2", + "example": { + "en": [ + { + "href": "deprecated/header-v1.html", + "text": "Header version 1" + } + ], + "fr": [ + { + "href": "deprecated/header-v1.html", + "text": "Header version 1" + } + ] + } + } + ], + "changesets": [ + { + "@id": "_:cs_header_4", + "name": "Header - version 4.0", + "status": "stable", + "baseOnIteration": "_:iteration_header_4", + "detectableBy": "#wb-bnr:not(:has(+ hr + .container > .row))", + "layout": [ + "Language toggle link on the top right", + "Branding on the left, Search on the right", + "Horizontal divider", + "Breadcrumbs on the left, Authentication pattern on the right" + ], + "style": "Horizontal divider is 1px and light-gray", + "semantic": "
\n\t\n\t\n\t\n\t
\n\t\n\t\n
", + "include": { + "@type": "source-code", + "collapsed": true, + "description": "Include with logic in Liquid.", + "code": { + "@type": [ "@id", "rdf:HTML" ], + "@value": "includes/header.html" + } + }, + "logic": "Not applicable", + "guidance": "Not applicable", + "context": "Not applicable", + "configuration": [ + "Show or hide the alternative language link and define the alternative language page URL", + "Show or hide the search bar", + "Show or hide the breadcrumbs and defined the breadcrumbs item(s)", + "Show or hide the authentication pattern and define the authentication link(s)" + ] + }, + { + "@id": "_:cs_header_3", + "name": "Header - version 3.0", + "status": "demoted", + "baseOnIteration": "_:iteration_header_3", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-8", + "layout": [ + "Language toggle link on the top right", + "Branding on the left, Search on the right", + "Horizontal divider", + "Breadcrumbs on the left, Authentication pattern on the right" + ], + "style": "Horizontal divider is 3px and dark-blue", + "semantic": "
\n\t\n\t\n\t\n\t
\n\t\n\t\n
", + "logic": "Not applicable", + "guidance": "Not applicable", + "context": "Not applicable", + "configuration": [ + "Show or hide the alternative language link and define the alternative language page URL", + "Show or hide the search bar", + "Show or hide the breadcrumbs and defined the breadcrumbs item(s)", + "Show or hide the authentication pattern and define the authentication link(s)" + ] + }, + { + "@id": "_:cs_header_2", + "name": "Header - version 2.0", + "status": "deprecated", + "baseOnIteration": "_:iteration_header_2", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-12" + }, + { + "@id": "_:cs_header_1", + "name": "Header - version 1.0", + "status": "deprecated", + "baseOnIteration": "_:iteration_header_1", + "detectableBy": "#wb-bnr + .gcweb-menu" + } + ] } ,{ "@context": { diff --git a/_includes/sites/breadcrumbs/breadcrumbs-v1-en.html b/_includes/sites/breadcrumbs/breadcrumbs-v1-en.html new file mode 100644 index 0000000000..0aac0cbccc --- /dev/null +++ b/_includes/sites/breadcrumbs/breadcrumbs-v1-en.html @@ -0,0 +1,19 @@ + diff --git a/_includes/sites/breadcrumbs/breadcrumbs-v1-fr.html b/_includes/sites/breadcrumbs/breadcrumbs-v1-fr.html new file mode 100644 index 0000000000..1e83b7bd3d --- /dev/null +++ b/_includes/sites/breadcrumbs/breadcrumbs-v1-fr.html @@ -0,0 +1,19 @@ + diff --git a/sites/authentication/_base.scss b/sites/authentication/_base.scss index 3cacab0d33..f4929309af 100644 --- a/sites/authentication/_base.scss +++ b/sites/authentication/_base.scss @@ -3,10 +3,10 @@ */ #wb-so { + flex: 0 0 auto; .btn { border-radius: 0px; - margin-top: 5px; } a.btn-primary:hover { diff --git a/sites/authentication/_screen-sm-max.scss b/sites/authentication/_screen-sm-max_deprecated.scss similarity index 100% rename from sites/authentication/_screen-sm-max.scss rename to sites/authentication/_screen-sm-max_deprecated.scss diff --git a/sites/authentication/contextual-signin-en.html b/sites/authentication/contextual-signin-en.html index ee2f90a053..308945df9d 100644 --- a/sites/authentication/contextual-signin-en.html +++ b/sites/authentication/contextual-signin-en.html @@ -18,16 +18,14 @@

Expected output code

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Sign in</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html">Sign in</a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Sign in</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html">Sign in</a>
+</section>

GCWeb Jekyll - Front matter example

"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html",
-		"label": "Sign in"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html", + "label": "Sign in" +} diff --git a/sites/authentication/contextual-signin-fr.html b/sites/authentication/contextual-signin-fr.html index 882f217e41..325040f127 100644 --- a/sites/authentication/contextual-signin-fr.html +++ b/sites/authentication/contextual-signin-fr.html @@ -18,17 +18,15 @@

Code source attendu

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Se connecter</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html">Se connecter
-				</a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Se connecter</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html">Se connecter
+	</a>
+</section>

Exemple de l'initialisation pour GCWeb Jekyll

"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html"
-		"label": "Se connecter"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html" + "label": "Se connecter" +} diff --git a/sites/authentication/contextual-signin-label-extended-en.html b/sites/authentication/contextual-signin-label-extended-en.html index 2cc5a65ec8..fdd7479593 100644 --- a/sites/authentication/contextual-signin-label-extended-en.html +++ b/sites/authentication/contextual-signin-label-extended-en.html @@ -19,19 +19,17 @@

Expected output code

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Sign in</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html"><span class="visible-xs">Sign in</span>
-				<span class="hidden-xs">Sign in to [account name]</span>
-				</a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Sign in</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html"><span class="visible-xs">Sign in</span>
+	<span class="hidden-xs">Sign in to [account name]</span>
+	</a>
+</section>

GCWeb Jekyll - Front matter example

"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html",
-		"label": "Sign in",
-		"labelExtended": "Sign in to [account name]"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html", + "label": "Sign in", + "labelExtended": "Sign in to [account name]" +} diff --git a/sites/authentication/contextual-signin-label-extended-fr.html b/sites/authentication/contextual-signin-label-extended-fr.html index 111197a94f..2cdcb1afac 100644 --- a/sites/authentication/contextual-signin-label-extended-fr.html +++ b/sites/authentication/contextual-signin-label-extended-fr.html @@ -19,18 +19,16 @@

Code source attendu

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Se connecter</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html"><span class="visible-xs">Se connecter</span>
-				<span class="hidden-xs">Se connecter à [compte]</span></a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Se connecter</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html"><span class="visible-xs">Se connecter</span>
+	<span class="hidden-xs">Se connecter à [compte]</span></a>
+</section>

Exemple de l'initialisation pour GCWeb Jekyll

"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html",
-		"label": "Se connecter",
-		"labelExtended": "Se connecter à [compte]"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html", + "label": "Se connecter", + "labelExtended": "Se connecter à [compte]" +} diff --git a/sites/authentication/contextual-signin-nolabels-en.html b/sites/authentication/contextual-signin-nolabels-en.html index 6a68a0f070..966f4ca644 100644 --- a/sites/authentication/contextual-signin-nolabels-en.html +++ b/sites/authentication/contextual-signin-nolabels-en.html @@ -17,15 +17,13 @@

Expected output code

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Sign in</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html">Sign in</a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Sign in</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html">Sign in</a>
+</section>

GCWeb Jekyll - Front matter example

"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html" +} diff --git a/sites/authentication/contextual-signin-nolabels-fr.html b/sites/authentication/contextual-signin-nolabels-fr.html index 49edab0d65..e4794a10cc 100644 --- a/sites/authentication/contextual-signin-nolabels-fr.html +++ b/sites/authentication/contextual-signin-nolabels-fr.html @@ -17,15 +17,13 @@

Code source attendu

-
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-			<section id="wb-so">
-				<h2 class="wb-inv">Se connecter</h2>
-				<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html">Se connecter</a>
-			</section>
-		</div>
+
<section id="wb-so">
+	<h2 class="wb-inv">Se connecter</h2>
+	<a class="btn btn-primary" href="https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html">Se connecter</a>
+</section>

Exemple de l'initialisation pour GCWeb Jekyll

"contextSignin": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html"
-	}
+ "type": "contextual", + "link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html" +} diff --git a/sites/authentication/contextual-signin-nomenu-en.html b/sites/authentication/contextual-signin-nomenu-en.html index 7f420e57d7..f551887025 100644 --- a/sites/authentication/contextual-signin-nomenu-en.html +++ b/sites/authentication/contextual-signin-nomenu-en.html @@ -32,8 +32,8 @@

Expected output code

GCWeb Jekyll - Front matter example

"nomenu": true,
-		auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html",
-		"label": "Sign in"
-	}
+ auth": { + "type": "contextual", + "link": "https://www.canada.ca/en/revenue-agency/services/e-services/e-services-individuals/account-individuals.html", + "label": "Sign in" +} diff --git a/sites/authentication/contextual-signin-nomenu-fr.html b/sites/authentication/contextual-signin-nomenu-fr.html index 416cd5cf51..4e2e4a5eda 100644 --- a/sites/authentication/contextual-signin-nomenu-fr.html +++ b/sites/authentication/contextual-signin-nomenu-fr.html @@ -32,8 +32,8 @@

Code source attendu

Exemple de l'initialisation pour GCWeb Jekyll

"nomenu": true,
-		"auth": {
-		"type": "contextual",
-		"link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html"
-		"label": "Se connecter"
-	}
+ "auth": { + "type": "contextual", + "link": "https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html" + "label": "Se connecter" +} diff --git a/sites/breadcrumbs/_breadcrumb.scss b/sites/breadcrumbs/_breadcrumb.scss index 79df247616..27b8c8b6c0 100644 --- a/sites/breadcrumbs/_breadcrumb.scss +++ b/sites/breadcrumbs/_breadcrumb.scss @@ -4,22 +4,24 @@ */ #wb-bc { + flex: 1 0 0%; + padding-right: 10px; + ol { - margin-top: 15px; + margin-top: 10px; padding-left: 0px; padding-right: 0px; } li { + padding: 0; &:before { content: "\e080"; - padding: 0 4px 0 0; + margin-left: 7px; + margin-right: 5px; + padding: 0; position: relative; } - - &:first-child a { - padding-left: 0; - } } a { padding: 5px 0; diff --git a/sites/breadcrumbs/breadcrumbs-en.html b/sites/breadcrumbs/breadcrumbs-en.html index b9c370fee4..741a76ccd2 100644 --- a/sites/breadcrumbs/breadcrumbs-en.html +++ b/sites/breadcrumbs/breadcrumbs-en.html @@ -1,142 +1,11 @@ --- { + "layout": "documentation", + "index_json": "index.json-ld", "altLangPage": "breadcrumbs-fr.html", - "dateModified": "2023-03-08", + "dateModified": "2024-08-01", "description": "Documentation on how to use breadcrumb trail.", "language": "en", "title": "Breadcrumb trail" } --- -
- -
-
Status
-
Stable
-
Version
-
1.1.0
-
Type
-
Canada.ca site functionality
-
- -

Introduction

- -

Purpose

-

The purpose of the breadcrumb trail is to reinforce a visitor’s current location in the Canada.ca user navigation model. It indicates the location of the current page in relation to its parent in the site structure. It also provides a simple method to navigate to higher levels in the site structure.

- -

Evaluation and report

-

There is no evaluation and report available for this component.

- -

Guidance

- - -

Variants

-

This component supports only 1 variant:

- - -

Breadcrumb trail (default)

- -

Iteration 2

-

Here is a list of changes that happened since the previous iteration:

- - - - - - - - - - - - - -
Breakingn/a
Additionsn/a
Fixes -
    -
  • Styles: changing levels separator from a greater-than sign (>) to a chevron right icon ()
    • -
-
- -

Working example(s)

-

Refer to the breadcrumb trail at the top of this page.

- -

How to implement

- -

Each page or section name on the Canada.ca site should be associated with a shortened version of the name, for the purposes of breadcrumb and other navigation systems.

-

For example, when on the “Planning a business” page in the Business and industry theme, the breadcrumb trail will be:

-

Canada.ca   >   Business   >   Starting a business

-

Note: GCWeb vX.0 are no longuer compatible with the pre 2019 megamenu pattern (GCWEB v4.x) that was taking the full page width.

-

Recommendation: The page title should not be included within the breadcrumbs list items.

- -

Code sample (same as iteration 1)

-

Here is the html output with structured data in RDFa format for the above breadcrumb example:

- {%- highlight html -%} - - {%- endhighlight -%} - -

Previous iterations

- -
- Iteration 1 -

Code sample

-

Here is the html output with structured data in RDFa format for the above breadcrumb example:

- {%- highlight html -%} - - {%- endhighlight -%} -
diff --git a/sites/breadcrumbs/breadcrumbs-fr.html b/sites/breadcrumbs/breadcrumbs-fr.html index a4ef828d1b..e54c946f16 100644 --- a/sites/breadcrumbs/breadcrumbs-fr.html +++ b/sites/breadcrumbs/breadcrumbs-fr.html @@ -1,142 +1,11 @@ --- { + "layout": "documentation", + "index_json": "index.json-ld", "altLangPage": "breadcrumbs-en.html", - "dateModified": "2023-03-08", + "dateModified": "2024-08-01", "description": "Documentation sur l'utilisation du fil d'Ariane.", "language": "fr", "title": "Fil d'Ariane" } --- -
- -
-
Statut
-
Stable
-
Version
-
1.1.0
-
Type
-
Fonctionnalité globale de site de Canada.ca
-
- -

Introduction

- -

Objectif

-

L’objectif du fil d'Ariane est de renforcer l’emplacement actuel des visiteurs dans le modèle de navigation de l’utilisateur du site Canada.ca. Il indique l’emplacement de la page actuelle par rapport à son parenr dans la structure du site. Il fournit également aux utilisateurs une méthode simple pour accéder à des sections supérieures de la structure du site.

- -

Évaluation et rapport

-

Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.

- -

Orientation

- - -

Variantes

-

Ce composant prend en charge 1 variante:

- - -

Fil d'Ariane (par défaut)

- -

Itération 2

-

Voici une liste des changements qui se sont produits depuis l'itération précédente :

- - - - - - - - - - - - - -
Majeursn/a
Additionsn/a
Correctifs -
    -
  • Styles: Modification du séparateur de niveaux d'un signe « plus grand que » (>) à une icône de chevron à droite ()
    • -
-
- -

Exemple(s) pratique(s)

-

Veuillez vous référer au fil d'Ariane au haut de cette page.

- -

Comment mettre en œuvre

- -

Le nom de chaque page ou section dans le site Canada.ca doit être associé à une version raccourcie du nom, aux fins du fil d'Ariane et d’autres systèmes de navigation.

-

Par exemple, lorsqu'une personne est sur la page « Planification d'entreprise » dans le thème « Entreprises et industrie » le fil d'Ariane sera :

-

Canada.ca > Entreprises > Lancer une entreprise

-

Note: GCWeb vX.0 n'est plus compatible avec le modèle de mégamenu antérieur à 2019 (GCWEB v4.x) qui prenait toute la largeur de la page.

-

Recommendation: Le titre de la page ne dois pas être inclus parmis la liste de fil d'arianne.

- -

Exemple de code (identique à l'itération 1)

-

Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :

- {%- highlight html -%} - - {%- endhighlight -%} - -

Itérations précédentes

- -
- Itération 1 -

Exemple de code

-

Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :

- {%- highlight html -%} - - {%- endhighlight -%} -
diff --git a/sites/breadcrumbs/includes/breadcrumbs.html b/sites/breadcrumbs/includes/breadcrumbs.html index 2272334e81..709c4b4d35 100644 --- a/sites/breadcrumbs/includes/breadcrumbs.html +++ b/sites/breadcrumbs/includes/breadcrumbs.html @@ -1,30 +1,17 @@ {%- unless page.pageclass contains "home" or page.breadcrumbs == false or layout.breadcrumbs == false -%} {% endunless %} diff --git a/sites/breadcrumbs/index.json-ld b/sites/breadcrumbs/index.json-ld index 35675ba972..08f5191bc5 100644 --- a/sites/breadcrumbs/index.json-ld +++ b/sites/breadcrumbs/index.json-ld @@ -14,9 +14,10 @@ "en": "Indicates the location of the current page in relation to its parent in the site structure to reinforce a visitor’s current location in the Canada.ca user navigation model.", "fr": "L’objectif du fil d'Ariane est de renforcer l’emplacement actuel des visiteurs dans le modèle de navigation de l’utilisateur du site Canada.ca." }, - "modified": "2023-09-06", + "modified": "2024-08-01", "componentName": "breadcrumbs", "status": "stable", + "version": "2.0", "pages": { "docs": [ { @@ -30,5 +31,184 @@ "path": "breadcrumbs-fr.html" } ] - } + }, + "dependencies": "No dependency.", + "a11yGuidance": "No accessibility guidance", + "variations": [ + { + "name": { + "en": "Breadcrumb trail - default", + "fr": "Fil d'Ariane - par défaut" + }, + "status": "stable", + "description": { + "en": "The breadcrumb trail is a horizontal series of links that gives people a sense of where they are in relation to Canada.ca's navigation model. It represents the location of a page in relation to its parent and provides a clear way to navigate to higher levels in the site structure.", + "fr": "Le fil d’Ariane est une série horizontale de liens qui permet aux gens de se situer par rapport au modèle de navigation du site Canada.ca. Il représente l’emplacement d’une page par rapport à son parent et donne un moyen clair de naviguer vers les niveaux supérieurs de la structure du site." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/breadcrumb-trail.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/fil-ariane.html" + }, + "iteration": "_:iteration_bc_3", + "example": [ + { + "en": { "href": "../../content-page/content-en.html", "text": "Content page (breadcrumb trail at top of page)" }, + "fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (fil d'Ariane au haut de la page)" } + } + ], + "implementation": [ + "_:implement_bc" + ], + "history": [ + { + "en": "August 2024 - Removing container from the breadcrumb trail.", + "fr": "Août 2024 - Retrait du conteneur situé à l'intérieur du fil d'Ariane." + }, + { + "en": "March 2023 - Updating icon between breadcrumb items.", + "fr": "Mars 2023 - Mise à jour de l'icône entre les items du fil d'Ariane." + }, + { + "en": "January 2020 - Start of components version tracking.", + "fr": "Janvier 2020 - Début du suivi de version des composants." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_bc", + "iteration": "_:iteration_bc_3", + "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 code sample below.", + "The first item is always “Canada.ca”, which always links to the Canada.ca home page in the current language", + "The current page is never displayed at the end of the breadcrumb trail", + "Use a chevron right icon () to separate levels", + "Longer page titles are to be shortened where possible to reduce the space required to display the trail" + ], + "fr": [ + "Référez-vous à l'exemple de code ci-dessous.", + "Le fil d'Ariane commence toujours par « Canada.ca », qui est toujours un lien vers la page d'accueil de Canada.ca dans la langue actuelle.", + "La page en cours n’est jamais affichée à la fin de la piste de navigation.", + "Utilisez une icône de chevron à droite () pour séparer les niveaux", + "Les longs titres de page doivent être raccourcis dans la mesure du possible, pour permettre de réduire l’espace horizontal nécessaire pour afficher la piste." + ] + }, + "notes": { + "en": [ + "Each page or section name on the Canada.ca site should be associated with a shortened version of the name, for the purposes of breadcrumb and other navigation systems. For example, when on the “Planning a business” page in the Business and industry theme, the breadcrumb trail will be:
Canada.ca > Business > Starting a business", + "The page title should not be included within the breadcrumbs list items." + ], + "fr": [ + "Le nom de chaque page ou section dans le site Canada.ca doit être associé à une version raccourcie du nom, aux fins du fil d'Ariane et d’autres systèmes de navigation. Par exemple, lorsqu'une personne est sur la page « Planification d'entreprise » dans le thème « Entreprises et industrie » le fil d'Ariane sera :
Canada.ca  >  Entreprises  >  Lancer une entreprise", + "Le titre de la page ne dois pas être inclus parmis la liste de fil d'arianne." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_bc_3", + "name": "Breadcrumb trail - Iteration 3", + "date": "2020-08", + "detectableBy": "#wb-bc:not(:has(.container))", + "breaking": [ + "The container has been removed." + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + }, + { + "@id": "_:iteration_bc_2", + "name": "Breadcrumb trail - Iteration 2", + "date": "2023-03", + "detectableBy": "#wb-bc", + "fixes": [ + "Styles: changing levels separator from a greater-than sign (>) to a chevron right icon" + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + }, + { + "@id": "_:iteration_bc_1", + "name": "Breadcrumb trail - Iteration 1", + "date": "2020-01", + "detectableBy": "#wb-bc", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "" + } + ] + } + ], + "changesets": [ + { + "@id": "_:cs_bc", + "name": "Breadcrumb trail", + "status": "stable", + "baseOnIteration": "_:iteration_bc_3", + "detectableBy": "#wb-bc:not(:has(.container))", + "layout": "The breadcrumb items are displayed horizontally.", + "semantic": "nav > h2 + (ol > li*n > (a + meta[property=position]))", + "static": [ + "You are here:", + "Vous êtes ici :" + ], + "schema": [ + "Array of breadcrumb item objects containing the following properties:", + "STRING: name", + "STRING: url" + ], + "style": "The levels separator is a chevron right icon.", + "include": { + "@type": "source-code", + "collapsed": true, + "description": "Include with logic in Liquid.", + "code": { + "@type": [ "@id", "rdf:HTML" ], + "@value": "includes/breadcrumbs.html" + } + } + } + ] } diff --git a/sites/breadcrumbs/samples/breadcrumbs-v1-en.html b/sites/breadcrumbs/samples/breadcrumbs-v1-en.html new file mode 100644 index 0000000000..0aac0cbccc --- /dev/null +++ b/sites/breadcrumbs/samples/breadcrumbs-v1-en.html @@ -0,0 +1,19 @@ + diff --git a/sites/breadcrumbs/samples/breadcrumbs-v1-fr.html b/sites/breadcrumbs/samples/breadcrumbs-v1-fr.html new file mode 100644 index 0000000000..1e83b7bd3d --- /dev/null +++ b/sites/breadcrumbs/samples/breadcrumbs-v1-fr.html @@ -0,0 +1,19 @@ + diff --git a/sites/gcweb-menu/gcweb-menu-docs-en.html b/sites/gcweb-menu/gcweb-menu-docs-en.html index 33f89968fb..3e4d919453 100644 --- a/sites/gcweb-menu/gcweb-menu-docs-en.html +++ b/sites/gcweb-menu/gcweb-menu-docs-en.html @@ -12,13 +12,18 @@
Status
-
Stable
+
Demoted
Type
Canada.ca site functionality
Last review
-
2024-06-21
+
2024-08-01
+
+

GCWeb menu demoted

+

As of version 15.5.0 of GCWeb, the GCWeb menu has been demoted. The header version 4.0 should be used where the GCWeb menu has been removed.

+
+

Purpose

This is the main menu for navigating throughout various sections of Canada.ca.

diff --git a/sites/gcweb-menu/gcweb-menu-docs-fr.html b/sites/gcweb-menu/gcweb-menu-docs-fr.html index e0ca08ddd0..3916bf8ab9 100644 --- a/sites/gcweb-menu/gcweb-menu-docs-fr.html +++ b/sites/gcweb-menu/gcweb-menu-docs-fr.html @@ -19,6 +19,11 @@
2024-06-21
+
+

Menu GCWeb rétrogradé

+

Depuis la version 15.5.0 de GCWeb, le menu GCWeb a été rétrogradé. La version de l'en-tête 4.0 doit être utilisée dans laquelle le menu GCWeb a été supprimé.

+
+

Objectif

Menu principal afin de naviguer les diverses sections de Canada.ca.

diff --git a/sites/gcweb-menu/index.json-ld b/sites/gcweb-menu/index.json-ld index 7ec1934469..a1ee2a235a 100644 --- a/sites/gcweb-menu/index.json-ld +++ b/sites/gcweb-menu/index.json-ld @@ -16,7 +16,7 @@ }, "modified": "2023-10-25", "componentName": "gcweb-menu", - "status": "stable", + "status": "demoted", "pages": { "docs": [ { diff --git a/sites/header/_base.scss b/sites/header/_base.scss index a9b7080ec0..637dd7142d 100644 --- a/sites/header/_base.scss +++ b/sites/header/_base.scss @@ -2,12 +2,44 @@ * Site header */ -#wb-bnr + hr { - border-top: 3px solid #38414d; - margin-bottom: 0px; - margin-top: 5px; +#wb-bnr { + + hr { + border-top: 1px solid #ddd; + margin-bottom: 0px; + margin-top: 5px; - + .container { - font-size: 20px; + + .container { + display: flex; + justify-content: flex-end; + } } } + +/* START: To be removed when support for the header v4.0 is removed */ +#wb-bnr:has(+ hr + .container > .row) { + + hr { + border-top: 3px solid #38414d; + + + .container { + display: block; + font-size: 20px; + + #wb-so .btn { + margin-top: 5px; + } + + + #wb-bc { + padding-right: 0; + + ol { + margin-top: 15px; + } + + li { + padding: 7px 0; + } + } + } + } +} +/* END */ diff --git a/sites/header/deprecated/header-auth-v3.html b/sites/header/demoted/header-auth-v3.html similarity index 88% rename from sites/header/deprecated/header-auth-v3.html rename to sites/header/demoted/header-auth-v3.html index 23b497a930..c493b52e75 100644 --- a/sites/header/deprecated/header-auth-v3.html +++ b/sites/header/demoted/header-auth-v3.html @@ -1,13 +1,15 @@ --- { "layout": null, - "title": "Header version 3.0 including authentication section", + "title": "Header version 4.0 including authentication section", + "language": "en", "auth": { "type": "contextual", "link": "#", "label": "My Account", "labelExtended": "Sign in to [account name]" - } + }, + "altLangPage": "#" } --- {%- include variable-core.liquid -%} @@ -36,7 +38,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
@@ -50,7 +52,7 @@ {% include gcweb-menu/sitemenu.html %}
{%- endunless -%} - {%- assign colSo = "col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4" -%} + {%- assign colSo = "col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4" -%} {%- if page.nomenu -%} {%- assign colSo = "col-xs-12" -%} {%- endif -%} @@ -61,7 +63,7 @@ {%- endif -%} - {% include breadcrumbs/breadcrumbs.html %} + {% include sites/breadcrumbs/breadcrumbs-v1-en.html %}
{%- capture page-title -%} {%- if page.titleH1 -%} diff --git a/sites/header/deprecated/header-v3.html b/sites/header/demoted/header-v3.html similarity index 91% rename from sites/header/deprecated/header-v3.html rename to sites/header/demoted/header-v3.html index ae4b1afdb0..a4f4a94f24 100644 --- a/sites/header/deprecated/header-v3.html +++ b/sites/header/demoted/header-v3.html @@ -1,7 +1,9 @@ --- { "layout": null, - "title": "Header version 3.0" + "title": "Header version 4.0", + "language": "en", + "altLangPage": "#" } --- {%- include variable-core.liquid -%} @@ -30,7 +32,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
@@ -55,7 +57,7 @@ {%- endif -%}
- {% include breadcrumbs/breadcrumbs.html %} + {% include sites/breadcrumbs/breadcrumbs-v1-en.html %}
{%- capture page-title -%} {%- if page.titleH1 -%} diff --git a/sites/header/deprecated/header-auth-v2.html b/sites/header/deprecated/header-auth-v2.html index b396edb54d..a9c0be80f6 100644 --- a/sites/header/deprecated/header-auth-v2.html +++ b/sites/header/deprecated/header-auth-v2.html @@ -7,7 +7,8 @@ "link": "#", "label": "My Account", "labelExtended": "Sign in to [account name]" - } + }, + "altLangPage": "#" } --- {%- include variable-core.liquid -%} @@ -36,7 +37,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
@@ -67,7 +68,7 @@ {%- endif -%}
- {% include breadcrumbs/breadcrumbs.html %} + {% include sites/breadcrumbs/breadcrumbs-v1-en.html %}
{%- capture page-title -%} {%- if page.titleH1 -%} diff --git a/sites/header/deprecated/header-v1.html b/sites/header/deprecated/header-v1.html index c726bb0f85..30929186b1 100644 --- a/sites/header/deprecated/header-v1.html +++ b/sites/header/deprecated/header-v1.html @@ -1,7 +1,8 @@ --- { "layout": null, - "title": "Header version 1.0" + "title": "Header version 1.0", + "altLangPage": "#" } --- {%- include variable-core.liquid -%} @@ -39,7 +40,7 @@ {% include gcweb-menu/sitemenu-v2.html %} {%- endunless -%} - {% include breadcrumbs/breadcrumbs.html %} + {% include sites/breadcrumbs/breadcrumbs-v1-en.html %} diff --git a/sites/header/deprecated/header-v2.html b/sites/header/deprecated/header-v2.html index d4ee3d0525..c50a1beaa4 100644 --- a/sites/header/deprecated/header-v2.html +++ b/sites/header/deprecated/header-v2.html @@ -1,7 +1,8 @@ --- { "layout": null, - "title": "Header version 2.0" + "title": "Header version 2.0", + "altLangPage": "#" } --- {%- include variable-core.liquid -%} @@ -30,7 +31,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
@@ -61,7 +62,7 @@ {%- endif -%}
- {% include breadcrumbs/breadcrumbs.html %} + {% include sites/breadcrumbs/breadcrumbs-v1-en.html %}
{%- capture page-title -%} {%- if page.titleH1 -%} diff --git a/sites/header/header-docs-en.html b/sites/header/header-docs-en.html index 8b7003f74a..1708d06a98 100644 --- a/sites/header/header-docs-en.html +++ b/sites/header/header-docs-en.html @@ -3,473 +3,9 @@ "title": "Header", "language": "en", "altLangPage": "header-docs-fr.html", - "secondlevel": false, - "dateModified": "2022-11-01", - "share": "true" + "dateModified": "2024-08-01", + "layout": "documentation", + "index_json": "index.json-ld", + "description": "The global header is at the top of each web page from the Government of Canada." } --- -
- -
-
Status
-
Stable
-
Type
-
Canada.ca site functionality
-
Last review
-
2022-08-31
-
- -

Purpose

-

Displays the portion of the header section that's underneath the banner.

-

Can contain the following components:

- - -

Working example

- - -

How to implement

- -

This version requires the implementation of the gcweb-menu version 3.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.

- -

Here is a code sample showing all the commonly included components where some may require some customization by your web content management system such as the breadcrumb component.

- -
<nav>
-	<ul id="wb-tphp">
-		<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li>
-		<li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to About this site</a></li>
-	</ul>
-</nav>
-
-<header>
-<div id="wb-bnr" class="container"><div class="row">
-<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
-	<h2 class="wb-inv">Language selection</h2>
-	<ul class="list-inline mrgn-bttm-0">
-		<li><a lang="fr" hreflang="fr" href="header-docs-fr.html">
-				<span class="hidden-xs" translate="no">Français</span>
-				<abbr title="Français" translate="no" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
-		</a></li>
-	</ul>
-</section>
-
-<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
-	<a href="https://www.canada.ca/en.html" property="url">
-		<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/sig-blk-en.svg" alt="Government of Canada" property="logo" /><span class="wb-inv"> / <span lang="fr">Gouvernement du Canada</span></span>
-	</a>
-	<meta property="name" content="Government of Canada">
-	<meta property="areaServed" typeof="Country" content="Canada" />
-	<link property="logo" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" />
-</div>
-
-<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
-	<h2>Search</h2>
-	<form action="https://www.canada.ca/en/sr/srb.html" name="cse-search-box" role="search">
-		<div class="form-group wb-srch-qry">
-			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
-			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
-			<datalist id="wb-srch-q-ac"></datalist>
-		</div>
-		<div class="form-group submit">
-			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
-		</div>
-	</form>
-</section>
-
-</div></div>
-<hr>
-<div class="container"><div class="row"><div class="col-md-8">
-
-<nav class="gcweb-menu" typeof="SiteNavigationElement">
-	<h2 class="wb-inv">Menu</h2>
-	<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
-	<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
-		<li role="presentation"><a role="menuitem" href="https://travel.gc.ca/">Travel and tourism</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/health.html">Health</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
-		<li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li></ul>
-</nav>
-
-</div></div></div>
-
-<nav id="wb-bc" property="breadcrumb">
-	<h2>You are here:</h2>
-	<div class="container">
-		<ol class="breadcrumb" typeof="BreadcrumbList">
-			<li property="itemListElement" typeof="ListItem">
-				<a property="item" typeof="WebPage" href="https://www.canada.ca/en.html">
-					<span property="name">Canada.ca</span>
-				</a>
-				<meta property="position" content="1">
-			</li>
-		</ol>
-	</div>
-</nav>
-
-</header>
- -

Evaluation and report

-

There is no evaluation and report available for this component.

- -

API (Version 2.0)

- - - - - - - - - - - - - - - -
Component versionCSS ClassTemplateVisual renderingSchema
Version 4.0.0n.a.Version 4.0Version 1.0n.a.
- -
- Deprecated version - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Component versionCSS ClassTemplateVisual renderingSchema
Version 3.0.0n.a.Version 3.0Version 1.0n.a.
Version 2.0.0n.a.Version 2.0Version 1.0n.a.
Version 1.0n.a.Version 1.0Version 1.0n.a.
-
- -

Template

- -

Before and After

- -
-
-

Version 4.0

-

No change

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.1] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
- -
Including authentication section (optional)
-

The difference with version 3.0 is the value for col-xs-5 and col-xs-offset-7 have been adjusted to a "6" so the button text don't brake and stays on one line for every viewports from extra-extra-small to extra-large (xxs, xxs, sm, md, lg and xl).

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.1] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-		</div>
-			<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
-				<!-- Optional Authentication Section [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-

Version 3.0 (deprecated)

-

No change

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
- -
Including authentication section (optional)
-

The header version 3.0 including the authentication section is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Optional Authentication Section [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
- -

Previous versions

-
- Version 3.0 vs Version 2.0 -
-
-

Version 3.0 (deprecated)

-

The only difference with version 2.0 is that the column will remain at 8 whether there is an authentication section or not.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
- -
Including authentication section (optional)
-

No change

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-		</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Optional Authentication Section [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-

Version 2.0 (deprecated)

-

The header version 2.0 is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.

-

No change

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-12">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
- -
Including authentication section (optional)
-

No change.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Optional Authentication Section [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-
- -
- Version 2.0 vs Version 1.0 -
-
-

Version 2.0 (deprecated)

-

This version requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.

- - 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-12">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
- -
Including authentication section (optional)
-

Addition of the authentication section.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Site Menu [version 2.0] -->
-			</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Optional Authentication Section [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-

Version 1.0 (deprecated)

-

The header version 1.0 is deprecated but still supported.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<!-- Site Menu [Version 1.0]
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-
- -

Working examples

-
- Header Version 3.0 - -
- -
- Header Version 2.0 - -
- -
- Header Version 1.0 - -
diff --git a/sites/header/header-docs-fr.html b/sites/header/header-docs-fr.html index e4629dddc4..83cca25e7e 100644 --- a/sites/header/header-docs-fr.html +++ b/sites/header/header-docs-fr.html @@ -3,476 +3,9 @@ "title": "En-tête", "language": "fr", "altLangPage": "header-docs-en.html", - "secondlevel": false, - "dateModified": "2022-11-01", - "share": "true" + "dateModified": "2024-08-01", + "layout": "documentation", + "index_json": "index.json-ld", + "description": "L’en-tête général se trouve au haut de chaque page Web du gouvernement du Canada." } --- -
- -
-
Statut
-
Stable
-
Type
-
Fonctionnalité du site Canada.ca
-
Dernière révision
-
2022-08-31
-
- -

Objectif

-

Affiche la portion de l'en-tête qui se trouve sous la bannière.

-

Peut contenir les composants suivants :

- - -

Example pratique

- - -

Comment mettre en œuvre

-

Cette version requière l'implémentation de la version 3.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

- -

Voici un exemple de code démontrant tous les composants communs inclus, d'où quelques-uns nécessitent une configuration par votre système de gestion de contenu web tel que le composant du fil d'Ariane.

- -
<nav>
-	<ul id="wb-tphp">
-		<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Passer au contenu principal</a></li>
-		<li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Passer à « À propos de ce site »</a></li></ul>
-</nav>
-
-<header>
-<div id="wb-bnr" class="container"><div class="row">
-
-<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
-	<h2 class="wb-inv">Sélection de la langue</h2>
-	<ul class="list-inline mrgn-bttm-0">
-		<li>
-			<a lang="en" hreflang="en" href="header-docs-en.html">
-				<span class="hidden-xs" translate="no">English</span>
-				<abbr title="English" translate="no" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">en</abbr>
-			</a>
-		</li>
-	</ul>
-</section>
-
-<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
-	<a href="https://wet-boew.github.io/GCWeb/" property="url">
-		<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo" /><span class="wb-inv"> / <span lang="en">Government of Canada</span></span>
-	</a>
-	<meta property="name" content="Gouvernement du Canada">
-	<meta property="areaServed" typeof="Country" content="Canada" />
-	<link property="logo" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" />
-</div>
-
-<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
-	<h2>Recherche</h2>
-	<form action="/fr/sr/srb.html" name="cse-search-box" role="search">
-		<div class="form-group wb-srch-qry">
-			<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
-			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca" />
-			<datalist id="wb-srch-q-ac"></datalist>
-		</div>
-		<div class="form-group submit">
-			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Recherche</span></button>
-		</div>
-	</form>
-</section>
-
-</div></div>
-<hr>
-<div class="container"><div class="row"><div class="col-md-8">
-
-<nav class="gcweb-menu" typeof="SiteNavigationElement">
-	<h2 class="wb-inv">Menu</h2>
-	<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
-	<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-fr.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/emplois.html">Emplois et milieu de travail</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/immigration-citoyennete.html">Immigration et citoyenneté</a></li>
-		<li role="presentation"><a role="menuitem" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/prestations.html">Prestations</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/transport.html">Transport et infrastructure</a></li>
-		<li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
-		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li></ul>
-</nav>
-
-</div></div></div>
-
-<nav id="wb-bc" property="breadcrumb">
-	<h2>Vous êtes ici :</h2>
-	<div class="container">
-		<ol class="breadcrumb" typeof="BreadcrumbList">
-			<li property="itemListElement" typeof="ListItem">
-				<a property="item" typeof="WebPage" href="https://www.canada.ca/fr.html">
-					<span property="name">Canada.ca</span>
-				</a>
-				<meta property="position" content="1">
-			</li>
-		</ol>
-	</div>
-</nav>
-
-</header>
- -

Évaluation et rapport

-

Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.

- -

API (version 2.0)

- - - - - - - - - - - - - - - -
Versions du composantsClasses CSSGabaritRendu visuelSchéma
Version 4.0.0n.a.Version 4.0Version 1.0n.a.
- -
- Version obsolète - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Version du composantClasses CSSGabaritRendu visuelSchéma
Version 3.0.0n.a.Version 3.0Version 1.0n.a.
Version 2.0.0n.a.Version 2.0Version 1.0n.a.
Version 1.0n.a.Version 1.0Version 1.0n.a.
-
- -

Gabarit

- -

Avant et après

- -
-
-

Version 4.0

-

Aucun changement.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.1] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Fil d'Ariane [version 1.0] -->
-</header>
- -
Incluant la section d'authentification (optionnelle)
-

La différence avec la verion 3.0 est que la valeur pour col-xs-5 et col-xs-offset-7 a été ajusté à un "6" afin que le texte du bouton ne brise pas et demeure sur une seule ligne pour toutes les fenêtre d'affichage d'extra-extra-petite à extra-large (xs, xxs, sm, md, lg et xl).

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.1] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-			<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
-				<!-- Section d'authentification optionnelle [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-

Version 3.0 (obsolète)

-

Aucun changement.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.0] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-12">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Fil d'Ariane [version 1.0] -->
-</header>
- -
Incluant la section d'authentification (optionnelle)
-

La version 3.0 de l'en-tête incluant la section d'authentification est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

- - 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.0] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Section d'authentification optionnelle [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
- -

Versions précédentes

-
- Version 3.0 vs Version 2.0 -
-
-

Version 3.0 (obsolète)

-

La seule différence avec la version 2.0 est que les colonnes vont rester à 8 même si la section d'authentification est présente.

- - 
<header>
-		<div id="wb-bnr" class="container">
-			<div class="row">
-				<!-- Changer de langue [version 1.0] -->
-				<!-- Image de marque [version 1.0] -->
-				<!-- Recherche [version 1.0] -->
-			</div>
-		</div>
-		<hr>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8">
-					<!-- Menu du site [version 2.0] -->
-				</div>
-			</div>
-		</div>
-		<!-- Fil d'Ariane [version 1.0] -->
-	</header>
- -
Incluant la section d'authentification (optionnelle)
-

Aucun changement.

- 
<header>
-		<div id="wb-bnr" class="container">
-			<div class="row">
-				<!-- Changer de langue [version 1.0] -->
-				<!-- Image de marque [version 1.0] -->
-				<!-- Recherche [version 1.0] -->
-			</div>
-		</div>
-		<hr>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8">
-					<!-- Menu du site [version 2.0] -->
-				</div>
-				<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-					<!-- Section d'authentification optionnelle [version 1.0] -->
-				</div>
-			</div>
-		</div>
-		<!-- Breadcrumbs [version 1.0] -->
-	</header>
-
-
-

Version 2.0 (obsolète)

-

La version 2.0 de l'en-tête est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

- - 
<header>
-		<div id="wb-bnr" class="container">
-			<div class="row">
-				<!-- Changer de langue [version 1.0] -->
-				<!-- Image de marque [version 1.0] -->
-				<!-- Recherche [version 1.0] -->
-			</div>
-		</div>
-		<hr>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-12">
-					<!-- Menu du site [version 2.0] -->
-				</div>
-			</div>
-		</div>
-		<!-- Fil d'Ariane [version 1.0] -->
-	</header>
- -
Incluant la section d'authentification (optionnelle)
-

Aucun changement.

- 
<header>
-		<div id="wb-bnr" class="container">
-			<div class="row">
-				<!-- Changer de langue [version 1.0] -->
-				<!-- Image de marque [version 1.0] -->
-				<!-- Recherche [version 1.0] -->
-			</div>
-		</div>
-		<hr>
-		<div class="container">
-			<div class="row">
-				<div class="col-md-8">
-					<!-- Menu du site [version 2.0] -->
-				</div>
-				<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-					<!-- Section d'authentification optionnelle [version 1.0] -->
-				</div>
-			</div>
-		</div>
-		<!-- Breadcrumbs [version 1.0] -->
-	</header>
-
-
-
- -
- Version 2.0 vs Version 1.0 -
-
-

Version 2.0 (obsolète)

-

Cette version requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

- - 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.0] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-12">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Fil d'Ariane [version 1.0] -->
-</header>
- -
Incluant la section d'authentification (optionnelle)
-

Ajout de la section d'authentification.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Changer de langue [version 1.0] -->
-			<!-- Image de marque [version 1.0] -->
-			<!-- Recherche [version 1.0] -->
-		</div>
-	</div>
-	<hr>
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8">
-				<!-- Menu du site [version 2.0] -->
-			</div>
-			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
-				<!-- Section d'authentification optionnelle [version 1.0] -->
-			</div>
-		</div>
-	</div>
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-

Version 1 (obsolète)

-

La version 1.0 de l'en-tête est obsolète mais toujours supportée.

- 
<header>
-	<div id="wb-bnr" class="container">
-		<div class="row">
-			<!-- Language toggle [version 1.0] -->
-			<!-- Branding [version 1.0] -->
-			<!-- Search [version 1.0] -->
-		</div>
-	</div>
-	<!-- GCWeb Menu [Version 1.0] -->
-	<!-- Breadcrumbs [version 1.0] -->
-</header>
-
-
-
- -

Exemples pratiques

-
- En-tête Version 3.0 - -
- -
- En-tête Version 2.0 - -
- -
- En-tête Version 1.0 - -
diff --git a/sites/header/includes/header.html b/sites/header/includes/header.html index 17a6b175ba..abf2944ba7 100644 --- a/sites/header/includes/header.html +++ b/sites/header/includes/header.html @@ -13,23 +13,15 @@ {% unless page.layout == "application" %}
-
- {%- unless page.nomenu -%} -
- {% include gcweb-menu/sitemenu.html %} -
- {%- endunless -%} - {%- assign colSo = "col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4" -%} - {%- if page.nomenu -%} - {%- assign colSo = "col-xs-12" -%} - {%- endif -%} - {%- if page.auth -%} -
- {% include authentication/authentication.html %} -
- {%- endif -%} -
+ {% include breadcrumbs/breadcrumbs.html %} + {%- if page.auth -%} + {% include authentication/authentication.html %} + {%- endif -%}
{% endunless %} - {% include breadcrumbs/breadcrumbs.html %} + {% if page.layout == "application" %} +
+ {% include breadcrumbs/breadcrumbs.html %} +
+ {% endif %} diff --git a/sites/header/index.json-ld b/sites/header/index.json-ld index 72bd04d112..cb3121ef3d 100644 --- a/sites/header/index.json-ld +++ b/sites/header/index.json-ld @@ -8,14 +8,16 @@ }, "title": { "en": "Header", - "fr": "Entête" + "fr": "En-tête" }, "description": { "en": "Documentation on how to use the header.", "fr": "Documentation sur l'utilisation de l'entête." }, - "modified": "2024-03-29", + "version": "4.0", + "modified": "2024-08-01", "componentName": "header", + "componentType": "container", "status": "stable", "pages": { "docs": [ @@ -52,5 +54,395 @@ "path": "reports/a11y-8-fr.html" } ] - } + }, + "dependencies": { + "en": [ + { "title": "Language toggle link", "url": "https://wet-boew.github.io/GCWeb/sites/language/language-en.html", "component": "language" }, + { "title": "Breadcrumb trail", "url": "https://wet-boew.github.io/GCWeb/sites/breadcrumbs/breadcrumbs-en.html", "component": "breadcrumbs" }, + { "title": "Authentication patterns", "url": "https://wet-boew.github.io/GCWeb/sites/authentication/authentication-en.html", "component": "authentication" } + ], + "fr": [ + { "title": "Lien pour changer de langue", "url": "https://wet-boew.github.io/GCWeb/sites/language/language-fr.html", "component": "language" }, + { "title": "Fil d'Ariane", "url": "https://wet-boew.github.io/GCWeb/sites/breadcrumbs/breadcrumbs-fr.html", "component": "breadcrumbs" }, + { "title": "Modèles d'authentification", "url": "https://wet-boew.github.io/GCWeb/sites/authentication/authentication-fr.html", "component": "authentication" } + ] + }, + "a11yGuidance": "no accessibility guidance", + "variations": [ + { + "name": { + "en": "Header", + "fr": "En-tête" + }, + "status": "stable", + "description": { + "en": "This component may contain the following components: Language toggle link, Breadcrumb trail, and Authentication patterns. It also contains the following untracked elements: Branding and Search", + "fr": "Ce composant peut contenir les composants suivants : Lien pour changer de langue, Fil d'Ariane et Modèles d'authentification. Il contient également les éléments non suivis suivants : Image de marque et Recherche" + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/global-header.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/en-tete-general.html" + }, + "iteration": "_:iteration_header_4", + "example": [ + { + "en": { "href": "../../templates/content-page/content-en.html", "text": "Content page" }, + "fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu" } + }, + { + "en": { "href": "../authentication/contextual-signin-en.html", "text": "Content page including Authentication section" }, + "fr": { "href": "../authentication/contextual-signin-en.html", "text": "Page de contenu incluant la section d'authentification" } + } + ], + "implementation": [ + "_:implement_header", + "_:implement_header_3_to_4", + "_:implement_header_gcweb" + ], + "history": [ + { + "en": "August 2024 - The GCWeb menu has been removed. The Breadcrumbs container has been moved to the Header component", + "fr": "Août 2024 - Le Menu GCWeb a été retiré. Le conteneur anciennement situé dans le composant Fil d'Ariane a été déplacé vers le composant En-tête." + }, + { + "en": "October 2022 - Changed Menu column to make consistent whether there is a Sign in button or not (always col-md-8). Changed the value for col-xs-5 and col-xs-offset-7 have been adjusted to a \"6\" so the button text doesn't break and stays on one line for every viewport.", + "fr": "Octobre 2022 - Colonne de menu modifiée pour rendre cohérent s'il y a ou non un bouton d'authentification (toujours col-md-8). La valeur de col-xs-5 et col-xs-offset-7 a été modifiée à \"6\" afin que le texte du bouton ne soit pas coupé et reste sur une ligne pour toutes les largeurs d'écran." + }, + { + "en": "May 2022 - The container has been moved outside of the GCWeb menu component.", + "fr": "Mai 2022 - Le conteneur a été déplacé à l'extérieur du composant Menu GCWeb." + }, + { + "en": "June 2020 - Initial implementation of the variation.", + "fr": "Juin 2020 - Implémentation initiale de la variante." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_header", + "iteration": "_:iteration_header_4", + "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 code sample below." + ], + "fr": [ + "Référez-vous à l'exemple de code ci-dessous." + ] + }, + "notes": { + "en": [ + "As of version 4.0, the Header no longer includes the GCWeb menu.", + "As of version 4.0, the container located in the Breadcrumbs component has been removed and the Breadrumb component has been moved to the container located right after the <hr>." + ], + "fr": [ + "Depuis la version 4.0, l'En-tête n'inclut plus le menu GCWeb.", + "Depuis la version 4.0, le conteneur situé dans le composant Fil d'Ariane a été retiré et le composant Fil d'Ariane a été déplacé à l'intérieur du conteneur situé juste après le <hr>." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_header_3_to_4", + "iteration": "_:iteration_header_4", + "name": { + "en": "Migrating from v3.0 to v4.0", + "fr": "Migration de v3.0 vers v4.0" + }, + "introduction": { + "en": "This implementation is meant for developers or publishers trying to migrate their page from using the page details version 3.0 to 4.0.", + "fr": "Cette implémentation est destinée aux développeurs ou aux éditeurs qui tentent de migrer leur page de la version 3.0 vers la version 4.0." + }, + "instructions": { + "en": [ + "Remove the <div class=\"row\"> from inside the <div class=\"container\"> located right after the <hr>.", + "Remove the <nav class=\"gcweb-menu\">.", + "Remove the <div class=\"container\"> from inside the <nav id=\"wb-bc\">.", + "Move the <nav id=\"wb-bc\"> inside the <div class=\"container\"> located right after the <hr>." + ], + "fr": [ + "Supprimez le <div class=\"row\"> situé à l'intérieur du <div class=\"container\"> situé juste après le <hr>.", + "Supprimez le <nav class=\"gcweb-menu\">.", + "Supprimez le <div class=\"container\"> situé à l'intérieur du <nav id=\"wb-bc\">.", + "Déplacez le <nav id=\"wb-bc\"> à l'intérieur du <div class=\"container\"> situé juste après le <hr>." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Version 3.0:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\t\n
" + }, + { + "@type": "source-code", + "description": "Version 4.0:", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Version 3.0 :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\t\n
" + }, + { + "@type": "source-code", + "description": "Version 4.0 :", + "code": "
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t
\n\t\t\n\t\t\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_header_gcweb", + "iteration": "_:iteration_header_4", + "name": { + "en": "GCWeb Jekyll", + "fr": "GCWeb Jekyll" + }, + "introduction": { + "en": "This implementation is meant for developers trying to implement this component within a GCWeb Jekyll site.", + "fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll." + }, + "instructions": { + "en": [ + "To show the language toggle link, in the page's front-matter, set the property altLangPage to the URL of the alternative language's page.", + "To hide the search bar, in the page's front-matter, set the property nositesearch to true.", + "To hide the breadcrumb trail, in the page's front-matter, set the property breadcrumbs to false. For more information on how to define the breadcrumb links, refer to the breadcrumbs documentation.", + "To show the authentication link, in the page's front-matter, set the property auth to an object containing the URL and label of the link. For more information on how to define the authentication link, refer to the authentication pattern documentation." + ], + "fr": [ + "Pour afficher le lien pour changer de langue, dans l'en-tête de la page, définissez la propriété altLangPage à l'URL de la page de la langue alternative.", + "Pour cacher la barre de recherche, dans l'en-tête de la page, définissez la propriété nositesearch à true.", + "Pour cacher le fil d'Ariane, dans l'en-tête de la page, définissez la propriété breadcrumbs à false. Pour plus d'informations sur la façon de définir les liens du fil d'Ariane, consultez la documentation du fil d'Ariane.", + "Pour afficher le lien d'authentification, dans l'en-tête de la page, définissez la propriété auth à un objet contenant l'URL et l'étiquette du lien. Pour plus d'informations sur la façon de définir les liens d'authentification', consultez la documentation du modèle d'authentification." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "---\n{\n\t\"altLangPage\": \"page-url.html\",\n\t\"nositesearch\": true,\n\t\"breadcrumbs\": false,\n\t\"auth\": {\n\t\t\"type\": \"contextual\",\n\t\t\"link\": \"page-url.html\",\n\t\t\"label\": \"Sign in\"\n\t}\n}\n---" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "---\n{\n\t\"altLangPage\": \"page-url.html\",\n\t\"nositesearch\": true,\n\t\"breadcrumbs\": false,\n\t\"auth\": {\n\t\t\"type\": \"contextual\",\n\t\t\"link\": \"page-url.html\",\n\t\t\"label\": \"Sign in\"\n\t}\n}\n---" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_header_4", + "name": "Header - Iteration 4", + "date": "2024-08", + "detectableBy": "#wb-bnr:not(:has(+ hr + .container > .row))", + "predecessor": "_:iteration_header_3", + "breaking": [ + "Removing GCWeb menu" + ], + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Include with logic in liquid", + "code": { + "@type": [ "rdf:HTML", "@id" ], + "@value": "includes/header.html" + } + } + ] + }, + { + "@id": "_:iteration_header_3", + "name": "Header - Iteration 3", + "date": "2022-10", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-8", + "successor": "_:iteration_header_4", + "predecessor": "_:iteration_header_2", + "breaking": [ + "Changed Menu column to make consistent whether there is a Sign in button or not (always col-md-8).", + "Changed the value for col-xs-5 and col-xs-offset-7 have been adjusted to a \"6\" so the button text doesn't break and stays on one line for every viewport." + ], + "example": { + "en": [ + { + "href": "demoted/header-v3.html", + "text": "Header version 3" + }, + { + "href": "demoted/header-auth-v3.html", + "text": "Header version 3 with authentication link" + } + ], + "fr": [ + { + "href": "demoted/header-v3.html", + "text": "Header version 3" + }, + { + "href": "demoted/header-auth-v3.html", + "text": "Header version 3 with authentication link" + } + ] + } + }, + { + "@id": "_:iteration_header_2", + "name": "Header - Iteration 2", + "date": "2022-05", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-12", + "successor": "_:iteration_header_3", + "predecessor": "_:iteration_header_1", + "breaking": [ + "The container has been moved outside of the GCWeb menu component." + ], + "example": { + "en": [ + { + "href": "deprecated/header-v2.html", + "text": "Header version 2" + }, + { + "href": "deprecated/header-auth-v2.html", + "text": "Header version 2 with authentication link" + } + ], + "fr": [ + { + "href": "deprecated/header-v2.html", + "text": "Header version 2" + }, + { + "href": "deprecated/header-auth-v2.html", + "text": "Header version 2 with authentication link" + } + ] + } + }, + { + "@id": "_:iteration_header_1", + "name": "Header - Iteration 1", + "date": "2020-06", + "detectableBy": "#wb-bnr + .gcweb-menu", + "successor": "_:iteration_header_2", + "example": { + "en": [ + { + "href": "deprecated/header-v1.html", + "text": "Header version 1" + } + ], + "fr": [ + { + "href": "deprecated/header-v1.html", + "text": "Header version 1" + } + ] + } + } + ], + "changesets": [ + { + "@id": "_:cs_header_4", + "name": "Header - version 4.0", + "status": "stable", + "baseOnIteration": "_:iteration_header_4", + "detectableBy": "#wb-bnr:not(:has(+ hr + .container > .row))", + "layout": [ + "Language toggle link on the top right", + "Branding on the left, Search on the right", + "Horizontal divider", + "Breadcrumbs on the left, Authentication pattern on the right" + ], + "style": "Horizontal divider is 1px and light-gray", + "semantic": "
\n\t\n\t\n\t\n\t
\n\t\n\t\n
", + "include": { + "@type": "source-code", + "collapsed": true, + "description": "Include with logic in Liquid.", + "code": { + "@type": [ "@id", "rdf:HTML" ], + "@value": "includes/header.html" + } + }, + "logic": "Not applicable", + "guidance": "Not applicable", + "context": "Not applicable", + "configuration": [ + "Show or hide the alternative language link and define the alternative language page URL", + "Show or hide the search bar", + "Show or hide the breadcrumbs and defined the breadcrumbs item(s)", + "Show or hide the authentication pattern and define the authentication link(s)" + ] + }, + { + "@id": "_:cs_header_3", + "name": "Header - version 3.0", + "status": "demoted", + "baseOnIteration": "_:iteration_header_3", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-8", + "layout": [ + "Language toggle link on the top right", + "Branding on the left, Search on the right", + "Horizontal divider", + "Breadcrumbs on the left, Authentication pattern on the right" + ], + "style": "Horizontal divider is 3px and dark-blue", + "semantic": "
\n\t\n\t\n\t\n\t
\n\t\n\t\n
", + "logic": "Not applicable", + "guidance": "Not applicable", + "context": "Not applicable", + "configuration": [ + "Show or hide the alternative language link and define the alternative language page URL", + "Show or hide the search bar", + "Show or hide the breadcrumbs and defined the breadcrumbs item(s)", + "Show or hide the authentication pattern and define the authentication link(s)" + ] + }, + { + "@id": "_:cs_header_2", + "name": "Header - version 2.0", + "status": "deprecated", + "baseOnIteration": "_:iteration_header_2", + "detectableBy": "#wb-bnr + hr + .container > .row > .col-md-12" + }, + { + "@id": "_:cs_header_1", + "name": "Header - version 1.0", + "status": "deprecated", + "baseOnIteration": "_:iteration_header_1", + "detectableBy": "#wb-bnr + .gcweb-menu" + } + ] } diff --git a/sites/layouts/documentation.html b/sites/layouts/documentation.html index da8b42a4b2..082be82e61 100644 --- a/sites/layouts/documentation.html +++ b/sites/layouts/documentation.html @@ -620,7 +620,7 @@

{% if lng == "fr" %}Évaluation et rapport{% else %}Evaluat { "template": "[data-yes]", "test": "fn:isArray", - "value": "/pages/assessment", + "value": "/pages/reports", "mapping": [ { "template": "template", @@ -637,7 +637,7 @@

{% if lng == "fr" %}Évaluation et rapport{% else %}Evaluat { "template": "[data-no]", "test": "fn:guessType", - "value": "/pages/assessment", + "value": "/pages/reports", "expect": "undefined" } ] diff --git a/sites/theme.scss b/sites/theme.scss index c3aa3bbe4f..14229632be 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -260,7 +260,7 @@ @import "banner/screen-sm-max"; @import "baseline/heading-screen-sm-max"; @import "gcweb-menu/screen-sm-max"; - @import "authentication/screen-sm-max"; + @import "authentication/screen-sm-max_deprecated"; @import "footers/screen-sm-max"; @import "../components/dshbrd/screen-sm-max"; diff --git a/templates/home/deprecated/home-auth-v2.html b/templates/home/deprecated/home-auth-v2.html index cd8096313f..f3e6200f43 100644 --- a/templates/home/deprecated/home-auth-v2.html +++ b/templates/home/deprecated/home-auth-v2.html @@ -36,7 +36,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
diff --git a/templates/home/deprecated/home-auth-v3.html b/templates/home/deprecated/home-auth-v3.html index df4d1ff6d4..d8a715853c 100644 --- a/templates/home/deprecated/home-auth-v3.html +++ b/templates/home/deprecated/home-auth-v3.html @@ -36,7 +36,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
diff --git a/templates/home/deprecated/home-v2.html b/templates/home/deprecated/home-v2.html index 63376016a3..1e82ac9eb1 100644 --- a/templates/home/deprecated/home-v2.html +++ b/templates/home/deprecated/home-v2.html @@ -30,7 +30,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}
diff --git a/templates/home/deprecated/home-v3.html b/templates/home/deprecated/home-v3.html index 5faa93e102..c32938df5c 100644 --- a/templates/home/deprecated/home-v3.html +++ b/templates/home/deprecated/home-v3.html @@ -30,7 +30,7 @@
- {% if page.altLangPage %}{% include language/inc-languagetoggle.html %}{% endif %} + {% if page.altLangPage %}{% include language/languagetoggle.html %}{% endif %} {% include headers-includes/brand.html %} {% unless page.nositesearch %}{% include headers-includes/sitesearch.html %}{% endunless %}