desy-html 8.3.1 → 8.4.1

package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css

@@ -17,6 +17,10 @@
       @apply lg:border-b-0;
       @apply lg:rounded-t;
       @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
     }
   }
 
@@ -38,6 +42,10 @@
       @apply border-b-0;
       @apply rounded-t;
       @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
     }
 
     .c-menu-horizontal__link {
@@ -53,6 +61,13 @@
       @apply text-black;
       @apply outline-none;
     }
+
+    &.c-menu-horizontal__active {
+      @apply no-underline;
+      &:hover {
+        @apply underline;
+      }
+    }
   }
 
   .c-menu-horizontal--scroll {

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

@@ -16,9 +16,10 @@
     {% endif %}
     <li>
     {% if item.active %}
-      <span {%- if id %} id="{{ id }}"{% endif %} class="c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <strong>{{ item.html | safe if item.html else item.text }}</strong>
-      </span>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+      </a>
     {% else %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
           {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>

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

@@ -51,8 +51,8 @@
           <li>
             {% if subitem.href %}
             {% if subitem.active %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm font-semibold {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
-              <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
+              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
             </span>
             {% else %}
             <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
@@ -65,7 +65,7 @@
             {% else %}
             <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- 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 -%}>
               {% if subitem.active %}
-              <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
               {% else %}
               {{ subitem.html | safe if subitem.html else subitem.text }}
               {% endif %}

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

@@ -17,7 +17,7 @@
       {% 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.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>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
         {{ item.html | safe if item.html else item.text }}
         {% endif %}
@@ -25,7 +25,7 @@
       {% else %}
       <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>
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
         {% else %}
         {{ item.html | safe if item.html else item.text }}
         {% endif %}
@@ -45,7 +45,7 @@
             {% if subitem.href %}
           <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>
+            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
             {% else %}
             {{ subitem.html | safe if subitem.html else subitem.text }}
             {% endif %}
@@ -53,7 +53,7 @@
             {% else %}
           <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>
+            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
             {% else %}
             {{ subitem.html | safe if subitem.html else subitem.text }}
             {% endif %}

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

@@ -65,6 +65,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav("mi-menu", "nav-with-active-item-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
     "data": {
       "idPrefix": "nav-with-active-item",
       "items": [
@@ -82,7 +83,7 @@
       },
       {
         "href": "#",
-        "text": "Opción 4 activa",
+        "text": "Opción 4",
         "active": true
       },
       {
@@ -91,6 +92,7 @@
       }
       ],
       "attributes": {
+        "id": "mi-menu",
         "aria-label": "Navegación local"
       }
     }

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

@@ -2,7 +2,7 @@
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
 
-{% set commonAttributes %} class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
+{% set commonAttributes %} data-module="c-nav" class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
 
 
@@ -17,20 +17,18 @@
   {% else %}
   {% set id = idPrefix + "-" + loop.index %}
   {% endif %}
-  {% set commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+  {% set commonItemAttributes %} {% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
 <li>
-  {% if item.active %}
-  <span class="flex items-center px-base py-sm font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {% if params.isMenu %} aria-current="true" {% else %} aria-current="page" {% endif %} {{- commonItemAttributes | safe }}>
-    <strong>{{ item.html | safe if item.html else item.text }}</strong>
-  </span>
-  {% else %}
-  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {{- commonItemAttributes | safe }}>
+  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}  {% if item.active %} aria-current="page"{% endif %}{{- commonItemAttributes | safe }}>
+      {% if item.active %}
+      <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+      {% else %}
       {{ item.html | safe if item.html else item.text }}
+      {% endif %}
       {% if item.disabled %}
       <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
       {% endif %}
   </a>
-  {% endif %}
 </li>
   {% if item.divider %}
 <li class="my-sm border-b border-neutral-base" aria-hidden="true">