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 committed Nov 25, 2024
1 parent cfe811c commit fd77a1c
Show file tree
Hide file tree
Showing 22 changed files with 2,307 additions and 17 deletions.
34 changes: 34 additions & 0 deletions _data/common.json
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
128 changes: 128 additions & 0 deletions _data/templates.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,134 @@
]
}
}
,{
"@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": "Topic page",
"status": "stable",
"baseOnIteration": "_:iteration_allservices_1",
"detectableBy": "By the sequence of elements.",
"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
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
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
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>
10 changes: 10 additions & 0 deletions common/list/_lists.scss
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,13 @@ 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.small {
li {
line-height: 1.5em;
}
}
13 changes: 13 additions & 0 deletions common/list/lists-en.html
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="small">List with <code>small</code> utility class.</h2>
<ul class="small">
<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
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="small">Liste avec classe utilitaire <code>small</code>.</h2>
<ul class="small">
<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>
46 changes: 46 additions & 0 deletions common/spacing/_base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
*
* @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;
}
}
}

// 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;
}
Loading

0 comments on commit fd77a1c

Please sign in to comment.