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

Feature/most requested stable #2159

Merged
merged 8 commits into from
Apr 15, 2024
Merged

Feature/most requested stable #2159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0dc7fca
Most requested stabilization
May 1, 2023
fe120cc
Update _base.scss
jmealing May 10, 2023
01d84a6
resubmitting commit
jmealing Jan 22, 2024
170672e
Most requested: updating documentation
Garneauma Feb 13, 2024
3e0c3b4
Most requested: small change to working examples
Garneauma Feb 14, 2024
98189eb
Most requested: new markup, updated doc
Garneauma Mar 13, 2024
7c6d333
Most requested: isolating working example in sample file
Garneauma Mar 14, 2024
0282fd0
Most requested: small doc edits
Garneauma Mar 18, 2024
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
175 changes: 167 additions & 8 deletions _data/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1170,30 +1170,189 @@
"modified": "dct:modified"
},
"title": {
"en": "Most requested - Documentation and working example",
"fr": "En demande - Documentation et example pratique"
"en": "Most requested",
"fr": "En demande"
},
"description": {
"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": "2021-05-20",
"modified": "2024-02-14",
"componentName": "gc-most-requested",
"status": "provisional",
"status": "stable",
"version": "1.0",
"pages": {
"docs": [
{
"title": "Most requested - Documentation",
"language": "en",
"path": "gc-most-requested-doc-en.html"
},
{
"title": "En demande - Documentation",
"language": "fr",
"path": "gc-most-requested-doc-fr.html"
}
],
"examples": [
{
"title": "Most requested - Documentation and working example",
"title": "Most requested",
"language": "en",
"path": "gc-most-requested-en.html"
},
{
{
"title": "En demande",
"language": "fr",
"path": "gc-most-requested-fr.html - Documentation et example pratique"
"path": "gc-most-requested-fr.html"
},
{
"title": "Most requested - bad implementation",
"language": "en",
"path": "gc-most-requested-bad-en.html"
},
{
"title": "En demande - mauvaise implémentation",
"language": "fr",
"path": "gc-most-requested-bad-fr.html"
}
]
}
},
"dependencies": "No dependency.",
"a11yGuidance": "No accessibility guidance.",
"variations": [
{
"name": {
"en": "Most requested - default",
"fr": "En demande - par défaut"
},
"status": "stable",
"description": {
"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."
},
"guidance": {
"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",
"example": [
{
"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
"fr": { "href": "gc-most-requested-fr.html", "text": "En demande" }
},
{
"en": { "href": "gc-most-requested-bad-en.html", "text": "Most requested - bad implementation" },
"fr": { "href": "gc-most-requested-bad-fr.html", "text": "En demande - mauvaise implémentation" }
}
],
"implementation": [
"_:implement_mostrequested"
],
"history": [
{
"en": "February 2024 - Initial implementation of the variation.",
"fr": "Février 2024 - Implémentation initiale de la variante."
},
{
"en": "June 2021 - Provisional implementation of the variation.",
"fr": "Juin 2021 - Implémentation provisionnelle de la variante."
}
]
}
],
"implementation": [
{
"@id": "_:implement_mostrequested",
"iteration": "_:iteration_mostrequested_1",
"name": {
"en": "Standard",
"fr": "Standard"
},
"introduction": {
"en": "This implementation is meant for developers/publishers adding the component manually.",
"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
},
"instructions": {
"en": [
"Refer to the code sample below.",
"The component cannot be located inside another element with the class <code>container</code>."
],
"fr": [
"Référez-vous au code qui suit.",
"La composante ne peut pas être située à l'intérieur d'un autre élément avec la classe <code>container</code>."
]
},
"notes": {
"en": [
"The Most requested component on the home page is out of scope of this component."
],
"fr": [
"La composante En demande sur la page d'accueil est exclue de cette composante."
]
},
"sample": {
"en": [
{
"@type": "source-code",
"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>"
}
],
"fr": [
{
"@type": "source-code",
"description": "Exemple de code&nbsp;:",
"code": "<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=\"#\">[Tâche principale 1]</a></li>\n\t\t\t<li><a href=\"#\">[Tâche principale 2]</a></li>\n\t\t\t<li><a href=\"#\">[Tâche principale 3]</a></li>\n\t\t\t<li><a href=\"#\">[Tâche principale 4]</a></li>\n\t\t\t<li><a href=\"#\">[Tâche principale 5]</a></li>\n\t\t\t<li><a href=\"#\">[Tâche principale 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
}
]
}
}
],
"iteration": [
{
"@id": "_:iteration_mostrequested_1",
"name": "Most requested - Iteration 1",
"date": "2024-02",
"detectableBy": ".gc-most-requested:not(.provisional)",
"predecessor": "_:iteration_mostrequested_0",
"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_0",
"name": "Most requested - Provisional",
"date": "2021-06",
"detectableBy": ".provisional.gc-most-requested",
"successor": "_:iteration_mostrequested_1"
}
],
"changesets": [
{
"@id": "_:cs_mostrequested",
"name": "Most requested",
"status": "stable",
"baseOnIteration": "_:iteration_mostrequested_1",
"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 left to right and top to bottom.",
"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\" ]"
]
}
]
}
,{
"@context": {
Expand Down
35 changes: 0 additions & 35 deletions _data/templates.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,41 +259,6 @@
]
}
}
,{
"@context": {
"@version": 1.1,
"dct": "http://purl.org/dc/terms/",
"title": { "@id": "dct:title", "@container": "@language" },
"description": { "@id": "dct:description", "@container": "@language" },
"modified": "dct:modified"
},
"title": {
"en": "Emondage",
"fr": "Emondage"
},
"description": {
"en": "Blank content pages with text sample.",
"fr": "Pages de contenu vides avec exemple de texte."
},
"modified": "2024-03-30",
"componentName": "emondage",
"status": "stable",
"pages": {
"examples": [
{
"title": "Content page",
"language": "en",
"type": "general",
"path": "content-en.html"
},
{
"title": "Page de contenu",
"language": "fr",
"path": "content-fr.html"
}
]
}
}
,{
"@context": {
"@version": 1.1,
Expand Down
13 changes: 13 additions & 0 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
@@ -0,0 +1,13 @@
<section class="gc-most-requested">
<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 %}Tâche principale{% endif %} 1]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 2]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 3]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 4]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 5]</a></li>
<li><a href="#">[{% if page.language == "en" %}Top task hyperlink{% else %}Tâche principale{% endif %} 6]</a></li>
</ul>
</div>
</section>
22 changes: 13 additions & 9 deletions components/gc-most-requested/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
/* Provisional most requested component */
/*
Most requested component
*/

.provisional.gc-most-requested {
border: none;
// Make sure the component is not inside a container
main:not(.container) .gc-most-requested,
div:not(.container) .gc-most-requested {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 24px 0 12px;

h2 {
font-size: $font-size-h4;
margin-top: $space-md;
margin-top: 0;
}
ul {
margin-bottom: $space-md;
margin-top: $space-md;

ul {
li {
font-family: "Lato", sans-serif;
font-size: $small-size;
font-size: 19px;
font-weight: $bold-weight;
line-height: 1.5em;
line-height: 1.8em;
}
}
}
24 changes: 24 additions & 0 deletions components/gc-most-requested/_screen-md-min.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
Most requested component
*/

// Make sure the component is not inside a container
main:not(.container) .gc-most-requested,
div:not(.container) .gc-most-requested {
h2 {
float: left;
width: 16.666667%;
}

ul {
display: flex;
flex-wrap: wrap;
list-style-position: inside;
padding-left: 1.3em;

li {
flex-basis: 50%;
font-size: $small-size;
}
}
}
50 changes: 50 additions & 0 deletions components/gc-most-requested/gc-most-requested-bad-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
{
"altLangPage": "gc-most-requested-bad-fr.html",
"dateModified": "2024-02-14",
"description": "Bad implementation example for the Most requested component.",
"language": "en",
"title": "Most requested - bad implementation",
"breadcrumbs": [
{ "title": "Most requested - Documentation", "link": "components/gc-most-requested/gc-most-requested-doc-en.html" }
],
"pageclass": "wb-prettify all-pre"
}
---

<p class="mrgn-bttm-lg">Below is an example for a bad implementation of the Most requested component. In this example, the component is located inside another element with the class <code>container</code>, which is not allowed.</p>

<section class="gc-most-requested">
<div class="container">
<h2>Most requested</h2>
<ul>
<li><a href="#">[Top task hyperlink 1]</a></li>
<li><a href="#">[Top task hyperlink 2]</a></li>
<li><a href="#">[Top task hyperlink 3]</a></li>
<li><a href="#">[Top task hyperlink 4]</a></li>
<li><a href="#">[Top task hyperlink 5]</a></li>
<li><a href="#">[Top task hyperlink 6]</a></li>
</ul>
</div>
</section>

<details>
<summary>Code</summary>
<pre><code>&lt;main class="container">
...
&lt;section class="gc-most-requested">
&lt;div class="container">
&lt;h2>Most requested&lt;/h2>
&lt;ul>
&lt;li>&lt;a href="#">[Top task hyperlink 1]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[Top task hyperlink 2]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[Top task hyperlink 3]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[Top task hyperlink 4]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[Top task hyperlink 5]&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">[Top task hyperlink 6]&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/section>
...
&lt;/main></code></pre>
</details>
Loading
Loading