desy-html 8.1.7 → 8.2.0

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

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 -->