desy-html 11.1.2 → 11.2.0

package/src/css/component.text.css

@@ -9,43 +9,43 @@
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h1 {
       @apply mb-lg;
       @apply text-3xl;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h2 {
       @apply mb-base;
       @apply text-2xl;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h3 {
       @apply mb-sm;
       @apply text-lg;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-h4 {
       @apply mb-sm;
       @apply text-base;
       @apply font-bold;
       @apply leading-tight;
     }
-  
+
     .c-link {
       @apply text-primary-base;
       @apply underline;
-  
+
       &:hover {
         @apply text-primary-dark;
       }
-  
+
       &:focus {
         @apply bg-warning-base;
         @apply shadow-outline-focus;
@@ -53,26 +53,26 @@
         @apply text-black;
       }
     }
-  
+
     .c-link--alert {
       @apply text-alert-base;
       @apply underline;
       @apply font-semibold;
-  
+
       &:hover {
         @apply text-alert-dark;
       }
     }
-  
+
     .c-link--neutral {
       @apply text-neutral-dark;
       @apply underline;
-  
+
       &:hover {
         @apply text-black;
       }
     }
-  
+
     .c-link--full {
       &::after {
         content:"";
@@ -80,31 +80,40 @@
         @apply inset-0;
       }
     }
-  
+
+    .c-link--no-underline {
+      @apply text-current;
+      @apply no-underline;
+
+      &:hover {
+        @apply underline;
+      }
+    }
+
     .c-paragraph-lg {
       @apply mb-lg;
       @apply text-lg;
     }
-  
+
     .c-paragraph-base {
       @apply mb-base;
       @apply text-base;
     }
-  
+
     .c-paragraph-sm {
       @apply mb-sm;
       @apply text-sm;
     }
-  
+
     .c-ul {
       @apply mb-base;
       @apply list-none;
-  
+
       li {
         @apply relative;
         @apply mb-base;
         @apply pl-8;
-  
+
         &::before {
           content: "";
           @apply absolute;
@@ -115,32 +124,32 @@
           @apply bg-black;
           @apply rounded-full;
         }
-  
+
         &:last-of-type {
           @apply mb-0;
         }
       }
     }
-  
+
     .c-ul--no-bullets {
       li {
         @apply pl-0;
-  
+
         &::before {
           @apply hidden;
         }
       }
     }
-  
+
     .c-ol {
       @apply mb-base;
       counter-reset: list-counter;
-  
+
       li {
         @apply relative;
         @apply mb-base;
         @apply pl-8;
-  
+
         &::before {
           counter-increment: list-counter;
           content: counter(list-counter) ".";
@@ -148,11 +157,10 @@
           left: .25rem;
           @apply text-black;
         }
-  
+
         &:last-of-type {
           @apply mb-0;
         }
       }
     }
   }
-  

package/src/js/aria/linksList.js

@@ -0,0 +1,42 @@
+export function LinksList(aria) {
+
+  aria.linksListInit = function (domNode) {
+    this.rootEl = domNode;
+  };
+
+  window.activateItemLinksList = function (wrapperId, activeItemId) {
+    const activeItem = document.querySelector(`#${wrapperId} #${activeItemId}`);
+    if (activeItem) {
+      activateElement(wrapperId, activeItemId);
+      return [activeItem];
+    } else {
+      console.log('There is no element with this id in the menu.');
+      return null;
+    }
+  };
+
+  function activateElement(wrapperId, elementActive) {
+    const getWrapper = document.getElementById(wrapperId);
+    getWrapper.querySelectorAll('li').forEach((element) => {
+      const getLink = element.querySelector('a');
+      if (getLink) {
+        if (getLink.id === elementActive) {
+          wrapActiveElement(getLink);
+        } else {
+          deactivateElement(getLink);
+        }
+      }
+    });
+  };
+
+  function wrapActiveElement(elementActive) {
+    const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
+    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+  };
+
+  function deactivateElement(elementDeactivated) {
+    const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
+    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+    getText.textContent = `${replaceStrong}`;
+  };
+}

package/src/js/aria/treeitem.js

@@ -285,9 +285,11 @@ export function Treeitem(aria) {
     }
 
     if(typeof itemsIds !== 'object' && open !== null) {
+      const getElement = document.querySelector(`nav #${elementId}`);
+      const isTreeNavigation = getElement.hasAttribute('data-tree-navigation');
       const selectItem = document.querySelector(`#${elementId} #${itemsIds}`)
       if(selectItem) {
-        activateElement(selectItem, open)
+        activateElement(selectItem, open, isTreeNavigation)
       } else {
         returnMessage()
       }
@@ -306,9 +308,14 @@ export function Treeitem(aria) {
     }
   }
 
-  function activateElement(item, open) {
+  function activateElement(item, open, treeNav = false) {
     if(open === true) {
       item.setAttribute('aria-expanded', 'true');
+      if(treeNav) {
+        const getLink = item.querySelector('a')
+        getLink.setAttribute("aria-current", "page");
+        getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+      }
       recursiveParent(item)
     } else {
       item.setAttribute('aria-expanded', 'false');

package/src/js/desy-html.js

@@ -8,6 +8,7 @@ import { PopupMenuAction } from './aria/PopupMenuAction.js';
 import { MenubarItemAction } from './aria/MenubarItemAction.js';
 import { MenubarAction } from './aria/MenubarAction.js';
 import { listbox } from './aria/listbox.js';
+import { LinksList } from './aria/linksList.js';
 import { alert } from './aria/alert.js';
 import { Treeitem } from './aria/treeitem.js';
 import { Tree } from './aria/tree.js';
@@ -246,6 +247,15 @@ export function listboxComponent(aria) {
   }
 }
 
+export function linksListComponent(aria) {
+  LinksList(aria);
+
+  const modules = document.querySelectorAll('[data-module="c-links-list"]');
+  [...modules].forEach((module) => {
+    aria.linksListInit(module);
+  });
+}
+
 export function menubarComponent(aria) {
   PopupMenuItemAction(aria);
   PopupMenuAction(aria);

package/src/js/index.js

@@ -10,6 +10,7 @@ import {
   dialogComponent,
   dropdownComponent,
   listboxComponent,
+  linksListComponent,
   menubarComponent,
   tableAdvancedComponent,
   tabsComponent,
@@ -35,6 +36,7 @@ collapsibleComponent(aria);
 dialogComponent(aria);
 dropdownComponent(aria);
 listboxComponent(aria);
+linksListComponent(aria);
 menubarComponent(aria);
 tableAdvancedComponent(aria);
 tabsComponent(aria);

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

@@ -173,6 +173,13 @@
       "classes": "w-full justify-center"
     }
   },
+  {
+    "name": "grande y primario",
+    "data": {
+      "text": "Grande y primario",
+      "classes": "c-button--lg c-button--primary"
+    }
+  },
   {
     "name": "peque",
     "data": {
@@ -253,7 +260,7 @@
       "href": "/",
       "classes": "c-button--primary align-bottom"
     }
-    
+
   },
   {
     "name": "button peque sólo con icono",
@@ -262,7 +269,7 @@
       "href": "/",
       "classes": "c-button--primary c-button--sm align-bottom"
     }
-    
+
   },
   {
     "name": "input",

package/src/templates/components/button/_styles.button.css

@@ -81,6 +81,13 @@
   }
 
 
+  .c-button--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
   .c-button--primary {
     @apply bg-primary-base;
     @apply text-white;

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

@@ -192,6 +192,13 @@
       "classes": "c-button-loader--transparent"
     }
   },
+  {
+    "name": "grande",
+    "data": {
+      "text": "Grande y primario",
+      "classes": "c-button-loader--lg c-button-loader--primary"
+    }
+  },
   {
     "name": "peque",
     "data": {
@@ -235,7 +242,7 @@
   {
     "name": "botón con icono a la izquierda",
     "data": {
-    
+
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center mr-2" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>Botón con icono',
       "href": "/"
     }

package/src/templates/components/button-loader/_styles.button-loader.css

@@ -83,6 +83,12 @@
     @apply text-base;
   }
 
+  .c-button-loader--lg {
+    @apply px-3;
+    @apply py-2;
+    @apply text-lg;
+  }
+
 
   .c-button-loader--sm {
     @apply px-2;

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

@@ -59,6 +59,14 @@
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
+  {
+    "name": "grande",
+    "data": {
+      "text": "Grande",
+      "classes": "c-dropdown--lg",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
   {
     "name": "peque",
     "data": {

package/src/templates/components/dropdown/_styles.dropdown.css

@@ -69,6 +69,13 @@
   }
 
 
+  .c-dropdown--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
   .c-dropdown--sm {
     @apply px-2;
     @apply py-1;

package/src/templates/components/links-list/_examples.links-list.njk

@@ -459,9 +459,6 @@
     "name": "con atributos",
     "description": "Muestra el código para ver cómo se aplican los atributos.",
     "data": {
-      "attributes": {
-        "id": "nav-id-example"
-      },
       "items": [
         {
           "href": "#",
@@ -518,7 +515,8 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu destacado"
+        "aria-label": "Menu destacado",
+        "id": "nav-id-example"
       }
     }
   },
@@ -591,5 +589,30 @@
         "aria-label": "Menu destacado"
       }
     }
+  },
+  {
+    "name": "Activar un item con Javascript",
+    "description": 'Puedes activar un item con Javascript, usa la función global <code>activateItemLinksList(elementWrapper, idItem)</code> para activar un item de la lista, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemLinksList("links-list-js", "links-list-js-3")</code> para activar el último item de la lista.',
+    "data": {
+      "idPrefix": "links-list-js",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado",
+        "id": "links-list-js"
+      }
+    }
   }
-] %}
+] %}

package/src/templates/components/links-list/_template.links-list.njk

@@ -33,7 +33,7 @@
             {% endif %}
           </div>
           {% endif %}
-          <div class="flex-1">
+          <div data-element="c-links-list__text" class="flex-1">
             {% if item.active %}
             <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
             {% else %}
@@ -106,14 +106,14 @@
 
 <!-- links-list -->
 {% if params.hasNav == false %}
-<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+<div data-module="c-links-list" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {{ innerHtml | trim | safe }}
 </div>
 {% else %}
-<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+<nav data-module="c-links-list" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {{ innerHtml | trim | safe }}
 </nav>
 {% endif %}
-<!-- /links-list -->
+<!-- /links-list -->

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

@@ -270,6 +270,41 @@
         ]
       }
     },
+    {
+      "name": "grande",
+      "description": "Label solo visible para lectores de pantalla.",
+      "data": {
+        "id": "large",
+        "text": "Grande",
+        "label": {
+          "text": "Esto es un label",
+          "classes": "sr-only"
+        },
+        "classes": "c-listbox--lg",
+        "items": [
+          {
+            "href": "#",
+            "text": "Opción 1"
+          },
+          {
+            "href": "#",
+            "text": "Opción 2"
+          },
+          {
+            "href": "#",
+            "text": "Opción 3"
+          },
+          {
+            "href": "#",
+            "text": "Opción 4"
+          },
+          {
+            "href": "#",
+            "text": "Opción 5"
+          }
+        ]
+      }
+    },
     {
       "name": "peque tiene selección",
       "description": "Un botón con una selección aplicada se muestra con color. Label solo visible para lectores de pantalla.",
@@ -620,7 +655,7 @@
       "name": "Menú abierto o cerrado con Javascript",
       "description": 'Podemos abrir o cerrar un menú usando con javascript la función global <code>toggleMenuListbox(elementMenu, open)</code> para abrir o cerrar un menú, usando su id. El parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos <code>true</code> abrirá el menú, y si le pasamos <code>false</code> cerrará el menú. Ej: Abre la consola del navegador y escribe <code>toggleMenuListbox("listbox-javascript", true)</code> para abrir el menú de este ejemplo.',
       "data": {
-        "id": "with-active-item",
+        "id": "with-active-unactive-item",
         "text": "con item activo",
         "label": {
           "text": "Esto es un label"

package/src/templates/components/listbox/_styles.listbox.css

@@ -107,6 +107,13 @@
   }
 
 
+  .c-listbox--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
   .c-listbox--sm {
     @apply px-2;
     @apply py-1;

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

@@ -24,7 +24,7 @@
 
 {% set commonTooltipAttributes %} data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" {%- if params.label  %} aria-labelledby="{{ params.id }}-label"{% endif %}
 {% if params.isMultiselectable %} aria-multiselectable="true"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
+{% endset %}
 
 {%- set classNames = "c-listbox" -%}
 
@@ -40,7 +40,7 @@ treat it as an interactive element - without this it will be
 {% endset %}
 
 
-{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}