desy-html 7.3.1 → 8.0.0

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

@@ -1,58 +1,58 @@
 {% set exampleComponent = "dropdown" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "Default",
+      "text": "Por defecto",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class, not available in the production build.",
+    "name": "con estado activo",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.',
     "data": {
-      "text": "Active",
+      "text": "Activo",
       "classes": "ds-active",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class, not available in the production build.",
+    "name": "con estado hover",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.',
     "data": {
-      "text": "Hovered",
+      "text": "Hover",
       "classes": "ds-hover",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class, not available in the production build.",
+    "name": "con estado focus",
+    "description": 'Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.',
     "data": {
-      "text": "Focussed",
+      "text": "Focus",
       "classes": "ds-focus",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Primary",
-    "description": "A button for primary actions",
+    "name": "primario",
+    "description": "Para acciones primarias.",
     "data": {
-      "text": "Primary button",
+      "text": "Primario",
       "classes": "c-dropdown--primary",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Transparent",
+    "name": "transparente",
     "data": {
-      "text": "Transparent",
+      "text": "Transparente",
       "classes": "c-dropdown--transparent",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Header",
+    "name": "Con estilos de cabecera",
     "data": {
       "text": "Header",
       "classes": "c-dropdown--header",
@@ -60,54 +60,53 @@
     }
   },
   {
-    "name": "Small",
-    "description": "A small button",
+    "name": "peque",
     "data": {
-      "text": "Small button with a very long text",
+      "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--sm",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Small has selection",
-    "description": "A button with selection applied",
+    "name": "peque tiene selección",
+    "description": "Un botón con una selección aplicada se muestra con color.",
     "data": {
-      "text": "Small button with a very long text",
+      "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--has-selection c-dropdown--sm",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Disabled",
+    "name": "deshabilitado",
     "data": {
-      "text": "Disabled button",
+      "text": "Deshabilitado",
       "disabled": true,
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Classes applied to container element",
-    "description": "Both button and tooltip elements are wrapped in an outer container div",
+    "name": "Con clases de css aplicadas al container",
+    "description": "Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.",
     "data": {
-      "text": "Classes in container",
-      "classesContainer": "inline-block p-base bg-warning-light",
+      "text": "Clases en container",
+      "classesContainer": "inline-block p-base bg-primary-light",
       "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
     }
   },
   {
-    "name": "Classes applied to tooltip content",
-    "description": "Tooltip content can have additional classes applied",
+    "name": "clases aplicadas al contenido del tooltip",
+    "description": "El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.",
     "data": {
-      "text": "Classes in tooltip content",
+      "text": "Clases al contenido del tooltip",
       "classesTooltip": "max-h-64 overflow-y-auto",
       "caller": "<div class=\" w-64 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"></div></div>"
     }
   },
   {
-    "name": "Classes applied to various elements",
-    "description": "The content width generates the tooltip width in this example",
+    "name": "Clases aplicadas a varios elementos",
+    "description": "En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.",
     "data": {
-      "text": "Dropdown full width",
+      "text": "Dropdown anchura completa",
       "classes": "w-full justify-between",
       "classesTooltip": "w-max max-h-64 overflow-y-auto",
       "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"

package/src/templates/components/error-message/_examples.error-message.njk

@@ -1,9 +1,15 @@
 {% set exampleComponent = "error-message" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "Error message about full name goes here"
+      "text": "Error: esto es un mensaje de error"
+    }
+  },
+  {
+    "name": "con HTML",
+    "data": {
+      "html": 'Error: esto es un <em>mensaje de error con HTML</em>'
     }
   }
 ] %}

package/src/templates/components/error-summary/_examples.error-summary.njk

@@ -1,79 +1,79 @@
 {% set exampleComponent = "error-summary" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "titleText": "There is a problem",
+      "titleText": "Problemas encontrados",
       "headingLevel": 2,
       "errorList": [
         {
-          "text": "The date your passport was issued must be in the past",
+          "text": "El campo de Nombre no puede estar vacío.",
           "href": "#example-error-1"
         },
         {
-          "text": "Enter a postcode, like AA1 1AA",
+          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
           "href": "#example-error-2"
         }
       ]
     }
   },
   {
-    "name": "with headingLevel 3",
+    "name": "Con encabezado de nivel 3",
     "data": {
       "titleText": "Título con h3",
       "headingLevel": 3,
       "errorList": [
         {
-          "text": "The date your passport was issued must be in the past",
+          "text": "El campo de Nombre no puede estar vacío.",
           "href": "#example-error-1"
         },
         {
-          "text": "Enter a postcode, like AA1 1AA",
+          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
           "href": "#example-error-2"
         }
       ]
     }
   },
   {
-    "name": "without links",
+    "name": "sin enlaces",
     "data": {
-      "titleText": "There is a problem",
+      "titleText": "Problemas encontrados",
       "headingLevel": 2,
       "errorList": [
         {
-          "text": "Invalid username or password"
+          "text": "Nombre de usuario o contraseña incorrectos."
         }
       ]
     }
   },
   {
-    "name": "mixed with and without links",
+    "name": "con y sin enlaces",
     "data": {
-      "titleText": "There is a problem",
+      "titleText": "Problemas encontrados",
       "headingLevel": 2,
       "errorList": [
         {
-          "text": "Invalid username or password"
+          "text": "Nombre de usuario o contraseña incorrectos."
         },
         {
-          "text": "Agree to the terms of service to log in",
+          "text": "Acepta los términos del servicio para acceder.",
           "href": "#example-error-1"
         }
       ]
     }
   },
   {
-    "name": "with everything",
+    "name": "con todo",
     "data": {
-      "titleText": "There is a problem",
+      "titleText": "Problemas encontrados",
       "headingLevel": 2,
-      "descriptionText": "Please fix the errors below.",
+      "descriptionText": "Por favor, corrige los problemas siguientes.",
       "errorList": [
         {
-          "text": "Invalid username or password"
+          "text": "Nombre de usuario o contraseña incorrectos."
         },
         {
-          "text": "Agree to the terms of service to log in",
+          "text": "Acepta los términos del servicio para acceder.",
           "href": "#example-error-1"
         }
       ]

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

@@ -1,87 +1,89 @@
 {% from "components/input/_macro.input.njk" import componentInput %}
 
-{% set callerExample %}
+{% macro callerExample(id='id') %}
 {{ componentInput({
   "label": {
     "text": "Número de teléfono"
   },
-  "id": "tel-id",
-  "name": "tel-name"
+  "id": "tel-id-" + id,
+  "name": "tel-name-" + id
 })  }}
-{% endset %}
+{% endmacro %}
 
-{% set callerErrorExample %}
+{% macro callerErrorExample(id='id') %}
 {{ componentInput({
   "label": {
     "text": "Número de teléfono"
   },
-  "id": "tel-error-id",
-  "name": "tel-error-name",
+  "id": "tel-error-id-" + id,
+  "name": "tel-error-name-" + id,
   "errorMessage": {
     "text": "Error: Mensaje de error aqui"
   }
 })  }}
-{% endset %}
+{% endmacro %}
 
 
 {% set exampleComponent = "fieldset" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",
         "classes": "mb-sm"
       },
-      "caller": callerExample
+      "caller": callerExample('1').val
     }
   },
   {
-    "name": "with error",
-    "description": "Show code to display the aria-errormessage applied in html",
+    "name": "con error",
+    "description": 'Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid="true"</code> aplicado en el HTML.',
     "data": {
       "legend": {
-        "text": "What is your phone number?",
+        "text": "¿Cuál es tu número de teléfono?",
         "classes": "mb-sm"
       },
       "errorId": "error-id",
-      "caller": callerErrorExample
+      "caller": callerErrorExample('1').val
     }
   },
   {
-    "name": "as page heading",
+    "name": "con label como encabezado",
+    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>"headingLevel"</code>, por defecto usará un <code>&lt;h1&gt;</code>.',
     "data": {
       "legend": {
-        "text": "What is your phone number?",
+        "text": "¿Cuál es tu número de teléfono?",
         "classes": "c-h1 mb-sm",
         "isPageHeading": true
       },
-      "caller": callerExample
+      "caller": callerExample('2').val
 
     }
   },
   {
-    "name": "as page heading with headingLevel 3",
+    "name": "con label como encabezado con h3",
+    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
     "data": {
       "legend": {
-        "text": "What is your phone number?",
+        "text": "¿Cuál es tu número de teléfono?",
         "classes": "c-h3 mb-sm",
         "isPageHeading": true
       },
       "headingLevel": 3,
-      "caller": callerExample
+      "caller": callerExample('3').val
 
     }
   },
   {
-    "name": "with classes applied",
+    "name": "con clases de css aplicadas",
     "data": {
       "legend": {
-        "text": "What is your phone number?",
-        "classes": "mb-sm"
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "mb-sm -ml-base px-base bg-white"
       },
-      "classes": "p-base bg-warning-light",
-      "caller": callerExample
+      "classes": "p-lg border border-neutral-base",
+      "caller": callerExample('4').val
     }
   }
 ] %}

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "file-upload" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "file-upload-1",
       "name": "file-upload-1",
@@ -12,7 +12,7 @@
     }
   },
   {
-    "name": "with hint text",
+    "name": "con pista",
     "data": {
       "id": "file-upload-2",
       "name": "file-upload-2",
@@ -26,7 +26,7 @@
     }
   },
   {
-    "name": "with error message",
+    "name": "con mensaje de error",
     "data": {
       "id": "file-upload-3",
       "name": "file-upload-3",
@@ -37,13 +37,13 @@
         "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
       },
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       },
       "classes": "overflow-x-auto max-w-64 lg:max-w-none"
     }
   },
   {
-    "name": "with attributes",
+    "name": "con atributos",
     "data": {
       "id": "file-upload-4",
       "name": "file-upload-4",
@@ -57,7 +57,7 @@
     }
   },
   {
-    "name": "with label as page heading",
+    "name": "con label como encabezado",
     "data": {
       "id": "file-upload-5",
       "name": "file-upload-5",
@@ -69,7 +69,7 @@
     }
   },
   {
-    "name": "with optional form-group classes",
+    "name": "con clases de form-group opcionales",
     "data": {
       "id": "file-upload-6",
       "name": "file-upload-6",

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

@@ -1,8 +1,8 @@
 {% set exampleComponent = "footer" %}
 {% set examples =  [
   {
-    "name": "default",
-    "description": "With a large margin top applied by default",
+    "name": "por defecto",
+    "description": 'Con un gran <code>margin-top</code> aplicado por defecto en escritorio que desaparece en móvil.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -11,8 +11,8 @@
     }
   },
   {
-    "name": "with meta links and content",
-    "description": "Secondary navigation links with meta information relating to the site",
+    "name": "con enlaces en meta y contenido",
+    "description": "Enlaces secundarios de navegación con información meta relacionada con el sitio.",
     "data": {
       "meta": {
         "visuallyHiddenTitle": "Enlaces a pie de página",
@@ -48,8 +48,8 @@
     }
   },
   {
-    "name": "with custom meta",
-    "description": "App version number in footer",
+    "name": "con un meta personalizado",
+    "description": "Versión de la app en el pie.",
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>. Versión 4.0.3'
@@ -58,8 +58,8 @@
     }
   },
   {
-    "name": "with custom description",
-    "description": "Substitute default text for custom one",
+    "name": "con descripción personalizada",
+    "description": "Sustituye el texto por defecto por uno personalizado.",
     "data": {
       "description": {
         "html": '<div><p>Copyright © AST. Aragonesa de Servicios Telemáticos.</p></div><div><p>Avda. Ranillas 3A. Planta 3ª. Oficina J. 50018 Zaragoza. Teléfono: 976 714 495. <a href="mailto:ast@aragon.es" class="c-link c-link--neutral">ast@aragon.es</a></p></div>'
@@ -68,8 +68,8 @@
     }
   },
   {
-    "name": "with html content over FEDER logo",
-    "description": "Use this content to insert another logo, link...",
+    "name": "con contenido HTML sobre el logo FEDER",
+    "description": "Utiliza este contenido para insertar otro logo o enlaces.",
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -81,8 +81,8 @@
     }
   },
   {
-    "name": "without custom url to FEDER logo",
-    "description": "Use urlFeder to customize the link url that links from EU Feder logo.",
+    "name": "con enlace personalizado del logo FEDER",
+    "description": 'Usa <code>urlFeder</code> para personalizar la url del enlace del logo EU Feder.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -92,8 +92,8 @@
     }
   },
   {
-    "name": "without logo",
-    "description": "Use noLogo to hide default EU Feder logo.",
+    "name": "sin logo",
+    "description": 'Usa <code>noLogo</code> para ocultar el logo por defecto de EU Feder.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -103,8 +103,8 @@
     }
   },
   {
-    "name": "only with custom logo",
-    "description": "Use noLogo to hide default EU Feder logo.",
+    "name": "solo con logo personalizado",
+    "description": 'Usa <code>noLogo</code> para ocultar el logo por defecto de EU Feder y usa <code>icon</code> para insertar un logo svg inline, respetando los atributos aria necesarios.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -117,8 +117,8 @@
     }
   },
   {
-    "name": "with custom description and noLogo",
-    "description": "Substitute default text for custom one",
+    "name": "con descripción personalizada y sin logo",
+    "description": "Sustituye el texto por defecto con uno personalizado.",
     "data": {
       "noLogo": true,
       "description": {
@@ -128,15 +128,15 @@
     }
   },
   {
-    "name": "Navigation with 3 equal columns",
-    "description": "A full example to demonstrate three equal width columns",
+    "name": "navegación con 3 columnas iguales",
+    "description": 'Usa el parámetro <code>navigation</code> para añadir columnas de navegación.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
       },
       "navigation": [
         {
-          "title": "Single column list 1",
+          "title": "Lista de enlaces 1",
           "columns": 1,
           "items": [
             {
@@ -166,7 +166,7 @@
           ]
         },
         {
-          "title": "Single column list 2",
+          "title": "Lista de enlaces 2",
           "columns": 1,
           "items": [
             {
@@ -196,7 +196,7 @@
           ]
         },
         {
-          "title": "Single column list 3",
+          "title": "Lista de enlaces 3",
           "columns": 1,
           "items": [
             {
@@ -230,7 +230,7 @@
     }
   },
   {
-    "name": "email template example with SDA logo",
+    "name": "plantilla de correo electrónico con logo de SDA",
     "description": "Ejemplo para plantilla de email por defecto. Para comunicaciones internas, con logo SDA",
     "data": {
       "meta": {

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

@@ -73,7 +73,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
             <a
               class="c-link c-link--neutral"
               href="https://www.aragon.es/"
-            >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
+            >Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title="Paseo">Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono">Tel.</abbr> <a href="tel:+34976714000" class="c-link c-link--neutral">976 714 000</a>
           </p>
         </div>
         {% endif %}