desy-html 5.2.2 → 5.3.0

package/docs/index.html

@@ -38,6 +38,12 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.5.3.0</h3>
+  <ul class="text-sm">
+    <li>Added missing params in input-group for inputs.</li>
+    <li>Docs improvements.</li>
+    <li>Minor validation fixes.</li>
+  </ul>
   <h3>v.5.2.2</h3>
   <ul class="text-sm">
     <li>Minor fixes.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/templates/components/file-upload/_examples.file-upload.njk

@@ -7,7 +7,8 @@
       "name": "file-upload-1",
       "label": {
         "text": "Sube un archivo"
-      }
+      },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
@@ -20,7 +21,8 @@
       },
       "hint": {
         "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
-      }
+      },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
@@ -36,7 +38,8 @@
       },
       "errorMessage": {
         "text": "Error: Error message goes here"
-      }
+      },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
@@ -49,7 +52,8 @@
       },
       "attributes": {
         "accept": ".jpg, .jpeg, .png"
-      }
+      },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
@@ -60,7 +64,8 @@
       "label": {
         "text": "Sube un archivo",
         "isPageHeading": true
-      }
+      },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
@@ -71,6 +76,7 @@
       "label": {
         "text": "Sube un archivo"
       },
+      "classes": "overflow-x-auto max-w-64 lg:max-w-none",
       "formGroup": {
         "classes": "p-base bg-warning-light"
       }

package/src/templates/components/input-group/_template.input-group.njk

@@ -45,6 +45,7 @@
             formGroup: item.formGroup,
             classes: "mb-0 " + (item.classes if item.classes),
             name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+            disabled: item.disabled,
             attributes: item.attributes,
             items: item.selectItems
           }) | indent(6) | trim }}
@@ -72,6 +73,7 @@
           autocomplete: item.autocomplete,
           pattern: item.pattern,
           placeholder: item.placeholder,
+          disabled: item.disabled,
           attributes: item.attributes
         }) | indent(6) | trim }}
       {% endif %}

package/src/templates/components/input-group/params.input-group.yaml

@@ -24,6 +24,10 @@ params:
     type: string
     require: false
     description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
+  - name: value
+    type: string
+    required: false
+    description: If provided, it will be used as the initial value of the input.
   - name: name
     type: string
     required: true
@@ -42,18 +46,22 @@ params:
       type: string
       required: false
       description: Classes to add to the form group.
-  - name: value
-    type: string
-    required: false
-    description: If provided, it will be used as the initial value of the input.
   - name: autocomplete
     type: string
     required: false
-    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "bday-day". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
   - name: pattern
     type: string
     required: false
     description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
+  - name: placeholder
+    type: string
+    required: false
+    description: Placeholder text
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, input will be disabled.
   - name: classes
     type: string
     required: false

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

@@ -614,175 +614,6 @@
       ]
     }
   },
-  {
-    "name": "With one disabled parent item",
-    "data": {
-      "id": "with-disabled",
-      "idPrefix": "disabled-example",
-      "ariaLabel":"Menubar description",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-disabled-example-item-1-2",
-          "disabled": true,
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-disabled-example-item-1-2"
-            }
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-disabled-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-disabled-example-item-2-2"
-            }
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-disabled-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "text": "Group",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-disabled-example-item-3-2"
-            }
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
-          "id": "menuitems-disabled-example-item-4-2",
-          "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"
-                  }
-                ]
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-disabled-example-item-4-2"
-            }
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-disabled-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "#"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
-    }
-  },
   {
     "name": "Small",
     "description": "Using modifier classes in items.",

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

@@ -28,7 +28,7 @@
         {% set subId = "sub-" + id %}
         <li class="relative" role="none">
           {% if item.sub %}
-            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} " id="{{ id }}"
+            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
               {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
               {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
               <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>