desy-html 8.1.6 → 8.2.0

package/config/tailwind.config.js

@@ -209,6 +209,5 @@ module.exports = {
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio'),
   ]
 }

package/docs/_macro.example-render.njk

@@ -252,6 +252,19 @@ import componentTree %}
         </div>
       </div>
       <div class="pt-base lg:pt-lg mb-base">
+          {% set htmlContent %}
+            {{ componentButton({
+              "text": "Copiar código",
+              "classes": "c-button--sm c-button--transparent mb-sm",
+              "attributes": {
+                "data-module": "c-button-copy"
+              }
+            }) }}
+            <pre class="hljs"><code class="language-html hljs text-sm">
+                {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
+              </code>
+            </pre>
+          {% endset %}
           {% set nunjucksContent %}
             {% if example.data.caller %}
               {% from "_macro.render-caller.njk" import renderCaller %}
@@ -281,19 +294,6 @@ import componentTree %}
                 <pre class="hljs"><code class="language-js hljs text-sm">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | highlight("twig") | safe -}}</code></pre>
               {% endif %}
           {% endset %}
-          {% set htmlContent %}
-            {{ componentButton({
-              "text": "Copiar código",
-              "classes": "c-button--sm c-button--transparent mb-sm",
-              "attributes": {
-                "data-module": "c-button-copy"
-              }
-            }) }}
-            <pre class="hljs"><code class="language-html hljs text-sm">
-                {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
-              </code>
-            </pre>
-          {% endset %}
         {% call componentDetails({
           "summary": {
             "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + example.name | capitalize + '</span>',

package/docs/_macro.load-component-template.njk

@@ -1,3 +1,3 @@
 {% macro loadComponentTemplate(componentName, params) %}
   {% include "components/" + componentName + "/_template." + componentName + ".njk" %}
-{% endmacro %}
+{% endmacro %}

package/docs/_macro.render-caller.njk

@@ -1,3 +1,3 @@
 {% macro renderCaller(params) %}
-  {{ params | safe }}
+{{ params | safe }}
 {% endmacro %}

package/docs/index.html

@@ -37,6 +37,18 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.2.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select an item in Menu vertical.</li>
+    <li>Added tfoot in Table and Table advanced, that is not affected by orderby. Useful for showing totals in tables.</li>
+    <li>Removed aspect-ratio plugin from Tailwind CSS as it's now baked by default.</li>
+    <li>Added first and last buttons to navigate in Pagination.</li>
+    <li>Minor improvements.</li>
+  </ul>
+  <h3>v.8.1.7</h3>
+  <ul class="text-sm">
+    <li>Fixed bad html copy code in caller components.</li>
+  </ul>
   <h3>v.8.1.6</h3>
   <ul class="text-sm">
     <li>Minor changes in docs.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.1.6",
+  "version": "8.2.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
@@ -32,9 +32,8 @@
     "backstop-test:test": "backstop test --config=test/backstop_config/backstop.config.js"
   },
   "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.7",
+    "@tailwindcss/forms": "~0.5.3",
+    "@tailwindcss/typography": "~0.5.7",
     "autoprefixer": "^10.0.2",
     "hex-rgb": "^5.0.0",
     "highlight.js": "^11.7.0",
@@ -42,7 +41,7 @@
     "postcss": "^8.2.15",
     "postcss-cli": "^10.0.0",
     "postcss-import": "^15.0.0",
-    "tailwindcss": "^3.2.1"
+    "tailwindcss": "~3.2.1"
   },
   "devDependencies": {
     "browser-sync": "^2.26.13",

package/src/js/aria/MenuVertical.js

@@ -0,0 +1,71 @@
+export function MenuVertical(aria) {
+  (function () {
+    aria.MenuVertical = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.MenuVertical.prototype.init = function () {
+      this.valueActive = this.domNode.dataset.menuActive;
+      if(this.valueActive) {
+        this.activateElement(this.valueActive);
+      }
+    };
+
+    aria.MenuVertical.prototype.activateElement = function (elementActive) {
+      this.domNode.querySelectorAll('li').forEach((element, index) => {
+        const processElement = function (elem, parent) {
+          let getId = elem.id
+          if(getId == elementActive){
+            parent.wrapActiveElement(elem)
+          } else {
+            parent.deactivateElement(elem)
+          }
+        }
+        if (element.querySelector('a')) {
+          const getLink = element.querySelector('a');
+          processElement(getLink, this);
+        } else if (element.querySelector('span')) {
+          const getLink = element.querySelector('span');
+          processElement(getLink, this);
+        }
+
+      })
+    };
+
+    aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
+      const getText = elementActive.textContent;
+      const strongElement = `<strong class="font-bold">${getText}</strong>`;
+      elementActive.innerHTML = strongElement;
+    };
+
+    aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
+      const getText = elementDeactivated.textContent;
+      const strongElement = `${getText}`;
+      elementDeactivated.innerHTML = strongElement;
+    };
+
+    window.activateItemMenuVertical = function (menu, elementActive) {
+      menu.querySelectorAll('li').forEach((element, index) => {
+        const processElement = function (elem) {
+          let getId = elem.id
+          if(getId == elementActive){
+            const getText = elem.textContent;
+            const strongElement = `<strong class="font-bold">${getText}</strong>`;
+            elem.innerHTML = strongElement;
+          } else {
+            const getText = elem.textContent;
+            const strongElement = `${getText}`;
+            elem.innerHTML = strongElement;
+          }
+        }
+        if (element.querySelector('a')) {
+          let getLink = element.querySelector('a');
+          processElement(getLink);
+        } else if (element.querySelector('span')) {
+          let getLink = element.querySelector('span');
+          processElement(getLink);
+        }
+      })
+    };
+  }());
+}

package/src/js/aria/dataGrid.js

@@ -574,7 +574,7 @@ export function dataGrid(aria) {
    *  Comparison function to sort the rows
    */
   aria.Grid.prototype.sortRows = function (compareFn) {
-    var rows = this.gridNode.querySelectorAll(aria.GridSelector.ROW);
+    var rows = this.gridNode.querySelectorAll("tbody tr");
     var rowWrapper = this.gridNode.querySelector('tbody');
     var dataRows = Array.prototype.slice.call(rows, 1);
 

package/src/js/desy-html.js

@@ -17,6 +17,7 @@ import { Collapsible } from './aria/collapsible.js';
 import { notification } from './aria/notification.js';
 import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
+import { MenuVertical } from './aria/MenuVertical.js';
 
 
 export function accordionComponent(aria) {
@@ -377,3 +378,16 @@ export function radioButtonComponent(aria) {
 export function checkBoxComponent(aria) {
   CheckBox(aria);
 }
+
+export function MenuVerticalComponent(aria) {
+  MenuVertical(aria);
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-menu-vertical'){
+      const menuVertical = new aria.MenuVertical(modules[item]);
+      menuVertical.init(null);
+    }
+  }
+}

package/src/js/index.js

@@ -19,7 +19,8 @@ import {
   treeComponent,
   notificationComponent,
   radioButtonComponent,
-  checkBoxComponent
+  checkBoxComponent,
+  MenuVerticalComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -40,7 +41,7 @@ treeComponent(aria);
 notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
-
+MenuVerticalComponent(aria);
 
 //Using the browser API to copy code to the clipboard
 const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');

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

@@ -166,6 +166,13 @@
       "classes": "c-button--transparent"
     }
   },
+  {
+    "name": "anchura completa",
+    "data": {
+      "text": "Anchura completa",
+      "classes": "w-full justify-center"
+    }
+  },
   {
     "name": "peque",
     "data": {
@@ -238,7 +245,7 @@
   {
     "name": "botón sólo con icono",
     "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center my-1" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center my-1"  focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" /></svg>',
       "href": "/",
       "classes": "c-button--primary align-bottom"
     }
@@ -246,7 +253,7 @@
   {
     "name": "button peque sólo con icono",
     "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center my-1" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center my-1"  focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/",
       "classes": "c-button--primary c-button--sm align-bottom"
     }

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

@@ -32,7 +32,7 @@
 <!-- button -->
 {%- if element == 'a' %}
 
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
+<a href="{{ params.href if params.href else '#' }}" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 </a>
 

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

@@ -554,15 +554,15 @@
         "items": [
           {
             "href": "#",
-            "html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>'
+            "html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg>'
           },
           {
             "href": "#",
-            "html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg>'
+            "html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"  width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg>'
           },
           {
             "href": "#",
-            "html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>'
+            "html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg>'
           }
         ]
       }

package/src/templates/components/menu-vertical/_examples.menu-vertical.njk

@@ -3,6 +3,7 @@
   {
     "name": "por defecto",
     "data": {
+      "idPrefix": "default",
       "items": [
         {
           "href": "#",
@@ -25,6 +26,7 @@
   {
     "name": "con item deshabilitado",
     "data": {
+      "idPrefix": "disabled-item",
       "items": [
         {
           "href": "#",
@@ -35,7 +37,6 @@
           "text": "Item 2"
         },
         {
-          "href": "#",
           "text": "Item 3",
           "disabled": true
         }
@@ -48,6 +49,7 @@
   {
     "name": "con item activo",
     "data": {
+      "idPrefix": "active-item",
       "items": [
         {
           "href": "#",
@@ -71,6 +73,7 @@
   {
     "name": "con target en enlaces",
     "data": {
+      "idPrefix": "target",
       "items": [
         {
           "href": "#",
@@ -105,6 +108,7 @@
   {
     "name": "con divisor",
     "data": {
+      "idPrefix": "with-divisor",
       "items": [
         {
           "href": "#",
@@ -132,6 +136,7 @@
   {
     "name": "con un texto de item muy largo",
     "data": {
+      "idPrefix": "long-text",
       "items": [
         {
           "href": "#",
@@ -334,7 +339,6 @@
       "hasUnderline": true,
       "items": [
         {
-          "href": "#",
           "text": "Item 1 deshabilitado o sin href",
           "id": "nav-item-item-1-b",
           "disabled": true,
@@ -345,7 +349,6 @@
                 "text": "Subitem 1"
               },
               {
-                "href": "#",
                 "text": "Subitem 2 deshabilitado o sin href",
                 "disabled": true
               },
@@ -513,6 +516,7 @@
     "name": "con atributos",
     "description": "Muestra el código para ver cómo se aplican los atributos",
     "data": {
+      "idPrefix": "with-attributes",
       "attributes": {
         "id": "nav-id-example"
       },
@@ -598,7 +602,7 @@
     "name": "con items mixtos",
     "data": {
       "name": "with-sub-items",
-      "idPrefix": "how-contacted",
+      "idPrefix": "with-mixed-items",
       "items": [
         {
           "href": "#",

package/src/templates/components/menu-vertical/_template.menu-vertical.njk

@@ -20,7 +20,7 @@
         {% set subId = "sub-" + id %}
     <li class="m-base">
       {% if item.href %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% if item.active %}
         <strong>{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
@@ -28,7 +28,7 @@
         {% endif %}
       </a>
       {% else %}
-      <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% if item.active %}
         <strong>{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
@@ -53,7 +53,7 @@
           {%- endif %}
         <li class="m-base origin-top-left text-sm">
             {% if subitem.href %}
-          <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if subitem.active %}
             <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
             {% else %}
@@ -61,7 +61,7 @@
             {% endif %}
           </a>
             {% else %}
-          <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if subitem.active %}
             <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
             {% else %}
@@ -95,8 +95,8 @@
 {% endset -%}
 
 <!-- menu-vertical -->
-<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<nav data-module="c-menu-vertical" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} {%- if params.active %} {% endif %}>
   {{ innerHtml | trim | safe }}
 </nav>
-<!-- /menu-vertical -->
+<!-- /menu-vertical -->

package/src/templates/components/menu-vertical/params.menu-vertical.yaml

@@ -71,3 +71,7 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the nav container.
+- name: active
+  type: boolean
+  required: false
+  description: If true, item will be active.