Skip to content

Commit d223855

Browse files
GarneaumaGarneauma
committed
Theme: adding multiple components to theme template
1 parent 575c57d commit d223855

26 files changed

+1614
-564
lines changed

‎_data/components.json‎

Lines changed: 142 additions & 122 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
@@ -1954,21 +1954,41 @@
19541954
"en": "Theme page template",
19551955
"fr": "Gabarit de page thème"
19561956
},
1957-
"modified": "2020-02-12",
1957+
"modified": "2025-11-19",
19581958
"componentName": "theme",
19591959
"status": "stable",
1960-
"version": "2.0.2",
1960+
"version": "2.0.3",
19611961
"pages": {
19621962
"examples": [
19631963
{
1964-
"title": "[Theme]",
1964+
"title": "Complete theme page",
19651965
"language": "en",
19661966
"path": "theme-en.html"
19671967
},
19681968
{
1969-
"title": "[Thème]",
1969+
"title": "Page de thème complète",
19701970
"language": "fr",
19711971
"path": "theme-fr.html"
1972+
},
1973+
{
1974+
"title": "Minimal theme page",
1975+
"language": "en",
1976+
"path": "theme-business-en.html"
1977+
},
1978+
{
1979+
"title": "Page de thème minimale",
1980+
"language": "fr",
1981+
"path": "theme-business-fr.html"
1982+
},
1983+
{
1984+
"title": "Custom theme page for IRCC",
1985+
"language": "en",
1986+
"path": "theme-ircc-en.html"
1987+
},
1988+
{
1989+
"title": "Page de thème personnalisée pour IRCC",
1990+
"language": "fr",
1991+
"path": "theme-ircc-fr.html"
19721992
}
19731993
],
19741994
"docs": [
@@ -2022,18 +2042,30 @@
20222042
"en": "https://design.canada.ca/mandatory-templates/theme.html",
20232043
"fr": "https://conception.canada.ca/modeles-obligatoire/theme.html"
20242044
},
2025-
"iteration": "_:iteration_theme_1",
2045+
"iteration": "_:iteration_theme_2",
20262046
"example": [
20272047
{
2028-
"en": { "href": "theme-en.html", "text": "Theme page" },
2029-
"fr": { "href": "theme-fr.html", "text": "Pages de thème" }
2048+
"en": { "href": "theme-en.html", "text": "Complete theme page" },
2049+
"fr": { "href": "theme-fr.html", "text": "Pages de thème complète" }
2050+
},
2051+
{
2052+
"en": { "href": "theme-business-en.html", "text": "Minimal theme page" },
2053+
"fr": { "href": "theme-business-fr.html", "text": "Pages de thème minimale" }
2054+
},
2055+
{
2056+
"en": { "href": "theme-ircc-en.html", "text": "Customized theme page for IRCC" },
2057+
"fr": { "href": "theme-ircc-fr.html", "text": "Page de thème personnalisée pour IRCC" }
20302058
}
20312059
],
20322060
"implementation": [
20332061
"_:implement_theme",
20342062
"_:implement_theme_aem"
20352063
],
20362064
"history": [
2065+
{
2066+
"en": "November 2025 - Added Featured link and Context-specific features components support. Added custom working example for Immigration and Citizenship.",
2067+
"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é."
2068+
},
20372069
{
20382070
"en": "July 2025 - Minor adjustments for other environments compatibility and addition of wb-navcurrent.",
20392071
"fr": "Juillet 2025 - Ajustements mineurs pour la compatibilité avec d'autres environnements et ajout de wb-navcurrent."
@@ -2052,7 +2084,7 @@
20522084
"implementation": [
20532085
{
20542086
"@id": "_:implement_theme",
2055-
"iteration": "_:iteration_theme_1",
2087+
"iteration": "_:iteration_theme_2",
20562088
"name": {
20572089
"en": "Standard",
20582090
"fr": "Standard"
@@ -2064,13 +2096,11 @@
20642096
"instructions": {
20652097
"en": [
20662098
"Add the CSS class <code>.page-type-theme</code> to the page's <code>&lt;body></code> element.",
2067-
"The CSS class <code>.active</code> must be added to the current page's <code>&lt;li></code>.",
20682099
"Refer to the working example for a code sample.",
20692100
"Refer to the working example and guidance for more information on how to implement this page template."
20702101
],
20712102
"fr": [
20722103
"Ajoutez la classe CSS <code>.page-type-theme</code> sur l'élément <code>&lt;body></code> de la page.",
2073-
"La classe CSS <code>.active</code> doit être ajoutée au <code>&lt;li></code> de la page courante.",
20742104
"Reportez-vous à l'exemple pratique pour un exemple de code.",
20752105
"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
20762106
]
@@ -2088,7 +2118,7 @@
20882118
},
20892119
{
20902120
"@id": "_:implement_theme_aem",
2091-
"iteration": "_:iteration_theme_1",
2121+
"iteration": "_:iteration_theme_2",
20922122
"name": {
20932123
"en": "AEM users",
20942124
"fr": "Utilisateurs AEM"
@@ -2120,6 +2150,30 @@
21202150
}
21212151
],
21222152
"iteration": [
2153+
{
2154+
"@id": "_:iteration_theme_3",
2155+
"name": "Theme page - Iteration 3",
2156+
"date": "2025-11",
2157+
"additions": [
2158+
"Added Featured link support.",
2159+
"Added Context-specific features support.",
2160+
"Added custom styles for Immigration and citizenship."
2161+
],
2162+
"detectableBy": ".page-type-theme:has(.gc-features)",
2163+
"predecessor": "_:iteration_theme_2"
2164+
},
2165+
{
2166+
"@id": "_:iteration_theme_2",
2167+
"name": "Theme page - Iteration 2",
2168+
"date": "2025-07",
2169+
"additions": [
2170+
"Added wb-navcurrent support to add active link styles based on URL.",
2171+
"Adjustments to the styles to support MWS implementation."
2172+
],
2173+
"detectableBy": ".page-type-theme",
2174+
"predecessor": "_:iteration_theme_1",
2175+
"successor": "_:iteration_theme_3"
2176+
},
21232177
{
21242178
"@id": "_:iteration_theme_1",
21252179
"name": "Theme page - Iteration 1",
@@ -2131,19 +2185,20 @@
21312185
"notes": [
21322186
"The H1 is exempt from the default styling (bottom red line). Confirmed by DTO on July 17th, 2024.",
21332187
"The breadcrumbs has specific styling <strong>only</strong> for Theme pages. Confirmed by DTO on July 8th, 2024."
2134-
]
2188+
],
2189+
"successor": "_:iteration_theme_2"
21352190
}
21362191
],
21372192
"changesets": [
21382193
{
21392194
"@id": "_:cs_theme",
21402195
"name": "Theme page",
21412196
"status": "stable",
2142-
"baseOnIteration": "_:iteration_theme_1",
2197+
"baseOnIteration": "_:iteration_theme_2",
21432198
"detectableBy": ".page-type-theme",
21442199
"layout": [
21452200
"On larger screens, navigation on the left and page content on the right.",
2146-
"In the page content section, from top to bottom: page title, most requested, services and information."
2201+
"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)."
21472202
],
21482203
"style": [
21492204
"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)