Skip to content

Commit 63cdb4d

Browse files
RicokolaRicokola
committed
WET-321 - Create test page for: Badges and Panels
1 parent bb2289f commit 63cdb4d

File tree

6 files changed

+460
-0
lines changed

6 files changed

+460
-0
lines changed

‎components/Panels/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": "Panels",
11+
"fr": "Panneaux"
12+
},
13+
"description": {
14+
"en": "Panels including all various states.",
15+
"fr": "Panneaux comprenant tous les différents états."
16+
},
17+
"modified": "2025-09-17",
18+
"componentName": "panels",
19+
"processing": "baseline",
20+
"status": "stable",
21+
"pages": {
22+
"examples": [
23+
{
24+
"title": "Panels",
25+
"language": "en",
26+
"path": "panels-en.html"
27+
},
28+
{
29+
"title": "Panneaux",
30+
"language": "fr",
31+
"path": "panels-fr.html"
32+
}
33+
]
34+
}
35+
}

‎components/Panels/panels-en.html‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
---
2+
{
3+
"title": "Panels",
4+
"language": "en",
5+
"altLangPage": "panels-fr.html",
6+
"description": "Working examples of WET-BOEW Panels component",
7+
"dateModified": "2025-09-17"
8+
}
9+
---
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<h2>Stacking options</h2>
13+
<p>Use to create various container types. A panel can be broken up into a <code>.panel</code>, <code>.panel-heading</code>, <code>.panel-title</code>, <code>panel-body</code> and <code>.panel-footer</code>. Only the <code>.panel</code> is required. All the rest are optional.</p>
14+
15+
<div class="row">
16+
<div class="col-sm-6 col-lg-3">
17+
<p>Padded content:</p>
18+
<div class="panel panel-default">
19+
<div class="panel-body">
20+
<p>Content</p>
21+
</div>
22+
</div>
23+
</div>
24+
<div class="col-sm-6 col-lg-3">
25+
<p>Full-width content:</p>
26+
<div class="panel panel-default">
27+
<table class="table">
28+
<caption class="wb-inv">Caption text</caption>
29+
<thead>
30+
<tr>
31+
<th>Table header</th>
32+
<th>Table header</th>
33+
</tr>
34+
</thead>
35+
<tbody>
36+
<tr>
37+
<td>Table data</td>
38+
<td>Table data</td>
39+
</tr>
40+
<tr>
41+
<td>Table data</td>
42+
<td>Table data</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
</div>
47+
</div>
48+
<div class="col-sm-6 col-lg-3">
49+
<p>Padded plus full-width content:</p>
50+
<div class="panel panel-default">
51+
<div class="panel-body">
52+
<p>Content</p>
53+
</div>
54+
<table class="table">
55+
<caption class="wb-inv">
56+
Caption text
57+
</caption>
58+
<thead>
59+
<tr>
60+
<th>Table header</th>
61+
<th>Table header</th>
62+
</tr>
63+
</thead>
64+
<tbody>
65+
<tr>
66+
<td>Table data</td>
67+
<td>Table data</td>
68+
</tr>
69+
<tr>
70+
<td>Table data</td>
71+
<td>Table data</td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
</div>
76+
</div>
77+
<div class="col-sm-6 col-lg-3">
78+
<p>Add a heading and/or footer:</p>
79+
<div class="panel panel-default">
80+
<header class="panel-heading">
81+
<h5 class="panel-title">Panel title</h5>
82+
</header>
83+
<div class="panel-body">
84+
<p>Content</p>
85+
</div>
86+
<footer class="panel-footer">Panel footer</footer>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<h3>Source code</h3>
92+
<dl>
93+
<dt>Padded content:</dt>
94+
<dd><pre><code>&lt;div class="panel panel-default"&gt;
95+
&lt;div class="panel-body"&gt;
96+
&lt;p&gt;Content&lt;/p&gt;
97+
&lt;/div&gt;
98+
&lt;/div&gt;</code></pre></dd>
99+
<dt>Full-width content:</dt>
100+
<dd><pre><code>&lt;div class="panel panel-default"&gt;
101+
&lt;table class="table"&gt;
102+
&lt;caption class="wb-inv"&gt;Caption text&lt;/caption&gt;
103+
&lt;thead&gt;
104+
&lt;tr&gt;
105+
&lt;th&gt;Table header&lt;/th&gt;
106+
&lt;th&gt;Table header&lt;/th&gt;
107+
&lt;/tr&gt;
108+
&lt;/thead&gt;
109+
&lt;tbody&gt;
110+
&lt;tr&gt;
111+
&lt;td&gt;Table data&lt;/td&gt;
112+
&lt;td&gt;Table data&lt;/td&gt;
113+
&lt;/tr&gt;
114+
&lt;tr&gt;
115+
&lt;td&gt;Table data&lt;/td&gt;
116+
&lt;td&gt;Table data&lt;/td&gt;
117+
&lt;/tr&gt;
118+
&lt;/tbody&gt;
119+
&lt;/table&gt;
120+
&lt;/div&gt;</code></pre></dd>
121+
<dt>Padded plus full-width content:</dt>
122+
<dd><pre><code>&lt;div class="panel panel-default"&gt;
123+
&lt;div class="panel-body"&gt;
124+
&lt;p&gt;Content&lt;/p&gt;
125+
&lt;/div&gt;
126+
&lt;table class="table"&gt;
127+
&lt;caption class="wb-inv"&gt;
128+
Caption text
129+
&lt;/caption&gt;
130+
&lt;thead&gt;
131+
&lt;tr&gt;
132+
&lt;th&gt;Table header&lt;/th&gt;
133+
&lt;th&gt;Table header&lt;/th&gt;
134+
&lt;/tr&gt;
135+
&lt;/thead&gt;
136+
&lt;tbody&gt;
137+
&lt;tr&gt;
138+
&lt;td&gt;Table data&lt;/td&gt;
139+
&lt;td&gt;Table data&lt;/td&gt;
140+
&lt;/tr&gt;
141+
&lt;tr&gt;
142+
&lt;td&gt;Table data&lt;/td&gt;
143+
&lt;td&gt;Table data&lt;/td&gt;
144+
&lt;/tr&gt;
145+
&lt;/tbody&gt;
146+
&lt;/table&gt;
147+
&lt;/div&gt;</code></pre></dd>
148+
<dt>Add a heading and/or footer:</dt>
149+
<dd><pre><code>&lt;div class="panel panel-default"&gt;
150+
&lt;header class="panel-heading"&gt;
151+
&lt;h5 class="panel-title"&gt;Panel title&lt;/h5&gt;
152+
&lt;/header&gt;
153+
&lt;div class="panel-body"&gt;
154+
&lt;p&gt;Content&lt;/p&gt;
155+
&lt;/div&gt;
156+
&lt;footer class="panel-footer"&gt;Panel footer&lt;/footer&gt;
157+
&lt;/div&gt;</code></pre></dd>
158+
</dl>
159+
160+
<h2>Panel appearences</h2>
161+
<dl>
162+
<dt>Default panel</dt>
163+
<dd><p>Use to spotlight general information/actions within a self-contained box.</p>
164+
<section class="panel panel-default mrgn-bttm-0">
165+
<header class="panel-heading">
166+
<h5 class="panel-title">Panel title </h5>
167+
</header>
168+
<div class="panel-body">
169+
<p>Panel content</p>
170+
</div>
171+
</section>
172+
</dd>
173+
<dt>Primary panel</dt>
174+
<dd><p>Use to spotlight general information/actions within a self-contained box.</p>
175+
<section class="panel panel-primary mrgn-bttm-0">
176+
<header class="panel-heading">
177+
<h5 class="panel-title">Panel title </h5>
178+
</header>
179+
<div class="panel-body">
180+
<p>Panel content</p>
181+
</div>
182+
</section>
183+
</dd>
184+
<dt>Success panel</dt>
185+
<dd><p>Use to spotlight correct information/actions within a self-contained box.</p>
186+
<section class="panel panel-success mrgn-bttm-0">
187+
<header class="panel-heading">
188+
<h5 class="panel-title">Panel title </h5>
189+
</header>
190+
<div class="panel-body">
191+
<p>Panel content</p>
192+
</div>
193+
</section>
194+
</dd>
195+
<dt>Info panel</dt>
196+
<dd><p>Use to spotlight specialized information/actions within a self-contained box.</p>
197+
<section class="panel panel-info mrgn-bttm-0">
198+
<header class="panel-heading">
199+
<h5 class="panel-title">Panel title </h5>
200+
</header>
201+
<div class="panel-body">
202+
<p>Panel content</p>
203+
</div>
204+
</section>
205+
</dd>
206+
<dt>Warning panel</dt>
207+
<dd><p>Use to spotlight warning information/actions within a self-contained box.</p>
208+
<section class="panel panel-warning mrgn-bttm-0">
209+
<header class="panel-heading">
210+
<h5 class="panel-title">Panel title </h5>
211+
</header>
212+
<div class="panel-body">
213+
<p>Panel content</p>
214+
</div>
215+
</section>
216+
</dd>
217+
<dt>Danger panel</dt>
218+
<dd><p>Use to spotlight dangerous information/actions within a self-contained box.</p>
219+
<section class="panel panel-danger mrgn-bttm-0">
220+
<header class="panel-heading">
221+
<h5 class="panel-title">Panel title </h5>
222+
</header>
223+
<div class="panel-body">
224+
<p>Panel content</p>
225+
</div>
226+
</section>
227+
</dd>
228+
</dl>
229+
230+
<h3>Source code</h3>
231+
<pre><code></code></pre>
232+
233+
<h2>Reference</h2>
234+
<p><a href="https://wet-boew.github.io/wet-boew-styleguide/design/panels-en">Web Experience Toolkit Style Guide - Panels</a></p>

‎components/Panels/panels-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/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>

0 commit comments

Comments
 (0)