Skip to content

Commit 25e5638

Browse files
GarneaumaGarneauma
committed
Theme: adding multiple components to theme template
1 parent 32f3e31 commit 25e5638

26 files changed

+1615
-540
lines changed

‎_data/components.json‎

Lines changed: 149 additions & 119 deletions
Large diffs are not rendered by default.

‎_data/templates.json‎

Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1781,21 +1781,41 @@
17811781
"en": "Theme page template",
17821782
"fr": "Gabarit de page thème"
17831783
},
1784-
"modified": "2020-02-12",
1784+
"modified": "2025-11-19",
17851785
"componentName": "theme",
17861786
"status": "stable",
1787-
"version": "2.0.2",
1787+
"version": "2.0.3",
17881788
"pages": {
17891789
"examples": [
17901790
{
1791-
"title": "[Theme]",
1791+
"title": "Complete theme page",
17921792
"language": "en",
17931793
"path": "theme-en.html"
17941794
},
17951795
{
1796-
"title": "[Thème]",
1796+
"title": "Page de thème complète",
17971797
"language": "fr",
17981798
"path": "theme-fr.html"
1799+
},
1800+
{
1801+
"title": "Minimal theme page",
1802+
"language": "en",
1803+
"path": "theme-business-en.html"
1804+
},
1805+
{
1806+
"title": "Page de thème minimale",
1807+
"language": "fr",
1808+
"path": "theme-business-fr.html"
1809+
},
1810+
{
1811+
"title": "Custom theme page for IRCC",
1812+
"language": "en",
1813+
"path": "theme-ircc-en.html"
1814+
},
1815+
{
1816+
"title": "Page de thème personnalisée pour IRCC",
1817+
"language": "fr",
1818+
"path": "theme-ircc-fr.html"
17991819
}
18001820
],
18011821
"docs": [
@@ -1849,18 +1869,30 @@
18491869
"en": "https://design.canada.ca/mandatory-templates/theme.html",
18501870
"fr": "https://conception.canada.ca/modeles-obligatoire/theme.html"
18511871
},
1852-
"iteration": "_:iteration_theme_1",
1872+
"iteration": "_:iteration_theme_2",
18531873
"example": [
18541874
{
1855-
"en": { "href": "theme-en.html", "text": "Theme page" },
1856-
"fr": { "href": "theme-fr.html", "text": "Pages de thème" }
1875+
"en": { "href": "theme-en.html", "text": "Complete theme page" },
1876+
"fr": { "href": "theme-fr.html", "text": "Pages de thème complète" }
1877+
},
1878+
{
1879+
"en": { "href": "theme-business-en.html", "text": "Minimal theme page" },
1880+
"fr": { "href": "theme-business-fr.html", "text": "Pages de thème minimale" }
1881+
},
1882+
{
1883+
"en": { "href": "theme-ircc-en.html", "text": "Customized theme page for IRCC" },
1884+
"fr": { "href": "theme-ircc-fr.html", "text": "Page de thème personnalisée pour IRCC" }
18571885
}
18581886
],
18591887
"implementation": [
18601888
"_:implement_theme",
18611889
"_:implement_theme_aem"
18621890
],
18631891
"history": [
1892+
{
1893+
"en": "November 2025 - Added Featured link and Context-specific features components support. Added custom working example for Immigration and Citizenship.",
1894+
"fr": "Novembre 2025 - Ajout du support pour les composantes Lien en vedette et Promotions contextuelles. Ajout d'un exemple pratique personnalisé pour Immigration et Citoyenneté."
1895+
},
18641896
{
18651897
"en": "July 2025 - Minor adjustments for other environments compatibility and addition of wb-navcurrent.",
18661898
"fr": "Juillet 2025 - Ajustements mineurs pour la compatibilité avec d'autres environnements et ajout de wb-navcurrent."
@@ -1879,7 +1911,7 @@
18791911
"implementation": [
18801912
{
18811913
"@id": "_:implement_theme",
1882-
"iteration": "_:iteration_theme_1",
1914+
"iteration": "_:iteration_theme_2",
18831915
"name": {
18841916
"en": "Standard",
18851917
"fr": "Standard"
@@ -1891,13 +1923,11 @@
18911923
"instructions": {
18921924
"en": [
18931925
"Add the CSS class <code>.page-type-theme</code> to the page's <code>&lt;body></code> element.",
1894-
"The CSS class <code>.active</code> must be added to the current page's <code>&lt;li></code>.",
18951926
"Refer to the working example for a code sample.",
18961927
"Refer to the working example and guidance for more information on how to implement this page template."
18971928
],
18981929
"fr": [
18991930
"Ajoutez la classe CSS <code>.page-type-theme</code> sur l'élément <code>&lt;body></code> de la page.",
1900-
"La classe CSS <code>.active</code> doit être ajoutée au <code>&lt;li></code> de la page courante.",
19011931
"Reportez-vous à l'exemple pratique pour un exemple de code.",
19021932
"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
19031933
]
@@ -1915,7 +1945,7 @@
19151945
},
19161946
{
19171947
"@id": "_:implement_theme_aem",
1918-
"iteration": "_:iteration_theme_1",
1948+
"iteration": "_:iteration_theme_2",
19191949
"name": {
19201950
"en": "AEM users",
19211951
"fr": "Utilisateurs AEM"
@@ -1947,6 +1977,30 @@
19471977
}
19481978
],
19491979
"iteration": [
1980+
{
1981+
"@id": "_:iteration_theme_3",
1982+
"name": "Theme page - Iteration 3",
1983+
"date": "2025-11",
1984+
"additions": [
1985+
"Added Featured link support.",
1986+
"Added Context-specific features support.",
1987+
"Added custom styles for Immigration and citizenship."
1988+
],
1989+
"detectableBy": ".page-type-theme:has(.gc-features)",
1990+
"predecessor": "_:iteration_theme_2"
1991+
},
1992+
{
1993+
"@id": "_:iteration_theme_2",
1994+
"name": "Theme page - Iteration 2",
1995+
"date": "2025-07",
1996+
"additions": [
1997+
"Added wb-navcurrent support to add active link styles based on URL.",
1998+
"Adjustments to the styles to support MWS implementation."
1999+
],
2000+
"detectableBy": ".page-type-theme",
2001+
"predecessor": "_:iteration_theme_1",
2002+
"successor": "_:iteration_theme_3"
2003+
},
19502004
{
19512005
"@id": "_:iteration_theme_1",
19522006
"name": "Theme page - Iteration 1",
@@ -1958,19 +2012,20 @@
19582012
"notes": [
19592013
"The H1 is exempt from the default styling (bottom red line). Confirmed by DTO on July 17th, 2024.",
19602014
"The breadcrumbs has specific styling <strong>only</strong> for Theme pages. Confirmed by DTO on July 8th, 2024."
1961-
]
2015+
],
2016+
"successor": "_:iteration_theme_2"
19622017
}
19632018
],
19642019
"changesets": [
19652020
{
19662021
"@id": "_:cs_theme",
19672022
"name": "Theme page",
19682023
"status": "stable",
1969-
"baseOnIteration": "_:iteration_theme_1",
2024+
"baseOnIteration": "_:iteration_theme_2",
19702025
"detectableBy": ".page-type-theme",
19712026
"layout": [
19722027
"On larger screens, navigation on the left and page content on the right.",
1973-
"In the page content section, from top to bottom: page title, most requested, services and information."
2028+
"In the page content section, from top to bottom: page title, Alert (optional), Featured link (optional), Most requested highlight (optional), Most requested, Services and information, Context-specific features (optional)."
19742029
],
19752030
"style": [
19762031
"The breadcrumbs first element has a left dark blue border.",

‎_includes/components/gc-most-requested/gc-most-requested-highlight.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<section class="gc-most-requested">
2+
<div class="container">
3+
<h2>{% if page.language == "en" %}[Title]{% else %}[Titre]{% endif %}</h2>
4+
<ul>
5+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink with a very long task name that spans over two lines{% else %}Lien vers une tâche principale avec un nom de tâche très long qui s'étend sur deux lignes{% endif %} 1]</a></li>
6+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 2]</a></li>
7+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 3]</a></li>
8+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 4]</a></li>
9+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 5]</a></li>
10+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink with a very long task name that spans over two lines{% else %}Lien vers une tâche principale avec un nom de tâche très long qui s'étend sur deux lignes{% endif %} 6]</a></li>
11+
</ul>
12+
</div>
13+
</section>
14+
<section class="gc-most-requested">
15+
<div class="container">
16+
<h2>{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}</h2>
17+
<ul>
18+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink with a very long task name that spans over two lines{% else %}Lien vers une tâche principale avec un nom de tâche très long qui s'étend sur deux lignes{% endif %} 1]</a></li>
19+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 2]</a></li>
20+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 3]</a></li>
21+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 4]</a></li>
22+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 5]</a></li>
23+
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink with a very long task name that spans over two lines{% else %}Lien vers une tâche principale avec un nom de tâche très long qui s'étend sur deux lignes{% endif %} 6]</a></li>
24+
</ul>
25+
</div>
26+
</section>

‎components/gc-most-requested/_base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
margin-bottom: 20px;
99
padding: 24px 0 12px;
1010

11+
&:has(~ .gc-most-requested) {
12+
background-color: $state-info-bg;
13+
margin-bottom: 0;
14+
}
15+
1116
h2 {
1217
font-size: 22px;
1318
margin-top: 0;

‎components/gc-most-requested/_screen-md-min.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
padding-left: 1.15em;
2323
padding-right: 1em;
2424
position: relative;
25+
width: 100%;
2526

2627
&::before {
2728
content: "\2022";
@@ -30,12 +31,6 @@
3031
position: absolute;
3132
top: 0;
3233
}
33-
34-
&::after {
35-
content: "";
36-
display: block;
37-
width: 335px;
38-
}
3934
}
4035

4136
// If there are only two items in the list, display them side by side, horizontally aligned

‎components/gc-most-requested/gc-most-requested-highlight-en.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
{
3+
"altLangPage": "gc-most-requested-highlight-fr.html",
4+
"dateModified": "2025-05-08",
5+
"description": "Working examples for the Highlight variant of the Most requested component.",
6+
"language": "en",
7+
"title": "Most requested with highlight",
8+
"breadcrumbs": [
9+
{ "title": "Most requested - Documentation", "link": "components/gc-most-requested/gc-most-requested-doc-en.html" }
10+
],
11+
"layout": "no-container",
12+
"pageclass": "wb-prettify all-pre"
13+
}
14+
---
15+
16+
<div class="container">
17+
<h1 id="wb-cont">Most requested with highlight</h1>
18+
<p class="mrgn-bttm-lg">Below is a working example for the Most requested with highlight variant of the Most requested component.</p>
19+
</div>
20+
21+
{% include_relative samples/gc-most-requested-highlight.html %}
22+
23+
<div class="container">
24+
<details>
25+
<summary>Code sample</summary>
26+
{% highlight html %}{% include_relative samples/gc-most-requested-highlight.html %}{% endhighlight %}
27+
</details>
28+
</div>

‎components/gc-most-requested/gc-most-requested-highlight-fr.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
{
3+
"altLangPage": "gc-most-requested-highlight-en.html",
4+
"dateModified": "2025-05-08",
5+
"description": "Exemple pratique pour la variation En demande avec mise en évidence de la composante En demande",
6+
"language": "fr",
7+
"title": "En demande avec mise en évidence",
8+
"breadcrumbs": [
9+
{ "title": "En demande - Documentation", "link": "components/gc-most-requested/gc-most-requested-doc-fr.html" }
10+
],
11+
"layout": "no-container",
12+
"pageclass": "wb-prettify all-pre"
13+
}
14+
---
15+
16+
<div class="container">
17+
<h1 id="wb-cont">En demande avec mise en évidence</h1>
18+
<p class="mrgn-bttm-lg">Vous trouverez ci-dessous un exemple pratique de la variation En demande avec mise en évidence pour la composante En demande.</p>
19+
</div>
20+
21+
{% include_relative samples/gc-most-requested-highlight.html %}
22+
23+
<div class="container">
24+
<details>
25+
<summary>Exemple de code</summary>
26+
{% highlight html %}{% include_relative samples/gc-most-requested-highlight.html %}{% endhighlight %}
27+
</details>
28+
</div>

0 commit comments

Comments
 (0)