desy-html 8.1.6 → 8.2.0

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

@@ -40,7 +40,7 @@
     }
   },
   {
-    "name": "Estilo Listbox ",
+    "name": "Estilo Listbox",
     "description": 'Usa el parámetro <code>"hasSelect": true</code> para mostrar la paginación como un Listbox en vez de botones.',
     "data": {
       "id": "listbox-style",
@@ -55,12 +55,12 @@
         },
         {
           "href": "#",
-          "text": 2
+          "text": 2,
+          "active": true
         },
         {
           "href": "#",
-          "text": 3,
-          "active": true
+          "text": 3
         },
         {
           "href": "#",
@@ -107,8 +107,6 @@
           "text": 14
         }
       ],
-      "hasPrevious": true,
-      "hasNext": true,
       "previousText": "Anterior",
       "nextText": "Siguiente",
       "attributes": {
@@ -117,8 +115,52 @@
     }
   },
   {
-    "name": "sin página previa",
+    "name": "Con página previa deshabilitada",
     "description": 'En este ejemplo <code>"hasSelect": true</code> y <code>"hasPrevious": false</code>',
+    "data": {
+      "id": "with-previous-page-disabled",
+      "hasSelect": true,
+      "idPrefix": "pagination-without-prev",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "href": "#",
+          "text": 1,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 2
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "hasPrevious": false,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
+  },
+  {
+    "name": "Sin página previa",
+    "description": 'En este ejemplo <code>"hasSelect": true</code> y <code>"showPrevious": false</code>',
     "data": {
       "id": "without-previous-page",
       "hasSelect": true,
@@ -152,10 +194,137 @@
           "text": 6
         }
       ],
+      "showPrevious": false,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
+  },
+  {
+    "name": "Con página primera y última",
+    "description": 'En este ejemplo <code>"hasSelect": true</code>, <code>"showFirst": true</code> y <code>"showLast": true</code>',
+    "data": {
+      "id": "without-previous-page-disabled",
+      "hasSelect": true,
+      "idPrefix": "pagination-without-prev",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "href": "#",
+          "text": 1
+        },
+        {
+          "href": "#",
+          "text": 2,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "showFirst": true,
+      "showLast": true,
+      "firstText": "Primera",
+      "lastText": "Última",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
+  },
+  {
+    "name": "Con página primera deshabilitada y última",
+    "description": 'En este ejemplo <code>"hasSelect": true</code>, <code>"hasPrevious": false</code>, <code>"showFirst": true</code> y <code>"hasFirst": false</code>',
+    "data": {
+      "id": "listbox-style",
+      "hasSelect": true,
+      "idPrefix": "pagination-has-select",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "href": "#",
+          "text": 1,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 2
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        },
+        {
+          "href": "#",
+          "text": 7
+        },
+        {
+          "href": "#",
+          "text": 8
+        },
+        {
+          "href": "#",
+          "text": 9
+        },
+        {
+          "href": "#",
+          "text": 10
+        },
+        {
+          "href": "#",
+          "text": 11
+        },
+        {
+          "href": "#",
+          "text": 12
+        },
+        {
+          "href": "#",
+          "text": 13
+        },
+        {
+          "href": "#",
+          "text": 14
+        }
+      ],
       "hasPrevious": false,
-      "hasNext": true,
       "previousText": "Anterior",
       "nextText": "Siguiente",
+      "showFirst": true,
+      "showLast": true,
+      "hasFirst": false,
+      "firstText": "Primera",
+      "lastText": "Última",
       "attributes": {
         "aria-label": "Paginación"
       }

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

@@ -12,8 +12,10 @@
     {% set activePosition = loop.index0 %}
   {% endif %}
 {% endfor %}
-{% set disabledPrevious = not params.hasPrevious %}
-{% set disabledNext = not params.hasNext %}
+{% set disabledPrevious = not params.hasPrevious if params.hasPrevious != undefined else false %}
+{% set disabledNext = not params.hasNext if params.hasNext != undefined else false %}
+{% set disabledFirst = not params.hasFirst if params.hasFirst != undefined else false %}
+{% set disabledLast = not params.hasLast if params.hasLast != undefined else false %}
 
 {% set commonAttributes %} class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
@@ -77,6 +79,18 @@
     Selecciona una página para cargar datos
   </p>
   <nav {{- commonAttributes | safe }}>
+    {% 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,
+      "href": "#",
+      "disabled": disabledFirst,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-first"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
+    {% if params.showPrevious != false %}
     {{ componentButton({
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>' + prefix + params.previousText + previousSuffix,
       "href": "#",
@@ -86,19 +100,26 @@
         "id": params.idPrefix + "-previous"
       }
     }) | trim | indent(4)  }}
-    {{ componentListbox({
-      "id": params.id + "-listbox",
-      "idPrefix": params.idPrefix,
-      "text": "Página " + params.items[activePosition].text,
-      "classes": "c-listbox--sm c-listbox--transparent mr-xs",
-      "classesTooltip": "max-h-52 overflow-y-auto",
-      "doesChangeButtonText": true,
-      "label": {
-        "text": "Selecciona una página para cargar datos",
-        "classes": "sr-only"
-      },
-      "items": params.items
-    }) | trim | indent(4)  }}
+    {% endif %}
+    <div class="flex flex-wrap items-center {%- if params.showFirst or params.showLast %} w-full lg:w-auto{% endif %} pl-sm">
+      {% if params.showFirst or params.showLast %}
+      <p class="lg:hidden mr-xs text-sm text-neutral-dark">Página actual:</p>
+      {% endif %}
+      {{ componentListbox({
+        "id": params.id + "-listbox",
+        "idPrefix": params.idPrefix,
+        "text": "Página " + params.items[activePosition].text,
+        "classes": "c-listbox--sm c-listbox--transparent mr-xs",
+        "classesTooltip": "max-h-52 overflow-y-auto",
+        "doesChangeButtonText": true,
+        "label": {
+          "text": "Selecciona una página para cargar datos",
+          "classes": "sr-only"
+        },
+        "items": params.items
+      }) | trim | indent(4)  }}
+    </div>
+    {% if params.showNext != false %}
     {{ componentButton({
       "html": prefix + params.nextText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>',
       "href": "#",
@@ -108,6 +129,18 @@
         "id": params.idPrefix + "-next"
       }
     }) | trim | indent(4)  }}
+    {% endif %}
+    {% if params.showLast %}
+    {{ componentButton({
+      "html": prefix + params.lastText + nextSuffix + '<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 ml-2" aria-hidden="true" focusable="false"><g><path d="M13.58,12a2.64,2.64,0,0,1-.77,1.88L3.27,23.42a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.27.27,0,0,0,0-.36L.77,3.08A1.77,1.77,0,0,1,3.27.58l9.54,9.54A2.64,2.64,0,0,1,13.58,12Z" fill="currentColor"></path><path d="M23.75,12A2.65,2.65,0,0,1,23,13.88l-9.54,9.54a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.25.25,0,0,0,0-.36L10.93,3.08a1.77,1.77,0,0,1,2.5-2.5L23,10.12A2.65,2.65,0,0,1,23.75,12Z" fill="currentColor"></path></g></svg>',
+      "href": "#",
+      "disabled": disabledLast,
+      "classes": "c-button--sm c-button--transparent mr-xs",
+      "attributes": {
+        "id": params.idPrefix + "-last"
+      }
+    }) | trim | indent(4)  }}
+    {% endif %}
   </nav>
   {% else %}
   <nav {{- commonAttributes | safe }}>

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

@@ -23,22 +23,54 @@ params:
   type: string
   required: true
   description: Number of items per each page.
-- name: hasPrevious
+- name: showPrevious
   type: boolean
   required: false
-  description: If true, shows the previous button if hasSelect is true.
-- name: hasNext
+  description: If true, shows the Previous button if hasSelect is true. Defaults to true.
+- name: hasPrevious
   type: boolean
   required: false
-  description: If true, shows the next button if hasSelect is true.
+  description: If false, the Previous button is disabled. Defaults to true.
 - name: previousText
   type: string
   required: false
   description: Text for the previous button. Defaults to "Anterior".
+- name: showNext
+  type: boolean
+  required: false
+  description: If true, shows the Next button if hasSelect is true. Defaults to true.
+- name: hasNext
+  type: boolean
+  required: false
+  description: If false, the Next button is disabled. Defaults to true.
 - name: nextText
   type: string
   required: false
   description: Text for the previous button. Defaults to "Siguiente".
+- name: showFirst
+  type: boolean
+  required: false
+  description: If true, shows the First button if hasSelect is true. Defaults to false.
+- name: hasFirst
+  type: boolean
+  required: false
+  description: If false, the First button is disabled. Defaults to true.
+- name: firstText
+  type: string
+  required: false
+  description: Text for the first button. Defaults to "Anterior".
+- name: showLast
+  type: boolean
+  required: false
+  description: If true, shows the Last button if hasSelect is true. Defaults to false.
+- name: hasLast
+  type: boolean
+  required: false
+  description: If false, the Last button is disabled. Defaults to true.
+- name: lastText
+  type: string
+  required: false
+  description: Text for the last button. Defaults to "Siguiente".
 - name: itemsListbox
   type: object
   required: false

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

@@ -7,7 +7,7 @@
       "title": {
         "text": "Título"
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Acción</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> item del Título</span></button>'
     }
   },
   {
@@ -46,7 +46,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Acción</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> los datos de término y definición y el resto</span></button>'
     }
   },
   {
@@ -56,7 +56,7 @@
       "title": {
         "html": 'Autorización para la consulta de datos de las personas de la unidad familiar. <span class="text-neutral-dark">(Documento condicionado)</span>'
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Aportar</button>'
+      "caller": '<button class="c-button c-button--transparent">Aportar<span class="sr-only"> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>'
     }
   },
   {
@@ -75,7 +75,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Modificar</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> personas de la unidad familiar</span></button>'
     }
   },
   {
@@ -88,7 +88,7 @@
       "hint": {
         "html": '<a href="#" class="c-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block self-center w-4 h-4 mr-sm no-underline" role="img" aria-hidden="true"><path d="M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z" fill="currentColor"/></svg>Descargar modelo</a>'
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Aportar</button>'
+      "caller": '<button class="c-button c-button--transparent">Aportar<span class="sr-only"> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>'
     }
   },
   {
@@ -101,7 +101,7 @@
       "status": {
         "text": "Iniciado"
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>'
+      "caller": '<button class="c-button c-button--transparent">Rellenar<span class="sr-only"> datos adicionales del solicitante</span></button>'
     }
   },
   {
@@ -117,7 +117,7 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Modificar</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>'
     }
   },
   {
@@ -138,7 +138,7 @@
         },
         "classes": "text-alert-base"
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Modificar</button>',
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>',
       "classes": "border-l-4 border-alert-base"
     }
   },
@@ -155,7 +155,7 @@
           "type": "loading"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Modificar</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> datos adicionales del solicitante</span></button>'
     }
   },
   {
@@ -176,7 +176,7 @@
         },
         "classes": "text-alert-base"
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Ver</button>',
+      "caller": '<button class="c-button c-button--transparent">Ver<span class="sr-only"> datos adicionales del solicitante</span></button>',
       "classes": "border-l-4 border-alert-base"
     }
   },
@@ -200,13 +200,13 @@
           "type": "success"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Modificar</button>'
+      "caller": '<button class="c-button c-button--transparent">Modificar<span class="sr-only"> acreditación</span></button>'
     }
   },
   {
     "name": "incompleto",
     "data": {
-      "id": "incompleto",
+      "id": "incompleto-status-item",
       "items": [
         {
           "term": {
@@ -239,7 +239,7 @@
           "type": "alert"
         }
       },
-      "caller": '<button class="c-button c-button--transparent" data-module="c-button">Rellenar</button>',
+      "caller": '<button class="c-button c-button--transparent">Rellenar<span class="sr-only"> datos adicionales del solicitante</span></button>',
       "classes": "border-l-4 border-alert-base"
     }
   }

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

@@ -61,6 +61,81 @@
       ]
     }
   },
+  {
+    "name": "tabla con tfoot",
+    "data": {
+      "caption": "Caption de la tabla",
+      "captionClasses": "sr-only mb-base font-bold text-left text-lg",
+      "head": [
+        {
+          "text": "Mes de pago"
+        },
+        {
+          "text": "Primer pago",
+          "classes": "text-right"
+        },
+        {
+          "text": "Segundo pago",
+          "classes": "text-right"
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "Enero"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Febrero"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Marzo"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "foot": [
+        {
+          "text": "Suma",
+          "classes": "uppercase"
+        },
+        {
+          "text": "325€",
+          "classes": "text-right"
+        },
+        {
+          "text": "275€",
+          "classes": "text-right"
+        }
+      ]
+    }
+  },
   {
     "name": "tabla con caption visible",
     "data": {

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

@@ -39,6 +39,17 @@
       {% 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="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 %}>{{ item.html |safe if item.html else item.text }}</td>
+    {% endfor %}
+    </tr>
+  </tfoot>
+  {% endif %}
 </table>
 {% endset %}
 

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

@@ -57,6 +57,35 @@ params:
     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