desy-html 12.0.0 → 12.1.0

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

@@ -1,3 +1,3 @@
-{% macro componentTable(params) %}
-{% include "./_template.table.njk" %}
-{% endmacro %}
+{% macro componentTable(params) %}
+{% include "./_template.table.njk" %}
+{% endmacro %}

package/src/templates/components/table/_styles.table.css

@@ -1,20 +1,20 @@
-/* ==========================================================================
-   _styles.table.css
-   ========================================================================== */
-
-@layer components {
-  .c-table--no-responsive {
-    tr {
-      @apply table-row;
-    }
-
-    td {
-      @apply table-cell;
-      @apply before:content-none;
-    }
-
-    th{
-      @apply before:content-none;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.table.css
+   ========================================================================== */
+
+@layer components {
+  .c-table--no-responsive {
+    tr {
+      @apply table-row;
+    }
+
+    td {
+      @apply table-cell;
+      @apply before:content-none;
+    }
+
+    th{
+      @apply before:content-none;
+    }
+  }
+}

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

@@ -1,69 +1,69 @@
-{% set headArray = [] %}
-
-{#- Capture the HTML so we can optionally nest it in a wrapper -#}
-{% set innerHtml %}
-<table class="c-table
-  {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% if params.caption %}
-  <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
-  {% endif %}
-  {% if params.head %}
-  <thead class="sr-only lg:not-sr-only">
-    <tr class="border-t border-b border-neutral-base">
-    {% for item in params.head %}
-      {% set headArray = (headArray.push(item.html |safe | striptags if item.html else item.text), headArray) %}
-      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark {%- 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 %}>{{ item.html |safe if item.html else item.text }}</th>
-    {% endfor %}
-    </tr>
-  </thead>
-  {% endif %}
-  <tbody>
-    {% for row in params.rows %}
-      {% if row %}
-    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
-        {% for cell in row %}
-          {% set commonAttributes %}
-            data-label="{{ headArray[loop.index0] }}"
-            {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-            {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-          {% endset %}
-          {% if loop.first and params.firstCellIsHeader %}
-      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
-            {{- commonAttributes | safe -}}
-          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
-          {% else %}
-      <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 cell.classes %} {{ cell.classes }}{% endif %}"
-            {{- commonAttributes | safe -}}
-          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
-          {% endif %}
-        {% endfor %}
-    </tr>
-      {% endif %}
-    {% endfor %}
-  </tbody>
-  {% if params.foot %}
-  <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 %}"
-      {%- 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 %}
-    </tr>
-  </tfoot>
-  {% endif %}
-</table>
-{% endset %}
-
-
-<!-- table -->
-{% if params.wrapper %}
-<div {%- if params.wrapper.classes %} class="{{ params.wrapper.classes }}"{% endif %}>
-  {{ innerHtml | trim | safe }}
-</div>
-{% else %}
-  {{ innerHtml | trim | safe }}
-{% endif %}
+{% set headArray = [] %}
+
+{#- Capture the HTML so we can optionally nest it in a wrapper -#}
+{% set innerHtml %}
+<table class="c-table
+  {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% if params.caption %}
+  <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
+  {% endif %}
+  {% if params.head %}
+  <thead class="sr-only lg:not-sr-only">
+    <tr class="border-t border-b border-neutral-base">
+    {% for item in params.head %}
+      {% set headArray = (headArray.push(item.html |safe | striptags if item.html else item.text), headArray) %}
+      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark {%- 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 %}>{{ item.html |safe if item.html else item.text }}</th>
+    {% endfor %}
+    </tr>
+  </thead>
+  {% endif %}
+  <tbody>
+    {% for row in params.rows %}
+      {% if row %}
+    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
+        {% for cell in row %}
+          {% set commonAttributes %}
+            data-label="{{ headArray[loop.index0] }}"
+            {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+            {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+          {% endset %}
+          {% if loop.first and params.firstCellIsHeader %}
+      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+            {{- commonAttributes | safe -}}
+          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
+          {% else %}
+      <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 cell.classes %} {{ cell.classes }}{% endif %}"
+            {{- commonAttributes | safe -}}
+          >{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
+          {% endif %}
+        {% endfor %}
+    </tr>
+      {% endif %}
+    {% endfor %}
+  </tbody>
+  {% if params.foot %}
+  <tfoot>
+    <tr class="border-t-2 border-b border-neutral-base">
+    {% for item in params.foot %}
+      <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 %}
+    </tr>
+  </tfoot>
+  {% endif %}
+</table>
+{% endset %}
+
+
+<!-- table -->
+{% if params.wrapper %}
+<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 %}
+  {{ innerHtml | trim | safe }}
+{% endif %}
 <!-- /table -->

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

@@ -1,127 +1,131 @@
-params:
-- name: rows
-  type: array
-  required: true
-  description: Array of table rows and cells.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the table row cell.
-  - name: colspan
-    type: integer
-    required: false
-    description: Specify how many columns a cell extends.
-  - name: rowspan
-    type: integer
-    required: false
-    description: Specify how many rows a cell extends.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the table cell.
-- name: head
-  type: array
-  required: false
-  description: Array of table head cells.
-  params:
-  - name: text
-    type: string
-    required: false
-    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: false
-    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the table head cell.
-  - name: colspan
-    type: integer
-    required: false
-    description: Specify how many columns a cell extends.
-  - name: rowspan
-    type: integer
-    required: false
-    description: Specify how many rows a cell extends.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the table cell.
-- name: foot
-  type: array
-  required: false
-  description: Array of table tfoot cells.
-  params:
-  - name: text
-    type: string
-    required: false
-    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: false
-    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the table tfoot cell.
-  - name: colspan
-    type: integer
-    required: false
-    description: Specify how many columns a cell extends.
-  - name: rowspan
-    type: integer
-    required: false
-    description: Specify how many rows a cell extends.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the table cell.
-- name: caption
-  type: string
-  required: false
-  description: Caption text
-- name: captionClasses
-  type: string
-  required: false
-  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
-- name: firstCellIsHeader
-  type: boolean
-  required: false
-  description: If set to true, first cell in table row will be a TH instead of a TD.
-- name: wrapper
-  type: object
-  required: false
-  description: Options for a wrapper div outside the table
-  params:
-  - name: classes
-    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: classes
-  type: string
-  required: false
-  description: Classes to add to the table container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the table container.
-
-accessibilityCriteria: |
-  ## Las tablas deben:
-    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
-    2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
-    3. El título de la tabla debe estar marcado como <caption>
-    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
-    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>
-    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.
+params:
+- name: rows
+  type: array
+  required: true
+  description: Array of table rows and cells.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the table row cell.
+  - name: colspan
+    type: integer
+    required: false
+    description: Specify how many columns a cell extends.
+  - name: rowspan
+    type: integer
+    required: false
+    description: Specify how many rows a cell extends.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the table cell.
+- name: head
+  type: array
+  required: false
+  description: Array of table head cells.
+  params:
+  - name: text
+    type: string
+    required: false
+    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: false
+    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the table head cell.
+  - name: colspan
+    type: integer
+    required: false
+    description: Specify how many columns a cell extends.
+  - name: rowspan
+    type: integer
+    required: false
+    description: Specify how many rows a cell extends.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the table cell.
+- name: foot
+  type: array
+  required: false
+  description: Array of table tfoot cells.
+  params:
+  - name: text
+    type: string
+    required: false
+    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: false
+    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the table tfoot cell.
+  - name: colspan
+    type: integer
+    required: false
+    description: Specify how many columns a cell extends.
+  - name: rowspan
+    type: integer
+    required: false
+    description: Specify how many rows a cell extends.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the table cell.
+- name: caption
+  type: string
+  required: false
+  description: Caption text
+- name: captionClasses
+  type: string
+  required: false
+  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
+- name: firstCellIsHeader
+  type: boolean
+  required: false
+  description: If set to true, first cell in table row will be a TH instead of a TD.
+- name: wrapper
+  type: object
+  required: false
+  description: Options for a wrapper div outside the table
+  params:
+  - name: classes
+    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
+  description: Classes to add to the table container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the table container.
+
+accessibilityCriteria: |
+  ## Las tablas deben:
+    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
+    2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
+    3. El título de la tabla debe estar marcado como <caption>
+    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
+    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>
+    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.
     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.