desy-html 12.1.0 → 13.0.0

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

@@ -1,310 +1,310 @@
-{% set exampleComponent = "input" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "id": "input-example-a",
-      "name": "test-name"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "id": "input-example-b",
-      "name": "test-name",
-      "disabled": true
-    }
-  },
-  {
-    "name": "con pista",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-hint-text",
-      "name": "test-name"
-    }
-  },
-  {
-    "name": "con mensaje de error",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-error-message-a",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con mensaje de error con id personalizado",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-error-message-b",
-      "name": "test-name",
-      "errorId": "custom-error-id",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con clase de anchura completa",
-    "description": "Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-width-full",
-      "name": "test-width-full",
-      "classes": "w-full"
-    }
-  },
-  {
-    "name": "con clase de anchura 1/2",
-    "description": "Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-width-half",
-      "name": "test-width-half",
-      "classes": "w-1/2"
-    }
-  },
-  {
-    "name": "con clase width-32",
-    "description": "Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-width-32",
-      "name": "test-width-32",
-      "classes": "w-32"
-    }
-  },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "label": {
-        "text": "Esto es un label",
-        "isPageHeading": true
-      },
-      "id": "input-with-page-heading",
-      "name": "test-name"
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "id": "input-example-c",
-      "name": "test-name",
-      "formGroup": {
-        "classes": "p-base bg-primary-light"
-      }
-    }
-  },
-  {
-    "name": "con valores de autocompletado",
-    "data": {
-      "label": {
-        "text": "Código postal"
-      },
-      "id": "input-with-autocomplete-attribute",
-      "name": "postcode",
-      "autocomplete": "postal-code"
-    }
-  },
-  {
-    "name": "con al atributo pattern",
-    "description": "Usa el atributo <code>pattern</code> para elegir un patrón de entrada de datos nativo del navegador.",
-    "data": {
-      "label": {
-        "text": "Solo números"
-      },
-      "id": "input-with-pattern-attribute",
-      "name": "numbers-only",
-      "type": "tel",
-      "pattern": "[0-9]*"
-    }
-  },
-  {
-    "name": "campo obligatorio",
-    "description": "El formulario debe comenzar con un párrafo que ponga: <em>* Todos los campos marcados con asterisco son obligatorios.</em>",
-    "data": {
-      "label": {
-        "text": "Campo obligatorio *"
-      },
-      "id": "input-with-required-attribute",
-      "name": "input-with-required-attribute",
-      "attributes": {
-        "required": ""
-      }
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "label": {
-        "text": "Input peque"
-      },
-      "id": "classes-applied-a",
-      "name": "classes-applied-a",
-      "classes": "c-input--sm"
-    }
-  },
-  {
-    "name": "Con clases de css aplicadas",
-    "description": "Label en linea + Input flexible y mensaje de error",
-    "data": {
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
-      },
-      "label": {
-        "text": "Label en línea:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "id": "classes-applied-b",
-      "name": "classes-applied-b",
-      "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "classes": "lg:flex-1"
-    }
-  },
-  {
-    "name": "Tipo personalizado",
-    "description": "Si no se espacifica, el tipo por defecto es <code>text</code>. Este Input tiene un <code>type='number'</code>",
-    "data": {
-      "label": {
-        "text": "Input de tipo número"
-      },
-      "id": "custom-type",
-      "name": "custom-type",
-      "type": "number"
-    }
-  },
-  {
-    "name": "valor",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "id": "value",
-      "name": "valor",
-      "value": "Esto es un valor"
-    }
-  },
-  {
-    "name": "placeholder",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "id": "con-placeholder",
-      "name": "placeholder",
-      "placeholder": "Esto es un placeholder"
-    }
-  },
-  {
-    "name": "con describedBy",
-    "data": {
-      "label": {
-        "text": "Con describedBy"
-      },
-      "id": "with-describedby-a",
-      "name": "with-describedby-a",
-      "describedBy": "input-example-a"
-    }
-  },
-  {
-    "name": "Pista con describedBy",
-    "data": {
-      "label": {
-        "text": "Pista con describedBy"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "with-describedby-b",
-      "name": "with-describedby-b",
-      "describedBy": "input-example-a"
-    }
-  },
-  {
-    "name": "error con describedBy",
-    "data": {
-      "label": {
-        "text": "Error con describedBy"
-      },
-      "id": "with-describedby-c",
-      "name": "with-describedby-c",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con error, pista y describedBy",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-both",
-      "name": "test-name",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "inputmode",
-    "description": "Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode='email'</code>",
-    "data": {
-      "label": {
-        "text": "Inputmode"
-      },
-      "id": "con-inputmode",
-      "name": "inputmode",
-      "inputmode": "email"
-    }
-  }
+{% set exampleComponent = "input" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "id": "input-example-a",
+      "name": "test-name"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "id": "input-example-b",
+      "name": "test-name",
+      "disabled": true
+    }
+  },
+  {
+    "name": "con pista",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-with-hint-text",
+      "name": "test-name"
+    }
+  },
+  {
+    "name": "con mensaje de error",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-with-error-message-a",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: esto es un mensaje de error"
+      }
+    }
+  },
+  {
+    "name": "con mensaje de error con id personalizado",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-with-error-message-b",
+      "name": "test-name",
+      "errorId": "custom-error-id",
+      "errorMessage": {
+        "text": "Error: esto es un mensaje de error"
+      }
+    }
+  },
+  {
+    "name": "con clase de anchura completa",
+    "description": "Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-width-full",
+      "name": "test-width-full",
+      "classes": "w-full"
+    }
+  },
+  {
+    "name": "con clase de anchura 1/2",
+    "description": "Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-width-half",
+      "name": "test-width-half",
+      "classes": "w-1/2"
+    }
+  },
+  {
+    "name": "con clase width-32",
+    "description": "Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-width-32",
+      "name": "test-width-32",
+      "classes": "w-32"
+    }
+  },
+  {
+    "name": "con label como encabezado",
+    "data": {
+      "label": {
+        "text": "Esto es un label",
+        "isPageHeading": true
+      },
+      "id": "input-with-page-heading",
+      "name": "test-name"
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "id": "input-example-c",
+      "name": "test-name",
+      "formGroup": {
+        "classes": "p-base bg-primary-light"
+      }
+    }
+  },
+  {
+    "name": "con valores de autocompletado",
+    "data": {
+      "label": {
+        "text": "Código postal"
+      },
+      "id": "input-with-autocomplete-attribute",
+      "name": "postcode",
+      "autocomplete": "postal-code"
+    }
+  },
+  {
+    "name": "con al atributo pattern",
+    "description": "Usa el atributo <code>pattern</code> para elegir un patrón de entrada de datos nativo del navegador.",
+    "data": {
+      "label": {
+        "text": "Solo números"
+      },
+      "id": "input-with-pattern-attribute",
+      "name": "numbers-only",
+      "type": "tel",
+      "pattern": "[0-9]*"
+    }
+  },
+  {
+    "name": "campo obligatorio",
+    "description": "El formulario debe comenzar con un párrafo que ponga: <em>* Todos los campos marcados con asterisco son obligatorios.</em>",
+    "data": {
+      "label": {
+        "text": "Campo obligatorio *"
+      },
+      "id": "input-with-required-attribute",
+      "name": "input-with-required-attribute",
+      "attributes": {
+        "required": ""
+      }
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "label": {
+        "text": "Input peque"
+      },
+      "id": "classes-applied-a",
+      "name": "classes-applied-a",
+      "classes": "c-input--sm"
+    }
+  },
+  {
+    "name": "Con clases de css aplicadas",
+    "description": "Label en linea + Input flexible y mensaje de error",
+    "data": {
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+      },
+      "label": {
+        "text": "Label en línea:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "id": "classes-applied-b",
+      "name": "classes-applied-b",
+      "errorMessage": {
+        "text": "Error: Esto es un mensaje de error",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "classes": "lg:flex-1"
+    }
+  },
+  {
+    "name": "Tipo personalizado",
+    "description": "Si no se espacifica, el tipo por defecto es <code>text</code>. Este Input tiene un <code>type='number'</code>",
+    "data": {
+      "label": {
+        "text": "Input de tipo número"
+      },
+      "id": "custom-type",
+      "name": "custom-type",
+      "type": "number"
+    }
+  },
+  {
+    "name": "valor",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "id": "value",
+      "name": "valor",
+      "value": "Esto es un valor"
+    }
+  },
+  {
+    "name": "placeholder",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "id": "con-placeholder",
+      "name": "placeholder",
+      "placeholder": "Esto es un placeholder"
+    }
+  },
+  {
+    "name": "con describedBy",
+    "data": {
+      "label": {
+        "text": "Con describedBy"
+      },
+      "id": "with-describedby-a",
+      "name": "with-describedby-a",
+      "describedBy": "input-example-a"
+    }
+  },
+  {
+    "name": "Pista con describedBy",
+    "data": {
+      "label": {
+        "text": "Pista con describedBy"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "with-describedby-b",
+      "name": "with-describedby-b",
+      "describedBy": "input-example-a"
+    }
+  },
+  {
+    "name": "error con describedBy",
+    "data": {
+      "label": {
+        "text": "Error con describedBy"
+      },
+      "id": "with-describedby-c",
+      "name": "with-describedby-c",
+      "describedBy": "input-example-a",
+      "errorMessage": {
+        "text": "Error: esto es un mensaje de error"
+      }
+    }
+  },
+  {
+    "name": "con error, pista y describedBy",
+    "data": {
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "id": "input-with-both",
+      "name": "test-name",
+      "describedBy": "input-example-a",
+      "errorMessage": {
+        "text": "Error: esto es un mensaje de error"
+      }
+    }
+  },
+  {
+    "name": "inputmode",
+    "description": "Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode='email'</code>",
+    "data": {
+      "label": {
+        "text": "Inputmode"
+      },
+      "id": "con-inputmode",
+      "name": "inputmode",
+      "inputmode": "email"
+    }
+  }
 ] %}

package/src/templates/components/input/_macro.input.njk

@@ -1,3 +1,3 @@
-{% macro componentInput(params) %}
-{% include "./_template.input.njk" %}
-{% endmacro %}
+{% macro componentInput(params) %}
+{% include "./_template.input.njk" %}
+{% endmacro %}

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

@@ -1,18 +1,18 @@
-/* ==========================================================================
-   _styles.input.css
-   ========================================================================== */
-
-@layer components {
-  .c-input--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-input--sm {
-    @apply pl-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-}
+/* ==========================================================================
+   _styles.input.css
+   ========================================================================== */
+
+@layer components {
+  .c-input--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-input--sm {
+    @apply pl-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+}