desy-html 7.0.1 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/index.html
CHANGED
|
@@ -38,6 +38,10 @@
|
|
|
38
38
|
|
|
39
39
|
<h2>Changelog (English)</h2>
|
|
40
40
|
<p>What's new in the latest version of desy-html</p>
|
|
41
|
+
<h3>v.7.1.0</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Added class to Tabs to better display them inline with scroll if needed in mobile.</li>
|
|
44
|
+
</ul>
|
|
41
45
|
<h3>v.7.0.1</h3>
|
|
42
46
|
<ul class="text-sm">
|
|
43
47
|
<li>Accesibility and docs improvements.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "7.0
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Desy (SDA Servicios Digitales de Aragón)",
|
package/src/js/aria/tabs.js
CHANGED
|
@@ -278,13 +278,12 @@ export function tabs(aria) {
|
|
|
278
278
|
|
|
279
279
|
function addActiveClass(element) {
|
|
280
280
|
//Add active class to current tab
|
|
281
|
-
element.classList.add("
|
|
282
|
-
|
|
281
|
+
element.classList.add("c-tabs__link--is-active");
|
|
283
282
|
element.firstElementChild.classList.add("text-black");
|
|
284
283
|
}
|
|
285
284
|
|
|
286
285
|
function removeActiveClass(element) {
|
|
287
|
-
element.classList.remove("
|
|
286
|
+
element.classList.remove("c-tabs__link--is-active");
|
|
288
287
|
element.firstElementChild.classList.remove("text-black");
|
|
289
288
|
}
|
|
290
289
|
}
|
|
@@ -169,6 +169,198 @@
|
|
|
169
169
|
]
|
|
170
170
|
}
|
|
171
171
|
},
|
|
172
|
+
{
|
|
173
|
+
"name": "with many items",
|
|
174
|
+
"data": {
|
|
175
|
+
"tablistAriaLabel": "Tab example",
|
|
176
|
+
"idPrefix": "tab-example-many-items",
|
|
177
|
+
"items": [
|
|
178
|
+
{
|
|
179
|
+
"text": "Tab 1",
|
|
180
|
+
"panel": {
|
|
181
|
+
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"text": "Tab 2",
|
|
186
|
+
"panel": {
|
|
187
|
+
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"text": "Tab 3",
|
|
192
|
+
"panel": {
|
|
193
|
+
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"text": "Tab 4",
|
|
198
|
+
"panel": {
|
|
199
|
+
"html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"text": "Tab 5",
|
|
204
|
+
"panel": {
|
|
205
|
+
"html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"text": "Tab 6",
|
|
210
|
+
"panel": {
|
|
211
|
+
"html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"text": "Tab 7",
|
|
216
|
+
"panel": {
|
|
217
|
+
"html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"text": "Tab 8",
|
|
222
|
+
"panel": {
|
|
223
|
+
"html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"text": "Tab 9",
|
|
228
|
+
"panel": {
|
|
229
|
+
"html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"text": "Tab 10",
|
|
234
|
+
"panel": {
|
|
235
|
+
"html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"text": "Tab 11",
|
|
240
|
+
"panel": {
|
|
241
|
+
"html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"text": "Tab 12",
|
|
246
|
+
"panel": {
|
|
247
|
+
"html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
]
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "with scroll in mobile",
|
|
255
|
+
"description": "Using .c-tabs--scroll makes the mobile appearance to be the same as desktop. See it in action in small breakpoints.",
|
|
256
|
+
"data": {
|
|
257
|
+
"tablistAriaLabel": "Tab example",
|
|
258
|
+
"idPrefix": "tab-example-scroll-mobile",
|
|
259
|
+
"classes": "c-tabs--scroll",
|
|
260
|
+
"items": [
|
|
261
|
+
{
|
|
262
|
+
"text": "Tab 1",
|
|
263
|
+
"panel": {
|
|
264
|
+
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"text": "Tab 2",
|
|
269
|
+
"panel": {
|
|
270
|
+
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"text": "Tab 3",
|
|
275
|
+
"panel": {
|
|
276
|
+
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"text": "Tab 4",
|
|
281
|
+
"panel": {
|
|
282
|
+
"html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"text": "Tab 5",
|
|
287
|
+
"panel": {
|
|
288
|
+
"html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"text": "Tab 6",
|
|
293
|
+
"panel": {
|
|
294
|
+
"html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"text": "Tab 7",
|
|
299
|
+
"panel": {
|
|
300
|
+
"html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"text": "Tab 8",
|
|
305
|
+
"panel": {
|
|
306
|
+
"html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"text": "Tab 9",
|
|
311
|
+
"panel": {
|
|
312
|
+
"html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"text": "Tab 10",
|
|
317
|
+
"panel": {
|
|
318
|
+
"html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
319
|
+
}
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"text": "Tab 11",
|
|
323
|
+
"panel": {
|
|
324
|
+
"html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"text": "Tab 12",
|
|
329
|
+
"panel": {
|
|
330
|
+
"html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
]
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"name": "with html in tabs stacked",
|
|
338
|
+
"data": {
|
|
339
|
+
"tablistAriaLabel": "Tab example",
|
|
340
|
+
"idPrefix": "tab-example-html-stacked",
|
|
341
|
+
"classes": "c-tabs--scroll",
|
|
342
|
+
"items": [
|
|
343
|
+
{
|
|
344
|
+
"html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg><span class="block mx-auto">Tab 1</span></span>',
|
|
345
|
+
"panel": {
|
|
346
|
+
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg><span class="block mx-auto">Tab 2</span></span>',
|
|
351
|
+
"panel": {
|
|
352
|
+
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg><span class="block mx-auto">Tab 3</span></span>',
|
|
357
|
+
"panel": {
|
|
358
|
+
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
]
|
|
362
|
+
}
|
|
363
|
+
},
|
|
172
364
|
{
|
|
173
365
|
"name": "with classes applied",
|
|
174
366
|
"description": "Show code to display the classes applied in html",
|
|
@@ -3,8 +3,53 @@
|
|
|
3
3
|
========================================================================== */
|
|
4
4
|
|
|
5
5
|
@layer components {
|
|
6
|
-
.c-
|
|
7
|
-
@apply -mb-
|
|
6
|
+
.c-tabs__heading {
|
|
7
|
+
@apply lg:sr-only mb-sm text-sm;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.c-tabs__tabs {
|
|
11
|
+
@apply lg:relative lg:w-full lg:flex lg:snap-x lg:overflow-x-auto lg:-mb-0.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.c-tabs__link {
|
|
15
|
+
@apply relative flex-none flex items-center py-sm lg:px-lg lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent lg:snap-start;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.c-tabs__link--is-active {
|
|
19
|
+
@apply lg:bg-white lg:border-neutral-base lg:border-b-0 lg:rounded-t no-underline;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.c-tabs__panel {
|
|
23
|
+
@apply p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.c-tabs__panel-heading {
|
|
27
|
+
@apply lg:sr-only;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.c-tabs--scroll {
|
|
31
|
+
.c-tabs__heading {
|
|
32
|
+
@apply sr-only;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.c-tabs__tabs {
|
|
36
|
+
@apply relative w-full flex snap-x overflow-x-auto -mb-0.5;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.c-tabs__link {
|
|
40
|
+
@apply snap-start py-sm px-lg py-base border;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.c-tabs__link--is-active {
|
|
44
|
+
@apply bg-white border-neutral-base border-b-0 rounded-t no-underline;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.c-tabs__panel {
|
|
48
|
+
@apply mt-0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.c-tabs__panel-heading {
|
|
52
|
+
@apply sr-only;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
10
55
|
}
|
|
@@ -4,27 +4,28 @@
|
|
|
4
4
|
|
|
5
5
|
<!-- tabs -->
|
|
6
6
|
<div {%- if params.id %} id="{{params.id}}"{% endif %} class="c-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="c-tabs">
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
<div class="c-tabs__heading">
|
|
8
|
+
{% if params.headingLevel == "1" %}
|
|
9
|
+
<h1>{{ params.title | default ("Contenido") }}</h1>
|
|
10
|
+
{% elseif params.headingLevel == "2" %}
|
|
11
|
+
<h2>{{ params.title | default ("Contenido") }}</h2>
|
|
12
|
+
{% elseif params.headingLevel == "3" %}
|
|
13
|
+
<h3>{{ params.title | default ("Contenido") }}</h3>
|
|
14
|
+
{% elseif params.headingLevel == "4" %}
|
|
15
|
+
<h4>{{ params.title | default ("Contenido") }}</h4>
|
|
16
|
+
{% elseif params.headingLevel == "5" %}
|
|
17
|
+
<h5>{{ params.title | default ("Contenido") }}</h5>
|
|
18
|
+
{% else %}
|
|
19
|
+
<h2>{{ params.title | default ("Contenido") }}</h2>
|
|
20
|
+
{% endif %}
|
|
21
|
+
</div>
|
|
20
22
|
{% if(params.items | length) %}
|
|
21
|
-
<div class="c-
|
|
23
|
+
<div class="c-tabs__tabs" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
|
|
22
24
|
{% for item in params.items %}
|
|
23
25
|
{% if item %}
|
|
24
26
|
{% set id = item.id if item.id else idPrefix + "-" + loop.index %}
|
|
25
27
|
{% set tabPanelId = "tab-" + id %}
|
|
26
|
-
<button class="c-tabs__link group
|
|
27
|
-
{%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
|
|
28
|
+
<button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
|
|
28
29
|
role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
|
|
29
30
|
{%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
|
|
30
31
|
{%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
@@ -40,22 +41,24 @@
|
|
|
40
41
|
{% if item %}
|
|
41
42
|
{% set id = item.id if item.id else idPrefix + "-" + loop.index %}
|
|
42
43
|
{% set tabPanelId = "tab-" + id %}
|
|
43
|
-
<div class="
|
|
44
|
+
<div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
|
|
44
45
|
{%- if loop.index > 1 %} hidden=""{% endif %}
|
|
45
46
|
{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
47
|
+
<div class="c-tabs__panel-heading">
|
|
48
|
+
{% if params.headingLevel == "1" %}
|
|
49
|
+
<h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
|
|
50
|
+
{% elseif params.headingLevel == "2" %}
|
|
51
|
+
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
|
|
52
|
+
{% elseif params.headingLevel == "3" %}
|
|
53
|
+
<h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
|
|
54
|
+
{% elseif params.headingLevel == "4" %}
|
|
55
|
+
<h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
|
|
56
|
+
{% elseif params.headingLevel == "5" %}
|
|
57
|
+
<h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
|
|
58
|
+
{% else %}
|
|
59
|
+
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
|
|
60
|
+
{% endif %}
|
|
61
|
+
</div>
|
|
59
62
|
{% if item.panel.html %}
|
|
60
63
|
{{ item.panel.html | safe }}
|
|
61
64
|
{% else %}
|