From a167d4392f4b45300cc376d07e7af7d45f9f83c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Fri, 22 Nov 2024 12:29:46 -0500 Subject: [PATCH] All services: Adding new page template and new utilities --- _data/common.json | 40 +- _data/templates.json | 131 +++ common/colour/_colours.scss | 9 + common/colour/colour-en.html | 20 +- common/colour/colour-fr.html | 46 +- common/list/_lists.scss | 11 + common/list/lists-en.html | 13 + common/list/lists-fr.html | 13 + common/spacing/_base.scss | 70 ++ common/spacing/_screen-lg-min.scss | 47 + common/spacing/_screen-md-min.scss | 47 + common/spacing/_screen-sm-min.scss | 47 + common/spacing/index.json-ld | 34 + common/spacing/spacing-en.html | 120 +++ common/spacing/spacing-fr.html | 120 +++ common/text-level-modifiers/_base.scss | 10 + .../text-level-modifiers-en.html | 5 + .../text-level-modifiers-fr.html | 5 + sites/_variables.scss | 14 + sites/helpers/_base.scss | 19 - sites/theme.scss | 7 +- .../all-services/all-services-doc-en.html | 9 + .../all-services/all-services-doc-fr.html | 9 + templates/all-services/all-services-en.html | 814 +++++++++++++++++ templates/all-services/all-services-fr.html | 819 ++++++++++++++++++ templates/all-services/index.json-ld | 131 +++ 26 files changed, 2570 insertions(+), 40 deletions(-) create mode 100644 common/colour/_colours.scss create mode 100644 common/spacing/_base.scss create mode 100644 common/spacing/_screen-lg-min.scss create mode 100644 common/spacing/_screen-md-min.scss create mode 100644 common/spacing/_screen-sm-min.scss create mode 100644 common/spacing/index.json-ld create mode 100644 common/spacing/spacing-en.html create mode 100644 common/spacing/spacing-fr.html create mode 100644 common/text-level-modifiers/_base.scss delete mode 100644 sites/helpers/_base.scss create mode 100644 templates/all-services/all-services-doc-en.html create mode 100644 templates/all-services/all-services-doc-fr.html create mode 100644 templates/all-services/all-services-en.html create mode 100644 templates/all-services/all-services-fr.html create mode 100644 templates/all-services/index.json-ld diff --git a/_data/common.json b/_data/common.json index c06cd1e43e..fe30abde70 100644 --- a/_data/common.json +++ b/_data/common.json @@ -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, @@ -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": { diff --git a/_data/templates.json b/_data/templates.json index 3f4fb2910f..54bfa8cc24 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -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
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

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
elements for all goc themes and topics" + ] + } + ] +} ,{ "@context": { "@version": 1.1, diff --git a/common/colour/_colours.scss b/common/colour/_colours.scss new file mode 100644 index 0000000000..65593ccf7f --- /dev/null +++ b/common/colour/_colours.scss @@ -0,0 +1,9 @@ +/* + * + * @title: Colours + * + */ + +.bg-light { + background-color: $well-bg; +} diff --git a/common/colour/colour-en.html b/common/colour/colour-en.html index 4524f0756b..300f11aaf1 100644 --- a/common/colour/colour-en.html +++ b/common/colour/colour-en.html @@ -8,6 +8,8 @@ } --- +
+

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: bg-primary, text-center, text-white and others.

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

@@ -288,7 +290,7 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<h5 class="mrgn-tp-md">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>
+</div>

bg-dark

Set a dark background to an element.

@@ -302,4 +304,18 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<h5 class="mrgn-tp-md">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>
+</div> + +

bg-light

+

Set a light background to an element.

+

Working example

+
+
Heading
+

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.

+
+ +

Code sample

+
<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>
diff --git a/common/colour/colour-fr.html b/common/colour/colour-fr.html index 323b3c19e4..7739ae05a3 100644 --- a/common/colour/colour-fr.html +++ b/common/colour/colour-fr.html @@ -8,6 +8,8 @@ } --- +
+

Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: bg-primary, text-center, text-white et d'autres.

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 (sm) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.

@@ -261,20 +263,20 @@

Exemple de code

<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> - </div> +</div> -

bg-gctheme

-

définir l'arrière-plan du gctheme

-

Exemple

-
-
Titre
-

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.

-
-

Exemple de code

- 
<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>
+

bg-gctheme

+

définir l'arrière-plan du gctheme

+

Exemple

+
+
Titre
+

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.

+
+

Exemple de code

+
<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>

bg-darker

Définissez un arrière-plan noir sur un élément.

@@ -288,7 +290,7 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<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>
+</div>

bg-dark

Définissez un arrière-plan sombre sur un élément.

@@ -302,4 +304,18 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<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>
+</div> + +

bg-light

+

Définissez un arrière-plan pâle sur un élément.

+

Exemple

+
+
Titre
+

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.

+
+ +

Exemple de code

+
<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>
diff --git a/common/list/_lists.scss b/common/list/_lists.scss index f4b2a202b5..9d66520acc 100644 --- a/common/list/_lists.scss +++ b/common/list/_lists.scss @@ -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; + } +} diff --git a/common/list/lists-en.html b/common/list/lists-en.html index 0963b25895..86dafd5239 100644 --- a/common/list/lists-en.html +++ b/common/list/lists-en.html @@ -408,3 +408,16 @@

Inline description list

<dt>Term :</dt> <dd>Short description</dd> </dl> + +

List with compact utility class.

+ diff --git a/common/list/lists-fr.html b/common/list/lists-fr.html index b41618d241..9a29abe940 100644 --- a/common/list/lists-fr.html +++ b/common/list/lists-fr.html @@ -411,3 +411,16 @@

Liste descriptive en ligne

<dt>Terme :</dt> <dd>Description courte</dd> </dl> + +

Liste avec classe utilitaire compact.

+ diff --git a/common/spacing/_base.scss b/common/spacing/_base.scss new file mode 100644 index 0000000000..c87f23aa8b --- /dev/null +++ b/common/spacing/_base.scss @@ -0,0 +1,70 @@ +/* + * + * @title: Spacing + * + */ + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-#{$size}, + .#{$abbrev}y-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-#{$size}, + .#{$abbrev}x-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-#{$size}, + .#{$abbrev}y-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-#{$size}, + .#{$abbrev}x-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +/* + * TODO TODO TODO + * The following styles will need to be removed in WET-BOEW: + * .p-0, .pl-2, .px-2, .pr-2, .px-2, .pt-4, .py-4, .pb-4, .py-4, .mt-auto + * TODO TODO TODO +*/ + +// Auto margins +.m-auto { margin: auto !important; } +.mt-auto, +.my-auto { + margin-top: auto !important; +} +.mr-auto, +.mx-auto { + margin-right: auto !important; +} +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} +.ml-auto, +.mx-auto { + margin-left: auto !important; +} + +// Legacy utility classes +.margin-bottom-none { + margin-bottom: 0; +} + +.margin-bottom-small { + margin-bottom: .25em; +} + +.margin-top-large { + margin-top: 1.5em; +} + +.margin-top-medium { + margin-top: .75em; +} diff --git a/common/spacing/_screen-lg-min.scss b/common/spacing/_screen-lg-min.scss new file mode 100644 index 0000000000..8f0427b482 --- /dev/null +++ b/common/spacing/_screen-lg-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-lg-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-lg-#{$size}, + .#{$abbrev}y-lg-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-lg-#{$size}, + .#{$abbrev}x-lg-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-lg-#{$size}, + .#{$abbrev}y-lg-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-lg-#{$size}, + .#{$abbrev}x-lg-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-lg-auto { margin: auto !important; } +.mt-lg-auto, +.my-lg-auto { + margin-top: auto !important; +} +.mr-lg-auto, +.mx-lg-auto { + margin-right: auto !important; +} +.mb-lg-auto, +.my-lg-auto { + margin-bottom: auto !important; +} +.ml-lg-auto, +.mx-lg-auto { + margin-left: auto !important; +} diff --git a/common/spacing/_screen-md-min.scss b/common/spacing/_screen-md-min.scss new file mode 100644 index 0000000000..2f26ba3a6d --- /dev/null +++ b/common/spacing/_screen-md-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-md-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-md-#{$size}, + .#{$abbrev}y-md-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-md-#{$size}, + .#{$abbrev}x-md-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-md-#{$size}, + .#{$abbrev}y-md-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-md-#{$size}, + .#{$abbrev}x-md-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-md-auto { margin: auto !important; } +.mt-md-auto, +.my-md-auto { + margin-top: auto !important; +} +.mr-md-auto, +.mx-md-auto { + margin-right: auto !important; +} +.mb-md-auto, +.my-md-auto { + margin-bottom: auto !important; +} +.ml-md-auto, +.mx-md-auto { + margin-left: auto !important; +} diff --git a/common/spacing/_screen-sm-min.scss b/common/spacing/_screen-sm-min.scss new file mode 100644 index 0000000000..47764f2cd2 --- /dev/null +++ b/common/spacing/_screen-sm-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-sm-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-sm-#{$size}, + .#{$abbrev}y-sm-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-sm-#{$size}, + .#{$abbrev}x-sm-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-sm-#{$size}, + .#{$abbrev}y-sm-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-sm-#{$size}, + .#{$abbrev}x-sm-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-sm-auto { margin: auto !important; } +.mt-sm-auto, +.my-sm-auto { + margin-top: auto !important; +} +.mr-sm-auto, +.mx-sm-auto { + margin-right: auto !important; +} +.mb-sm-auto, +.my-sm-auto { + margin-bottom: auto !important; +} +.ml-sm-auto, +.mx-sm-auto { + margin-left: auto !important; +} diff --git a/common/spacing/index.json-ld b/common/spacing/index.json-ld new file mode 100644 index 0000000000..62e9c8df6c --- /dev/null +++ b/common/spacing/index.json-ld @@ -0,0 +1,34 @@ +{ + "@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" + } + ] + } +} diff --git a/common/spacing/spacing-en.html b/common/spacing/spacing-en.html new file mode 100644 index 0000000000..e70a5e4cb9 --- /dev/null +++ b/common/spacing/spacing-en.html @@ -0,0 +1,120 @@ +--- +{ + "title": "Spacing", + "language": "en", + "altLangPage": "spacing-fr.html", + "description": "Utility classes to add spacing between elements.", + "dateModified": "2024-11-22" +} +--- + +
+ +

Utility classes to add spacing between elements.

+ +

This page showcases wet-boew utility features including some integration from Bootstrap 4.

+

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

+ +

How it works

+

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

+ +

Notation

+

Spacing utilities that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

+

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, and lg.

+

Where property is one of:

+
    +
  • m - for classes that set margin
    • +
  • p - for classes that set padding
    • +
+

Where sides is one of:

+
    +
  • t - for classes that set margin-top or padding-top
    • +
  • b - for classes that set margin-bottom or padding-bottom
    • +
  • l - for classes that set margin-left or padding-left
    • +
  • r - for classes that set margin-right or padding-right
    • +
  • x - for classes that set both *-left and *-right
    • +
  • y - for classes that set both *-top and *-bottom
    • +
  • blank - for classes that set a margin or padding on all 4 sides of the element
    • +
+

Where size is one of:

+
    +
  • 0 - for classes that eliminate the margin or padding by setting it to 0
    • +
  • 1 - for classes that set the margin or padding to 5px
    • +
  • 2 - for classes that set the margin or padding to 10px
    • +
  • 3 - for classes that set the margin or padding to 20px
    • +
  • 4 - for classes that set the margin or padding to 30px
    • +
  • 5 - for classes that set the margin or padding to 60px
    • +
  • auto - for classes that set the margin to auto
    • +
+ +

Some working examples

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
+

Lorem ipsum dolor sit amet.

+
+ +

Code sample

+
<p class="bg-primary mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary px-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary mt-sm-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<div class="d-flex">
+	<div class="col-xs-6 mx-auto"><p class="bg-primary">Lorem ipsum dolor sit amet.</p></div>
+</div>
+ +

Additional spacing classes

+

mrgn-{position}-{size}

+

Where position is one of:

+
    +
  • tp - for classes that set margin-top
    • +
  • lft - for classes that set margin-left
    • +
  • rght - for classes that set margin-right
    • +
  • bttm - for classes that set margin-bottom
    • +
+

Where size is one of:

+
    +
  • 0 - for classes that set a margin of 0px
    • +
  • sm - for classes that set a margin of 5px
    • +
  • md - for classes that set a margin of 15px
    • +
  • lg - for classes that set a margin of 30px
    • +
  • xl - for classes that set a margin of 50px
    • +
+

Some working examples

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+
Code sample
+
<p class="bg-primary mrgn-tp-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-lft-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-bttm-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-rght-xl mrgn-bttm-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+ +

margin-bottom-none

+

Removes bottom margin.

+

Working example

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Code sample
+
<p class="margin-bottom-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-bottom-small

+

Adds a bottom margin of .25em.

+

Working example

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Code sample
+
<p class="margin-bottom-small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-top-medium

+

Adds a top margin of .75em.

+

Working example

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Code sample
+
<p class="margin-top-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-top-large

+

Adds a top margin of 1.5em.

+

Working example

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Code sample
+
<p class="margin-top-large">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
diff --git a/common/spacing/spacing-fr.html b/common/spacing/spacing-fr.html new file mode 100644 index 0000000000..e9f015b25f --- /dev/null +++ b/common/spacing/spacing-fr.html @@ -0,0 +1,120 @@ +--- +{ +"title": "Spacing", +"language": "fr", +"altLangPage": "spacing-en.html", +"description": "Classes utilitaires pour ajouter de l'espacement entre des éléments.", +"dateModified": "2024-11-22" +} +--- + +
+ +

Classes utilitaires pour ajouter de l'espacement entre les éléments.

+ +

Cette page présente les fonctionnalités utilitaires de wet-boew, y compris certaines intégrations de Bootstrap 4.

+

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 d'une vue de petite taille (sm) est de 768 px dans Bootstrap 3.4, contre 576 px dans Bootstrap 4.

+ +

Comment ça marche

+

Attribuez des valeurs de marge ou de remplissage adaptées à la réactivité à un élément ou à un sous-ensemble de ses côtés avec des classes abrégées. Inclut la prise en charge des propriétés individuelles, de toutes les propriétés et des propriétés verticales et horizontales.

+ +

Notation

+

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs à lg, n'ont pas d'abréviation de point d'arrêt. Cela est dû au fait que ces classes sont appliquées à partir de min-width: 0 et plus, et ne sont donc pas liées par une requête média. Les points d'arrêt restants incluent cependant une abréviation de point d'arrêt.

+

Les classes sont nommées selon le format {propriété}{côtés}-{grosseur} pour xs et {propriété}{côtés}-{point d'arrêt}-{grosseur} pour sm, md et lg.

+

Où propriété est l'un des éléments suivants :

+
    +
  • m - pour les classes qui définissent la margin
    • +
  • p - pour les classes qui définissent le padding
    • +
+

Où côtés est l'un des éléments suivants :

+
    +
  • t - pour les classes qui définissent margin-top ou padding-top
    • +
  • b - pour les classes qui définissent margin-bottom ou padding-bottom
    • +
  • l - pour les classes qui définissent margin-left ou padding-left
    • +
  • r - pour les classes qui définissent margin-right ou padding-right
    • +
  • x - pour les classes qui définissent à la fois *-left et *-right
    • +
  • y - pour les classes qui définissent à la fois *-top et *-bottom
    • +
  • blank - pour les classes qui définissent une margin ou padding sur les 4 côtés de l'élément
    • +
+

Où grosseur est l'une des valeurs suivantes :

+
    +
  • 0 - pour les classes qui éliminent la margin ou le padding en le définissant sur 0
    • +
  • 1 - pour les classes qui définissent le margin ou le padding à 5px
    • +
  • 2 - pour les classes qui définissent le margin ou le padding à 10px
    • +
  • 3 - pour les classes qui définissent le margin ou le padding à 20px
    • +
  • 4 - pour les classes qui définissez le margin ou le padding à 30px
    • +
  • 5 - pour les classes qui définissent le margin ou le padding à 60px
    • +
  • auto - pour les classes qui définissent la marge à auto
    • +
+ +

Quelques exemples fonctionnels

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
+

Lorem ipsum dolor sit amet.

+
+ +

Exemple de code

+
<p class="bg-primary mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary px-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary mt-sm-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<div class="d-flex">
+	<div class="col-xs-6 mx-auto"><p class="bg-primary">Lorem ipsum dolor sit amet.</p></div>
+</div>
+ +

Classes d'espacement additionnelles

+

mrgn-{position}-{grosseur}

+

Où position est l'une des suivantes :

+
    +
  • tp - pour les classes qui définissent margin-top
    • +
  • lft - pour les classes qui définissent margin-left
    • +
  • rght - pour les classes qui définissent margin-right
    • +
  • bttm - pour les classes qui définissent margin-bottom
    • +
+

Où grosseur est l'une des suivantes :

+
    +
  • 0 - pour les classes qui définissent une marge de 0px
    • +
  • sm - pour les classes qui définissent une marge de 5px
    • +
  • md - pour les classes qui définissent une marge de 15px
    • +
  • lg - pour les classes qui définissent une marge de 30px
    • +
  • xl - pour les classes qui définissent une marge de 50px
    • +
+

Quelques exemples pratiques

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hein ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hein ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?

+
Exemple de code
+
<p class="bg-primary mrgn-tp-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-lft-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-bttm-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-rght-xl mrgn-bttm-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+ +

margin-bottom-none

+

Retire la marge du bas.

+

Exemple pratique

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Exemple de code
+
<p class="margin-bottom-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-bottom-small

+

Ajoute une marge en bas de .25em.

+

Exemple pratique

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Exemple de code
+
<p class="margin-bottom-small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-top-medium

+

Ajoute une marge en haut de .75em.

+

Exemple pratique

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Exemple de code
+
<p class="margin-top-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+ +

margin-top-large

+

Ajoute une marge en haut de 1.5em.

+

Exemple pratique

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
Exemple de code
+
<p class="margin-top-large">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
diff --git a/common/text-level-modifiers/_base.scss b/common/text-level-modifiers/_base.scss new file mode 100644 index 0000000000..d057dd8896 --- /dev/null +++ b/common/text-level-modifiers/_base.scss @@ -0,0 +1,10 @@ +/* + * + * @title: Text-level modifiers + * + */ + +// Font heading +.fnt-hdng { + @include defaults-alternative-font-family(); +} diff --git a/common/text-level-modifiers/text-level-modifiers-en.html b/common/text-level-modifiers/text-level-modifiers-en.html index e0f757d955..fc71ce7894 100644 --- a/common/text-level-modifiers/text-level-modifiers-en.html +++ b/common/text-level-modifiers/text-level-modifiers-en.html @@ -58,6 +58,11 @@

.fnt-nrml

The following element has a normal [font-weight].

<p>The following element has a normal <strong class="fnt-nrml">[font-weight]</strong>.</p>
+

.fnt-hdng

+

Changes the font-family to the one used for headings.

+

This paragraph uses the font for headings.

+
<p class="fnt-hdng">This paragraph uses the font for headings.</p>
+

.text-*

Can be used to align text or change its case.

diff --git a/common/text-level-modifiers/text-level-modifiers-fr.html b/common/text-level-modifiers/text-level-modifiers-fr.html index a344c1875e..63617dd37b 100644 --- a/common/text-level-modifiers/text-level-modifiers-fr.html +++ b/common/text-level-modifiers/text-level-modifiers-fr.html @@ -58,6 +58,11 @@

.fnt-nrml

L'élément suivant a un [font-weight] normal.

<p>L'élément suivant a un <strong class="fnt-nrml">[font-weight]</strong> normal.</p>
+

.fnt-hdng

+

Change le font-family pour celui utilisé pour les titres.

+

Ce paragraphe utilise la police pour les titres.

+
<p class="fnt-hdng">Ce paragraphe utilise la police pour les titres.</p>
+

.text-*

Peut être utilisé pour aligner du texte ou modifier sa casse.

diff --git a/sites/_variables.scss b/sites/_variables.scss index edcc7c4d1d..3e085c72a9 100644 --- a/sites/_variables.scss +++ b/sites/_variables.scss @@ -76,4 +76,18 @@ $space-md: 15px; $input-color-placeholder: #5c5c5c !important; +// Spacers +$spacer: 20px; +$spacers: () !default; +$spacers: map-merge( + ( + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) + ), $spacers +); + @import "wet-boew/src/variables"; diff --git a/sites/helpers/_base.scss b/sites/helpers/_base.scss deleted file mode 100644 index 89dc20de5d..0000000000 --- a/sites/helpers/_base.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Helper Classes - */ - -.margin-bottom-none { - margin-bottom: 0; -} - -.margin-bottom-small { - margin-bottom: .25em; -} - -.margin-top-large { - margin-top: 1.5em; -} - -.margin-top-medium { - margin-top: .75em; -} diff --git a/sites/theme.scss b/sites/theme.scss index c3aa3bbe4f..a14cdcca37 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -208,13 +208,15 @@ /*! Core - Utilities */ -@import "helpers/base"; @import "bootstrap-sass/assets/stylesheets/bootstrap/utilities"; @import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; @import "wet-boew/src/base/accessibility/utilities"; @import "wet-boew/src/base/proximity/base"; @import "wet-boew/src/base/bootstrap-4"; @import "wet-boew/src/base/component"; +@import "../common/text-level-modifiers/base"; +@import "../common/colour/colours"; +@import "../common/spacing/base"; /* @@ -315,6 +317,7 @@ @import "wet-boew/src/base/proximity/screen-sm-min"; @import "wet-boew/src/base/views/_bootstrap-4-screen-sm-min"; + @import "../common/spacing/screen-sm-min"; } /* Medium view and over */ @@ -333,6 +336,7 @@ @import "../components/gc-most-requested/screen-md-min"; @import "wet-boew/src/base/proximity/screen-md-min"; + @import "../common/spacing/screen-md-min"; } /* Large view and over */ @@ -346,6 +350,7 @@ @import "../components/equalheight/screen-lg-min"; @import "wet-boew/src/base/proximity/screen-lg-min"; + @import "../common/spacing/screen-lg-min"; } /* Extra-extra-small view */ diff --git a/templates/all-services/all-services-doc-en.html b/templates/all-services/all-services-doc-en.html new file mode 100644 index 0000000000..73166a30e5 --- /dev/null +++ b/templates/all-services/all-services-doc-en.html @@ -0,0 +1,9 @@ +--- +title: All services +description: Documentation for the all services page template. +language: en +altLangPage: all-services-doc-fr.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-doc-fr.html b/templates/all-services/all-services-doc-fr.html new file mode 100644 index 0000000000..4c8042cacd --- /dev/null +++ b/templates/all-services/all-services-doc-fr.html @@ -0,0 +1,9 @@ +--- +title: Tous les services +description: Documentation du gabarit de page de tous les services. +language: fr +altLangPage: all-services-doc-en.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-en.html b/templates/all-services/all-services-en.html new file mode 100644 index 0000000000..247b67e216 --- /dev/null +++ b/templates/all-services/all-services-en.html @@ -0,0 +1,814 @@ +--- +{ +"title": "Government of Canada services", +"language": "en", +"altLangPage": "all-services-fr.html", +"dateModified": "2024-11-21", +"layout": "no-container", +"css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + + + +
Skip to Access services by topic
+ +
+

Government of Canada services

+
+ +
+
+

Top searches

+ +
+
+ +
+
+

Most requested services

+ +
+
+ +
+
+

Supporting you through life's transitions

+ +
+
+ +
+

Access services by topic

+ +
+
+ +

Immigration and citizenship

+ +
+
+

Information on

+
+
+ +
+
+
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Taxes

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Jobs

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Travel and tourism

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Benefits

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Environment and natural resources

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Business and industry

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Health

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Money and finances

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Canada and the world

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Youth

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Indigenous Peoples

+ +
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Culture, history and sport

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

National security and defence

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Veterans and military

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Transport and infrastructure

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Policing, justice and emergencies

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
+
+ +

Science and innovation

+ +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+
diff --git a/templates/all-services/all-services-fr.html b/templates/all-services/all-services-fr.html new file mode 100644 index 0000000000..2d608ca462 --- /dev/null +++ b/templates/all-services/all-services-fr.html @@ -0,0 +1,819 @@ +--- +{ +"title": "Services du government du Canada", +"language": "fr", +"altLangPage": "all-services-en.html", +"dateModified": "2024-11-21", +"layout": "no-container", +"css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + + + +
Passer à Accéder aux services par thème
+ +
+

Services du government du Canada

+
+ +
+
+

Recherches les plus populaires

+ +
+
+ +
+
+

Services les plus demandés

+ +
+
+ +
+
+

Vous accompagner dans les transitions de la vie

+ +
+
+ +
+

Accéder aux services par thème

+ +
+
+ +

Immigration et citoyenneté

+ +
+
+

Information sur

+
+
+ +
+
+
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Impôts

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Emplois

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Voyage et tourisme

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Prestations

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Environnement et ressources naturelles

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Entreprises et industrie

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Santé

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Argent et finances

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Le Canada et le monde

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Jeunesse

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Autochtones

+ +
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Culture, histoire et sport

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Sécurité nationale et défense

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Vétérans et militaires

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Transport et infrastructure

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Services de police, justice et urgences

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+ +
+
+ +

Science et innovation

+ +
+
+

En demande

+
+
+ +
+
+
+
+

Plus de sujets

+
+
+ +
+
+
+
+
diff --git a/templates/all-services/index.json-ld b/templates/all-services/index.json-ld new file mode 100644 index 0000000000..5eff5e4fef --- /dev/null +++ b/templates/all-services/index.json-ld @@ -0,0 +1,131 @@ +{ + "@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
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

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
elements for all goc themes and topics" + ] + } + ] +}