Skip to content

Commit 2be494d

Browse files
GarneaumaGarneauma
committed
Theme: adding multiple components to theme template
1 parent 347bab2 commit 2be494d

23 files changed

+1501
-314
lines changed

‎_data/components.json‎

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2059,7 +2059,7 @@
20592059
"modified": "2025-10-31",
20602060
"componentName": "gc-most-requested",
20612061
"status": "stable",
2062-
"version": "1.2.1",
2062+
"version": "1.3",
20632063
"pages": {
20642064
"docs": [
20652065
{
@@ -2085,12 +2085,22 @@
20852085
"path": "gc-most-requested-fr.html"
20862086
},
20872087
{
2088-
"title": "Most requested - Two items",
2088+
"title": "Most requested - highlight",
2089+
"language": "en",
2090+
"path": "gc-most-requested-highlight-en.html"
2091+
},
2092+
{
2093+
"title": "En demande - en relief",
2094+
"language": "fr",
2095+
"path": "gc-most-requested-highlight-fr.html"
2096+
},
2097+
{
2098+
"title": "Most requested - two items",
20892099
"language": "en",
20902100
"path": "gc-most-requested-two-items-en.html"
20912101
},
20922102
{
2093-
"title": "En demande - Deux éléments",
2103+
"title": "En demande - deux éléments",
20942104
"language": "fr",
20952105
"path": "gc-most-requested-two-items-fr.html"
20962106
},
@@ -2162,6 +2172,37 @@
21622172
"fr": "Juin 2021 - Implémentation provisionnelle de la variante."
21632173
}
21642174
]
2175+
},
2176+
{
2177+
"name": {
2178+
"en": "Most requested - highlight",
2179+
"fr": "En demande - en relief"
2180+
},
2181+
"status": "stable",
2182+
"description": {
2183+
"en": "Features top tasks related to the page it is on.",
2184+
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
2185+
},
2186+
"guidance": {
2187+
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
2188+
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
2189+
},
2190+
"iteration": "_:iteration_mostrequested_4",
2191+
"example": [
2192+
{
2193+
"en": { "href": "gc-most-requested-highlight-en.html", "text": "Most requested - highlight" },
2194+
"fr": { "href": "gc-most-requested-highlight-fr.html", "text": "En demande - en relief" }
2195+
}
2196+
],
2197+
"implementation": [
2198+
"_:implement_mostrequested_highlight"
2199+
],
2200+
"history": [
2201+
{
2202+
"en": "November 2025 - Initial implementation of the variation.",
2203+
"fr": "Novembre 2025 - Implémentation initiale de la variante."
2204+
}
2205+
]
21652206
}
21662207
],
21672208
"implementation": [
@@ -2210,9 +2251,63 @@
22102251
}
22112252
]
22122253
}
2254+
},
2255+
{
2256+
"@id": "_:implement_mostrequested_highlight",
2257+
"iteration": "_:iteration_mostrequested_highlight_1",
2258+
"name": {
2259+
"en": "Standard",
2260+
"fr": "Standard"
2261+
},
2262+
"introduction": {
2263+
"en": "This implementation is meant for developers/publishers adding the component manually.",
2264+
"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
2265+
},
2266+
"instructions": {
2267+
"en": [
2268+
"Refer to the code sample below.",
2269+
"The component cannot be located inside another element with the class <code>container</code>.",
2270+
"This variation must be directly followed be the default variation of the Most requested component. It cannot be implemented on its own."
2271+
],
2272+
"fr": [
2273+
"Référez-vous au code qui suit.",
2274+
"La composante ne peut pas être située à l'intérieur d'un autre élément avec la classe <code>container</code>.",
2275+
"Cette variation doit être immédiatement suivie de la variation par défaut du composant En demande. Elle ne peut pas être implémentée seule."
2276+
]
2277+
},
2278+
"sample": {
2279+
"en": [
2280+
{
2281+
"@type": "source-code",
2282+
"description": "Code sample:",
2283+
"code": "<section class=\"gc-most-requested highlight\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>\n<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
2284+
}
2285+
],
2286+
"fr": [
2287+
{
2288+
"@type": "source-code",
2289+
"description": "Exemple de code&nbsp;:",
2290+
"code": "<section class=\"gc-most-requested highlight\">\n\t<div class=\"container\">\n\t\t<h2>En demande</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 1]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 2]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 3]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 4]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 5]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>\n<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>En demande</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 1]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 2]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 3]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 4]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 5]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
2291+
}
2292+
]
2293+
}
22132294
}
22142295
],
22152296
"iteration": [
2297+
{
2298+
"@id": "_:iteration_mostrequested_highlight_1",
2299+
"name": "Most requested - highlight - Iteration 1",
2300+
"date": "2025-11",
2301+
"detectableBy": ".gc-most-requested.highlight",
2302+
"assets": [
2303+
{
2304+
"@type": "source-code",
2305+
"@language": "en",
2306+
"description": "Code sample",
2307+
"code": "<section class=\"gc-most-requested highlight\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>\n<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
2308+
}
2309+
]
2310+
},
22162311
{
22172312
"@id": "_:iteration_mostrequested_4",
22182313
"name": "Most requested - Iteration 4",

‎_data/templates.json‎

Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1512,21 +1512,41 @@
15121512
"en": "Theme page template",
15131513
"fr": "Gabarit de page thème"
15141514
},
1515-
"modified": "2020-02-12",
1515+
"modified": "2025-11-19",
15161516
"componentName": "theme",
15171517
"status": "stable",
1518-
"version": "2.0.2",
1518+
"version": "2.0.3",
15191519
"pages": {
15201520
"examples": [
15211521
{
1522-
"title": "[Theme]",
1522+
"title": "Complete theme page",
15231523
"language": "en",
15241524
"path": "theme-en.html"
15251525
},
15261526
{
1527-
"title": "[Thème]",
1527+
"title": "Page de thème complète",
15281528
"language": "fr",
15291529
"path": "theme-fr.html"
1530+
},
1531+
{
1532+
"title": "Minimal theme page",
1533+
"language": "en",
1534+
"path": "theme-business-en.html"
1535+
},
1536+
{
1537+
"title": "Page de thème minimale",
1538+
"language": "fr",
1539+
"path": "theme-business-fr.html"
1540+
},
1541+
{
1542+
"title": "Custom theme page for IRCC",
1543+
"language": "en",
1544+
"path": "theme-business-en.html"
1545+
},
1546+
{
1547+
"title": "Page de thème personnalisée pour IRCC",
1548+
"language": "fr",
1549+
"path": "theme-business-fr.html"
15301550
}
15311551
],
15321552
"docs": [
@@ -1580,18 +1600,30 @@
15801600
"en": "https://design.canada.ca/mandatory-templates/theme.html",
15811601
"fr": "https://conception.canada.ca/modeles-obligatoire/theme.html"
15821602
},
1583-
"iteration": "_:iteration_theme_1",
1603+
"iteration": "_:iteration_theme_2",
15841604
"example": [
15851605
{
1586-
"en": { "href": "theme-en.html", "text": "Theme page" },
1587-
"fr": { "href": "theme-fr.html", "text": "Pages de thème" }
1606+
"en": { "href": "theme-en.html", "text": "Complete theme page" },
1607+
"fr": { "href": "theme-fr.html", "text": "Pages de thème complète" }
1608+
},
1609+
{
1610+
"en": { "href": "theme-business-en.html", "text": "Minimal theme page" },
1611+
"fr": { "href": "theme-business-fr.html", "text": "Pages de thème minimale" }
1612+
},
1613+
{
1614+
"en": { "href": "theme-ircc-en.html", "text": "Customized theme page for IRCC" },
1615+
"fr": { "href": "theme-ircc-fr.html", "text": "Page de thème personnalisée pour IRCC" }
15881616
}
15891617
],
15901618
"implementation": [
15911619
"_:implement_theme",
15921620
"_:implement_theme_aem"
15931621
],
15941622
"history": [
1623+
{
1624+
"en": "November 2025 - Added Featured link and Context-specific features components support. Added custom working example for Immigration and Citizenship.",
1625+
"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é."
1626+
},
15951627
{
15961628
"en": "July 2025 - Minor adjustments for other environments compatibility and addition of wb-navcurrent.",
15971629
"fr": "Juillet 2025 - Ajustements mineurs pour la compatibilité avec d'autres environnements et ajout de wb-navcurrent."
@@ -1610,7 +1642,7 @@
16101642
"implementation": [
16111643
{
16121644
"@id": "_:implement_theme",
1613-
"iteration": "_:iteration_theme_1",
1645+
"iteration": "_:iteration_theme_2",
16141646
"name": {
16151647
"en": "Standard",
16161648
"fr": "Standard"
@@ -1622,13 +1654,11 @@
16221654
"instructions": {
16231655
"en": [
16241656
"Add the CSS class <code>.page-type-theme</code> to the page's <code>&lt;body></code> element.",
1625-
"The CSS class <code>.active</code> must be added to the current page's <code>&lt;li></code>.",
16261657
"Refer to the working example for a code sample.",
16271658
"Refer to the working example and guidance for more information on how to implement this page template."
16281659
],
16291660
"fr": [
16301661
"Ajoutez la classe CSS <code>.page-type-theme</code> sur l'élément <code>&lt;body></code> de la page.",
1631-
"La classe CSS <code>.active</code> doit être ajoutée au <code>&lt;li></code> de la page courante.",
16321662
"Reportez-vous à l'exemple pratique pour un exemple de code.",
16331663
"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
16341664
]
@@ -1646,7 +1676,7 @@
16461676
},
16471677
{
16481678
"@id": "_:implement_theme_aem",
1649-
"iteration": "_:iteration_theme_1",
1679+
"iteration": "_:iteration_theme_2",
16501680
"name": {
16511681
"en": "AEM users",
16521682
"fr": "Utilisateurs AEM"
@@ -1678,6 +1708,30 @@
16781708
}
16791709
],
16801710
"iteration": [
1711+
{
1712+
"@id": "_:iteration_theme_3",
1713+
"name": "Theme page - Iteration 3",
1714+
"date": "2025-11",
1715+
"additions": [
1716+
"Added Featured link support.",
1717+
"Added Context-specific features support.",
1718+
"Added custom styles for Immigration and citizenship."
1719+
],
1720+
"detectableBy": ".page-type-theme:has(.gc-features)",
1721+
"predecessor": "_:iteration_theme_2"
1722+
},
1723+
{
1724+
"@id": "_:iteration_theme_2",
1725+
"name": "Theme page - Iteration 2",
1726+
"date": "2025-07",
1727+
"additions": [
1728+
"Added wb-navcurrent support to add active link styles based on URL.",
1729+
"Adjustments to the styles to support MWS implementation."
1730+
],
1731+
"detectableBy": ".page-type-theme",
1732+
"predecessor": "_:iteration_theme_1",
1733+
"successor": "_:iteration_theme_3"
1734+
},
16811735
{
16821736
"@id": "_:iteration_theme_1",
16831737
"name": "Theme page - Iteration 1",
@@ -1689,19 +1743,20 @@
16891743
"notes": [
16901744
"The H1 is exempt from the default styling (bottom red line). Confirmed by DTO on July 17th, 2024.",
16911745
"The breadcrumbs has specific styling <strong>only</strong> for Theme pages. Confirmed by DTO on July 8th, 2024."
1692-
]
1746+
],
1747+
"successor": "_:iteration_theme_2"
16931748
}
16941749
],
16951750
"changesets": [
16961751
{
16971752
"@id": "_:cs_theme",
16981753
"name": "Theme page",
16991754
"status": "stable",
1700-
"baseOnIteration": "_:iteration_theme_1",
1755+
"baseOnIteration": "_:iteration_theme_2",
17011756
"detectableBy": ".page-type-theme",
17021757
"layout": [
17031758
"On larger screens, navigation on the left and page content on the right.",
1704-
"In the page content section, from top to bottom: page title, most requested, services and information."
1759+
"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)."
17051760
],
17061761
"style": [
17071762
"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 highlight">
2+
<div class="container">
3+
<h2>{% if page.language == "en" %}[Highlight title]{% else %}[Titre du relief]{% 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+
&.highlight {
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-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 - 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 - highlight</h1>
18+
<p class="mrgn-bttm-lg">Below is a working example for the 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>

0 commit comments

Comments
 (0)