From d2df11c3081bafdc4bdbc86168ff3b7179da400e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Tue, 5 Nov 2024 13:06:14 -0500 Subject: [PATCH] Most requested: display items in columns --- _data/components.json | 53 +++++++++++++++++-- .../gc-most-requested/gc-most-requested.html | 4 +- .../gc-most-requested/_screen-lg-min.scss | 11 ++++ .../gc-most-requested/_screen-md-min.scss | 29 ++++++++-- components/gc-most-requested/index.json-ld | 53 +++++++++++++++++-- .../samples/gc-most-requested.html | 4 +- sites/theme.scss | 1 + 7 files changed, 138 insertions(+), 17 deletions(-) create mode 100644 components/gc-most-requested/_screen-lg-min.scss 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"; }