desy-html 12.0.1 → 13.0.0

package/src/templates/components/pagination/_template.pagination.njk

@@ -68,10 +68,10 @@
 {% endset %}
 <div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
   {% if params.hasSelect %}
-  <p id="{{ params.id }}-label" class="w-full mb-xs text-sm text-neutral-dark">
-    Selecciona para cargar datos automáticamente
-  </p>
   <nav {{- commonAttributes | safe }}>
+    <p id="{{ params.id }}-label" class="w-full mb-xs text-sm text-neutral-dark">
+      Selecciona para cargar datos automáticamente
+    </p>
     {% if params.showFirst %}
     {{ componentButton({
       "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='self-center h-2.5 w-2.5 mr-2' aria-hidden='true' focusable='false'><g><path d='M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z' fill='currentColor'></path><path d='M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z' fill='currentColor'></path></g></svg>" + prefix + params.firstText + previousSuffix,
@@ -141,7 +141,7 @@
   </nav>
   {% endif %}
   {% if params.itemsPerPageSelector %}
-  <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+  <div class="block relative -top-xs {%- if params.hasSelect %} lg:mt-8{% endif %} lg:ml-auto text-sm text-neutral-dark">
     {{ componentSelect({
       "id": "items-listbox-" + idPrefix,
       "name": "items-listbox-" + idPrefix,
@@ -156,8 +156,8 @@
     }) | indent(4)  }}
   </div>
   {% endif %}
-  <p id="{{ params.idPrefix }}-status" class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark" role="status" aria-live="polite">
-    <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
+  <p id="{{ params.idPrefix }}-status" class="block relative -top-xs {%- if params.hasSelect %} lg:mt-8{% endif %} lg:ml-auto text-sm text-neutral-dark" role="status" aria-live="polite">
+    <span class="sr-only">Posición de paginación: </span><span class="sr-only">resultados del </span>{{ activePosition | int * params.itemsPerPage | int }} <span aria-label="al">-</span> {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>
 <!-- /pagination -->

package/src/templates/components/pill/_examples.pill.njk

@@ -59,7 +59,7 @@
     "name": "con icono a la derecha",
     "data": {
       "type": "button",
-      "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width=' .75em ' height=' .75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
+      "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width='.75em ' height='.75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
       "classes": "cursor-pointer"
     }
   },
@@ -67,35 +67,35 @@
     "name": "con icono a la izquierda",
     "data": {
       "type": "button",
-      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
+      "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
       "classes": "cursor-pointer"
     }
   },
   {
     "name": "primario",
     "data": {
-      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
+      "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
       "classes": "c-pill--primary"
     }
   },
   {
     "name": "Aviso",
     "data": {
-      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Aviso",
+      "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em' height='.75em '><path fill='currentColor' d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Aviso",
       "classes": "c-pill--warning"
     }
   },
   {
     "name": "Éxito",
     "data": {
-      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
+      "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
       "classes": "c-pill--success"
     }
   },
   {
     "name": "alerta",
     "data": {
-      "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
+      "html": "<svg viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' width='.75em ' height='.75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
       "classes": "c-pill--alert"
     }
   }

package/src/templates/components/radios/_template.radios.njk

@@ -33,7 +33,6 @@
 {% endif %}
 {% if params.errorMessage %}
 {% set errorId = idPrefix + '-error' %}
-{% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
 {{ componentErrorMessage({
   id: errorId,
   classes: params.errorMessage.classes,
@@ -70,7 +69,7 @@
     <div>
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
-          <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
+          <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}

package/src/templates/components/searchbar/_template.searchbar.njk

@@ -5,7 +5,6 @@
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
 {% endif %}
 
 <!-- searchbar -->

package/src/templates/components/select/_template.select.njk

@@ -27,9 +27,6 @@
     text: params.hint.text
   }) | indent(2) | trim }}
 {% endif %}
-{% if params.errorMessage %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-{% endif %}
 {% if params.errorMessage %}
   {{ componentErrorMessage({
     id: errorId,

package/src/templates/components/spinner/_template.spinner.njk

@@ -4,6 +4,10 @@
   <span class="sr-only" role="alert" aria-live="assertive">
     {{ params.text }}
   </span>
+  {% else %}
+  <span class="sr-only" role="alert" aria-live="assertive">
+    Cargando
+  </span>
   {% endif %}
 </span>
 <!-- /spinner -->

package/src/templates/components/status-item/_examples.status-item.njk

@@ -41,7 +41,7 @@
         }
       ],
       "status": {
-        "text": "Estado",
+        "text": "Correcto",
         "icon": {
           "type": "success"
         }

package/src/templates/components/table/_examples.table.njk

@@ -138,6 +138,7 @@
   },
   {
     "name": "tabla con caption visible",
+    "description": "Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
     "data": {
       "caption": "Caption 1: Meses y pagos",
       "captionClasses": "mb-base font-bold text-left text-lg",
@@ -200,7 +201,7 @@
   },
   {
     "name": "tabla con wrapper",
-    "description": "Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.",
+    "description": "Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.",
     "data": {
       "caption": "Caption 1: Meses y pagos",
       "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
@@ -389,7 +390,12 @@
         ]
       ],
       "wrapper": {
-        "classes": "relative overflow-x-auto pb-base"
+        "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
+        "attributes": {
+          "tabindex": "0",
+          "role": "region",
+          "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
+        }
       }
     }
   },
@@ -447,12 +453,17 @@
         ]
       ],
       "wrapper": {
-        "classes": "relative overflow-x-auto pb-base"
+        "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
+        "attributes": {
+          "tabindex": "0",
+          "role": "region",
+          "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
+        }
       }
     }
   },
   {
-    "name": "table con columnas sticky",
+    "name": "tabla con columnas sticky",
     "description": "En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.",
     "data": {
       "caption": "Caption 1: Meses y pagos",
@@ -645,302 +656,14 @@
         ]
       ],
       "wrapper": {
-        "classes": "overflow-x-auto pb-base"
+        "classes": "overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
+        "attributes": {
+          "tabindex": "0",
+          "role": "region",
+          "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
+        }
       },
       "classes": "relative lg:whitespace-nowrap"
     }
-  },
-  {
-    "name": "classes",
-    "hidden": true,
-    "data": {
-      "classes": "bg-primary-light"
-    }
-  },
-  {
-    "name": "atributos",
-    "hidden": true,
-    "data": {
-      "attributes": {
-        "data-foo": "bar"
-      }
-    }
-  },
-  {
-    "name": "html como texto",
-    "hidden": true,
-    "data": {
-      "head": [
-        {
-          "text": "Foo <strong>bar</strong>"
-        }
-      ],
-      "rows": [
-        [
-          {
-            "text": "Foo <strong>bar</strong>"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "html",
-    "hidden": true,
-    "data": {
-      "head": [
-        {
-          "html": "Foo <strong>bar</strong>"
-        }
-      ],
-      "rows": [
-        [
-          {
-            "html": "Foo <strong>bar</strong>"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "head con clases",
-    "hidden": true,
-    "data": {
-      "head": [
-        {
-          "text": "Foo",
-          "classes": "bg-primary-light"
-        }
-      ]
-    }
-  },
-  {
-    "name": "head con rowspan y colspan",
-    "hidden": true,
-    "data": {
-      "head": [
-        {
-          "text": "Foo",
-          "rowspan": 1,
-          "colspan": 1
-        }
-      ]
-    }
-  },
-  {
-    "name": "head con atributos",
-    "hidden": true,
-    "data": {
-      "head": [
-        {
-          "attributes": {
-            "data-fizz": "buzz"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con firstCellIsHeader true",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "text": "Enero"
-          },
-          {
-            "text": "85€",
-            "classes": "lg:text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "lg:text-right"
-          }
-        ],
-        [
-          {
-            "text": "Febrero"
-          },
-          {
-            "text": "75€",
-            "classes": "lg:text-right"
-          },
-          {
-            "text": "55€",
-            "classes": "lg:text-right"
-          }
-        ],
-        [
-          {
-            "text": "Marzo"
-          },
-          {
-            "text": "165€",
-            "classes": "lg:text-right"
-          },
-          {
-            "text": "125€",
-            "classes": "lg:text-right"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "firstCellIsHeader con clases",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "classes": "bg-primary-light"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "firstCellIsHeader con html",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "html": "Foo <strong>bar</strong>"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "firstCellIsHeader con html como texto",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "text": "Foo <strong>bar</strong>"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "firstCellIsHeader con rowspan y colspan",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "rowspan": 1,
-            "colspan": 1
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "firstCellIsHeader con atributos",
-    "hidden": true,
-    "data": {
-      "firstCellIsHeader": true,
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "attributes": {
-              "data-fizz": "buzz"
-            }
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "con items falsos",
-    "hidden": true,
-    "data": {
-      "rows": [
-        [
-          {
-            "text": "A"
-          },
-          {
-            "text": 1
-          }
-        ],
-        false,
-        null,
-        [
-          {
-            "text": "B"
-          },
-          {
-            "text": 2
-          }
-        ],
-        [
-          {
-            "text": "C"
-          },
-          {
-            "text": 3
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "filas con clases",
-    "hidden": true,
-    "data": {
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "classes": "bg-primary-light"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "filas con rowspan y colspan",
-    "hidden": true,
-    "data": {
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "rowspan": 1,
-            "colspan": 1
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "filas con atributos",
-    "hidden": true,
-    "data": {
-      "rows": [
-        [
-          {
-            "text": "Foo",
-            "attributes": {
-              "data-fizz": "buzz"
-            }
-          }
-        ]
-      ]
-    }
   }
 ] %}

package/src/templates/components/table/_template.table.njk

@@ -47,7 +47,7 @@
   <tfoot>
     <tr class="border-t-2 border-b border-neutral-base">
     {% for item in params.foot %}
-      <td scope="col" class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm {%- if item.classes %} {{ item.classes }}{% endif %}"
+      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm {%- if item.classes %} {{ item.classes }}{% endif %}"
       {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
       {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-label="{{ headArray[loop.index0] }}">{{ item.html |safe if item.html else item.text }}</td>
     {% endfor %}
@@ -60,7 +60,7 @@
 
 <!-- table -->
 {% if params.wrapper %}
-<div {%- if params.wrapper.classes %} class="{{ params.wrapper.classes }}"{% endif %}>
+<div {%- if params.wrapper.classes %} class="{{ params.wrapper.classes }}"{% endif %} {% for attribute, value in params.wrapper.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ innerHtml | trim | safe }}
 </div>
 {% else %}

package/src/templates/components/table/params.table.yaml

@@ -107,6 +107,10 @@ params:
     type: string
     required: false
     description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes to add to the wrapper div. For accessibility it needs tabindex=0, role=section and aria-label or aria-labelledby.
 - name: classes
   type: string
   required: false