desy-html 6.0.0 → 6.2.1

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

@@ -95,6 +95,13 @@
   }
 
 
+  .c-menu-navigation__button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-menu-navigation__button--sm {
     @apply px-2;
     @apply py-1;
@@ -184,20 +191,21 @@
 
 
   .c-menu-navigation__button--header {
-    @apply bg-black;
+    @apply bg-transparent;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
     @apply font-normal;
     @apply text-sm;
-    @apply text-white;
+    @apply text-black;
 
     &:hover:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-black;
+      @apply bg-transparent;
       @apply border-none;
       @apply shadow-none;
-      @apply text-white;
+      @apply text-black;
+      @apply underline;
     }
 
     &[disabled],

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

@@ -31,13 +31,13 @@
         {% set subId = "sub-" + id %}
     <li class="relative">
       {% if item.href %}
-        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} 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="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} role="link" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
         </a>
       {% else %}
         <button {%- if item.sub %} aria-expanded="true" aria-controls="{{ id }}-sub-list"{% endif %}
           {%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
+          {% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
           {# Indentation is intentional to output HTML nicely #}
           {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
         </button>

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

@@ -1074,7 +1074,7 @@
           "href": "#"
         }
       ],
-      "classes": "bg-black"
+      "classes": "bg-neutral-lighter"
     }
   },
   {

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

@@ -129,6 +129,13 @@
   }
 
 
+  .c-menubar__button--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-menubar__button--sm {
     @apply px-2;
     @apply py-1;
@@ -218,20 +225,21 @@
 
 
   .c-menubar__button--header {
-    @apply bg-black;
+    @apply bg-transparent;
     @apply border-none;
     @apply rounded-none;
     @apply shadow-none;
     @apply font-normal;
     @apply text-sm;
-    @apply text-white;
+    @apply text-black;
 
     &:hover:not(disabled),
     &.ds-hover:not(disabled) {
-      @apply bg-black;
+      @apply bg-transparent;
       @apply border-none;
       @apply shadow-none;
-      @apply text-white;
+      @apply text-black;
+      @apply underline;
     }
 
     &[disabled],

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

@@ -160,5 +160,65 @@
         "aria-label": "Paginación"
       }
     }
+  },
+  {
+    "name": "with itemsListbox",
+    "data": {
+      "id": "with-items-listbox",
+      "idPrefix": "with-items-listbox",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "hasSelect": true,
+      "itemsListbox": {
+        "items": [
+          {
+            "text": "10",
+            "active": true
+          },
+          {
+            "text": "25"
+          },
+          {
+            "text": "50"
+          },
+          {
+            "text": "75"
+          },
+          {
+            "text": "100"
+          }
+        ]
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": 1
+        },
+        {
+          "href": "#",
+          "text": 2,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
   }
 ] %}

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

@@ -1,6 +1,7 @@
 {% from "../button/_macro.button.njk" import componentButton %}
 {% from "components/listbox/_macro.listbox.njk" import componentListbox %}
 
+
 {#- If an id 'prefix' is not passed, fall back to using a default one
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "pagination-item" %}
@@ -75,7 +76,7 @@
 {% set nextSuffix %}
   {% if (((activePosition + 2) | int + 1)  * params.itemsPerPage | int) < ( params.totalItems | int ) %}<span class="sr-only">:&nbsp;Página {{ activePosition + 2 }} con los resultados del {{ (activePosition + 1) | int * params.itemsPerPage | int }} al {% if (((activePosition + 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition + 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
 {% endset %}
-<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:align-center{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
+<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
   {% if params.hasSelect %}
   <p class="w-full mb-xs text-sm text-neutral-dark">
     Selecciona una página para cargar datos
@@ -120,7 +121,20 @@
     </ul>
   </nav>
   {% endif %}
-  <p class="block lg:ml-auto text-sm text-neutral-dark">
+  {% if params.itemsListbox %}
+    <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+      {{ componentListbox({
+        "id": "items-listbox-" + idPrefix,
+        "text": params.itemsPerPage,
+        "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
+        "doesChangeButtonText": true,
+        "classesContainer": "flex flex-wrap items-center gap-xs",
+        "classes": "c-listbox--sm c-listbox--transparent",
+        "items": params.itemsListbox.items
+      })  }}
+    </div>
+  {% endif %}
+  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
      <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>

package/src/templates/components/pagination/params.pagination.yaml

@@ -39,6 +39,55 @@ params:
   type: string
   required: false
   description: Text for the previous button. Defaults to "Siguiente".
+- name: itemsListbox
+  type: object
+  required: false
+  description: Options for a listbox component to choose number of items per page.
+  - name: label
+    type: object
+    required: true
+    description: Label text or HTML by specifying value for either text or html keys.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the element that acts as label.
+  - name: items
+    type: array
+    required: true
+    description: Array of items objects.
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
+    - name: id
+      type: string
+      required: false
+      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+    - name: active
+      type: boolean
+      required: false
+      description: If true, item will be active.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the item.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the item.
 - name: items
   type: array
   required: true

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

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-radios--base {
+    input[type="radio"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-radios--sm {
     input[type="radio"] {
       @apply w-base !important;

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

@@ -6,7 +6,7 @@
       "id": "searchbar-1",
       "label": {
         "text": "Buscar",
-        "classes": "not-sr-only"
+        "classes": "not-sr-only mb-sm"
       }
     }
   },
@@ -49,7 +49,7 @@
       "id": "searchbar-label-visible",
       "label": {
         "text": "Buscar items recientes",
-        "classes": "not-sr-only"
+        "classes": "not-sr-only mb-sm"
       }
     }
   },

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

@@ -18,7 +18,7 @@
   for: params.id
 }) | indent(2) | trim }}
 <div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
-  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  {%- if not params.button %} w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
+  <input class="c-input block pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  {%- if not params.button %} w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}

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

@@ -31,6 +31,14 @@
   }
 
 
+  .c-select--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-select--sm {
     @apply pl-2;
     @apply py-1;

package/src/templates/components/table-advanced/_template.table-advanced.njk

@@ -84,10 +84,11 @@
                   "items": item.select.items,
                   "describedBy": idHeader,
                   "disabled": item.select.disabled,
-                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full",
+                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
                   "attributes": item.select.attributes
                 })  }}
               {% endif %}
+              {% if item.select and item.hasFilter %}<div class="pb-sm"></div>{% endif %}
               {% if item.hasFilter %}
                 {{ componentSearchbar({
                   "formGroup": {

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

@@ -60,11 +60,11 @@
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
       },
       "onState": {
         "classes": "",
-        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
       },
       "attributes": {
         "aria-labelledby": "id-text"

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

@@ -3,6 +3,14 @@
    ========================================================================== */
 
 @layer components {
+  .c-tree--base {
+    input[type="checkbox"],
+    input[type="radio"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-tree--sm {
     input[type="checkbox"],
     input[type="radio"] {