diff --git a/_data/components.json b/_data/components.json
index 92630e7b9..33a8e0aa5 100644
--- a/_data/components.json
+++ b/_data/components.json
@@ -1384,10 +1384,10 @@
"en": "Features top tasks related to the page it is on.",
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
},
- "modified": "2024-02-14",
+ "modified": "2024-11-05",
"componentName": "gc-most-requested",
"status": "stable",
- "version": "1.0",
+ "version": "1.0.1",
"pages": {
"docs": [
{
@@ -1440,7 +1440,7 @@
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
},
- "iteration": "_:iteration_mostrequested_1",
+ "iteration": "_:iteration_mostrequested_2",
"example": [
{
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
@@ -1455,6 +1455,10 @@
"_:implement_mostrequested"
],
"history": [
+ {
+ "en": "November 2024 - Items are now distributed vertically instead of horizontally.",
+ "fr": "Novembre 2024 - Les items sont maintenant distribués verticalement plutôt que horizontalement."
+ },
{
"en": "February 2024 - Initial implementation of the variation.",
"fr": "Février 2024 - Implémentation initiale de la variante."
@@ -1469,7 +1473,7 @@
"implementation": [
{
"@id": "_:implement_mostrequested",
- "iteration": "_:iteration_mostrequested_1",
+ "iteration": "_:iteration_mostrequested_2",
"name": {
"en": "Standard",
"fr": "Standard"
@@ -1515,12 +1519,31 @@
}
],
"iteration": [
+ {
+ "@id": "_:iteration_mostrequested_2",
+ "name": "Most requested - Iteration 2",
+ "date": "2024-11",
+ "detectableBy": ".gc-most-requested:not(.provisional)",
+ "predecessor": "_:iteration_mostrequested_1",
+ "fixes": [
+ "Changed display of items from flex to column-count."
+ ],
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": "\n\t\n\t\t
Most requested
\n\t\t
\n\t
\n"
+ }
+ ]
+ },
{
"@id": "_:iteration_mostrequested_1",
"name": "Most requested - Iteration 1",
"date": "2024-02",
"detectableBy": ".gc-most-requested:not(.provisional)",
"predecessor": "_:iteration_mostrequested_0",
+ "successor": "_:iteration_mostrequested_2",
"assets": [
{
"@type": "source-code",
@@ -1539,6 +1562,28 @@
}
],
"changesets": [
+ {
+ "@id": "_:cs_mostrequested",
+ "name": "Most requested - columns",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_mostrequested_2",
+ "detectableBy": ".gc-most-requested",
+ "layout": "On smaller screens, the title is on the top and links are stacked. On medium and larger, the title is on the left and links are distributed over two columns from top to bottom and left to right.",
+ "style": "The component has a light gray background.",
+ "semantic": "h2 + (ul > li > a)",
+ "static": [
+ "Most requested",
+ "En demande"
+ ],
+ "context": "The component must not be located inside an element with the class \"container\"",
+ "schema": [
+ "arrays of 'MostRequestedLink'",
+ "'MostRequestedLink' object: [ \"task links\", \"task names\" ]"
+ ],
+ "test": [
+ "Most-requested (provisional)"
+ ]
+ },
{
"@id": "_:cs_mostrequested",
"name": "Most requested",
diff --git a/_includes/components/gc-most-requested/gc-most-requested.html b/_includes/components/gc-most-requested/gc-most-requested.html
index 8796902f7..c4dbf07af 100644
--- a/_includes/components/gc-most-requested/gc-most-requested.html
+++ b/_includes/components/gc-most-requested/gc-most-requested.html
@@ -2,11 +2,11 @@
{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}
diff --git a/components/gc-most-requested/_screen-lg-min.scss b/components/gc-most-requested/_screen-lg-min.scss
new file mode 100644
index 000000000..8d2666147
--- /dev/null
+++ b/components/gc-most-requested/_screen-lg-min.scss
@@ -0,0 +1,11 @@
+/*
+ Most requested component
+*/
+
+// Make sure the component is not inside a container
+main:not(.container) .gc-most-requested,
+div:not(.container) .gc-most-requested {
+ ul li::after {
+ width: 420px;
+ }
+}
diff --git a/components/gc-most-requested/_screen-md-min.scss b/components/gc-most-requested/_screen-md-min.scss
index ca6012009..b02ce87ba 100644
--- a/components/gc-most-requested/_screen-md-min.scss
+++ b/components/gc-most-requested/_screen-md-min.scss
@@ -11,14 +11,33 @@ div:not(.container) .gc-most-requested {
}
ul {
- display: flex;
- flex-wrap: wrap;
- padding-left: 2.5em;
+ column-count: 2;
+ column-gap: 0;
+ margin-bottom: 0;
+ padding-left: 1.55em;
li {
- flex-basis: 50%;
+ display: inline-block;
font-size: $small-size;
- padding-right: 1.3em;
+ line-height: 1.25em;
+ margin-bottom: 10px;
+ padding-left: 1.15em;
+ padding-right: 1em;
+ position: relative;
+
+ &::before {
+ content: "\2022";
+ font-size: .8em;
+ left: 0;
+ position: absolute;
+ top: 0;
+ }
+
+ &::after {
+ content: "";
+ display: block;
+ width: 335px;
+ }
}
}
}
diff --git a/components/gc-most-requested/index.json-ld b/components/gc-most-requested/index.json-ld
index 0e040c9ab..61ffb95be 100644
--- a/components/gc-most-requested/index.json-ld
+++ b/components/gc-most-requested/index.json-ld
@@ -14,10 +14,10 @@
"en": "Features top tasks related to the page it is on.",
"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
},
- "modified": "2024-02-14",
+ "modified": "2024-11-05",
"componentName": "gc-most-requested",
"status": "stable",
- "version": "1.0",
+ "version": "1.0.1",
"pages": {
"docs": [
{
@@ -70,7 +70,7 @@
"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
},
- "iteration": "_:iteration_mostrequested_1",
+ "iteration": "_:iteration_mostrequested_2",
"example": [
{
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
@@ -85,6 +85,10 @@
"_:implement_mostrequested"
],
"history": [
+ {
+ "en": "November 2024 - Items are now distributed vertically instead of horizontally.",
+ "fr": "Novembre 2024 - Les items sont maintenant distribués verticalement plutôt que horizontalement."
+ },
{
"en": "February 2024 - Initial implementation of the variation.",
"fr": "Février 2024 - Implémentation initiale de la variante."
@@ -99,7 +103,7 @@
"implementation": [
{
"@id": "_:implement_mostrequested",
- "iteration": "_:iteration_mostrequested_1",
+ "iteration": "_:iteration_mostrequested_2",
"name": {
"en": "Standard",
"fr": "Standard"
@@ -145,12 +149,31 @@
}
],
"iteration": [
+ {
+ "@id": "_:iteration_mostrequested_2",
+ "name": "Most requested - Iteration 2",
+ "date": "2024-11",
+ "detectableBy": ".gc-most-requested:not(.provisional)",
+ "predecessor": "_:iteration_mostrequested_1",
+ "fixes": [
+ "Changed display of items from flex to column-count."
+ ],
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": "\n\t\n\t\t
Most requested
\n\t\t
\n\t
\n"
+ }
+ ]
+ },
{
"@id": "_:iteration_mostrequested_1",
"name": "Most requested - Iteration 1",
"date": "2024-02",
"detectableBy": ".gc-most-requested:not(.provisional)",
"predecessor": "_:iteration_mostrequested_0",
+ "successor": "_:iteration_mostrequested_2",
"assets": [
{
"@type": "source-code",
@@ -169,6 +192,28 @@
}
],
"changesets": [
+ {
+ "@id": "_:cs_mostrequested",
+ "name": "Most requested - columns",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_mostrequested_2",
+ "detectableBy": ".gc-most-requested",
+ "layout": "On smaller screens, the title is on the top and links are stacked. On medium and larger, the title is on the left and links are distributed over two columns from top to bottom and left to right.",
+ "style": "The component has a light gray background.",
+ "semantic": "h2 + (ul > li > a)",
+ "static": [
+ "Most requested",
+ "En demande"
+ ],
+ "context": "The component must not be located inside an element with the class \"container\"",
+ "schema": [
+ "arrays of 'MostRequestedLink'",
+ "'MostRequestedLink' object: [ \"task links\", \"task names\" ]"
+ ],
+ "test": [
+ "Most-requested (provisional)"
+ ]
+ },
{
"@id": "_:cs_mostrequested",
"name": "Most requested",
diff --git a/components/gc-most-requested/samples/gc-most-requested.html b/components/gc-most-requested/samples/gc-most-requested.html
index 8796902f7..c4dbf07af 100644
--- a/components/gc-most-requested/samples/gc-most-requested.html
+++ b/components/gc-most-requested/samples/gc-most-requested.html
@@ -2,11 +2,11 @@
{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}
diff --git a/sites/theme.scss b/sites/theme.scss
index c3aa3bbe4..b67bf81df 100644
--- a/sites/theme.scss
+++ b/sites/theme.scss
@@ -344,6 +344,7 @@
@import "wet-boew/src/plugins/filter/screen-lg-min";
@import "../components/header-rwd/screen-lg-min";
@import "../components/equalheight/screen-lg-min";
+ @import "../components/gc-most-requested/screen-lg-min";
@import "wet-boew/src/base/proximity/screen-lg-min";
}