Skip to content

Commit 3c28bfc

Browse files
RicokolaRicokola
committed
Content - Glyphicons - Addition of working examples to GCWeb components (#2175)
1 parent 0a70f99 commit 3c28bfc

File tree

9 files changed

+2124
-0
lines changed

9 files changed

+2124
-0
lines changed

‎components/badges/badges-en.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
{
3+
"title": "Badges",
4+
"language": "en",
5+
"altLangPage": "badges-fr.html",
6+
"description": "Working examples of WET-BOEW Badges component",
7+
"dateModified": "2025-09-17"
8+
}
9+
---
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<h2>Purpose</h2>
13+
<p>Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.</p>
14+
15+
<h2>Default</h2>
16+
<p>Use to highlight new or updated items with a simple grey numeric, or blue button-like badge.</p>
17+
<dl>
18+
<dt>Grey badge:</dt>
19+
<dd><p><a href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p></dd>
20+
<dt>Blue button-like badge:</dt>
21+
<dd><p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p></dd>
22+
</dl>
23+
24+
<h3>Source code</h3>
25+
<pre><code>&lt;dl&gt;
26+
&lt;dt&gt;Grey badge:&lt;dt&gt;
27+
&lt;dd&gt;&lt;p&gt;&lt;a href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
28+
&lt;dt&gt;Blue button-like badge:&lt;dt&gt;
29+
&lt;dd&gt;&lt;p&gt;&lt;a class="btn btn-primary" href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
30+
&lt;/dl&gt;</code></pre>
31+
32+
<h2>Self collapsing badges</h2>
33+
<p>Use when there are no new or unread items. Badges simply collapse (via <abbr title="cascading style sheet">CSS</abbr> <code>:empty</code> selector). </p>
34+
35+
<section class="alert alert-warning">
36+
<h3>Cross-browser compatibility</h3>
37+
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
38+
</section>
39+
40+
<dl>
41+
<dt>No content inside badge:</dt>
42+
<dd><p><a href="#">Inbox <span class="badge"></span></a></p></dd>
43+
</dl>
44+
45+
<h3>Source code</h3>
46+
<pre><code>&lt;dl&gt;
47+
&lt;dt&gt;No content inside badge&lt;dt&gt;
48+
&lt;dd&gt;&lt;p&gt;&lt;a href="#"&gt;Inbox &lt;span class="badge"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
49+
&lt;/dl&gt;</code></pre>
50+
51+
<h2>Reference</h2>
52+
<p><a href="https://wet-boew.github.io/wet-boew-styleguide/design/badges-en">Web Experience Toolkit Style Guide - Badges</a></p>

‎components/badges/badges-fr.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
{
3+
"title": "Badges",
4+
"language": "fr",
5+
"altLangPage": "badges-fr.html",
6+
"description": "Exemples pratiques de la composante Badges de la BOEW-WET",
7+
"dateModified": "2025-09-17"
8+
}
9+
---
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<h2>Usage</h2>
13+
<p>Utilisez les badges (indicateurs numériques) afin de souligner le nombre de mises à jour, d'éléments nouveaux ou non lus associés à un lien.</p>
14+
15+
<h2>Valeur par défaut</h2>
16+
<p>Utiliser pour souligner des éléments nouveaux ou à jour avec un badge numérique simple gris ou bleu en forme de bouton.</p>
17+
<dl>
18+
<dt>Badge gris :</dt>
19+
<dd><p><a href="#">Boîte de réception <span class="badge">42<span class="wb-inv"> courriels non lus</span></span></a></p></dd>
20+
<dt>Badge bleu sous forme de bouton :</dt>
21+
<dd><p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p></dd>
22+
</dl>
23+
24+
<h3>Source code</h3>
25+
<pre><code>&lt;dl&gt;
26+
&lt;dt&gt;Badge gris :&lt;dt&gt;
27+
&lt;dd&gt;&lt;p&gt;&lt;a href="#"&gt;Boîte de réception &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; courriels non lus&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
28+
&lt;dt&gt;Blue button-like badge&lt;dt&gt;
29+
&lt;dd&gt;&lt;p&gt;&lt;a class="btn btn-primary" href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
30+
&lt;/dl&gt;</code></pre>
31+
32+
<h2>Badges qui se réduisent seuls</h2>
33+
<p>Utilisez-les lorsqu'il n'y a aucun élément nouveau ou non lu. Les badges se réduisent simplement (au moyen du <code>sélecteur empty</code> du <abbr title="feuille de style en cascade">CSS</abbr>).</p>
34+
35+
<section class="alert alert-warning">
36+
<h3>Compatibilité multinavigateur</h3>
37+
<p>Les badges ne se réduiront pas seuls dans Internet Explorer 8 parce qu'il manque de soutien pour le sélecteur <code>:empty</code>.</p>
38+
</section>
39+
40+
<dl>
41+
<dt>Aucun contenu à l'intérieur du badge :</dt>
42+
<dd><p><a href="#">Boîte de réception <span class="badge"></span></a></p></dd>
43+
</dl>
44+
45+
<h3>Source code</h3>
46+
<pre><code>&lt;dl&gt;
47+
&lt;dt&gt;Aucun contenu à l'intérieur du badge :&lt;dt&gt;
48+
&lt;dd&gt;&lt;p&gt;&lt;a href="#"&gt;... &lt;span class="badge"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt;
49+
&lt;/dl&gt;</code></pre>
50+
51+
<h2>Reference</h2>
52+
<p><a href="https://wet-boew.github.io/wet-boew-styleguide/design/badges-fr">Guide de style de la Boîte à outils de l'expérience Web - Badges</a></p>

‎components/badges/index.json-ld‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"@context": {
3+
"@version": 1.1,
4+
"dct": "http://purl.org/dc/terms/",
5+
"title": { "@id": "dct:title", "@container": "@language" },
6+
"description": { "@id": "dct:description", "@container": "@language" },
7+
"modified": "dct:modified"
8+
},
9+
"title": {
10+
"en": "Badges",
11+
"fr": "Badges"
12+
},
13+
"description": {
14+
"en": "Badges including all various states.",
15+
"fr": "Badges comprenant tous les différents états."
16+
},
17+
"modified": "2025-09-17",
18+
"componentName": "badges",
19+
"processing": "baseline",
20+
"status": "stable",
21+
"pages": {
22+
"examples": [
23+
{
24+
"title": "Badges",
25+
"language": "en",
26+
"path": "badges-en.html"
27+
},
28+
{
29+
"title": "Badges",
30+
"language": "fr",
31+
"path": "badges-fr.html"
32+
}
33+
]
34+
}
35+
}

0 commit comments

Comments
 (0)