Skip to content

Commit

Permalink
All services: Adding new page template and new utilities
Browse files Browse the repository at this point in the history
  • Loading branch information
@Garneauma
Garneauma committed Dec 4, 2024
1 parent 7ba262d commit a167d43
Show file tree
Hide file tree
Showing 26 changed files with 2,570 additions and 40 deletions.
40 changes: 37 additions & 3 deletions _data/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,40 @@
]
}
}
,{
"@context": {
"@version": 2.0,
"dct": "http://purl.org/dc/terms/",
"title": { "@id": "dct:title", "@container": "@language" },
"description": { "@id": "dct:description", "@container": "@language" },
"modified": "dct:modified"
},
"title": {
"en": "Spacing",
"fr": "Espacement"
},
"description": {
"en": "Utility classes to add spacing between elements.",
"fr": "Classes utilitaires pour ajouter de l'espacement entre des éléments."
},
"modified": "2024-11-22",
"componentName": "spacing",
"status": "stable",
"pages": {
"examples": [
{
"title": "Spacing",
"language": "en",
"path": "spacing-en.html"
},
{
"title": "Espacement",
"language": "fr",
"path": "spacing-fr.html"
}
]
}
}
,{
"@context": {
"@version": 1.1,
Expand Down Expand Up @@ -529,13 +563,13 @@
},
"title": {
"en": "Text-level Modifiers",
"fr": "Modificateurs de niveau de texte"
"fr": "Modificateurs de niveau texte"
},
"description": {
"en": "Text-level modifiers for styling and formatting",
"fr": "Modificateurs de niveau de texte pour le style et le formatage"
"fr": "Modificateurs de niveau texte pour le style et le formatage"
},
"modified": "2024-03-06",
"modified": "2024-11-25",
"componentName": "text-level-modifiers",
"status": "stable",
"pages": {
Expand Down
131 changes: 131 additions & 0 deletions _data/templates.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,137 @@
]
}
}
,{
"@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": "All services",
"fr": "Tous les services"
},
"description": {
"en": "All services page template.",
"fr": "Gabarit de page pour tous les services."
},
"modified": "2024-11-21",
"componentName": "all-services",
"status": "stable",
"version": "1.0",
"pages": {
"examples": [
{
"title": "All services",
"language": "en",
"path": "all-services-en.html"
},
{
"title": "Tous les services",
"language": "fr",
"path": "all-services-fr.html"
}
],
"docs": [
{
"title": "All services",
"language": "en",
"path": "all-services-doc-en.html"
},
{
"title": "Tous les services",
"language": "fr",
"path": "all-services-doc-fr.html"
}
]
},
"a11yGuidance": "No accessibility guidance.",
"variations": [
{
"name": {
"en": "All services",
"fr": "Tous les services"
},
"status": "stable",
"description": {
"en": "All services page template.",
"fr": "Gabarit de page pour tous les services."
},
"iteration": "_:iteration_allservices_1",
"example": [
{
"en": { "href": "all-services-en.html", "text": "All services" },
"fr": { "href": "all-services-fr.html", "text": "Tous les services" }
}
],
"implementation": [
"_:implement_allservices"
],
"history": [
{
"en": "November 2024 - Initial implementation of the page template.",
"fr": "Novembre 2024 - Implémentation initiale du gabarit de page."
}
]
}
],
"implementation": [
{
"@id": "_:implement_allservices",
"iteration": "_:iteration_allservices_1",
"name": {
"en": "Standard",
"fr": "Standard"
},
"introduction": {
"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."

},
"instructions": {
"en": [
"Refer to the working example and guidance for more information on how to implement this page template."
],
"fr": [
"Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
]
},
"ajaxSourceCode": {
"en": "all-services-en.html main > *:not(.pagedetails)",
"fr": "all-services-fr.html main > *:not(.pagedetails)"
}
}
],
"iteration": [
{
"@id": "_:iteration_allservices_1",
"name": "All services page - Iteration 1",
"date": "2024-11",
"detectableBy": "Three navigation bands followed by a series of <details> elements for all goc themes and topics."
}
],
"changesets": [
{
"@id": "_:cs_allservices",
"name": "All services page",
"status": "stable",
"baseOnIteration": "_:iteration_allservices_1",
"detectableBy": "By the sequence of elements.",
"semantic": "h1 + h2*3 + h1 + h2*n",
"accessibility": "This page contains two <h1> elements since the content is perceptibly split in two distinct sections. A skip link has been added at the top of the content to go directly to the second part of the content.",
"context": "This page template is strictly limited to the All services page located on Canada.ca.",
"layout": [
"Top serches navigation band",
"Most requested services navigation band",
"Supporting through life's transitions navigation band",
"Most requested - version 1 (optional)",
"Series of <details> elements for all goc themes and topics"
]
}
]
}
,{
"@context": {
"@version": 1.1,
Expand Down
9 changes: 9 additions & 0 deletions common/colour/_colours.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
*
* @title: Colours
*
*/

.bg-light {
background-color: $well-bg;
}
20 changes: 18 additions & 2 deletions common/colour/colour-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
}
---

<div class="wb-prettify all-pre hide"></div>

<p>This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: <code>bg-primary</code>, <code>text-center</code>, <code>text-white</code> and others.</p>
<p>Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (<code>sm</code>) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.</p>

Expand Down Expand Up @@ -288,7 +290,7 @@ <h4>Code sample</h4>
<pre><code>&lt;div class="well mrgn-tp-md mrgn-bttm-md <strong>bg-darker</strong> text-white"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Heading&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;</code></pre>

<h3><code>bg-dark</code></h3>
<p>Set a dark background to an element.</p>
Expand All @@ -302,4 +304,18 @@ <h4>Code sample</h4>
<pre><code>&lt;div class="well mrgn-tp-md mrgn-bttm-md <strong>bg-dark</strong> text-white"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Heading&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;</code></pre>

<h3><code>bg-light</code></h3>
<p>Set a light background to an element.</p>
<h4>Working example</h4>
<div class="bg-light">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
</div>

<h4>Code sample</h4>
<pre><code>&lt;div class="<strong>bg-light</strong>"&gt;
&lt;h5&gt;Heading&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
46 changes: 31 additions & 15 deletions common/colour/colour-fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
}
---

<div class="wb-prettify all-pre hide"></div>

<p>Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: <code>bg-primary</code>, <code>text-center</code>, <code>text-white</code> et d'autres.</p>
<p>Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale de la petite vue (<code>sm</code>) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.</p>

Expand Down Expand Up @@ -261,20 +263,20 @@ <h4>Exemple de code</h4>
&lt;h5 class="mrgn-tp-md"&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;</code></pre>

<h3><code>bg-gctheme</code></h3>
<p>définir l'arrière-plan du gctheme</p>
<h4>Exemple</h4>
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
<h5 class="mrgn-tp-md">Titre</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
</div>
<h4>Exemple de code</h4>
<pre><code>&lt;div class="<strong>bg-gctheme</strong> text-white well mrgn-tp-md mrgn-bttm-md"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
<h3><code>bg-gctheme</code></h3>
<p>définir l'arrière-plan du gctheme</p>
<h4>Exemple</h4>
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
<h5 class="mrgn-tp-md">Titre</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
</div>
<h4>Exemple de code</h4>
<pre><code>&lt;div class="<strong>bg-gctheme</strong> text-white well mrgn-tp-md mrgn-bttm-md"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>

<h3><code>bg-darker</code></h3>
<p>Définissez un arrière-plan noir sur un élément.</p>
Expand All @@ -288,7 +290,7 @@ <h4>Exemple de code</h4>
<pre><code>&lt;div class="well mrgn-tp-md mrgn-bttm-md <strong>bg-darker</strong> text-white"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;</code></pre>

<h3><code>bg-dark</code></h3>
<p>Définissez un arrière-plan sombre sur un élément.</p>
Expand All @@ -302,4 +304,18 @@ <h4>Exemple de code</h4>
<pre><code>&lt;div class="well mrgn-tp-md mrgn-bttm-md <strong>bg-dark</strong> text-white"&gt;
&lt;h5 class="mrgn-tp-md"&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;</code></pre>

<h3><code>bg-light</code></h3>
<p>Définissez un arrière-plan pâle sur un élément.</p>
<h4>Exemple</h4>
<div class="bg-light">
<h5>Titre</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
</div>

<h4>Exemple de code</h4>
<pre><code>&lt;div class="<strong>bg-light</strong>"&gt;
&lt;h5&gt;Titre&lt;/h5&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.&lt;/p&gt;
&lt;/div&gt;</code></pre>
11 changes: 11 additions & 0 deletions common/list/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,14 @@ div.list-advanced.circle>ul, ul.circle {
div.list-advanced.square>ul, ul.square {
list-style-type:square;
}

/*
* GCWeb/AEM: Custom CSS for list styling with navigation links.
*/

ul.compact {
li {
font-size: $small-size;
line-height: 1.5em;
}
}
13 changes: 13 additions & 0 deletions common/list/lists-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,3 +408,16 @@ <h2 id="dl-inline">Inline description list</h2>
&lt;dt>Term&nbsp;:&lt;/dt>
&lt;dd>Short description&lt;/dd>
&lt;/dl></code></pre>

<h2 id="compact">List with <code>compact</code> utility class.</h2>
<ul class="compact">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
13 changes: 13 additions & 0 deletions common/list/lists-fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,3 +411,16 @@ <h2 id="dl-inline">Liste descriptive en ligne</h2>
&lt;dt>Terme&nbsp;:&lt;/dt>
&lt;dd>Description courte&lt;/dd>
&lt;/dl></code></pre>

<h2 id="compact">Liste avec classe utilitaire <code>compact</code>.</h2>
<ul class="compact">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
<li><a href="#">Lien 6</a></li>
<li><a href="#">Lien 7</a></li>
<li><a href="#">Lien 8</a></li>
<li><a href="#">Lien 9</a></li>
</ul>
Loading

0 comments on commit a167d43

Please sign in to comment.