desy-html 13.0.1 → 14.0.0

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

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

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

@@ -0,0 +1,39 @@
+/* ==========================================================================
+   _styles.treegrid.css
+   ========================================================================== */
+
+@layer components {
+  .c-treegrid {
+    /* Indentation based on level that comes from html style (--level)*/
+    tr[aria-level] > :is(td, th):first-child {
+      padding-left: calc(var(--level) * 2.5ch);
+      @apply relative;
+    }
+
+    .c-treegrid__icon {
+      left: calc((var(--level) - 1) * 2.5ch);
+      width: 2.5ch;
+      height: 2.5ch;
+      @apply text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none absolute;
+    }
+
+    :is(tr, th, td):focus .c-treegrid__icon {
+      @apply text-black;
+    }
+
+    :is(
+        tr[aria-expanded="true"] > td:first-child,
+        tr[aria-expanded="true"] > th:first-child,
+        td[aria-expanded="true"]:first-child,
+        th[aria-expanded="true"]:first-child
+      )
+      .c-treegrid__icon
+      svg {
+      @apply rotate-90;
+    }
+
+    :is(tr, th, td):focus {
+      @apply bg-warning-base outline-none shadow-outline-focus text-black;
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+{% set headArray = [] %}
+
+{#- Capture the HTML so we can optionally nest it in a wrapper -#}
+{% set innerHtml %}
+<table data-module="c-treegrid" class="c-treegrid
+  {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} role="treegrid">
+  {% if params.caption %}
+    <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
+  {% endif %}
+  {% if params.head %}
+    <colgroup>
+      {% for item in params.head %}
+        <col class="treegrid-col-{{ loop.index }}">
+      {% endfor %}
+    </colgroup>
+    <thead>
+      <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 %}"
+            {% 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 role="row" class="mb-0 text-left border-t border-b border-neutral-base" {%- if row.level %} aria-level="{{ row.level }}" style="--level: {{ row.level }}"{% endif %}  {%- if row.posinset %} aria-posinset="{{ row.posinset }}"{% endif %} {%- if row.setsize %} aria-setsize="{{ row.setsize }}"{% endif %} {%- if row.expanded != undefined  %} aria-expanded="{{ row.expanded }}"{% endif %} {% for attribute, value in row.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          {% for cell in row.cells %}
+            {% set commonAttributes %}
+            data-label="{{ headArray[loop.index0] }}"
+            {% for attribute, value in cell.attributes %}
+              {{ attribute }}="{{ value }}"{% endfor %}
+            {% endset %}
+
+            {% if loop.first and params.firstCellIsHeader %}
+              <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}{% if row.expanded is defined and loop.first %} flex items-start{% endif %}"
+            {{- commonAttributes | safe -}}
+          >
+                {% if row.expanded is defined and loop.first %}
+                  <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
+                    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="24" height="24" fill="none"/>
+                      <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor"/>
+                    </svg>
+                  </span>
+                {% endif %}
+                {{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
+            {% else %}
+              <td role="gridcell" class="text-left px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}{% if row.expanded is defined and loop.first %} flex items-start{% endif %}"
+            {{- commonAttributes | safe -}}
+          >
+                {% if row.expanded is defined and loop.first %}
+                  <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
+                    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="24" height="24" fill="none"/>
+                      <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor"/>
+                    </svg>
+                  </span>
+                {% endif %}
+                {{ 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="text-left px-base py-sm {%- if item.classes %} {{ item.classes }}{% 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 %}
+
+<!-- treegrid -->
+{% 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 %}
+<!-- /treegrid -->

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

@@ -0,0 +1,132 @@
+params:
+- name: rows
+  type: object
+  required: true
+  description: table rows in treegrid.
+  params:
+  - name: level
+    type: integer
+    required: false
+    description: Specify the hierarchical level of the row. Level 1 is the top level. This will add the appropriate aria-level attribute to the row.
+  - name: posinset
+    type: integer
+    required: false
+    description: Specify the position of the row within its current level, starting at 1. This will add the appropriate aria-posinset attribute to the row.
+  - name: setsize
+    type: integer
+    required: false
+    description: Specify the number of rows within the current level. This will add the appropriate aria-setsize attribute to the row.
+  - name: expanded
+    type: boolean
+    required: false
+    description: If true, row sub will be expanded.
+  - name: cells
+    type: array
+    required: false
+    description: Provide cells for the row.
+    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 cell.
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the table cell.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the table row.
+- 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: 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: 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.