Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Most requested: display items in columns #2446

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+138 −17
Open

Most requested: display items in columns #2446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 49 additions & 4 deletions _data/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down Expand Up @@ -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" },
Expand All @@ -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."
Expand All @@ -1469,7 +1473,7 @@
"implementation": [
{
"@id": "_:implement_mostrequested",
"iteration": "_:iteration_mostrequested_1",
"iteration": "_:iteration_mostrequested_2",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -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": "<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>"
}
]
},
{
"@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",
Expand All @@ -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": [
"<a href=\"gc-most-requested-provisional-en.html\">Most-requested (provisional)</a>"
]
},
{
"@id": "_:cs_mostrequested",
"name": "Most requested",
Expand Down
4 changes: 2 additions & 2 deletions _includes/components/gc-most-requested/gc-most-requested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div class="container">
<h2>{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}</h2>
<ul>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 1]</a></li>
<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>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 2]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 3]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 4]</a></li>
<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 %} 5]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 5]</a></li>
<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>
</ul>
</div>
Expand Down
11 changes: 11 additions & 0 deletions components/gc-most-requested/_screen-lg-min.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Comment on lines +6 to +7
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This don't seem to work as expected. I moved the "gc-most-requested" inside a component and the style was still applied.

Also, I am unable to observe the effect of that style in FF neither in Chrome. What it does? Should we add an additional working example for that edge case?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alternatively, you can add a style to break bad implementation like undo:

  • the h2 float
  • col-count set to 1
  • No background color.

CSS selector sample: .container .gc-most-request

Comment on lines +6 to +7
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
main:not(.container) .gc-most-requested,
div:not(.container) .gc-most-requested {
:not(.container) .gc-most-requested {

ul li::after {
width: 420px;
}
}
29 changes: 24 additions & 5 deletions components/gc-most-requested/_screen-md-min.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
53 changes: 49 additions & 4 deletions components/gc-most-requested/index.json-ld
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down Expand Up @@ -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" },
Expand All @@ -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."
Expand All @@ -99,7 +103,7 @@
"implementation": [
{
"@id": "_:implement_mostrequested",
"iteration": "_:iteration_mostrequested_1",
"iteration": "_:iteration_mostrequested_2",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -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": "<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>"
}
]
},
{
"@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",
Expand All @@ -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": [
"<a href=\"gc-most-requested-provisional-en.html\">Most-requested (provisional)</a>"
]
},
{
"@id": "_:cs_mostrequested",
"name": "Most requested",
Expand Down
4 changes: 2 additions & 2 deletions components/gc-most-requested/samples/gc-most-requested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div class="container">
<h2>{% if page.language == "en" %}Most requested{% else %}En demande{% endif %}</h2>
<ul>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 1]</a></li>
<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>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 2]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 3]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 4]</a></li>
<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 %} 5]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Lien vers une tâche principale{% endif %} 5]</a></li>
<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>
</ul>
</div>
Expand Down
1 change: 1 addition & 0 deletions sites/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Expand Down
Loading