npm - desy-html - Versions diffs - 5.3.0 → 6.2.0 - Mend

desy-html 5.3.0 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/src/templates/components/item/params.item.yaml CHANGED Viewed

@@ -75,6 +75,10 @@ params:
     type: string
     required: false
     description: Predefined icon types are `document`, `link`, `clipboard`
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes applied to the parent div of icon. Useful to vertical align the icon.
 - name: isDraggable
   type: boolean
   required: false

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

@@ -80,17 +80,27 @@
         @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;
         }
       }
     }
   }
+  .c-listbox--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
   .c-listbox--sm {
     @apply px-2;
     @apply py-1;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>