desy-html 11.1.2 → 11.2.0

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

@@ -156,7 +156,7 @@
               }
             ],
             "attributes": {
-              "aria-labelledby": "active-sub-item-example-item-1"
+              "aria-labelledby": "active-sub-item-example-1"
             }
           }
         },
@@ -179,7 +179,7 @@
               }
             ],
             "attributes": {
-              "aria-labelledby": "active-sub-item-example-item-2"
+              "aria-labelledby": "active-sub-item-example-2"
             }
           }
         },
@@ -202,7 +202,7 @@
               }
             ],
             "attributes": {
-              "aria-labelledby": "active-sub-item-example-item-2"
+              "aria-labelledby": "active-sub-item-example-3"
             }
           }
         }
@@ -298,6 +298,90 @@
       }
     }
   },
+  {
+    "name": "grande",
+    "description": "Usando clases para mostrar los items grandes.",
+    "data": {
+      "idPrefix": "large-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "large-example-item-1",
+          "classes": "c-menu-navigation__button--lg -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "large-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "large-example-item-2",
+          "classes": "c-menu-navigation__button--lg -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "large-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "large-example-item-3",
+          "classes": "c-menu-navigation__button--lg -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "large-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
   {
     "name": "peque",
     "description": "Usando clases para mostrar los items pequeños.",

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

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

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

@@ -767,6 +767,160 @@
       ]
     }
   },
+  {
+    "name": "grande",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "large-items",
+      "idPrefix": "large-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "large-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "large-example-item-2",
+          "classes": "c-menubar__button--lg mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "large-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "large-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "large-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--lg mb-sm mr-sm",
+          "href": "#"
+        }
+      ]
+    }
+  },
   {
     "name": "peque",
     "description": "Usando clases modificadoras en los items.",

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

@@ -73,7 +73,7 @@
 
   .c-menubar__tooltip {
     @apply hidden;
-    
+
     [role="menuitem"],
     [role="menuitemcheckbox"],
     [role="menuitemradio"] {
@@ -138,6 +138,13 @@
   }
 
 
+  .c-menubar__button--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
   .c-menubar__button--sm {
     @apply px-2;
     @apply py-1;

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

@@ -353,6 +353,96 @@
       "classes": "min-w-full"
     }
   },
+  {
+    "name": "tabla con head y filtros con texto personalizado",
+    "description": 'Con <code>"hasFilter": true</code>, con parámetro <code>"filterText"</code> personalizado y clases <code>text-right</code> en columnas numéricas.',
+    "data": {
+      "idPrefix": "table-with-head-and-filters-personalized",
+      "head": [
+        {
+          "text": "Mes de pago",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Selecciona mes...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Enero"
+              },
+              {
+                "value": 2,
+                "text": "Febrero"
+              },
+              {
+                "value": 3,
+                "text": "Marzo"
+              }
+            ]
+          },
+          "filterText": "Filtrar por mes"
+        },
+        {
+          "text": "Primer pago",
+          "classes": "text-right",
+          "hasFilter": true,
+          "filterText": "Filtrar por pago en esta columna"
+        },
+        {
+          "text": "Segundo pago",
+          "classes": "text-right",
+          "hasFilter": true,
+          "filterText": "Filtrar por pago en esta columna"
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "Enero"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Febrero"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Marzo"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    }
+  },
   {
     "name": "tabla con head y selectores",
     "description": 'Selectores y clases de <code>text-right</code> en columnas numéricas.',

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

@@ -76,7 +76,7 @@
               "classes": "-mt-sm mb-0"
             },
             "label": {
-              "text": "Filtrar por esta columna",
+              "text":  item.filterText if item.filterText else "Filtrar en esta columna",
               "classes": "sr-only"
             },
             "id": item.select.id if item.select.id else idSelect,
@@ -97,12 +97,12 @@
               "classes": "mb-0"
             },
             "label": {
-              "text": "Buscar en esta columna",
+              "text": item.filterText if item.filterText else "Filtrar en esta columna",
               "classes": "sr-only"
             },
             "id": idFilter,
             "name": idFilter,
-            "placeholder": "Buscar",
+            "placeholder": item.filterText if item.filterText else "Filtrar",
             "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
             "buttonClasses": "m-xs p-0.5 text-xs",
             "attributes": {

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -57,6 +57,10 @@ params:
     type: boolean
     required: false
     description: If `true`, shows a filter input in head cell.
+  - name: filterText
+    type: string
+    required: false
+    description: Text for sr-only labels and placeholder for filter input in head cell.
   - name: filterClasses
     type: string
     required: false

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

@@ -409,6 +409,49 @@
         }
       ]
     }
+  },
+    {
+    "name": "Con aspecto de Links list",
+    "description": 'Usa la clase <code>.tabs--reset</code> para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada <code>.tabs--list</code> para dar estilo a los elementos. Añade estilos adicionales con los parámetros <code>tablistClasses</code> y <code>panel.classes</code> para posicionar y tener mayor control del estilo de los elementos.',
+    "data": {
+      "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
+      "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
+      "idPrefix": "tab-links-list",
+      "items": [
+        {
+          "html": '<div class="flex gap-base justify-between items-center flex-1 c-link">Tab 1</div><div class="self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg></div>',
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": '<div class="flex gap-base justify-between items-center flex-1 c-link">Tab 2</div><div class="self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg></div>',
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": '<div class="flex gap-base justify-between items-center flex-1 c-link">Tab 3</div><div class="self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg></div>',
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": '<div class="flex gap-base justify-between items-center flex-1 c-link">Tab 4</div><div class="self-center h-full text-primary-base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="hidden lg:block self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg></div>',
+          "panel": {
+            "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        }
+      ],
+      "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
+      "attributes": {
+        "id": "tabs-list"
+      }
+    }
   },
   {
     "name": "con ids individuales",

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

@@ -3,31 +3,31 @@
    ========================================================================== */
 
 @layer components {
-  .c-tabs__heading {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__heading {
     @apply lg:sr-only mb-sm text-sm;
   }
 
-  .c-tabs__tabs {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__tabs {
     @apply lg:relative lg:w-full lg:flex lg:snap-x lg:overflow-x-auto lg:-mb-0.5;
   }
 
-  .c-tabs__link {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__link {
     @apply relative flex-none flex items-center py-sm lg:px-base lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent lg:snap-start;
   }
 
-  .c-tabs__link--is-active {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__link--is-active {
     @apply lg:bg-white lg:border-neutral-base lg:border-b-0 lg:rounded-t no-underline;
   }
 
-  .c-tabs__panel {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__panel {
     @apply p-base mt-base lg:mt-px border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base;
   }
 
-  .c-tabs__panel-heading {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__panel-heading {
     @apply lg:sr-only;
   }
 
-  .c-tabs--scroll {
+  .c-tabs:not(.c-tabs--reset) .c-tabs--scroll {
     .c-tabs__heading {
       @apply sr-only;
     }
@@ -52,4 +52,27 @@
       @apply sr-only;
     }
   }
+
+  .c-tabs--list {
+    .c-tabs__heading {
+      @apply lg:sr-only mb-sm text-sm;
+    }
+
+    .c-tabs__link {
+      @apply relative lg:px-base focus:outline-none;
+
+      & > span,
+      & > strong {
+        @apply flex items-center flex-1 py-sm lg:py-base;
+
+        & > span {
+          @apply w-full;
+        }
+      }
+    }
+
+    .c-tabs__panel-heading {
+      @apply sr-only;
+    }
+  }
 }

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

@@ -20,7 +20,7 @@
     {% endif %}
   </div>
   {% if(params.items | length) %}
-  <div class="c-tabs__tabs" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
+  <div class="c-tabs__tabs {%- if params.tablistClasses %} {{ params.tablistClasses }}{% endif %}" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
     {% for item in params.items %}
       {% if item %}
         {% set id = item.id if item.id else idPrefix + "-" + loop.index %}

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

@@ -15,6 +15,10 @@ params:
   type: number
   required: false
   description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: tablistClasses
+  type: string
+  required: false
+  description: Classes to add to the role=tablist element
 - name: tablistAriaLabel
   type: string
   required: true