Skip to content

Commit fe465ce

Browse files
tristandasilvatristandasilva
authored
Minor - Most requested: display items side-by-side when only 2 items (wet-boew#2658)
1 parent 6386f91 commit fe465ce

File tree

6 files changed

+144
-5
lines changed

6 files changed

+144
-5
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
display: block;
3737
width: 335px;
3838
}
39+
40+
&:nth-child(2):last-child {
41+
break-after: column;
42+
break-inside: avoid-column;
43+
display: block;
44+
}
3945
}
4046
}
4147
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
description: Documentation for Most requested component
44
language: en
55
altLangPage: gc-most-requested-doc-fr.html
6-
dateModified: 2025-05-08
6+
dateModified: 2025-09-29
77
layout: documentation
88
index_json: index.json-ld
99
---

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
description: Documentation de la composante En demande
44
language: fr
55
altLangPage: gc-most-requested-doc-en.html
6-
dateModified: 2025-05-08
6+
dateModified: 2025-09-29
77
layout: documentation
88
index_json: index.json-ld
99
---

‎components/gc-most-requested/gc-most-requested-two-items-en.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
{
3+
"altLangPage": "gc-most-requested-two-items-fr.html",
4+
"dateModified": "2025-09-29",
5+
"description": "Working examples for the Most requested component with only two items.",
6+
"language": "en",
7+
"title": "Most requested - Two items",
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 - Two items</h1>
18+
<p class="mrgn-bttm-lg">Below is a working example for the Most requested component with only two items.</p>
19+
</div>
20+
21+
<section class="gc-most-requested">
22+
<div class="container">
23+
<h2>Most requested</h2>
24+
<ul>
25+
<li><a href="#">[Top task hyperlink 1]</a></li>
26+
<li><a href="#">[Top task hyperlink 2]</a></li>
27+
</ul>
28+
</div>
29+
</section>
30+
31+
<div class="container">
32+
<details>
33+
<summary>Code</summary>
34+
<pre><code>
35+
...
36+
&lt;section class="gc-most-requested">
37+
&lt;div class="container">
38+
&lt;h2>Most requested&lt;/h2>
39+
&lt;ul>
40+
&lt;li>&lt;a href="#">[Top task hyperlink 1]&lt;/a>&lt;/li>
41+
&lt;li>&lt;a href="#">[Top task hyperlink 2]&lt;/a>&lt;/li>
42+
&lt;/ul>
43+
&lt;/div>
44+
&lt;/section>
45+
...
46+
</code></pre>
47+
</details>
48+
</div>

‎components/gc-most-requested/gc-most-requested-two-items-fr.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
{
3+
"altLangPage": "gc-most-requested-two-items-en.html",
4+
"dateModified": "2025-09-29",
5+
"description": "Exemples pratiques pour la composante En demande avec seulement deux éléments.",
6+
"language": "fr",
7+
"title": "En demande - Deux éléments",
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 - Deux éléments</h1>
18+
<p class="mrgn-bttm-lg">Vous trouverez ci-dessous un exemple pratique pour le composant En demande avec seulement deux éléments.</p>
19+
</div>
20+
21+
<section class="gc-most-requested">
22+
<div class="container">
23+
<h2>En demande</h2>
24+
<ul>
25+
<li><a href="#">[Lien vers une tâche principale 1]</a></li>
26+
<li><a href="#">[Lien vers une tâche principale 2]</a></li>
27+
</ul>
28+
</div>
29+
</section>
30+
31+
<div class="container">
32+
<details>
33+
<summary>Code</summary>
34+
<pre><code>
35+
...
36+
&lt;section class="gc-most-requested">
37+
&lt;div class="container">
38+
&lt;h2>En demande&lt;/h2>
39+
&lt;ul>
40+
&lt;li>&lt;a href="#">[Lien vers une tâche principale 1]&lt;/a>&lt;/li>
41+
&lt;li>&lt;a href="#">[Lien vers une tâche principale 2]&lt;/a>&lt;/li>
42+
&lt;/ul>
43+
&lt;/div>
44+
&lt;/section>
45+
...
46+
</code></pre>
47+
</details>
48+
</div>

‎components/gc-most-requested/index.json-ld‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
"en": "Features top tasks related to the page it is on.",
1515
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
1616
},
17-
"modified": "2025-05-08",
17+
"modified": "2025-09-29",
1818
"componentName": "gc-most-requested",
1919
"status": "stable",
20-
"version": "1.1.0",
20+
"version": "1.2.0",
2121
"pages": {
2222
"docs": [
2323
{
@@ -42,6 +42,16 @@
4242
"language": "fr",
4343
"path": "gc-most-requested-fr.html"
4444
},
45+
{
46+
"title": "Most requested - Two items",
47+
"language": "en",
48+
"path": "gc-most-requested-two-items-en.html"
49+
},
50+
{
51+
"title": "En demande - Deux éléments",
52+
"language": "fr",
53+
"path": "gc-most-requested-two-items-fr.html"
54+
},
4555
{
4656
"title": "Most requested - bad implementation",
4757
"language": "en",
@@ -70,11 +80,15 @@
7080
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
7181
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
7282
},
73-
"iteration": "_:iteration_mostrequested_2",
83+
"iteration": "_:iteration_mostrequested_3",
7484
"example": [
7585
{
7686
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
7787
"fr": { "href": "gc-most-requested-fr.html", "text": "En demande" }
88+
},
89+
{
90+
"en": { "href": "gc-most-requested-two-items-en.html", "text": "Most requested - Two items" },
91+
"fr": { "href": "gc-most-requested-two-items-fr.html", "text": "En demande - Deux éléments" }
7892
},
7993
{
8094
"en": { "href": "gc-most-requested-bad-en.html", "text": "Most requested - bad implementation" },
@@ -85,6 +99,10 @@
8599
"_:implement_mostrequested"
86100
],
87101
"history": [
102+
{
103+
"en": "September 2025 - Items are displayed horizontally when there are only two list items on medium screen breakpoint and larger.",
104+
"fr": "Septembre 2025 - Les éléments sont affichés horizontalement quand il y a seulement deux éléments de liste à partir d'un breakpoint écran moyen et plus."
105+
},
88106
{
89107
"en": "May 2025 - Items are now distributed vertically instead of horizontally.",
90108
"fr": "Mai 2025 - Les items sont maintenant distribués verticalement plutôt que horizontalement."
@@ -149,12 +167,31 @@
149167
}
150168
],
151169
"iteration": [
170+
{
171+
"@id": "_:iteration_mostrequested_3",
172+
"name": "Most requested - Iteration 3",
173+
"date": "2025-09",
174+
"detectableBy": ".gc-most-requested:not(.provisional)",
175+
"predecessor": "_:iteration_mostrequested_2",
176+
"additions": [
177+
"Changed display of list items from vertical to horizontal when there are only two list items on medium screen breakpoint and larger. This does not change the component's core behaviour, so this is a Minor change."
178+
],
179+
"assets": [
180+
{
181+
"@type": "source-code",
182+
"@language": "en",
183+
"description": "Code sample",
184+
"code": "<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</ul>\n\t</div>\n</section>"
185+
}
186+
]
187+
},
152188
{
153189
"@id": "_:iteration_mostrequested_2",
154190
"name": "Most requested - Iteration 2",
155191
"date": "2024-11",
156192
"detectableBy": ".gc-most-requested:not(.provisional)",
157193
"predecessor": "_:iteration_mostrequested_1",
194+
"successor": "_:iteration_mostrequested_3",
158195
"additions": [
159196
"Changed display of items from flex to column-count. This change is perceptible and a user will notice that change but it won't change the component essential behaviour. So this is a Minor change."
160197
],

0 commit comments

Comments
 (0)