-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Minor - Merge pull request #2181 from Garneauma/gc-stp-stp
Step by step navigation: adding documentation Minor - Step by step nav - Add simpler alternative pattern with no visual/semantic impact
- Loading branch information
Showing
23 changed files
with
678 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| --- | ||
|
|
||
| <span class="wb-prettify all-pre hide"></span> | ||
|
|
||
| <dl class="horizontal"> | ||
| <dt>Status</dt> | ||
| <dd>Stable</dd> | ||
| <dt>Type</dt> | ||
| <dd>Canada.ca design pattern</dd> | ||
| <dt>Last review</dt> | ||
| <dd>2023-09-05</dd> | ||
| <dt>Guidance</dt> | ||
| <dd><a href="https://design.canada.ca/recommended-templates/service-initiation-pages.html">Step by step navigation (service initiation pages): Canada.ca design system</a></dd> | ||
| <dt>Technical name</dt> | ||
| <dd> | ||
| <ul> | ||
| <li><code>gc-stp-stp</code></li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
|
|
||
| <h2>Purpose</h2> | ||
| <p>Shows links to each step in initiating the service and highlights the currently selected step.</p> | ||
|
|
||
| <h2>Working example</h2> | ||
| <ul> | ||
| <li><a href="gc-stp-stp-en.html">Example: Step by step navigation</a></li> | ||
| </ul> | ||
|
|
||
| <h2>How to implement</h2> | ||
| <ol> | ||
| <li>Create a <code><div></code> with the CSS class <code>gc-stp-stp</code>.</li> | ||
| <li>Within this <code><div></code>, create either a <code><ul></code> or <code><ol></code> (the correct tag will depend on whether or not your pages have a logical order. To this <code><ul></code> or <code><ol></code> add the CSS classes <code>row</code> and <code>toc</code>.</li> | ||
| <li>Within this <code><ul></code> or <code><ol></code>, add your <code><li></code> and add the following CSS classes: <code>col-md-4</code> and <code>col-sm-6</code> to every <code><li></code>.</li> | ||
| <li>Within those <code><li></code>, create a <code><a></code> with the CSS class <code>list-group-item</code>.</li> | ||
| <li>To the current page's <code><a></code> add the CSS class <code>active</code>.</li> | ||
| </ol> | ||
| <p>Note: this component should be inserted directly after the byline.</p> | ||
|
|
||
| <h2>Evaluation and report</h2> | ||
| <p>There is no evaluation and report available for this component.</p> | ||
|
|
||
| <h2>API (Version 1.0)</h2> | ||
| <table class="table table-bordered"> | ||
| <tr> | ||
| <th>CSS Class</th> | ||
| <th>Template</th> | ||
| <th>Visual rendering</th> | ||
| <th>Schema</th> | ||
| </tr> | ||
| <tr> | ||
| <td>Version 1.0</td> | ||
| <td>Version 2.0</td> | ||
| <td>Version 1.0</td> | ||
| <td>n.a.</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| <h3>CSS Class (v1.0)</h3> | ||
| <dl class="dl-horizontal"> | ||
| <dt><code>gc-stp-stp</code></dt> | ||
| <dd>Component: Step by Step navigation</dd> | ||
| </dl> | ||
| <details> | ||
| <summary>Version notes</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 1.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Created: <code>.gc-stp-stp</code></li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> | ||
|
|
||
| <h3>Template (v2.0)</h3> | ||
| {%- highlight html -%} | ||
| <div class="gc-stp-stp"> | ||
| <ol class="row toc"> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="index-en.html">1. [Step / section page name]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page2-en.html">2. [Step / section page name]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page3-en.html">3. [Step / section page name]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page4-en.html">4. [Step / section page name]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page5-en.html">5. [Step / section page name]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item active" href="#">6. [Step / section page name]</a></li> | ||
| </ol> | ||
| </div> | ||
| {%- endhighlight -%} | ||
|
|
||
| <details> | ||
| <summary>Version notes</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 2.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Removed <code><div class="row"></code> wrapping the list.</li> | ||
| <li>Applied the CSS class <code>row</code> directly to the list.</li> | ||
| <li>Removed the CSS classes <code>lst-spcd</code> and <code>col-md-12</code> from the list.</li> | ||
| <li>Removed <code>clr-lft-[breakpoint]</code> CSS classes.</li> | ||
| </ul> | ||
| </dd> | ||
| <dt>Version 1.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Initial template</li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> | ||
|
|
||
| <h3>Visual rendering (v1.0)</h3> | ||
| <details> | ||
| <summary>Version notes</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 1.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Original rendering</li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| --- | ||
|
|
||
| <span class="wb-prettify all-pre hide"></span> | ||
|
|
||
| <dl class="horizontal"> | ||
| <dt>Statut</dt> | ||
| <dd>Stable</dd> | ||
| <dt>Type</dt> | ||
| <dd>Conception de Canada.ca</dd> | ||
| <dt>Dernière revue</dt> | ||
| <dd>2023-09-05</dd> | ||
| <dt>Orientation</dt> | ||
| <dd><a href="https://conception.canada.ca/modeles-recommandes/pages-lancement-service.html">Navigation étape par étape (pages de lancement d'un service) - Configuration de conception de Canada.ca</a></dd> | ||
| <dt>Nom technique</dt> | ||
| <dd> | ||
| <ul> | ||
| <li><code>gc-stp-stp</code></li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
|
|
||
| <h2>But</h2> | ||
| <p>Affiche les liens pour chacune des étapes de lancement d'un service et met en surbrillance l'étape sélectionnée.</p> | ||
|
|
||
| <h2>Comment mettre en œuvre</h2> | ||
| <ol> | ||
| <li>Créez un <code><div></code> avec la classe CSS <code>gc-stp-stp</code>.</li> | ||
| <li>Dans ce <code><div></code>, créez soit un <code><ul></code> soit un <code><ol></code> (la bonne balise dépendra de si vos pages ont un ordre logique ou non. À ce <code><ul></code> ou <code><ol></code> ajoutez les classes CSS <code>row</code> et <code >toc</code>.</li> | ||
| <li>Dans ce <code><ul></code> ou <code><ol></code>, ajoutez vos <code><li></code> et ajoutez à chacun d'eux les classes CSS suivantes : <code>col-md-4</code> et <code>col-sm-6</code>.</li> | ||
| <li>Dans ces <code><li></code>, créez un <code><a></code> avec la classe CSS <code>list-group-item</code>.</li> | ||
| <li>Au <code><a></code> de la page courante, ajoutez la classe CSS <code>active</code>.</li> | ||
| </ol> | ||
| <p>Remarque : ce composant doit être inséré directement après la signature.</p> | ||
|
|
||
| <h2>Exemples pratiques</h2> | ||
| <ul> | ||
| <li><a href="gc-stp-stp-fr.html">Exemple : Navigation étape par étape</a></li> | ||
| </ul> | ||
|
|
||
| <h2>Évaluation et rapport</h2> | ||
| <p>Il n'y a pas d'évaluation et de rapport disponible pour ce composant.</p> | ||
|
|
||
| <h2>API (Version 1.0)</h2> | ||
| <table class="table table-bordered"> | ||
| <tr> | ||
| <th>Classe CSS</th> | ||
| <th>Gabarit</th> | ||
| <th>Rendu visuel</th> | ||
| <th>Schema</th> | ||
| </tr> | ||
| <tr> | ||
| <td>Version 1.0</td> | ||
| <td>Version 2.0</td> | ||
| <td>Version 1.0</td> | ||
| <td>s.o.</td> | ||
| </tr> | ||
| </table> | ||
| <h3>Classe CSS (v1.0)</h3> | ||
| <dl class="dl-horizontal"> | ||
| <dt><code>gc-stp-stp</code></dt> | ||
| <dd>Composant : Navigation étape par étape</dd> | ||
| </dl> | ||
| <details> | ||
| <summary>Notes sur les versions</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 1.0 (v8.0)</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Crée : <code>.gc-stp-stp</code></li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> | ||
| <h3>Gabarit (v2.0)</h3> | ||
| {%- highlight html -%} | ||
| <div class="gc-stp-stp"> | ||
| <ol class="row toc"> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="index-fr.html">1. [Nom de la page de la section ou de l’étape]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page2-fr.html">2. [Nom de la page de la section ou de l’étape]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page3-fr.html">3. [Nom de la page de la section ou de l’étape]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page4-fr.html">4. [Nom de la page de la section ou de l’étape]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item" href="page5-fr.html">5. [Nom de la page de la section ou de l’étape]</a></li> | ||
| <li class="col-md-4 col-sm-6"><a class="list-group-item active" href="#">6. [Nom de la page de la section ou de l’étape]</a></li> | ||
| </ol> | ||
| </div> | ||
| {%- endhighlight -%} | ||
|
|
||
| <details> | ||
| <summary>Notes sur les versions</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 2.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Suppression du <code><div class="row"></code> enveloppant la liste.</li> | ||
| <li>Ajout de la classe CSS <code>row</code> directement à la liste.</li> | ||
| <li>Suppression des classes CSS <code>lst-spcd</code> et <code>col-md-12</code> de la liste.</li> | ||
| <li>Suppressions des classes CSS <code>clr-lft-[breakpoint]</code>.</li> | ||
| </ul> | ||
| </dd> | ||
| <dt>Version 1.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Gabarit initial</li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> | ||
|
|
||
| <h3>Rendu visuel (v1.0)</h3> | ||
| <details> | ||
| <summary>Notes sur les versions</summary> | ||
| <dl class="dl-horizontal"> | ||
| <dt>Version 1.0</dt> | ||
| <dd> | ||
| <ul> | ||
| <li>Rendu visuel initial</li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| </details> |
Oops, something went wrong.