desy-html 8.1.6 → 8.2.0

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

@@ -63,6 +63,85 @@
       "classes": "min-w-full"
     }
   },
+  {
+    "name": "tabla con tfoot",
+    "data": {
+      "idPrefix": "table-default",
+      "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"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    }
+  },
   {
     "name": "tabla con caption visible",
     "description": 'También con <code>"firstCellIsHeader": true</code>',
@@ -190,6 +269,22 @@
           }
         ]
       ],
+      "foot": [
+        [
+          {
+            "text": "Suma",
+            "classes": "uppercase"
+          },
+          {
+            "text": "325€",
+            "classes": "text-right"
+          },
+          {
+            "text": "275€",
+            "classes": "text-right"
+          }
+        ]
+      ],
       "classes": "min-w-full"
     }
   },
@@ -575,6 +670,25 @@
           }
         ]
       ],
+      "foot": [
+        [
+          {
+            "text": "Suma",
+            "classes": "uppercase"
+          },
+          {
+            "text": ""
+          },
+          {
+            "text": "325€",
+            "classes": "text-right"
+          },
+          {
+            "text": "275€",
+            "classes": "text-right"
+          }
+        ]
+      ],
       "classes": "min-w-full"
     }
   },
@@ -588,7 +702,7 @@
       "firstCellIsHeader": true,
       "head": [
         {
-          "text": "Row number",
+          "text": "Número de fila",
           "classes": "sticky left-16 z-10 w-60 bg-white"
         },
         {

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

@@ -73,7 +73,7 @@
           {% if item.select %}
           {{ componentSelect({
             "formGroup": {
-              "classes": "mb-0"
+              "classes": "-mt-sm mb-0"
             },
             "label": {
               "text": "Filtrar por esta columna",
@@ -84,7 +84,7 @@
             "items": item.select.items,
             "describedBy": idHeader,
             "disabled": item.select.disabled,
-            "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
+            "classes": item.select.classes if item.select.classes else "c-select--sm w-full",
             "attributes": item.select.attributes
           }) | indent(10)  }}
           {% endif %}
@@ -153,6 +153,46 @@
         {% endif %}
       {% endfor %}
     </tbody>
+    <tfoot>
+      {% for row in params.foot %}
+        {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
+        {% if row %}
+      <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
+        {% if params.hasCheckboxes %}
+        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
+          <div class="c-checkboxes c-checkboxes--sm">
+            <div>
+              <div class="relative flex items-start">
+                <div class="flex items-center mx-sm">
+                  <input class="w-6 h-6 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-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
+                </div>
+                <div class="pt-0.5 leading-5">
+                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        {% endif %}
+      {% for cell in row %}
+        {% set commonAttributes %}
+          {%- 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="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | safe if cell.html else cell.text }}</th>
+        {% else %}
+        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | safe if cell.html else cell.text }}</td>
+        {% endif %}
+      {% endfor %}
+      </tr>
+        {% endif %}
+      {% endfor %}
+    </tfoot>
   </table>
 {% endset %}
 

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

@@ -74,6 +74,39 @@ 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: 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

package/src/templates/pages/_template.home.njk

@@ -12,7 +12,10 @@
   <!-- /pageSpinnerBlock -->
   <!-- headerBlock -->
   {% block headerBlock %}
-    {% call componentHeader({
+    {% call componentHeader({,
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "index.html",
       "mobileTitle": {
         "text": "desy-html-starter"

package/src/templates/pages/_template.logged-out.njk

@@ -16,7 +16,10 @@
     {{ componentHeader({
       "homepageUrl": "index.html",
       "expandedLogo": true,
-      "classes": "relative z-40"
+      "classes": "relative z-40",
+      "skipLink": {
+        "href": "#content"
+      }
     }) }}
   {% endblock %}
   <!-- /headerBlock -->

package/src/templates/pages/_template.logged-selector-fixed-headroom.njk

@@ -14,6 +14,9 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {% call componentHeader({
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "index.html",
       "mobileTitle": {
         "text": "Gestor de expedientes"

package/src/templates/pages/_template.logged-selector-fixed.njk

@@ -14,6 +14,9 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {% call componentHeader({
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "index.html",
       "mobileTitle": {
         "text": "Gestor de expedientes"

package/src/templates/pages/_template.logged.njk

@@ -14,6 +14,9 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {% call componentHeader({
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "index.html",
       "mobileTitle": {
         "text": "Gestor de expedientes"

package/src/templates/pages/_template.mfe.njk

@@ -16,6 +16,9 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {{ componentHeader({
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "index.html",
       "expandedLogo": true,
       "subnav": {

package/src/templates/pages/_template.test.njk

@@ -9,6 +9,9 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {{ componentHeader({
+      "skipLink": {
+        "href": "#content"
+      },
       "homepageUrl": "/",
       "expandedLogo": true,
       "classes": "relative z-40"

package/src/templates/pages/_template.with-header-advanced.njk

@@ -14,7 +14,10 @@
   <!-- headerBlock -->
   {% block headerBlock %}
     {% call componentHeaderAdvanced({
-    "title": {
+      "skipLink": {
+        "href": "#content"
+      },
+     "title": {
         "homepageUrl": "index.html",
         "text": "Portal de Salud"
       },