From f8660f5191b4e8870f037b40538da46075839479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Fri, 30 Jun 2023 10:24:40 -0400 Subject: [PATCH] Step by step navigation: adding documentation --- _data/common.json | 70 ++++++++++ _data/components.json | 70 ++++++++++ _data/templates.json | 113 ++++++++++------ components/baseline/_base.scss | 27 +++- components/gc-stp-stp/_base.scss | 20 +++ components/gc-stp-stp/_screen-sm-min.scss | 16 +++ components/gc-stp-stp/gc-stp-stp-doc-en.html | 128 ++++++++++++++++++ components/gc-stp-stp/gc-stp-stp-doc-fr.html | 126 +++++++++++++++++ components/gc-stp-stp/gc-stp-stp-en.html | 61 +++++++++ components/gc-stp-stp/gc-stp-stp-fr.html | 61 +++++++++ .../gc-stp-stp/includes/gc-stp-stp.html | 15 ++ components/gc-stp-stp/index.json-ld | 58 ++++++++ sites/theme.scss | 3 + templates/advancedservice/index-en.html | 24 ++-- templates/advancedservice/index-fr.html | 24 ++-- templates/advancedservice/page2-en.html | 24 ++-- templates/advancedservice/page2-fr.html | 24 ++-- templates/advancedservice/page3-en.html | 24 ++-- templates/advancedservice/page3-fr.html | 24 ++-- templates/advancedservice/page4-en.html | 24 ++-- templates/advancedservice/page4-fr.html | 24 ++-- templates/advancedservice/page5-en.html | 24 ++-- templates/advancedservice/page5-fr.html | 24 ++-- templates/advancedservice/page6-en.html | 24 ++-- templates/advancedservice/page6-fr.html | 24 ++-- 25 files changed, 850 insertions(+), 206 deletions(-) create mode 100644 components/gc-stp-stp/_base.scss create mode 100644 components/gc-stp-stp/_screen-sm-min.scss create mode 100644 components/gc-stp-stp/gc-stp-stp-doc-en.html create mode 100644 components/gc-stp-stp/gc-stp-stp-doc-fr.html create mode 100644 components/gc-stp-stp/gc-stp-stp-en.html create mode 100644 components/gc-stp-stp/gc-stp-stp-fr.html create mode 100644 components/gc-stp-stp/includes/gc-stp-stp.html create mode 100644 components/gc-stp-stp/index.json-ld diff --git a/_data/common.json b/_data/common.json index 5dcafcd50f..e2d5112392 100644 --- a/_data/common.json +++ b/_data/common.json @@ -33,6 +33,41 @@ ] } } +,{ + "@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": "Alignment", + "fr": "Alignement" + }, + "description": { + "en": "Alignment with custom styles.", + "fr": "Alignement avec des styles personalisés." + }, + "modified": "2023-06-19", + "componentName": "alignment", + "processing": "baseline", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Alignment", + "language": "en", + "path": "alignment-en.html" + }, + { + "title": "Alignement", + "language": "fr", + "path": "alignment-fr.html" + } + ] + } +} ,{ "@context": { "@version": 2.0, @@ -182,4 +217,39 @@ ] } } +,{ + "@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": "Basic HTML", + "fr": "HTML simplifiée" + }, + "description": { + "en": "Enable Basic HTML Mode", + "fr": "Passer à la version HTML simplifiée" + }, + "modified": "2023-08-25", + "componentName": "wb-disable", + "processing": "baseline", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Basic HTML", + "language": "en", + "path": "wb-disable-en.html" + }, + { + "title": "HTML simplifié", + "language": "fr", + "path": "wb-disable-fr.html" + } + ] + } +} ] diff --git a/_data/components.json b/_data/components.json index d67e404663..0cf0a9577e 100644 --- a/_data/components.json +++ b/_data/components.json @@ -167,6 +167,18 @@ "language": "fr", "path": "gc-features-fr.html" } + ], + "reports": [ + { + "title": "Accessibility assessment #1 - Context-specific features", + "language": "en", + "path": "reports/a11y-1-en.html" + }, + { + "title": "Assessment d'accessibilité #1 - Promotions contextuelles", + "language": "fr", + "path": "reports/a11y-1-fr.html" + } ] } } @@ -284,6 +296,64 @@ ] } } +,{ + "@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": "Step by Step navigation", + "fr": "Navigation étape par étape" + }, + "description": { + "en": "Step by Step navigation designed based on user experience testing", + "fr": "Navigation étape par étape conçu d'après des recherches d'expérience utilisateur" + }, + "modified": "2023-06-28", + "componentName": "gc-stp-stp", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Step by Step navigation", + "language": "en", + "path": "gc-stp-stp-doc-en.html" + }, + { + "title": "Navigation étape par étape", + "language": "fr", + "path": "gc-stp-stp-doc-fr.html" + } + ], + "examples": [ + { + "title": "Step by Step navigation", + "language": "en", + "path": "gc-stp-stp-en.html" + }, + { + "title": "Navigation étape par étape", + "language": "fr", + "path": "gc-stp-stp-fr.html" + } + ], + "spec": [ + { + "title": "Navigation étape par étape : Système de conception de Canada.ca", + "language": "fr", + "url": "https://conception.canada.ca/modeles-recommandes/pages-lancement-service.html" + }, + { + "title": "Step by Step navigation: Canada.ca design system", + "language": "en", + "url": "https://design.canada.ca/recommended-templates/service-initiation-pages.html" + } + ] + } +} ,{ "@context": { "@version": 1.1, diff --git a/_data/templates.json b/_data/templates.json index 9126a126ce..b5a734a8eb 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -135,6 +135,74 @@ ] } } +,{ + "@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": "Content page", + "fr": "Page de contenu" + }, + "description": { + "en": "Blank content pages with text sample.", + "fr": "Pages de contenu vides avec exemple de texte." + }, + "modified": "2023-08-24", + "componentName": "content-page", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Content page", + "language": "en", + "type": "general", + "path": "content-en.html" + }, + { + "title": "Page de contenu", + "language": "fr", + "path": "content-fr.html" + }, + + { + "title": "Fluid content page", + "language": "en", + "path": "content-fluid-en.html" + }, + { + "title": "Page de contenu fluide", + "language": "fr", + "path": "content-fluid-fr.html" + }, + + { + "title": "Content page - Limited width content", + "language": "en", + "path": "content-limit-en.html" + }, + { + "title": "Page de contenu - Largeur de contenu limitée", + "language": "fr", + "path": "content-limit-fr.html" + }, + + { + "title": "Content page - GCWeb 4.0.29 font stylee", + "language": "en", + "path": "content-gcweb-4-0-29-font-style-en.html" + }, + { + "title": "Page de contenu - Police de caractère de GCWeb 4.0.29", + "language": "fr", + "path": "content-gcweb-4-0-29-font-style-fr.html" + } + ] + } + } ,{ "@context": { "@version": 1.1, @@ -201,51 +269,6 @@ "status": "stable", "pages": { "examples": [ - { - "title": "Content page", - "language": "en", - "type": "general", - "path": "content-en.html" - }, - { - "title": "Page de contenu", - "language": "fr", - "path": "content-fr.html" - }, - - { - "title": "Fluid content page", - "language": "en", - "path": "content-fluid-en.html" - }, - { - "title": "Page de contenu fluide", - "language": "fr", - "path": "content-fluid-fr.html" - }, - - { - "title": "Content page - Limited width content", - "language": "en", - "path": "content-limit-en.html" - }, - { - "title": "Page de contenu - Largeur de contenu limitée", - "language": "fr", - "path": "content-limit-fr.html" - }, - - { - "title": "Content page - GCWeb 4.0.29 font stylee", - "language": "en", - "path": "content-gcweb-4-0-29-font-style-en.html" - }, - { - "title": "Page de contenu - Police de caractère de GCWeb 4.0.29", - "language": "fr", - "path": "content-gcweb-4-0-29-font-style-fr.html" - }, - { "title": "Stay connected", "language": "en", diff --git a/components/baseline/_base.scss b/components/baseline/_base.scss index e144eb7155..98bd24133d 100644 --- a/components/baseline/_base.scss +++ b/components/baseline/_base.scss @@ -2,11 +2,28 @@ * Components styles */ -// Step by step navigation used on Advanced service template -.gc-stp-stp { - border-bottom: solid 1px #ccc; - margin-bottom: 30px; - margin-top: 15px; +// Download link box +.gc-dwnld { + + .gc-dwnld-txt { + text-decoration: underline; + + &:hover { + text-decoration: none; + } + + span { + display: block; + } + } + + .gc-dwnld-img { + margin-bottom: 0; + } + + p { + margin-bottom:0; + } } // theme default color diff --git a/components/gc-stp-stp/_base.scss b/components/gc-stp-stp/_base.scss new file mode 100644 index 0000000000..4904cd13b8 --- /dev/null +++ b/components/gc-stp-stp/_base.scss @@ -0,0 +1,20 @@ +/* + * + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * + * + * GC Step by step navigation +*/ + +.gc-stp-stp { + border-bottom: solid 1px #ccc; + margin-bottom: 30px; + margin-top: 15px; + + ul:not(.col-md-12), ol:not(.col-md-12) { + margin-left: 0; + margin-right: 0; + padding-left: 0; + } +} diff --git a/components/gc-stp-stp/_screen-sm-min.scss b/components/gc-stp-stp/_screen-sm-min.scss new file mode 100644 index 0000000000..820b048d14 --- /dev/null +++ b/components/gc-stp-stp/_screen-sm-min.scss @@ -0,0 +1,16 @@ +/* + * + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * + * + * GC Step by step navigation +*/ + +.gc-stp-stp { + ul, ol { + &:not(.lst-spcd) li { + margin-bottom: 10px; + } + } +} diff --git a/components/gc-stp-stp/gc-stp-stp-doc-en.html b/components/gc-stp-stp/gc-stp-stp-doc-en.html new file mode 100644 index 0000000000..2c196bc0fa --- /dev/null +++ b/components/gc-stp-stp/gc-stp-stp-doc-en.html @@ -0,0 +1,128 @@ +--- +title: Step by Step navigation +language: en +description: Step by Step navigation +dateModified: 2023-06-28 +altLangPage: gc-stp-stp-doc-fr.html +--- + + + +
+
Status
+
Stable
+
Type
+
Canada.ca design pattern
+
Last review
+
2023-09-05
+
Guidance
+
Step by step navigation (service initiation pages): Canada.ca design system
+
Technical name
+
+
    +
  • gc-stp-stp
    • +
+
+
+ +

Purpose

+

Shows links to each step in initiating the service and highlights the currently selected step.

+ +

Working example

+ + +

How to implement

+
    +
  1. Create a <div> with the CSS class gc-stp-stp.
    2. +
  2. Within this <div>, create either a <ul> or <ol> (the correct tag will depend on whether or not your pages have a logical order. To this <ul> or <ol> add the CSS classes row and toc.
    3. +
  3. Within this <ul> or <ol>, add your <li> and add the following CSS classes: col-md-4 and col-sm-6 to every <li>.
    4. +
  4. Within those <li>, create a <a> with the CSS class list-group-item.
    5. +
  5. To the current page's <a> add the CSS class active.
    6. +
+

Note: this component should be inserted directly after the byline.

+ +

Evaluation and report

+

There is no evaluation and report available for this component.

+ +

API (Version 1.0)

+ + + + + + + + + + + + + +
CSS ClassTemplateVisual renderingSchema
Version 1.0Version 2.0Version 1.0n.a.
+ +

CSS Class (v1.0)

+
+
gc-stp-stp
+
Component: Step by Step navigation
+
+
+ Version notes +
+
Version 1.0
+
+
    +
  • Created: .gc-stp-stp
    • +
+
+
+
+ +

Template (v2.0)

+{%- highlight html -%} +
+
    +
  1. 1. [Step / section page name]
    2. +
  2. 2. [Step / section page name]
    3. +
  3. 3. [Step / section page name]
    4. +
  4. 4. [Step / section page name]
    5. +
  5. 5. [Step / section page name]
    6. +
  6. 6. [Step / section page name]
    7. +
+
+{%- endhighlight -%} + +
+ Version notes +
+
Version 2.0
+
+
    +
  • Removed <div class="row"> wrapping the list.
    • +
  • Applied the CSS class row directly to the list.
    • +
  • Removed the CSS classes lst-spcd and col-md-12 from the list.
    • +
  • Removed clr-lft-[breakpoint] CSS classes.
    • +
+
+
Version 1.0
+
+
    +
  • Initial template
    • +
+
+
+
+ +

Visual rendering (v1.0)

+
+ Version notes +
+
Version 1.0
+
+
    +
  • Original rendering
    • +
+
+
+
diff --git a/components/gc-stp-stp/gc-stp-stp-doc-fr.html b/components/gc-stp-stp/gc-stp-stp-doc-fr.html new file mode 100644 index 0000000000..79854e87c7 --- /dev/null +++ b/components/gc-stp-stp/gc-stp-stp-doc-fr.html @@ -0,0 +1,126 @@ +--- +title: Navigation étape par étape +language: fr +description: Navigation étape par étape +dateModified: 2023-06-28 +altLangPage: gc-stp-stp-doc-en.html +--- + + + +
+
Statut
+
Stable
+
Type
+
Conception de Canada.ca
+
Dernière revue
+
2023-09-05
+
Orientation
+
Navigation étape par étape (pages de lancement d'un service) - Configuration de conception de Canada.ca
+
Nom technique
+
+
    +
  • gc-stp-stp
    • +
+
+
+ +

But

+

Affiche les liens pour chacune des étapes de lancement d'un service et met en surbrillance l'étape sélectionnée.

+ +

Comment mettre en œuvre

+
    +
  1. Créez un <div> avec la classe CSS gc-stp-stp.
    2. +
  2. Dans ce <div>, créez soit un <ul> soit un <ol> (la bonne balise dépendra de si vos pages ont un ordre logique ou non. À ce <ul> ou <ol> ajoutez les classes CSS row et toc.
    3. +
  3. Dans ce <ul> ou <ol>, ajoutez vos <li> et ajoutez à chacun d'eux les classes CSS suivantes : col-md-4 et col-sm-6.
    4. +
  4. Dans ces <li>, créez un <a> avec la classe CSS list-group-item.
    5. +
  5. Au <a> de la page courante, ajoutez la classe CSS active.
    6. +
+

Remarque : ce composant doit être inséré directement après la signature.

+ +

Exemples pratiques

+ + +

Évaluation et rapport

+

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

+ +

API (Version 1.0)

+ + + + + + + + + + + + + +
Classe CSSGabaritRendu visuelSchema
Version 1.0Version 2.0Version 1.0s.o.
+

Classe CSS (v1.0)

+
+
gc-stp-stp
+
Composant : Navigation étape par étape
+
+
+ Notes sur les versions +
+
Version 1.0 (v8.0)
+
+
    +
  • Crée : .gc-stp-stp
    • +
+
+
+
+

Gabarit (v2.0)

+{%- highlight html -%} +
+
    +
  1. 1. [Nom de la page de la section ou de l’étape]
    2. +
  2. 2. [Nom de la page de la section ou de l’étape]
    3. +
  3. 3. [Nom de la page de la section ou de l’étape]
    4. +
  4. 4. [Nom de la page de la section ou de l’étape]
    5. +
  5. 5. [Nom de la page de la section ou de l’étape]
    6. +
  6. 6. [Nom de la page de la section ou de l’étape]
    7. +
+
+{%- endhighlight -%} + +
+ Notes sur les versions +
+
Version 2.0
+
+
    +
  • Suppression du <div class="row"> enveloppant la liste.
    • +
  • Ajout de la classe CSS row directement à la liste.
    • +
  • Suppression des classes CSS lst-spcd et col-md-12 de la liste.
    • +
  • Suppressions des classes CSS clr-lft-[breakpoint].
    • +
+
+
Version 1.0
+
+
    +
  • Gabarit initial
    • +
+
+
+
+ +

Rendu visuel (v1.0)

+
+ Notes sur les versions +
+
Version 1.0
+
+
    +
  • Rendu visuel initial
    • +
+
+
+
diff --git a/components/gc-stp-stp/gc-stp-stp-en.html b/components/gc-stp-stp/gc-stp-stp-en.html new file mode 100644 index 0000000000..05bebf5067 --- /dev/null +++ b/components/gc-stp-stp/gc-stp-stp-en.html @@ -0,0 +1,61 @@ +--- +{ + "title": "[Service name] - 2. [Step / section page name]", + "secondTitle": "2. [Step / section page name]", + "language": "en", + "altLangPage": "gc-stp-stp-fr.html", + "breadcrumbs": [ + { "title": "[Institution name]", "link": "#" }, + { "title": "[Topic name]", "link": "#" }, + { "title": "[Service name]", "link": "#" } + ], + "secondlevel": false, + "dateModified": "2023-09-05", + "share": "true", + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "isActive": true }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] +} +--- +

From [Institution name]

+ +{%- include gc-stp-stp/gc-stp-stp.html -%} + +
+
+

2. [Step / section page name]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et a adipisci nostrum optio dolorum sint ipsa facilis nisi quisquam laboriosam.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odio adipisci ad neque distinctio quod molestias, molestiae accusamus quo aspernatur expedita blanditiis quam! Esse cum modi atque, beatae aliquam, dolor.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aliquid hic numquam obcaecati ea, laborum accusamus culpa atque voluptate distinctio et omnis! Alias, beatae, tenetur.

+
+

[Sub heading]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cupiditate voluptatem praesentium, facilis corporis magni esse reiciendis distinctio. Vitae totam iste porro, esse facere obcaecati? Laborum earum minus harum enim.

+
+
+

[Sub heading]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic minima magni nesciunt nam. Facilis perferendis, adipisci voluptates, enim illo perspiciatis molestias itaque iste qui distinctio asperiores quidem voluptatum sunt.

+
+ +
+
+ +
+
diff --git a/components/gc-stp-stp/gc-stp-stp-fr.html b/components/gc-stp-stp/gc-stp-stp-fr.html new file mode 100644 index 0000000000..2d179891c7 --- /dev/null +++ b/components/gc-stp-stp/gc-stp-stp-fr.html @@ -0,0 +1,61 @@ +--- +{ + "title": "[Nom du service] - 2. [Nom de la page de la section ou de l’étape]", + "secondTitle": "2. [Nom de la page de la section ou de l’étape]", + "language": "fr", + "altLangPage": "gc-stp-stp-en.html", + "breadcrumbs": [ + { "title": "[Nom de l'institution]", "link": "#" }, + { "title": "[Nom du sujet]", "link": "#" }, + { "title": "[Nom du service]", "link": "#" } + ], + "secondlevel": false, + "dateModified": "2023-09-05", + "share": "true", + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] +} +--- +

De [nom de l'institution]

+ +{%- include gc-stp-stp/gc-stp-stp.html -%} + +
+
+

2. [Nom de la page de la section ou de l’étape]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et a adipisci nostrum optio dolorum sint ipsa facilis nisi quisquam laboriosam.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odio adipisci ad neque distinctio quod molestias, molestiae accusamus quo aspernatur expedita blanditiis quam! Esse cum modi atque, beatae aliquam, dolor.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aliquid hic numquam obcaecati ea, laborum accusamus culpa atque voluptate distinctio et omnis! Alias, beatae, tenetur.

+
+

[Sous-titre]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cupiditate voluptatem praesentium, facilis corporis magni esse reiciendis distinctio. Vitae totam iste porro, esse facere obcaecati? Laborum earum minus harum enim.

+
+
+

[Sous-titre]

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic minima magni nesciunt nam. Facilis perferendis, adipisci voluptates, enim illo perspiciatis molestias itaque iste qui distinctio asperiores quidem voluptatum sunt.

+
+ +
+
+ +
+
diff --git a/components/gc-stp-stp/includes/gc-stp-stp.html b/components/gc-stp-stp/includes/gc-stp-stp.html new file mode 100644 index 0000000000..d69ce47324 --- /dev/null +++ b/components/gc-stp-stp/includes/gc-stp-stp.html @@ -0,0 +1,15 @@ +{%- if page.steps -%} +
+ +
+{%- endif -%} diff --git a/components/gc-stp-stp/index.json-ld b/components/gc-stp-stp/index.json-ld new file mode 100644 index 0000000000..1821111432 --- /dev/null +++ b/components/gc-stp-stp/index.json-ld @@ -0,0 +1,58 @@ +{ + "@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": "Step by Step navigation", + "fr": "Navigation étape par étape" + }, + "description": { + "en": "Step by Step navigation designed based on user experience testing", + "fr": "Navigation étape par étape conçu d'après des recherches d'expérience utilisateur" + }, + "modified": "2023-06-28", + "componentName": "gc-stp-stp", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Step by Step navigation", + "language": "en", + "path": "gc-stp-stp-doc-en.html" + }, + { + "title": "Navigation étape par étape", + "language": "fr", + "path": "gc-stp-stp-doc-fr.html" + } + ], + "examples": [ + { + "title": "Step by Step navigation", + "language": "en", + "path": "gc-stp-stp-en.html" + }, + { + "title": "Navigation étape par étape", + "language": "fr", + "path": "gc-stp-stp-fr.html" + } + ], + "spec": [ + { + "title": "Navigation étape par étape : Système de conception de Canada.ca", + "language": "fr", + "url": "https://conception.canada.ca/modeles-recommandes/pages-lancement-service.html" + }, + { + "title": "Step by Step navigation: Canada.ca design system", + "language": "en", + "url": "https://design.canada.ca/recommended-templates/service-initiation-pages.html" + } + ] + } +} diff --git a/sites/theme.scss b/sites/theme.scss index 3d5d2259e3..71a957346d 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -177,6 +177,7 @@ @import "../components/wb-fieldflow/base"; @import "../components/gc-chckbxrdio/base"; @import "../components/gc-features/base"; +@import "../components/gc-stp-stp/base"; @import "../components/wb5-click-postback/base"; @@ -300,6 +301,8 @@ @import "wet-boew/src/plugins/filter/screen-sm-min"; @import "../components/header-rwd/screen-sm-min"; @import "../components/gc-chckbxrdio/screen-sm-min"; + @import "../components/gc-stp-stp/screen-sm-min"; + @import "../templates/news/screen-sm-min"; @import "../templates/campaign/screen-sm-min"; diff --git a/templates/advancedservice/index-en.html b/templates/advancedservice/index-en.html index e3e79e137c..00e8774ef7 100644 --- a/templates/advancedservice/index-en.html +++ b/templates/advancedservice/index-en.html @@ -16,23 +16,21 @@ "title": "2. [Step / section page name]", "link": "page2-en.html" }, - "pageType": "advance service" + "pageType": "advance service", + "steps": [ + { "name": "1. [Step / section page name]", "isActive": true }, + { "name": "2. [Step / section page name]", "link": "page2-en.html" }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/index-fr.html b/templates/advancedservice/index-fr.html index ef325e59bf..d3229e6626 100644 --- a/templates/advancedservice/index-fr.html +++ b/templates/advancedservice/index-fr.html @@ -15,23 +15,21 @@ "next": { "title": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page2-en.html b/templates/advancedservice/page2-en.html index 6170cb5645..40d8e79e7f 100644 --- a/templates/advancedservice/page2-en.html +++ b/templates/advancedservice/page2-en.html @@ -19,23 +19,21 @@ "next": { "title": "3. [Step / section page name]", "link": "page3-en.html" - } + }, + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "isActive": true }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page2-fr.html b/templates/advancedservice/page2-fr.html index ad398195f5..f027bf92bd 100644 --- a/templates/advancedservice/page2-fr.html +++ b/templates/advancedservice/page2-fr.html @@ -19,23 +19,21 @@ "next": { "title": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page3-en.html b/templates/advancedservice/page3-en.html index edc123082a..a70c07443d 100644 --- a/templates/advancedservice/page3-en.html +++ b/templates/advancedservice/page3-en.html @@ -19,23 +19,21 @@ "next": { "title": "4. [Step / section page name]", "link": "page4-en.html" - } + }, + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "link": "page2-en.html" }, + { "name": "3. [Step / section page name]", "isActive": true }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page3-fr.html b/templates/advancedservice/page3-fr.html index ebd3d13ac4..10caeb599f 100644 --- a/templates/advancedservice/page3-fr.html +++ b/templates/advancedservice/page3-fr.html @@ -19,23 +19,21 @@ "next": { "title": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page4-en.html b/templates/advancedservice/page4-en.html index 42609839fa..9c44a9e516 100644 --- a/templates/advancedservice/page4-en.html +++ b/templates/advancedservice/page4-en.html @@ -19,23 +19,21 @@ "next": { "title": "5. [Step / section page name]", "link": "page5-en.html" - } + }, + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "link": "page2-en.html" }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "isActive": true }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page4-fr.html b/templates/advancedservice/page4-fr.html index 73b812814c..8d72e47947 100644 --- a/templates/advancedservice/page4-fr.html +++ b/templates/advancedservice/page4-fr.html @@ -19,23 +19,21 @@ "next": { "title": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page5-en.html b/templates/advancedservice/page5-en.html index 11c4c86361..d5402e3a8c 100644 --- a/templates/advancedservice/page5-en.html +++ b/templates/advancedservice/page5-en.html @@ -19,23 +19,21 @@ "next": { "title": "6. [Step / section page name]", "link": "page6-en.html" - } + }, + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "link": "page2-en.html" }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "isActive": true }, + { "name": "6. [Step / section page name]", "link": "page6-en.html" } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page5-fr.html b/templates/advancedservice/page5-fr.html index c8e7b39d84..fb9ff06b80 100644 --- a/templates/advancedservice/page5-fr.html +++ b/templates/advancedservice/page5-fr.html @@ -19,23 +19,21 @@ "next": { "title": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "isActive": true }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "link": "page6-fr.html" } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page6-en.html b/templates/advancedservice/page6-en.html index 62e98d19e1..77ad7217c8 100644 --- a/templates/advancedservice/page6-en.html +++ b/templates/advancedservice/page6-en.html @@ -15,23 +15,21 @@ "previous": { "title": "5. [Step / section page name]", "link": "page5-en.html" - } + }, + "steps": [ + { "name": "1. [Step / section page name]", "link": "index-en.html" }, + { "name": "2. [Step / section page name]", "link": "page2-en.html" }, + { "name": "3. [Step / section page name]", "link": "page3-en.html" }, + { "name": "4. [Step / section page name]", "link": "page4-en.html" }, + { "name": "5. [Step / section page name]", "link": "page5-en.html" }, + { "name": "6. [Step / section page name]", "isActive": true } + ] } ---

From [Institution name]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}

diff --git a/templates/advancedservice/page6-fr.html b/templates/advancedservice/page6-fr.html index 52600e3e22..607997ef64 100644 --- a/templates/advancedservice/page6-fr.html +++ b/templates/advancedservice/page6-fr.html @@ -15,23 +15,21 @@ "previous": { "title": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" - } + }, + "steps": [ + { "name": "1. [Nom de la page de la section ou de l’étape]", "link": "index-fr.html" }, + { "name": "2. [Nom de la page de la section ou de l’étape]", "link": "page2-fr.html" }, + { "name": "3. [Nom de la page de la section ou de l’étape]", "link": "page3-fr.html" }, + { "name": "4. [Nom de la page de la section ou de l’étape]", "link": "page4-fr.html" }, + { "name": "5. [Nom de la page de la section ou de l’étape]", "link": "page5-fr.html" }, + { "name": "6. [Nom de la page de la section ou de l’étape]", "isActive": true } + ] } ---

De [nom de l'institution]

-
-
- -
-
+{%- include gc-stp-stp/gc-stp-stp.html -%} +

{{page.secondTitle}}