From 16856f9a551b8153f4be97da22f4d8fc92c77f72 Mon Sep 17 00:00:00 2001 From: delisma Date: Thu, 4 Jan 2024 10:45:56 -0500 Subject: [PATCH] Add main page title component This commit adds the main page title component, which includes the SCSS file, HTML template, JSON data, and Markdown documentation for both English and French versions. The component provides a default H1 style with a short bold red underline for use in Canada.ca websites. It also includes guidance and code samples for implementing the component with and without RDFa + schema.org markup. --- _config.yml | 1 + _data/sites.json | 2951 ----------------- components/baseline/_base.scss | 13 - sites/_variables.scss | 5 + sites/baseline/_heading.scss | 1 - sites/main-page-title/_base.scss | 7 + .../includes/main-page-title.html | 1 + sites/main-page-title/index.json-ld | 162 + sites/main-page-title/main-page-title-en.md | 10 + sites/main-page-title/main-page-title-fr.md | 10 + sites/theme.scss | 1 + 11 files changed, 197 insertions(+), 2965 deletions(-) delete mode 100644 _data/sites.json create mode 100644 sites/main-page-title/_base.scss create mode 100644 sites/main-page-title/includes/main-page-title.html create mode 100644 sites/main-page-title/index.json-ld create mode 100644 sites/main-page-title/main-page-title-en.md create mode 100644 sites/main-page-title/main-page-title-fr.md diff --git a/_config.yml b/_config.yml index f3b4de53b..dc56dfa1e 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,7 @@ # # Local site settings remote_theme: wet-boew/gcweb-jekyll +repository: wet-boew/GCWeb title: "GCWeb, the Canada.ca official theme" # Site name or title website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website global: diff --git a/_data/sites.json b/_data/sites.json deleted file mode 100644 index b7e987fef..000000000 --- a/_data/sites.json +++ /dev/null @@ -1,2951 +0,0 @@ -[{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Archived - template", - "fr": "Archivé - Gabarit" - }, - "description": { - "en": "Gobal demoed feature included but need to move in its own folder.", - "fr": "Fonctionalité globale inclus mais qu'il nécessite qu'ils soit déplacé dans son propre dossier." - }, - "modified": "2022-05-03", - "componentName": "archived", - "status": "stable", - "version": "1.1", - "pages": { - "examples": [ - { - "title": "Archived - Content page", - "language": "en", - "path": "archived-en.html" - }, - { - "title": "Archivé - Page de contenu", - "language": "fr", - "path": "archived-fr.html" - } - ], - "docs": [ - { - "title": "Archived - documentation", - "language": "en", - "path": "archived-docs-en.html" - }, - { - "title": "Archivé - documentation", - "language": "fr", - "path": "archived-docs-fr.html" - } - ] - }, - "dependencies": "no dependency", - "a11yGuidance": "no accessibility guidance", - "variations": [ - { - "name": { - "en": "Archived - default", - "fr": "Archivé - par défaut" - }, - "status": "stable", - "description": { - "en": "The archived component indicates that a given page was archived and its content is provided for reference, research or recordkeeping purposes.", - "fr": "La composante archivé indique qu'une page donnée a été archivée et que son contenu est fourni aux fins de référence, de recherche ou de tenue de documents." - }, - "iteration": "_:iteration_archvd_1", - "example": [ - { - "en": { "href": "archived-en.html", "text": "Archived" }, - "fr": { "href": "archived-fr.html", "text": "Archivé" } - } - ], - "implementation": [ - "_:implement_archvd" - ], - "history": [ - { - "en": "November 2023 - Initial implementation of the variation.", - "fr": "Novembre 2023 - Implémentation initiale de la variante." - } - ] - }, - { - "name": { - "en": "Archived with overlay", - "fr": "Archivé avec contenu superposé" - }, - "status": "stable", - "description": { - "en": "The archived with overlay component indicates that a given page was archived and its content is provided for reference, research or recordkeeping purposes. It contains an overlayed element that appears when the page is scrolled.", - "fr": "La composante archivé avec contenu superposé indique qu'une page donnée a été archivée et que son contenu est fourni aux fins de référence, de recherche ou de tenue de documents. Elle comporte un élément superposé au contenu qui s'affiche lorsque la page défile." - }, - "iteration": "_:iteration_archvd_overlay_1", - "example": [ - { - "en": { "href": "archived-overlay-en.html", "text": "Archived with overlay" }, - "fr": { "href": "archived-overlay-fr.html", "text": "Archivé avec contenu superposé" } - } - ], - "implementation": [ - "_:implement_archvd_overlay", - "_:implement_archvd_overlay_gcweb" - ], - "history": [ - { - "en": "February 2014 - Initial implementation of the variation.", - "fr": "Février 2014 - Implémentation initiale de la variante." - } - ] - } - ], - "implementation": [ - { - "@id": "_:implement_archvd_overlay", - "iteration": "_:iteration_archvd_overlay_1", - "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": [ - "Insert the code snippet below at the beginning of your <body> element." - ], - "fr": [ - "Insérez l'extrait de code ci-dessous au début de votre élément <body>." - ] - }, - "notes": { - "en": [ - "For more information on how the Overlay or Data Inview plugins, visit their respective documentation" - ], - "fr": [ - "Pour plus d'informations sur le fonctionnement des plugiciels Contenu superposé ou Data Inview, visitez leur documentation respective" - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
\n\t
\n\t\t

We have archived this page and will not be updating it.

\n\t\t

You can use it for research or reference.

\n\t
\n
\n\n
\n\t
\n\t\t

We have archived this page and will not be updating it.

\n\t\t

You can use it for research or reference.

\n\t
\n
" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
\n\t
\n\t\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
\n\n
\n\t
\n\t\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
" - } - ] - } - }, - { - "@id": "_:implement_archvd_overlay_gcweb", - "iteration": "_:iteration_archvd_overlay_1", - "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 \"Archived with overlay\", in the page's front-matter, set the property archiveOverlay to true." - ], - "fr": [ - "Pour afficher \"Archivé avec contenu superposé\", dans l'en-tête de la page, définissez la propriété archiveOverlay à true." - ] - }, - "notes": { - "en": [ - "For more information on how the Overlay or Data Inview plugins, visit their respective documentation" - ], - "fr": [ - "Pour plus d'informations sur le fonctionnement des plugiciels Contenu superposé ou Data Inview, visitez leur documentation respective" - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "{\n\t...\n\t\"archiveOverlay\": true\n\t...\n}" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code:", - "code": "{\n\t...\n\t\"archiveOverlay\": true\n\t...\n}" - } - ] - } - }, - { - "@id": "_:implement_archvd", - "iteration": "_:iteration_archvd_1", - "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": [ - "Insert the code snippet below at the beginning of your <body> element." - ], - "fr": [ - "Insérez l'extrait de code ci-dessous au début de votre élément <body>." - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
\n\t
\n\t\t

We have archived this page and will not be updating it.

\n\t\t

You can use it for research or reference.

\n\t
\n
" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
\n\t
\n\t\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
" - } - ] - } - } - ], - "iteration": [ - { - "@id": "_:iteration_archvd_1", - "name": "Archived - Iteration 1", - "date": "2023-11", - "detectableBy": ".gc-archv", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
\n\t
\n\t

We have archived this page and will not be updating it.

\n\t

You can use it for research or reference.

\n\t
\n
" - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
\n\t
\n\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
" - } - ] - }, - { - "@id": "_:iteration_archvd_overlay_1", - "name": "Archived with overlay - Iteration 1", - "date": "2014-02", - "detectableBy": ".gc-archv.wb-inview", - "predecessor": "_:iteration_archvd_1", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
\n\t
\n\t

We have archived this page and will not be updating it.

\n\t

You can use it for research or reference.

\n\t
\n
\n\n
\n\t
\n\t

We have archived this page and will not be updating it.

\n\t

You can use it for research or reference.

\n\t
\n
" - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
\n\t
\n\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
\n\n
\n\t
\n\t

Nous avons archivé cette page et elle ne sera plus mise à jour.

\n\t

Vous pouvez la consulter à des fins de recherche ou à titre de référence.

\n\t
\n
" - } - ] - } - ], - "changesets": [ - { - "@id": "_:cs_archvd", - "name": "Archived", - "status": "stable", - "baseOnIteration": "_:iteration_archvd_1", - "detectableBy": ".gc-archv", - "layout": "Must be at the very top of the page", - "semantic": "section > .container > h2 + p", - "static": [ - "We have archived this page and will not be updating it.", - "You can use it for research or reference.", - "Nous avons archivé cette page et elle ne sera plus mise à jour.", - "Vous pouvez la consulter à des fins de recherche ou à titre de référence." - ], - "include": { - "@type": "source-code", - "collapsed": true, - "description": "Include with logic in Liquid.", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "../headers-includes/archive.html" - } - } - }, - { - "@id": "_:cs_archvd_overlay", - "name": "Archived with overlay", - "status": "stable", - "baseOnIteration": "_:iteration_archvd_overlay_1", - "detectableBy": ".gc-archv.wb-inview", - "layout": "Must be at the very top of the page", - "semantic": "(section > .container > h2 + p) + (section > .container > h2 + p)", - "static": [ - "We have archived this page and will not be updating it.", - "You can use it for research or reference.", - "Nous avons archivé cette page et elle ne sera plus mise à jour.", - "Vous pouvez la consulter à des fins de recherche ou à titre de référence." - ], - "include": { - "@type": "source-code", - "collapsed": true, - "description": "Include with logic in Liquid.", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "../headers-includes/archive.html" - } - }, - "basic": "Overlay is not enabled." - } - ] -} -,{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Authentication", - "fr": "Authentification" - }, - "description": { - "en": "Documentation and working example on how to use the contextual sign in button.", - "fr": "Documentation et example pratique sur l'utilisation du bouton de connexion contextuel." - }, - "modified": "2022-05-03", - "componentName": "authentication", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Authentication patterns", - "language": "en", - "path": "authentication-en.html" - }, - { - "title": "Modèles d'authentification", - "language": "fr", - "path": "authentication-fr.html" - } - ], - "examples": [ - { - "title": "Contextual Sign in button", - "language": "en", - "path": "contextual-signin-en.html" - }, - { - "title": "Bouton contextuel « Se connecter »", - "language": "fr", - "path": "contextual-signin-fr.html" - }, - { - "title": "Contextual Sign in button with extended custom label", - "language": "en", - "path": "contextual-signin-label-extended-en.html" - }, - { - "title": "Bouton contextuel « Se connecter » avec libellé personnalisé étendu", - "language": "fr", - "path": "contextual-signin-label-extended-fr.html" - }, - { - "title": "Contextual Sign in button without custom labels", - "language": "en", - "path": "contextual-signin-nolabels-en.html" - }, - { - "title": "Bouton contextuel « Se connecter » sans aucun libelés personnalisés", - "language": "fr", - "path": "contextual-signin-nolabels-fr.html" - }, - { - "title": "Contextual Sign in button without the GCWeb Menu", - "language": "en", - "path": "contextual-signin-nomenu-en.html" - }, - { - "title": "Bouton contextuel « Se connecter » sans le menu GCWeb", - "language": "fr", - "path": "contextual-signin-nomenu-fr.html" - }, - { - "title": "Content page - Signed-Off pattern", - "language": "en", - "path": "signedoff-en.html" - }, - { - "title": "Page de contenu - Modèle de session fermée", - "language": "fr", - "path": "signedoff-fr.html" - }, - { - "title": "Content page - Signed-On pattern", - "language": "en", - "path": "signedon-en.html" - }, - { - "title": "Page de contenu - Modèle de session ouverte", - "language": "fr", - "path": "signedon-fr.html" - }, - { - "title": "Active user session", - "language": "en", - "path": "activeusersession-en.html" - }, - { - "title": "Session utilisateur active", - "language": "fr", - "path": "activeusersession-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Breadcrumb trail", - "fr": "Fil d'Ariane" - }, - "description": { - "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", - "componentName": "breadcrumbs", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Breadcrumb trail", - "language": "en", - "path": "breadcrumbs-en.html" - }, - { - "title": "Fil d'Ariane", - "language": "fr", - "path": "breadcrumbs-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 2.0, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Date modified", - "fr": "Date de modification" - }, - "description": { - "en": "Indicates the date on which the current page was last modified.", - "fr": "Indique la date à laquelle la page courante a été modifiée pour la dernière fois." - }, - "modified": "2023-11-02", - "componentName": "date-modified", - "status": "stable", - "version": "1.0", - "pages": { - "docs": [ - { - "title": "Date modified", - "language": "en", - "path": "date-modified-en.html" - }, - { - "title": "Date de modification", - "language": "fr", - "path": "date-modified-fr.html" - } - ] - }, - "dependencies": [ - "Page details" - ], - "a11yGuidance": "no accessibility guidance", - "variations": [ - { - "name": { - "en": "Date modified - default", - "fr": "Date de modification - par défaut" - }, - "status": "stable", - "description": { - "en": "The date modified component indicates how recently the content of a web page has been updated.", - "fr": "La composante de date de modification indique la date de la dernière mise à jour d'une page Web." - }, - "guidance": { - "en": "https://design.canada.ca/common-design-patterns/date-modified.html", - "fr": "https://conception.canada.ca/configurations-conception-communes/date-modification.html" - }, - "iteration": "_:iteration_dtmd_1", - "example": [ - { - "en": { "href": "../../content-page/content-en.html", "text": "Content page (date modified at bottom of page)" }, - "fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (date de modification au bas de la page)" } - } - ], - "implementation": [ - "_:implement_dtmd" - ], - "history": [ - { - "en": "June 2014 - Initial implementation of the variation.", - "fr": "Juin 2014 - Implémentation initiale de la variante." - } - ] - } - ], - "implementation": [ - { - "@id": "_:implement_dtmd", - "iteration": "_:iteration_dtmd_1", - "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": [ - "Create a <dl id=\"wb-dtmd\">.", - "Inside the above <dl>,
  1. create a <dt>Date modified:</dt>.
  2. create a <dd><time property=\"dateModified\">[YYYY-MM-DD]<time></dd>, where [YYYY-MM-DD] is the date the current page was last updated. For example: 2023-11-03.
" - ], - "fr": [ - "Créez un <dl id=\"wb-dtmd\">.", - "À l'intérieur de ce <dl>,
  1. créez un <dt>Date de modification :</dt>.
  2. créez un <dd><time property=\"dateModified\">[AAAA-MM-JJ]<time></dd>, où [AAAA-MM-JJ] est la date à laquelle la page courante a été modifiée pour la dernière fois. Par exemple: 2023-11-03.
" - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
\n\t
Date modified:
\n\t
\n
" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
\n\t
Date de modification :
\n\t
\n
" - } - ] - } - } - ], - "iteration": [ - { - "@id": "_:iteration_dtmd_1", - "name": "Date modified - Iteration 1", - "date": "2014-06", - "detectableBy": "#wb-dtmd", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "<dl id=\"wb-dtmd\">\n\t<dt>Date modified:</dt>\n\t<dd><time property=\"dateModified\">YYYY-MM-DD</time></dd>\n</dl>" - }, - { - "@type": "source-code", - "@language": "en", - "description": "Code sample with contact link", - "code": "<dl id=\"wb-dtmd\">\n\t<dt>Date de modification :</dt>\n\t<dd><time property=\"dateModified\">YYYY-MM-DD</time></dd>\n</dl>" - } - ] - } - ], - "changesets": [ - { - "@id": "_:cs_dtmd", - "name": "Date modified", - "status": "stable", - "baseOnIteration": "_:iteration_dtmd_1", - "detectableBy": "#wb-dtmd", - "layout": "The
is on the right of the
.", - "semantic": "dl > dt + dd", - "static": [ - "Date modified:", - "Date de modification :" - ], - "schema": [ - "Last modified date" - ], - "include": { - "@type": "source-code", - "collapsed": true, - "description": "Include with logic in Liquid.", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "includes/date-modified.html" - } - } - } - ] -} -,{ - "@context": { - "@version": 2.0, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Feedback area", - "fr": "Zone de rétroaction" - }, - "description": { - "en": "Documentation on how to use the elements of the feedback area.", - "fr": "Documentation sur l'utilisation des éléments de la zone commentaires." - }, - "modified": "2023-01-10", - "componentName": "feedback", - "status": "stable", - "version": "2.0", - "pages": { - "docs": [ - { - "title": "Documentation for the feedback area", - "language": "en", - "path": "feedback-docs-en.html" - }, - { - "title": "Documentation pour la zone de rétroaction", - "language": "fr", - "path": "feedback-docs-fr.html" - } - ], - "examples": [ - { - "title": "Page feedback tool", - "language": "en", - "path": "page-feedback-en.html" - }, - { - "title": "Outil de rétroaction sur la page", - "language": "fr", - "path": "page-feedback-fr.html" - }, - { - "title": "Page feedback tool with contact link", - "language": "en", - "path": "page-feedback-contact-en.html" - }, - { - "title": "Outil de rétroaction sur la page avec lien de contact", - "language": "fr", - "path": "page-feedback-contact-fr.html" - }, - { - "title": "Report a problem", - "language": "en", - "path": "report-problem-en.html" - }, - { - "title": "Signaler un problème", - "language": "fr", - "path": "report-problem-fr.html" - } - ], - "reports": [ - { - "title": "Accessibility assessment #1", - "language": "en", - "path": "reports/a11y-2-en.html" - }, - { - "title": "Évaluation de l'accessibilité #1", - "language": "fr", - "path": "reports/a11y-2-fr.html" - }, - { - "title": "Accessibility Conformance Report - WCAG Level AA - Autumn 2023", - "language": "en", - "path": "reports/acr-2023-autumn-en.html" - }, - { - "title": "Rapport de conformité d'accessibilité WCAG 2.1 Niveau AA - Automne 2023", - "language": "fr", - "path": "reports/acr-2023-autumn-fr.html" - } - ] - }, - "dependencies": [ - "Page details" - ], - "a11yGuidance": "no accessibility guidance", - "variations": [ - { - "name": { - "en": "Page feedback tool (PFT) - default", - "fr": "Outil de rétroaction sur la page (ORP) - par défaut" - }, - "status": "stable", - "description": { - "en": "The Page feedback tool variation replaces the “Report a problem” pattern while actively collecting user feedback", - "fr": "La variante de l'Outil de rétroaction sur la page remplace le modèle « Signaler un problème » tout en collectant activement les commentaires des utilisateurs." - }, - "guidance": { - "en": "https://design.canada.ca/feedback/index.html", - "fr": "https://conception.canada.ca/retroaction/index.html" - }, - "iteration": "_:iteration_pft_1", - "example": [ - { - "en": { "href": "page-feedback-en.html", "text": "Page feedback tool" }, - "fr": { "href": "page-feedback-fr.html", "text": "Outil de rétroaction sur la page" } - } - ], - "implementation": [ - "_:implement_pft", - "_:implement_pft_gcweb", - "_:implement_pft_upgrade_rap", - "_:implement_pft_mws_author" - ], - "history": [ - { - "en": "August 2023 - Initial implementation of the variation.", - "fr": "Août 2023 - Implémentation initiale de la variante." - } - ] - }, - { - "name": { - "en": "Page feedback tool with contact link", - "fr": "Outil de rétroaction sur la page avec lien de contact" - }, - "status": "stable", - "description": { - "en": "The Page feedback tool with contact link variation replaces the “Report a problem” pattern while actively collecting user feedback", - "fr": "La variante de l'Outil de rétroaction sur la page avec lien de contact remplace le modèle « Signaler un problème » tout en collectant activement les commentaires des utilisateurs." - }, - "guidance": { - "en": "https://design.canada.ca/feedback/index.html", - "fr": "https://conception.canada.ca/retroaction/index.html" - }, - "iteration": "_:iteration_pft_1", - "example": [ - { - "en": { "href": "page-feedback-contact-en.html", "text": "Page feedback tool with contact link" }, - "fr": { "href": "page-feedback-contact-fr.html", "text": "Outil de rétroaction sur la page avec lien de contact" } - } - ], - "implementation": [ - "_:implement_pft_contact", - "_:implement_pft_contact_gcweb", - "_:implement_pft_upgrade_rap", - "_:implement_pft_mws_author" - ], - "history": [ - { - "en": "August 2023 - Initial implementation of the variation.", - "fr": "Août 2023 - Implémentation initiale de la variante." - } - ] - }, - { - "name": { - "en": "Report a problem (RAP)", - "fr": "Signaler un problème (SUP)" - }, - "status": "deprecated", - "description": { - "en": "The Report a problem variation features an expand/collapse button with a list of checkboxes.", - "fr": "La variation Signaler un problème comporte un bouton développer/réduire avec une liste de cases à cocher." - }, - "guidance": { - "en": "https://design.canada.ca/common-design-patterns/report-problem.html", - "fr": "https://conception.canada.ca/configurations-conception-communes/signaler-probleme.html" - }, - "iteration": "_:iteration_rap_5", - "example": [ - { - "en": { "href": "report-problem-en.html", "text": "Report a problem" }, - "fr": { "href": "report-problem-fr.html", "text": "Signaler un problème" } - } - ], - "history": [ - { - "en": "October 2023 - RAP status is now deprecated.", - "fr": "Octobre 2023 – SUP passe au statut obsolète." - }, - { - "en": "August 2023 - Removed JSON Manager extraction for 'externalReferer' and 'subject'.", - "fr": "Août 2023 – Suppression de l’extraction via le Gestionnaire JSON pour « externalReferer » et « subject »." - }, - { - "en": "March 2023 - Leveraging JSON Manager Extractor and Data JSON to generate hidden input fields.", - "fr": "Mars 2023 - Utilise l'extracteur du Gestionnaire JSON et Data JSON pour générer des champs de saisie masqués." - }, - { - "en": "January 2023 - Removed login error sub-options and renamed login error option.", - "fr": "Janvier 2023 – Suppression des sous-options d’erreur de connexion et l'option d’erreur de connexion renommée." - }, - { - "en": "May 2022 - Rework of the template to use data-ajax. Includes fallback for basic HTML version.", - "fr": "Mai 2022 - Refonte du gabarit pour utiliser data-ajax. Inclut une solution de secours pour la version HTML simplifiée." - }, - { - "en": "March 2021 - Initial implementation of the component.", - "fr": "Mars 2021 - Implémentation initiale de la composante." - } - ] - } - ], - "implementation": [ - { - "@id": "_:implement_rap", - "iteration": "_:iteration_rap_5", - "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": [ - "To show the Report a problem form, create a <div> with the following data attribute: data-ajax-replace=\"ajax/report-problem-en.html\".", - "For the basic HTML version, a link element should be created inside a <div> that points to the report a problem form page: <div><a class=\"btn btn-default btn-block\" href=\"https://www.canada.ca/en/report-problem.html\">Report a problem on this page</a></div>.", - "This variation leverages JSON Manager and Data JSON to get information about the page and generate hidden input fields in the form. Therefore, the tag <meta name=\"dcterms.creator\" content=\"[Department name]\"> needs to be present in the page." - ], - "fr": [ - "Pour afficher le formulaire de commentaires sur la page, créez un <div> avec l'attribut suivant : data-ajax-replace=\"ajax/report-problem-fr.html\".", - "Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class=\"btn btn-default btn-block\" href=\"https://www.canada.ca/fr/signaler-probleme.html\">Signaler un problème sur cette page</a></div>.", - "Cette variante utilise JSON Manager et Data JSON pour obtenir des informations sur la page et générer des champs de saisie masqués dans le formulaire. La balise <meta name=\"dcterms.creator\" content=\"[Nom du service]\"> doit être présente dans la page." - ] - }, - "notes": { - "en": [ - "For more information about Data Ajax plugin, please visit Data Ajax documentation page." - ], - "fr": [ - "Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax." - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
\n\t
\n\t\t
\n\t\t\tReport a problem on this page\n\t\t
\n\t
\n
" - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Ajaxed-in content", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "ajax/report-problem-en.html" - } - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
\n\t
\n\t\t
\n\t\t\tSignaler un problème sur cette page\n\t\t
\n\t
\n
" - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "ajax/report-problem-fr.html" - } - } - ] - } - }, - { - "@id": "_:implement_rap_aa", - "iteration": "_:iteration_rap_5", - "name": { - "en": "Adobe Analytics", - "fr": "Adobe Analytics" - }, - "introduction": { - "en": "This implementation is meant for analytics analysts trying to add analytics properties to the component.", - "fr": "Cette implémentation est destinée aux analystes en analytiques qui veulent ajouter des propriétés analytiques au composant." - }, - "instructions": { - "en": [ - "To implement Adobe Analytics in the Report a problem form, simply add the attribute data-gc-analytics-rap to every checkbox with the value being the same as the current language's <label>, followed by a dash and followed by the other language's <label>." - ], - "fr": [ - "Pour implémenter Adobe Analytics dans le formulaire Signaler un problème, ajoutez simplement l'attribut data-gc-analytics-rap à chaque case à cocher avec la valeur étant la même que le <label> de la langue actuelle, suivie d'un tiret et suivi par le <label> de l'autre langue." - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
\n\t
" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
\n\t\n\t\n
" - } - ] - } - }, - { - "@id": "_:implement_rap_gcweb", - "iteration": "_:iteration_rap_5", - "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": [ - "In the page's front-matter do the following:" - ], - "fr": [ - "Dans l'en-tête de la page faites ce qui suit :
  • définissez la variable feedbackFallback à true
    • " - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "---\n{\n\t...\n\t\"feedback\": true, \n\t\"feedbackFallback\": true, \n\t\"feedbackPath\": \"ajax-report-problem-en.html\"\n\t...\n}\n---" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "---\n{\n\t...\n\t\"feedback\": true, \n\t\"feedbackFallback\": true, \n\t\"feedbackPath\": \"ajax-report-problem-fr.html\"\n\t...\n}\n---" - } - ] - } - }, - { - "@id": "_:implement_pft", - "iteration": "_:iteration_pft_1", - "name": { - "en": "Standard (wet-boew)", - "fr": "Standard (wet-boew)" - }, - "introduction": { - "en": "This implementation is meant for developers/publishers adding the component manually while using the latest version of GCWeb along with the implementation of the page details version 3.0 and above.", - "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement en utilisant la dernière version de GCWeb avec l'implémentation de la version 3.0 ou plus du détails de la page." - }, - "instructions": { - "en": [ - "Ensure the version 13.9.0 or newer of GCWeb is implemented.", - "Ensure the version 3.0 or newer of the page details is implemented.", - "To show the page feedback form, create a <div class=\"wb-disable-allow\"> with the following data attributes:", - "Additionally, your page needs to have the following metadata: <meta name=\"dcterms.creator\" content=\"[Department name]\">" - ], - "fr": [ - "Vérifier que la version 13.9.0 ou plus récente de GCWeb est implémentée.", - "Vérifier que la version 3.0 ou plus récente du détails de la page est implémentée.", - "Pour afficher le formulaire de rétroaction sur la page, créez un <div class=\"wb-disable-allow\"> avec les attributs suivants :", - "De plus, vous pouvez définir les métadonnées suivantes : <meta name=\"dcterms.creator\" content=\"[Department name]\">" - ] - }, - "notes": { - "en": [ - "To upgrade from the RAP to the PFT, follow the instructions of the \"Upgrade from RAP\" tab.", - "For more information about Data Ajax plugin, please visit Data Ajax documentation page." - ], - "fr": [ - "Pour passer du SUP au ORP, suivez les instructions de l'onglet \"Mise à jour à partir de SUP\".", - "Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax." - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
    " - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Ajaxed-in content", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "assets/page-feedback-en.html" - } - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
    " - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "assets/page-feedback-fr.html" - } - } - ] - } - }, - { - "@id": "_:implement_pft_gcweb", - "iteration": "_:iteration_pft_1", - "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. To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:", - "fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll. Pour appliquer les attributs facultatifs de cette variante sur une page donnée, vous devrez procéder comme suit dans le front-matter de la page :" - }, - "instructions": { - "en": [ - "Set the variable feedback to true.", - "Set the variable feedbackData to an object containing the following customizable strings:" - ], - "fr": [ - "Définissez la variable feedback à true.", - "Définissez la variable feedbackData à un objet contenant les chaînes de caractères suivantes :" - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "---\n{\n\t...\n\t\"feedback\": true,\n\t\"feedbackData\": {\n\t\t\"theme\": \"Theme\",\n\t\t\"section\": \"Section\"\n\t}\n\t...\n}\n---" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "---\n{\n\t...\n\t\"feedback\": true,\n\t\"feedbackData\": {\n\t\t\"theme\": \"Thème\",\n\t\t\"section\": \"Section\"\n\t}\n\t...\n}\n---" - } - ] - } - }, - { - "@id": "_:implement_pft_upgrade_rap", - "iteration": "_:iteration_pft_1", - "name": { - "en": "Upgrade from RAP", - "fr": "Mise à jour à partir de SUP" - }, - "introduction": { - "en": "This implementation is meant for implementers that want to migrate their current page build with RAP towards the new PFT.", - "fr": "Cette implémentation est destinée aux implémenteurs qui souhaitent migrer leur page actuelle avec SUP vers le nouvel ORP." - }, - "instructions": { - "en": [ - "Update the page details component to the version 3.0.", - "Follow the implementation instructions for the new PFT implementation." - ], - "fr": [ - "Mettez à jour le composant détails de page vers la version 3.0.", - "Suivez les instructions d'implémentation pour la nouvelle implémentation du ORP." - ] - } - }, - { - "@id": "_:implement_pft_mws_author", - "iteration": "_:iteration_pft_1", - "name": { - "en": "MWS users", - "fr": "Utilisateur SWG" - }, - "introduction": { - "en": "For users that are authoring Web pages on Canada.ca Managed Web Services.", - "fr": "Pour les utilisateurs qui font de l'édition de pages Web sur Canada.ca via le Service Web géré." - }, - "instructions": { - "en": [ - "Read the design system guidance before adding the Page feedback tool on your pages.", - "If you are configuring the section, please follow the additional design system guidance.", - "You can configure the Page feedback tool via the page properties by adjusting the optional configurations (contact info and section). The value for the theme configuration is automatically set by MWS.", - "For additional guidance on how to implement the Page feedback tool, you can consult the guide on GCPedia along with the other documentation for MWS." - ], - "fr": [ - "Veuillez lire les consignes du système de conception avant d'ajouter l'Outil de rétroaction sur la page à vos pages.", - "Si vous configurez la section, veuillez suivre les consignes supplémentaires du système de conception.", - "Vous pouvez configurer l'Outil de rétroaction sur la page via les propriétés de la page en ajustant les configurations facultative (informations de contact et section). Les valeurs de la configuration du thème sont automatiquement définies par le SWG.", - "Pour des conseils supplémentaires sur la mise en œuvre de l'Outil de rétroaction sur la page, vous pouvez consulter le guide sur GCPedia avec les autres documents du SWG." - ] - } - }, - { - "@id": "_:implement_pft_contact", - "iteration": "_:iteration_pft_1", - "name": { - "en": "Standard (WET-BOEW)", - "fr": "Standard (WET-BOEW)" - }, - "introduction": { - "en": "This implementation is meant for developers/publishers adding the component manually while using the latest version of GCWeb along with the implementation of the page details version 3.0 and above.", - "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement en utilisant la dernière version de GCWeb avec l'implémentation de la version 3.0 ou plus du détails de la page." - }, - "instructions": { - "en": [ - "Ensure the version 13.9.0 or newer of GCWeb is implemented.", - "Ensure the version 3.0 or newer of the page details is implemented.", - "To show the page feedback form, create a <div class=\"wb-disable-allow\"> with the following data attributes:", - "Additionally, your page needs to have the following metadata: <meta name=\"dcterms.creator\" content=\"[Department name]\">" - ], - "fr": [ - "Vérifier que la version 13.9.0 ou plus récente de GCWeb est implémentée.", - "Vérifier que la version 3.0 ou plus récente du détails de la page est implémentée.", - "Pour afficher le formulaire de rétroaction sur la page, créez un <div class=\"wb-disable-allow\"> avec les attributs suivants :", - "De plus, vous pouvez définir les métadonnées suivantes : <meta name=\"dcterms.creator\" content=\"[Department name]\">" - ] - }, - "notes": { - "en": [ - "To upgrade from the RAP to the PFT, follow the instructions of the \"Upgrade from RAP\" tab.", - "For more information about Data Ajax plugin, please visit Data Ajax documentation page." - ], - "fr": [ - "Pour passer du SUP au ORP, suivez les instructions de l'onglet \"Mise à jour à partir de SUP\".", - "Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax." - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "
    " - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Ajaxed-in content", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "assets/page-feedback-en.html" - } - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "
    " - }, - { - "@type": "source-code", - "collapsed": true, - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "assets/page-feedback-fr.html" - } - } - ] - } - }, - { - "@id": "_:implement_pft_contact_gcweb", - "iteration": "_:iteration_pft_1", - "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. To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:", - "fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll. Pour appliquer les attributs facultatifs de cette variante sur une page donnée, vous devrez procéder comme suit dans le front-matter de la page :" - }, - "instructions": { - "en": [ - "Set the variable feedback to true.", - "Set the variable feedbackContact to an object containing the following properties:", - "Optionally, set the variable feedbackData to an object containing the following customizable strings:" - ], - "fr": [ - "Définissez la variable feedback à true.", - "Définissez la variable feedbackContact à un objet contenant les propriétés :", - "Facultativement, définissez la variable feedbackData à un objet contenant les propriétés suivantes :" - ] - }, - "sample": { - "en": [ - { - "@type": "source-code", - "description": "Code sample:", - "code": "---\n{\n\t...\n\t\"feedback\": true, \n\t\"feedbackContact\": {\n\t\t\"link\": \"Contact link\",\n\t\t\"url\": \"https://canada.ca/en\"\n\t}, \n\t\"feedbackData\": {\n\t\t\"theme\": \"Theme\",\n\t\t\"section\": \"Section\"\n\t}\n\t...\n}\n---" - } - ], - "fr": [ - { - "@type": "source-code", - "description": "Exemple de code :", - "code": "---\n{\n\t...\n\t\"feedback\": true, \n\t\"feedbackContact\": {\n\t\t\"link\": \"Lien de contact\",\n\t\t\"url\": \"https://canada.ca/fr\"\n\t}, \n\t\"feedbackData\": {\n\t\t\"theme\": \"Thème\",\n\t\t\"section\": \"Section\"\n\t}\n\t...\n}\n---" - } - ] - } - } - ], - "changesets": [ - { - "@id": "_:cs_pft_container", - "name": "Page feedback tool with AJAX", - "status": "stable", - "baseOnIteration": "_:iteration_pft_1", - "detectableBy": ".pagedetails .wb-disable-allow[data-ajax-replace*=feedback]", - "layout": [ - "At the top-left column in the page details component", - "When user selects \"No\", a form with a textarea appears" - ], - "style": [ - "Light-gray box with question and two primary buttons", - "When user selects \"No\", a form with a textarea replaces the question and primary buttons" - ], - "include": { - "@type": "source-code", - "description": "Container calling the RAP form via AJAX", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "includes/feedback.html" - } - }, - "logic": "Not applicable", - "behaviour": [ - "Display an inline form that replaces the buttons when requested by the user, to collect the feedback" - ], - "context": "In the page details component, inside the main content of the page", - "configuration":[ - "Mandatory: URL of the file being AJAXed", - "Optional: data-feedback-section attribute", - "Optional: data-feedback-theme attribute", - "Mandaotry for Page feedback tool with contact link variation: data-feedback-link attribute", - "Mandaotry for Page feedback tool with contact link variation: data-feedback-url attribute" - ], - "static": "Not applicable", - "schema": [ - "AjaxLink", - "FeedbackSection", - "FeedbackTheme", - "FeedbackLink", - "FeedbackURL" - ], - "dependency": [ - "Page details, version 2, incompatible with version 1", - "PFT AJAX content as described by the changeset _:cs_pft_ajax" - ], - "file": "Not applicable" - }, - { - "@id": "_:cs_pft_ajax", - "name": "Page feedback tool AJAX file", - "status": "stable", - "baseOnIteration": "_:iteration_pft_1", - "dependOnChangeSet": "_:cs_pft_container", - "detectableBy": "
    ", - "layout": [ - "Row - string followed by two primary buttons", - "Form appear when \"No\" is selected", - "Label", - "Hint", - "Info text", - "Textarea", - "Submit button" - ], - "style": [ - "Light-gray box with question and two primary buttons", - "When user selects \"No\", a form with a textarea replaces the question and primary buttons", - "When user submits, a confirmation message is shown on postback" - ], - "semantic": [ - "h3", - "form > input[type=hidden] + (fieldset > legend + button*3) + p*2 + (details > summary + p) + label + p*2 + textarea + button", - "p" - ], - "include": { - "@type": "source-code", - "description": "HTML fragment which is inserted into the PFT container", - "collapsed": true, - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "assets/page-feedback-en.html" - } - }, - "logic": "Not applicable", - "behaviour": [ - "When user selects \"No\", a form with a textarea and submit button replaces the question and primary buttons", - "When user selects \"Yes\", a success message replaces the question and primary buttons" - ], - "guidance": "Not applicable", - "context": "To be used by PFT", - "configuration": "Not applicable", - "static": [ - "Heading 3: Give feedback about this page - Donnez votre rétroaction sur cette page", - "Legend: Did you find what you were looking for? - Avez-vous trouvé ce que vous cherchiez?", - "Button: Yes - Oui", - "Button: No - Non", - "Paragraph (basic only): If not, tell us why below - Sinon, dites nous pourquoi ci-dessous", - "Paragraph: Tell us why below - Dites nous pourquoi ci-dessous", - "Summary (contact link variation only): Need urgent help with a problem? Contact us - Besoin d’aide urgente pour résoudre un problème? Communiquez avec nous", - "Label: Please provide more details - Veuillez fournir plus de détails", - "Small note: You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details). - Vous ne recevrez pas de réponse. N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).", - "Instruction paragraph: Maximum 300 characters - Maximum de 300 caractères", - "Button: Submit - Soumettre", - "Success message: Thank you for your feedback. - Merci de vos commentaires." - ], - "schema": "Not applicable", - "dependency": [ - "Page details, version 2, incompatible with version 1" - ], - "file": "Not applicable, this HTML fragment content is intended to be integrated by a location that fits the content management system" - }, - { - "@id": "_:cs_rap_ajax_2", - "name": "Report a problem AJAX file Data-JSON", - "status": "deprecated", - "schema:expires": "2024-12", - "baseOnIteration": "_:iteration_rap_5", - "dependOnChangeSet": "_:cs_rap_container", - "detectableBy": "Hidden inputs genereted via Data-JSON and \"subject\" and \"externalReferer\" are static", - "layout": [ - "Full width button", - "When expanded, a vertical form is shown" - ], - "style": [ - "The expandable Button is rendered as the default button preceded by an arrow", - "Gray background for the form area", - "Primary styled button for form submission" - ], - "include": { - "@type": "source-code", - "description": "HTML fragment which is inserted into the RAP container", - "collapsed": true, - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "ajax/deprecated/report-problem-v1-en.html" - } - }, - "logic": "Not applicable", - "behaviour": [ - "Button that show/hide the RAP form", - "Success message showed on success or failure" - ], - "guidance": [ - "Canada.ca: show the feedback form underneath the RAP button" - ], - "context": "To be used by RAP", - "configuration":[ - "Form submission URL" - ], - "static": [ - "Button text - RAP-title - \"Report a problem on this page\" - \"Signaler un problème ou une erreur sur cette page\"", - "Hidden inputs \"subject\" and \"externalReferer\"", - "Text in the ", - "Problem 1", - "Problem 2", - "Problem 3", - "Problem 4", - "Problem 5", - "Problem 11", - "Problem 12", - "Submit button", - "Success message", - "Failure message" - ], - "schema": [ - "Form submission URL" - ], - "dependency": [ - "Page details, version 2, incompatible with version 1" - ], - "file": "Not applicable, this HTML fragment content is intended to be integrated by a location that fits the content management system" - }, - { - "@id": "_:cs_rap_container", - "name": "Report a problem with AJAX", - "status": "deprecated", - "schema:expires": "2024-12", - "baseOnIteration": "_:iteration_rap_5", - "detectableBy": "The RAP web form is inserted via ajax", - "layout": [ - "At the top-left column in the page details component", - "When expanded, a vertical form is shown in-place" - ], - "style": [ - "It is visually rendered as a default button", - "Only have an arrow when the online form is available directly on the page" - ], - "include": { - "@type": "source-code", - "description": "Container calling the RAP form via AJAX", - "code": { - "@type": [ "rdf:HTML" ], - "@value": "
    \n\t
    \n\t\t
    \n\t\t\tReport a problem on this page\n\t\t
    \n\t
    \n
    \n" - } - }, - "logic": "Not applicable", - "behaviour": [ - "Non-Canada.ca implementation: redirect to a web page with a form to collect the feedback", - "Canada.ca implementation: show an inline form underneath the button when requested by the user, to collect the feedback", - "Basic mode Canada.ca implementation: show the fallback button" - ], - "guidance": [ - "Canada.ca: show the feedback form underneath the RAP button", - "Non Canada.ca: redirect the user on a page to collect the feedback." - ], - "context": "In the page details component, inside the main content of the page", - "configuration":[ - "URL of the file being AJAXed", - "URL of the RAP fallback link" - ], - "static": [ - "Button text - RAP-title - \"Report a problem on this page\" - \"Signaler un problème ou une erreur sur cette page\"" - ], - "schema": [ - "AjaxLink", - "StaticRapLink" - ], - "dependency": [ - "Page details, version 2, incompatible with version 1", - "RAP AJAX content as described by the changeset _:cs_rap_ajax", - "RAP AJAX content as described by the changeset _:cs_rap_ajax_2" - ], - "file": "Not applicable" - }, - { - "@id": "_:cs_rap_ajax", - "name": "Report a problem AJAX file", - "status": "deprecated", - "schema:expires": "2024-12", - "baseOnIteration": "_:iteration_rap_2", - "dependOnChangeSet": "_:cs_rap_container", - "detectableBy": "HTML fragment that starts with a \"row row-no-gutters\", containing a form and a wrapper \"div.gc-rprt-prlm\"", - "layout": [ - "Full width button", - "When expanded, a vertical form is shown" - ], - "style": [ - "The expandable Button is rendered as the default button preceded by an arrow", - "Gray background for the form area", - "Primary styled button for form submission" - ], - "include": { - "@type": "source-code", - "description": "HTML fragment which is inserted into the RAP container", - "collapsed": true, - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "ajax/deprecated/report-problem-v1-en.html" - } - }, - "logic": "Not applicable", - "behaviour": [ - "Button that show/hide the RAP form", - "Success message showed on success or failure" - ], - "guidance": [ - "Canada.ca: show the feedback form underneath the RAP button" - ], - "context": "To be used by RAP", - "configuration":[ - "Form submission URL" - ], - "static": [ - "Button text - RAP-title - \"Report a problem on this page\" - \"Signaler un problème ou une erreur sur cette page\"", - "Text in the ", - "Problem 1", - "Problem 2", - "Problem 3", - "Problem 4", - "Problem 5", - "Problem 6", - "Problem 7", - "Problem 8", - "Problem 9", - "Problem 10", - "Problem 11", - "Problem 12", - "Submit button", - "Success message", - "Failure message" - ], - "schema": [ - "Form submission URL" - ], - "dependency": [ - "Page details, version 2, incompatible with version 1" - ], - "file": "Not applicable, this HTML fragment content is intended to be integrated by a location that fits the content management system" - }, - { - "@id": "_:cs_rap_inline", - "name": "Report a problem inline", - "status": "deprecated", - "schema:expires": "2024-12", - "baseOnIteration": "_:iteration_rap_1", - "detectableBy": "The RAP web form is hardcoded in each page and the form inputs are server-side personalized/configured.", - "layout": [ - "At the top-left column in the page details component", - "When expanded, a vertical form is shown in-place" - ], - "style": [ - "It is visually rendered as a default button", - "Only have an arrow when the online form is available directly on the page" - ], - "include": { - "@type": "source-code", - "collapsed": true, - "description": "Include with logic in Handlebars that supports all variations of this changeset. The list of questions is in scope.", - "code": { - "@type": [ "@id", "rdf:HTML" ], - "@value": "deprecated/report-problem-inline-en.html" - } - }, - "logic": "Not applicable", - "behaviour": [ - "Non-Canada.ca implementation - Redirect to a web page with a form to collect the feedback", - "Canada.ca implementation - Show an inline form underneath the button, when requested by the user, to collect the feedback" - ], - "guidance": [ - "Canada.ca - Show the feedback form under the RAP button", - "Non Canada.ca - Redirect the user on a page to collect the feedback." - ], - "context": "In the page details component, inside the main content of the page", - "configuration":[ - "Form submission URL", - "Basic mode: URL of the feedback button" - ], - "static": [ - "Button text - RAP-title - 'Report a problem on this page' - 'Signaler un problème ou une erreur sur cette page'", - "Text in the ", - "Question 1", - "Question 2", - "Question 3", - "Question 4", - "Question 5", - "Question 11", - "Question 12" - ], - "schema": [ - "Form submission URL" - ], - "dependency": [ - "Page details, version 1, incompatible with version 2 and up" - ], - "file": "Not applicable" - } - ], - "iteration": [ - { - "@id": "_:iteration_pft_1", - "name": "Page feedback tool - Iteration 1", - "date": "2023-08", - "detectableBy": ".gc-pft", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Code sample with contact link", - "code": "
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Ajaxed-in content", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "assets/page-feedback-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code avec lien de contact", - "code": "
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "assets/page-feedback-fr.html" - } - } - ] - }, - { - "@id": "_:iteration_rap_5", - "name": "Report a problem - Iteration 5", - "date": "2023-08", - "detectableBy": "externalReferer and subject are no longer generated via Data-JSON, but are now static.", - "breaking": [ - "Semantic: removed JSON Manager extraction for 'externalReferer' and 'subject'." - ], - "additions": [ - "Semantic: added static hidden inputs for 'externalReferer' and 'subject'." - ], - "predecessor": "_:iteration_rap_4", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tReport a problem on this page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Ajaxed-in content", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/report-problem-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tSignaler un problème sur cette page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/report-problem-fr.html" - } - } - ] - }, - { - "@id": "_:iteration_rap_4", - "name": "Report a problem - Iteration 4", - "date": "2023-03", - "detectableBy": "Hidden inputs are generated via Data-JSON", - "breaking": [ - "Semantic: leveraging JSON Manager Extractor and Data JSON to generate hidden input fields." - ], - "predecessor": "_:iteration_rap_3", - "successor": "_:iteration_rap_5", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tReport a problem on this page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Ajaxed-in content", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v4-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tSignaler un problème sur cette page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v4-fr.html" - } - } - ] - }, - { - "@id": "_:iteration_rap_3", - "name": "Report a problem - Iteration 3", - "date": "2023-01", - "detectableBy": "Options 6 through 10 are not there.", - "breaking": [ - "Semantic: removed login error sub-options.", - "Semantic: renamed login error option." - ], - "predecessor": "_:iteration_rap_2", - "successor": "_:iteration_rap_4", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tReport a problem on this page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Ajaxed-in content", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v3-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tSignaler un problème sur cette page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v3-fr.html" - } - } - ] - }, - { - "@id": "_:iteration_rap_2", - "name": "Report a problem - Iteration 2", - "date": "2022-05", - "detectableBy": "The component is now loaded through data-ajax", - "breaking": [ - "Layout: rework of the template to use data-ajax. Includes fallback for basic HTML version", - "Semantic: added login error options (problem 5 to problem 10).", - "Behaviour: form now leverages wb-postback for form validation and no longer uses data-toggle on submit.", - "Behaviour: added error and success messages." - ], - "predecessor": "_:iteration_rap_1", - "successor": "_:iteration_rap_3", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tReport a problem on this page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "en", - "description": "Ajaxed-in content", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v2-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": "
    \n\t
    \n\t\t
    \n\t\t\tSignaler un problème sur cette page\n\t\t
    \n\t
    \n
    " - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Contenu ajouté via Ajax", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v2-fr.html" - } - } - ] - }, - { - "@id": "_:iteration_rap_1", - "@language": "en", - "name": "Report a problem - Iteration 1", - "date": "2021-03", - "detectableBy": ".gc-rprt-prblm", - "successor": "_:iteration_rap_2", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v1-en.html" - } - }, - { - "@type": "source-code", - "@language": "fr", - "description": "Exemple de code", - "code": { - "@type": [ "rdf:HTML", "@id" ], - "@value": "ajax/deprecated/report-problem-v1-fr.html" - } - } - ] - } - ] -} -,{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Footer", - "fr": "Pied de page" - }, - "description": { - "en": "Documentation and working example on how to use the footer.", - "fr": "Documentation et example pratique sur l'utilisation du pied de page." - }, - "modified": "2022-01-12", - "componentName": "footers", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Footer", - "language": "en", - "path": "footers-en.html" - }, - { - "title": "Pied de page complet", - "language": "fr", - "path": "footers-fr.html" - } - ], - "examples": [ - { - "title": "Footer", - "language": "en", - "path": "footers-en.html" - }, - { - "title": "Pied de page complet", - "language": "fr", - "path": "footers-fr.html" - }, - { - "title": "Main footer band and sub-footer band", - "language": "en", - "path": "no-footer-contextual-en.html" - }, - { - "title": "Bande principale et bande sous pied de page", - "language": "fr", - "path": "no-footer-contextual-fr.html" - }, - { - "title": "Contextual band and sub-footer band", - "language": "en", - "path": "no-footer-main-en.html" - }, - { - "title": "Bande contextuelle et bande sous pied de page", - "language": "fr", - "path": "no-footer-main-fr.html" - }, - { - "title": "Hide optional links from the sub-footer band", - "language": "en", - "path": "no-footer-corporate-en.html" - }, - { - "title": "Masquer les liens optionnels de la bande sous le pied de page", - "language": "fr", - "path": "no-footer-corporate-fr.html" - }, - { - "title": "Contextual band and sub-footer band with no optional links", - "language": "en", - "path": "only-footer-contextual-en.html" - }, - { - "title": "Bande contextuelle et bande sous pied de page sans les liens facultatifs", - "language": "fr", - "path": "only-footer-contextual-fr.html" - }, - { - "title": "Bande principale et bande sous pied de page sans les liens facultatifs", - "language": "en", - "path": "only-footer-main-en.html" - }, - { - "title": "Masquer la bande contextuelle et les liens optionnels de la bande sous le pied de page du pied de page", - "language": "fr", - "path": "only-footer-main-fr.html" - }, - { - "title": "Sub-footer band only", - "language": "en", - "path": "only-footer-corporate-en.html" - }, - { - "title": "Bande sous pied de page uniquement", - "language": "fr", - "path": "only-footer-corporate-fr.html" - }, - { - "title": "Sub-footer band only, with no optional links", - "language": "en", - "path": "no-footers-en.html" - }, - { - "title": "Bande sous pied de page uniquement sans les liens facultatifs", - "language": "fr", - "path": "no-footers-fr.html" - }, - { - "title": "Customize 'Terms and conditions' and 'Privacy' links in footer", - "language": "en", - "path": "custom-transparency-links-en.html" - }, - { - "title": "Personnaliser les liens 'Avis' et 'Confidentialité' dans le pied de page", - "language": "fr", - "path": "custom-transparency-links-fr.html" - }, - { - "title": "Contextual band and link variations", - "language": "en", - "path": "contextual-example-en.html" - }, - { - "title": "Bande contextuelle et des variations de lien", - "language": "fr", - "path": "contextual-example-fr.html" - } - ], - "reports": [ - { - "title": "Accessibility assessment #1 - Footer", - "language": "en", - "path": "reports/a11y-1-en.html" - }, - { - "title": "Évaluation de l'accessibilité #1 - Pied de page", - "language": "fr", - "path": "reports/a11y-1-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 2.0, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "GCWeb Menu", - "fr": "Menu GCWeb" - }, - "description": { - "en": "Documentation on how to use the GCWeb menu.", - "fr": "Documentation sur l'utilisation du menu GCWeb." - }, - "modified": "2023-10-25", - "componentName": "gcweb-menu", - "status": "stable", - "pages": { - "docs": [ - { - "title": "GCWeb Menu", - "language": "en", - "path": "gcweb-menu-docs-en.html" - }, - { - "title": "Menu GCWeb", - "language": "fr", - "path": "gcweb-menu-docs-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 2.0, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Header", - "fr": "Entête" - }, - "description": { - "en": "Documentation on how to use the header.", - "fr": "Documentation sur l'utilisation de l'entête." - }, - "modified": "2022-05-10", - "componentName": "header", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Header", - "language": "en", - "path": "header-docs-en.html" - }, - { - "title": "Entête", - "language": "fr", - "path": "header-docs-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Helpers", - "fr": "Outils d'aides" - }, - "description": { - "en": "Helpers to overwrite compiled styles", - "fr": "Outils d'aides pour effectuer de la surchage sur les styles compiler" - }, - "modified": "2019-05-01", - "componentName": "helpers", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Colour", - "language": "en", - "path": "colour-en.html" - }, - { - "title": "Couleur", - "language": "fr", - "path": "colour-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 1.1, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Language toggle link", - "fr": "Lien pour changer de langue" - }, - "description": { - "en": "Documentation on how to use language toogle link.", - "fr": "Documentation sur l'utilisation lien pour changer de langue." - }, - "modified": "2022-11-01", - "componentName": "language", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Language toggle link", - "language": "en", - "path": "language-en.html" - }, - { - "title": "Lien pour changer de langue", - "language": "fr", - "path": "language-fr.html" - } - ] - } -} -,{ - "@context": { - "@version": 2.0, - "dct": "http://purl.org/dc/terms/", - "title": { "@id": "dct:title", "@container": "@language" }, - "description": { "@id": "dct:description", "@container": "@language" }, - "modified": "dct:modified" - }, - "title": { - "en": "Page details", - "fr": "Détails de la page" - }, - "description": { - "en": "Documentation on how to use the page details section.", - "fr": "Documentation sur l'utilisation de la section des détails de la page." - }, - "version": "3.0", - "modified": "2022-04-11", - "componentName": "page-details", - "componentType": "container", - "status": "stable", - "pages": { - "docs": [ - { - "title": "Documentation for Page details", - "language": "en", - "path": "page-details-docs-en.html" - }, - { - "title": "Documentation pour Détails de la page", - "language": "fr", - "path": "page-details-docs-fr.html" - } - ], - "examples": [ - { - "title": "Default Page details", - "language": "en", - "path": "page-details-default-en.html" - }, - { - "title": "Détails de la page par défaut", - "language": "fr", - "path": "page-details-default-fr.html" - }, - { - "title": "Page details with Page feedback tool", - "language": "en", - "path": "page-details-pft-en.html" - }, - { - "title": "Détails de la page avec Outil de rétroaction sur la page", - "language": "fr", - "path": "page-details-pft-fr.html" - }, - { - "title": "Page details with Share this page", - "language": "en", - "path": "page-details-share-en.html" - }, - { - "title": "Détails de la page avec Partagez cette page", - "language": "fr", - "path": "page-details-share-fr.html" - }, - { - "title": "Page details with Page feedback tool and Share this page", - "language": "en", - "path": "page-details-pft-share-en.html" - }, - { - "title": "Détails de la page avec Outil de rétroaction sur la page et Partagez cette page", - "language": "fr", - "path": "page-details-pft-share-fr.html" - } - ] - }, - "dependencies": [ - "Page feedback area", - "Share this page", - "Date modified" - ], - "a11yGuidance": "no accessibility guidance", - "variations": [ - { - "name": { - "en": "Page details", - "fr": "Détails de la page" - }, - "status": "stable", - "description": { - "en": "This component may contain the following components: Page feedback tool, Share this page, and Date modified.", - "fr": "Ce composant peut contenir les composants suivants : Outil de rétroaction sur la page, Partager cette page et Date de modification." - }, - "iteration": "_:iteration_pd_3", - "example": [ - { - "en": { "href": "page-details-default-en.html", "text": "Default Page details" }, - "fr": { "href": "page-details-default-fr.html", "text": "Détails de la page par défaut" } - }, - { - "en": { "href": "page-details-pft-en.html", "text": "Page details with Page feedback tool" }, - "fr": { "href": "page-details-pft-fr.html", "text": "Détails de la page avec Outil de rétroaction sur la page" } - }, - { - "en": { "href": "page-details-share-en.html", "text": "Page details with Share this page" }, - "fr": { "href": "page-details-share-fr.html", "text": "Détails de la page avec Partagez cette page" } - }, - { - "en": { "href": "page-details-pft-share-en.html", "text": "Page details with Page feedback tool and Share this page" }, - "fr": { "href": "page-details-pft-share-fr.html", "text": "Détails de la page avec Outil de rétroaction sur la page et Partagez cette page" } - } - ], - "implementation": [ - "_:implement_pd", - "_:implement_pd_gcweb" - ], - "history": [ - { - "en": "March 2023 - Tag