desy-html 7.0.0 → 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 +9 -1
- package/package.json +1 -1
- package/src/js/aria/tabs.js +2 -3
- package/src/templates/components/collapsible/_examples.collapsible.njk +2 -2
- package/src/templates/components/header/_template.header.njk +1 -1
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +11 -9
- package/src/templates/components/table-advanced/_template.table-advanced.njk +1 -1
- package/src/templates/components/table-advanced/params.table-advanced.yaml +2 -1
- package/src/templates/components/tabs/_examples.tabs.njk +192 -0
- package/src/templates/components/tabs/_styles.tabs.css +47 -2
- package/src/templates/components/tabs/_template.tabs.njk +33 -30
package/docs/index.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<li>Ejecuta primero <code>npm install</code></li>
|
|
17
17
|
<li>Ejecuta <code>npm run dev</code> para escuchar cambios en los archivos njk, css y html, para renderizarlos y recargar el servidor local con browser-sync.</li>
|
|
18
18
|
<li>Usa <code>npm run prod</code> para generar el CSS y minificarlo.</li>
|
|
19
|
-
<li>Dependencias: Node.js
|
|
19
|
+
<li>Dependencias: Node.js v16.17.1, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: <a href="package.json">Ver package.json</a></li>
|
|
20
20
|
</ul>
|
|
21
21
|
|
|
22
22
|
<h2>¿Cómo comienzo un proyecto que usa los componentes de desy-html?</h2>
|
|
@@ -38,6 +38,14 @@
|
|
|
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>
|
|
45
|
+
<h3>v.7.0.1</h3>
|
|
46
|
+
<ul class="text-sm">
|
|
47
|
+
<li>Accesibility and docs improvements.</li>
|
|
48
|
+
</ul>
|
|
41
49
|
<h3>v.7.0.0</h3>
|
|
42
50
|
<ul class="text-sm">
|
|
43
51
|
<li>Updated to node 16.17.1 and npm 8.15.0. Updated to latest packages.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "7.
|
|
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
|
}
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"name": "with html",
|
|
22
22
|
"data": {
|
|
23
23
|
"id": "collapsible-html-example",
|
|
24
|
-
"headerText": "
|
|
25
|
-
"html":
|
|
24
|
+
"headerText": "Help with nationality",
|
|
25
|
+
"html": '<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>'
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
] %}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
|
|
21
21
|
{% if not params.noLogo %}
|
|
22
22
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
|
|
23
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}"
|
|
23
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
|
|
24
24
|
{% endif %}
|
|
25
25
|
{{ params.customLogoHtml | safe if params.customLogoHtml }}
|
|
26
26
|
</a>
|
|
@@ -598,13 +598,15 @@
|
|
|
598
598
|
{% endset %}
|
|
599
599
|
|
|
600
600
|
{% set buscador %}
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
"
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
601
|
+
<form role="search">
|
|
602
|
+
{{ componentSearchbar({
|
|
603
|
+
"id": "searchbar-2",
|
|
604
|
+
"label": {
|
|
605
|
+
"text": "Buscar"
|
|
606
|
+
},
|
|
607
|
+
"placeholder": "Buscar en este sitio"
|
|
608
|
+
}) }}
|
|
609
|
+
</form>
|
|
608
610
|
{% endset %}
|
|
609
611
|
|
|
610
612
|
{% set exampleComponent = "header-advanced" %}
|
|
@@ -919,9 +921,9 @@
|
|
|
919
921
|
"headerMini": {
|
|
920
922
|
"customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | safe +'</div>'
|
|
921
923
|
},
|
|
922
|
-
"
|
|
924
|
+
"sub": {
|
|
923
925
|
"customNavigationHtml": '<div class="hidden lg:grid grid-cols-2 lg:grid-cols-4 gap-xl h-full"><div class="col-span-2 lg:col-span-3"></div><div class="col-span-2 lg:col-span-1 flex items-center justify-end">'+ buscador | safe +'</div></div>',
|
|
924
|
-
"classes": "hidden lg:block relative -
|
|
926
|
+
"classes": "hidden lg:block relative -top-32 h-0"
|
|
925
927
|
},
|
|
926
928
|
"title": {
|
|
927
929
|
"homepageUrl": "/",
|
|
@@ -124,4 +124,5 @@ accessibilityCriteria: |
|
|
|
124
124
|
4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
|
|
125
125
|
5. Después de un encabezado (h1, h2…) no puede ir directamente una tabla, o se entiende que se está usando el encabezado para lo que debería ser el <caption>
|
|
126
126
|
6. La tabla debe tener una descripción especialmente si la tabla es grande o compleja, tiene varios niveles de encabezados, tiene totales o enlaces, etc. La descripción intenta suplir la primera impresión que tienen de la tabla las personas que pueden verla, por ejemplo, vemos que en la última columna hay enlaces o en la última fila hay totales. Como en HTML 5 ya no está admitido el atributo summary en las tablas, lo que se hace es poner la descripción en un párrafo antes de la tabla y asociarlo a la tabla con aria-describedby (así se evita también el error 5). El caption y la descripción no deben ser iguales.
|
|
127
|
-
7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
|
|
127
|
+
7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
|
|
128
|
+
8. Las tablas complejas como esta deben tener una descripción. La descripción se incluye en un texto visible antes de la tabla (aunque puede estar en un <details>) y se asocia a la tabla mediante el atributo aria-describedby de la tabla.
|
|
@@ -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 %}
|