desy-html 10.0.0 → 10.1.0

package/docs/index.html

@@ -38,6 +38,14 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.10.1.0</h3>
+  <ul class="text-sm">
+    <li>Added new param in Footer to improve columns.</li>
+  </ul>
+  <h3>v.10.0.1</h3>
+  <ul class="text-sm">
+    <li>Fixed cally not loading in templates.</li>
+  </ul>
   <h3>v.10.0.0</h3>
   <ul class="text-sm">
     <li>Updated to Node v20.14.0 and Npm v10.8.1. Audit fix --save to update dependencies to latest.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

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

@@ -206,8 +206,8 @@
     }
   },
   {
-    "name": "navegación con 3 columnas iguales",
-    "description": 'Usa el parámetro <code>navigation</code> para añadir columnas de navegación.',
+    "name": "navegación con 3 secciones en columnas iguales",
+    "description": 'Usa el parámetro <code>navigation.columns</code> para añadir columnas de navegación.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -276,6 +276,73 @@
         {
           "title": "Lista de enlaces 3",
           "columns": 1,
+          "items": [
+            {
+              "href": "#1",
+              "html": 'Navigation item 1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#2",
+              "html": 'Navigation item 2<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#3",
+              "html": 'Navigation item 3<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#4",
+              "html": 'Navigation item 4<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#5",
+              "html": 'Navigation item 5<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#6",
+              "html": 'Navigation item 6<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            }
+          ]
+        }
+      ],
+      "classes": "lg:mt-48"
+    }
+  },
+  {
+    "name": "navegación con 3 secciones, una de ellas con 2 columnas",
+    "description": 'Usa el parámetro <code>navigation.columns</code> y <code>navigation.classes</code> para añadir columnas de navegación y controlar la anchura de cada una de ellas.',
+    "data": {
+      "meta": {
+        "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+      },
+      "navigation": [
+        {
+          "title": "Lista de enlaces 1",
+          "columns": 2,
+          "classes": "basis-2/4 -mx-base px-base",
           "items": [
             {
               "href": "#1",
@@ -302,6 +369,92 @@
               "text": "Navigation item 6"
             }
           ]
+        },
+        {
+          "title": "Lista de enlaces 2",
+          "columns": 1,
+          "classes": "basis-1/4 -mx-base px-base",
+          "items": [
+            {
+              "href": "#1",
+              "text": "Navigation item 1"
+            },
+            {
+              "href": "#2",
+              "text": "Navigation item 2"
+            },
+            {
+              "href": "#3",
+              "text": "Navigation item 3"
+            },
+            {
+              "href": "#4",
+              "text": "Navigation item 4"
+            },
+            {
+              "href": "#5",
+              "text": "Navigation item 5"
+            },
+            {
+              "href": "#6",
+              "text": "Navigation item 6"
+            }
+          ]
+        },
+        {
+          "title": "Lista de enlaces 3",
+          "columns": 1,
+          "classes": "basis-1/4 -mx-base px-base",
+          "items": [
+            {
+              "href": "#1",
+              "html": 'Navigation item 1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#2",
+              "html": 'Navigation item 2<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#3",
+              "html": 'Navigation item 3<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#4",
+              "html": 'Navigation item 4<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#5",
+              "html": 'Navigation item 5<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            },
+            {
+              "href": "#6",
+              "html": 'Navigation item 6<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+              "attributes": {
+                "title": "Se abre en ventana nueva",
+                "target": "_blank"
+              }
+            }
+          ]
         }
       ],
       "classes": "lg:mt-48"

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

@@ -6,20 +6,15 @@ text-neutral-dark {{ params.classes if params.classes }}"
     {% if params.navigation | length %}
       <div class="flex flex-col lg:flex-row flex-wrap gap-base">
         {% for nav in params.navigation %}
-        <div class="lg:flex-1">
-          <h3 class="c-h3 mb-base">{{ nav.title }}</h3>
+        <div class="{%- if nav.classes %} {{ nav.classes }}{% else -%} flex-1{% endif %}">
+          <h3 class="c-h4 mb-base text-black">{{ nav.title }}</h3>
           {% if nav.items | length %}
-            {% set listClasses %}
-              {% if nav.columns %}
-                lg:grid-cols-{{ nav.columns }}
-              {% endif %}
-            {% endset %}
-            <ul class="grid grid-cols-1 gap-base {{ listClasses | trim }}">
+            <ul class="relative space-y-base {%- if nav.columns > 1 %} columns-{{ nav.columns }} gap-base{% endif %}">
               {% for item in nav.items %}
-              {% if item.href and item.text %}
+              {% if item.text or item.html %}
               <li class="mb-xs">
                 <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-                  {{ item.text }}
+                  {{ item.html | safe if item.html else item.text }}
                 </a>
               </li>
               {% endif %}
@@ -38,11 +33,13 @@ text-neutral-dark {{ params.classes if params.classes }}"
         {% if params.meta.items | length %}
         <ul class="flex flex-col lg:flex-row lg:flex-wrap mb-base">
           {% for item in params.meta.items %}
-          <li class="mb-sm mr-base">
-            <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-              {{ item.text }}
-            </a>
-          </li>
+            {% if item.text or item.html %}
+              <li class="mb-sm mr-base">
+                <a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                  {{ item.html | safe if item.html else item.text }}
+                </a>
+              </li>
+            {% endif %}
           {% endfor %}
         </ul>
         {% endif %}

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

@@ -20,11 +20,15 @@ params:
     params:
     - name: text
       type: string
-      required: false
+      required: true
       description: List item text in the meta section of the footer.
-    - name: href
+    - name: html
       type: string
       required: false
+      description: If `text` is set, this is not required. HTML to use in the list item. If `html` is provided, the `text` argument will be ignored.
+    - name: href
+      type: string
+      required: true
       description: List item href attribute in the meta section of the footer.
     - name: attributes
       type: object
@@ -64,16 +68,24 @@ params:
     params:
     - name: text
       type: string
-      required: false
+      required: true
       description: List item text in the navigation section of the footer.
-    - name: href
+    - name: html
       type: string
       required: false
+      description: If `text` is set, this is not required. HTML to use in the list item. If `html` is provided, the `text` argument will be ignored.
+    - name: href
+      type: string
+      required: true
       description: List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.
     - name: attributes
       type: object
       required: false
       description: HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the navigation item.
 - name: noLogo
   type: boolean
   required: false

package/src/templates/pages/_page.foot-headroom.njk

@@ -24,6 +24,7 @@
     }
   }
 </script>
+<script type="module" src="js/cally.js"></script>
 <script src="js/popper.min.js"></script>
 <script src="js/tippy-bundle.umd.min.js"></script>
 <script type="module" src="js/index.js"></script>

package/src/templates/pages/_page.foot.njk

@@ -1,4 +1,5 @@
 <!-- page.foot -->
+<script type="module" src="js/cally.js"></script>
 <script src="js/popper.min.js"></script>
 <script src="js/tippy-bundle.umd.min.js"></script>
 <script type="module" src="js/index.js"></script>