desy-html 5.2.2 → 6.1.0

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

@@ -16,11 +16,11 @@
     {% if params.icon.html %}
     {{ params.icon.html | safe }}
     {% elseif params.icon.type == 'document' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" 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>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'link' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" 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>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'clipboard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" 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>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
     {% endif %}
   </div>
   {% endif %}

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

@@ -80,11 +80,14 @@
         @apply font-bold;
 
         &::before {
-          content: '✓';
+          @apply bg-center bg-no-repeat bg-cover;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+          content: '';
+          @apply w-3;
+          @apply h-3;
           @apply absolute;
-          @apply top-0;
-          @apply left-0;
-          @apply p-sm;
+          @apply top-3;
+          @apply left-2;
         }
       }
     }

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

@@ -161,6 +161,31 @@
       }
     }
   },
+  {
+    "name": "with classes applied: tabs in mobile",
+    "description": "Modifier class applied: .c-menu-horizontal--tabs-mobile",
+    "data": {
+      "classes": "c-menu-horizontal--tabs-mobile",
+      "items": [
+        {
+          "href": "#",
+          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(2)"><circle cx="2.5" cy="4" r="2.5" fill="currentColor"/><path d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z" fill="currentColor"/><circle cx="2.5" cy="12" r="2.5" fill="currentColor"/><path d="M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/><circle cx="2.5" cy="20" r="2.5" fill="currentColor"/><path d="M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/></g></svg></span><span class="block text-sm">Seguimiento</span></span>'
+        },
+        {
+          "href": "#",
+          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z" fill="currentColor" transform="scale(2)"/><path d="M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z" fill="currentColor" transform="scale(2)"/><path d="M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Documentos</span></span>',
+          "active": true
+        },
+        {
+          "href": "#",
+          "html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Notificaciones</span></span>'
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu horizontal"
+      }
+    }
+  },
   {
     "name": "with idPrefix",
     "description": "See code to display the idPrefix applied",

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

@@ -20,6 +20,32 @@
     }
   }
 
+  .c-menu-horizontal--tabs-mobile {
+    @apply w-full;
+    @apply border-b;
+    @apply border-neutral-dark;
+
+    .c-menu-horizontal__list {
+      @apply flex;
+      @apply -mb-0.5;
+    }
+
+    .c-menu-horizontal__active {
+      @apply px-base;
+      @apply py-base;
+      @apply bg-white;
+      @apply border-neutral-base;
+      @apply border-b-0;
+      @apply rounded-t;
+      @apply no-underline;
+    }
+
+    .c-menu-horizontal__link {
+      @apply px-base;
+      @apply py-base;
+    }
+  }
+
   .c-menu-horizontal__link {
     &:focus span{
       @apply bg-warning-base;

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

@@ -26,7 +26,7 @@
       </span>
     {% 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.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 -%}>
+          {%- 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 -%}>
         <span class="flex items-center pointer-events-none">
           {{ item.html | safe if item.html else item.text }}
         </span>