desy-html 10.1.0 → 10.1.1

package/docs/index.html

@@ -38,6 +38,10 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.10.1.1</h3>
+  <ul class="text-sm">
+    <li>Fixed columns in Footer navigation items.</li>
+  </ul>
   <h3>v.10.1.0</h3>
   <ul class="text-sm">
     <li>Added new param in Footer to improve columns.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "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

@@ -207,7 +207,7 @@
   },
   {
     "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.',
+    "description": 'Usa el parámetro <code>navigation.items</code> para añadir secciones de navegación organizadas en columnas.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -332,8 +332,8 @@
     }
   },
   {
-    "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.',
+    "name": "navegación con 2 secciones, una de ellas con 3 columnas",
+    "description": 'Usa el parámetro <code>navigation.columns</code> y <code>navigation.classes</code> para añadir columnas y controlar la anchura de cada una de las secciones de la navegación. Puedes añadir hasta 6 columnas en cada secció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>'
@@ -341,68 +341,85 @@
       "navigation": [
         {
           "title": "Lista de enlaces 1",
-          "columns": 2,
-          "classes": "basis-2/4 -mx-base px-base",
+          "columns": 3,
+          "classes": "basis-3/4 -mx-base px-base",
           "items": [
             {
-              "href": "#1",
+              "href": "#",
               "text": "Navigation item 1"
             },
             {
-              "href": "#2",
+              "href": "#",
               "text": "Navigation item 2"
             },
             {
-              "href": "#3",
+              "href": "#",
               "text": "Navigation item 3"
             },
             {
-              "href": "#4",
+              "href": "#",
               "text": "Navigation item 4"
             },
             {
-              "href": "#5",
+              "href": "#",
               "text": "Navigation item 5"
             },
             {
-              "href": "#6",
+              "href": "#",
               "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": "#",
+              "text": "Navigation item 7"
             },
             {
-              "href": "#2",
-              "text": "Navigation item 2"
+              "href": "#",
+              "text": "Navigation item 8"
             },
             {
-              "href": "#3",
-              "text": "Navigation item 3"
+              "href": "#",
+              "text": "Navigation item 9"
             },
             {
-              "href": "#4",
-              "text": "Navigation item 4"
+              "href": "#",
+              "text": "Navigation item 10"
             },
             {
-              "href": "#5",
-              "text": "Navigation item 5"
+              "href": "#",
+              "text": "Navigation item 11"
             },
             {
-              "href": "#6",
-              "text": "Navigation item 6"
+              "href": "#",
+              "text": "Navigation item 12"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 13"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 14"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 15"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 16"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 17"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 18"
             }
           ]
         },
         {
-          "title": "Lista de enlaces 3",
+          "title": "Lista de enlaces 2",
           "columns": 1,
           "classes": "basis-1/4 -mx-base px-base",
           "items": [

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

@@ -9,7 +9,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
         <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 %}
-            <ul class="relative space-y-base {%- if nav.columns > 1 %} columns-{{ nav.columns }} gap-base{% endif %}">
+            <ul class="relative space-y-base {%- if nav.columns == 1 %} lg:columns-1 gap-base{% elseif nav.columns == 2 %} lg:columns-2 gap-base{% elseif nav.columns == 3 %} lg:columns-3 gap-base{% elseif nav.columns == 4 %} lg:columns-4 gap-base{% elseif nav.columns == 5 %} lg:columns-5 gap-base{% elseif nav.columns == 6 %} lg:columns-6 gap-base{% elseif nav.columns == 7 %} lg:columns-7 gap-base{% elseif nav.columns == 8 %} lg:columns-8 gap-base{% endif %}">
               {% for item in nav.items %}
               {% if item.text or item.html %}
               <li class="mb-xs">

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

@@ -60,7 +60,7 @@ params:
   - name: columns
     type: integer
     required: false
-    description: Amount of columns to display items in navigation section of the footer.
+    description: Amount of columns to display items in navigation section of the footer. Allowed values: from 1 to 8.
   - name: items
     type: array
     required: false