desy-html 7.3.1 → 7.4.0

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

@@ -1,459 +1,458 @@
 {% from "components/input/_macro.input.njk" import componentInput %}
 
-{% set telefonoContent %}
+{% macro telefonoContent(id='id') %}
   {{ componentInput({
     "label": {
       "text": "Número de teléfono"
     },
-    "id": "telefono-a",
-    "name": "telefono-name"
+    "id": "telefono-" + id,
+    "name": "telefono-name-" + id
   })  }}
-{% endset %}
+{% endmacro %}
 
-{% set mobileContent %}
+{% macro mobileContent(id='id') %}
   {{ componentInput({
     "label": {
       "text": "Número de teléfono móvil"
     },
-    "id": "mobile-a",
-    "name": "mobile-name"
+    "id": "mobile-" + id,
+    "name": "mobile-name-" + id
   })  }}
-{% endset %}
+{% endmacro %}
 
-{% set mobileErrorContent %}
+{% macro mobileErrorContent(id='id') %}
   {{ componentInput({
     "label": {
       "text": "Número de teléfono móvil"
     },
-    "id": "input-with-error-message-a",
-    "name": "test-name",
+    "id": "input-with-error-message-" + id,
+    "name": "test-name-" + id,
     "errorMessage": {
       "text": "Error: Este campo no puede estar vacío"
     }
   })  }}
-{% endset %}
-
-
+{% endmacro %}
 
 
 
 {% set exampleComponent = "checkboxes" %}
 {% set examples =  [{
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "idPrefix": "default",
       "name": "default",
       "fieldset": {
         "legend": {
-          "text": "What is your nationality?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "hint": {
-        "text": "If you have dual nationality, select all options that are relevant to you."
+        "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "items": [
         {
-          "value": "british",
-          "text": "British"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "irish",
-          "text": "Irish"
+          "value": "correo-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "other",
-          "text": "Citizen of another country"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with id and name",
+    "name": "Con id y name",
     "data": {
       "idPrefix": "with-id-and-name",
       "name": "with-id-and-name",
       "fieldset": {
         "legend": {
-          "text": "What is your nationality?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "hint": {
-        "text": "If you have dual nationality, select all options that are relevant to you."
+        "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "items": [
         {
-          "name": "british",
-          "id": "item_british",
-          "value": "yes",
-          "text": "British"
+          "name": "correo-electronico",
+          "id": "correo-electronico-id",
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "name": "irish",
-          "id": "item_irish",
-          "value": "irish",
-          "text": "Irish"
+          "name": "correo-postal",
+          "id": "correo-postal-id",
+          "value": "correo-postal",
+          "text": "Correo postal"
         }
       ]
     }
   },
   {
-    "name": "with hints on items",
+    "name": "con pistas en los items",
     "data": {
       "idPrefix": "hints-on-items",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "isPageHeading": true
         }
       },
       "items": [
         {
-          "name": "gateway",
-          "id": "government-gateway-a",
-          "value": "desy-gateway",
-          "text": "Sign in with Government Gateway",
+          "name": "correo-electronico",
+          "id": "correo-electronico-a",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
           "hint": {
-            "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
           }
         },
         {
-          "name": "verify",
-          "id": "desy-verify-a",
-          "value": "desy-verify-a",
-          "text": "Sign in with DESY Verify",
+          "name": "correo-postal",
+          "id": "desy-correo-postal-a",
+          "value": "desy-correo-postal-a",
+          "text": "Correo postal",
           "hint": {
-            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
           }
         }
       ]
     }
   },
   {
-    "name": "with hasDividers",
+    "name": "Con líneas divisorias",
     "data": {
       "idPrefix": "has-dividers",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "hint": {
-        "text": "Please, choose the right answer."
+        "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "hasDividers": true,
       "items": [
         {
-          "name": "gateway",
-          "id": "government-gateway-b",
-          "value": "desy-gateway",
-          "text": "Sign in with Government Gateway"
+          "name": "correo-electronico",
+          "id": "correo-electronico-b",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "name": "verify",
-          "id": "desy-verify-b",
-          "value": "desy-verify-b",
-          "text": "Sign in with DESY Verify",
+          "name": "correo-postal",
+          "id": "desy-correo-postal-b",
+          "value": "desy-correo-postal-b",
+          "text": "Correo postal",
           "hint": {
-            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
           }
         },
         {
-          "name": "phone",
-          "id": "phone-b",
-          "value": "phone",
-          "text": "Verify with Phone",
+          "name": "telefono",
+          "id": "telefono-b",
+          "value": "telefono",
+          "text": "Teléfono",
           "checked": true,
           "conditional": {
-            "html": telefonoContent
+            "html": telefonoContent('1').val
           }
         },
         {
-          "name": "verify",
-          "id": "desy-verify-c",
-          "value": "desy-verify-c",
-          "text": "Sign in with DESY Verify",
+          "name": "correo-postal",
+          "id": "desy-correo-postal-c",
+          "value": "desy-correo-postal-c",
+          "text": "Correo postal",
           "hint": {
-            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
           }
         }
       ]
     }
   },
   {
-    "name": "with classes applied on items",
+    "name": "Con clases de CSS aplicadas",
+    "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
     "data": {
       "idPrefix": "classes",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "items": [
         {
-          "name": "gateway",
-          "id": "government-gateway-c",
-          "value": "desy-gateway",
-          "text": "Sign in with Government Gateway",
+          "name": "correo-electronico",
+          "id": "correo-electronico-c",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
           "hint": {
-            "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
           },
-          "classes": "bg-warning-light"
+          "classes": "bg-primary-light"
         },
         {
-          "name": "verify",
-          "id": "desy-verify-d",
-          "value": "desy-verify-d",
-          "text": "Sign in with DESY Verify",
+          "name": "correo-postal",
+          "id": "desy-correo-postal-d",
+          "value": "desy-correo-postal-d",
+          "text": "Correo postal",
           "hint": {
-            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
           },
-          "classes": "bg-neutral-light"
+          "classes": "bg-neutral-lighter"
         }
       ]
     }
   },
   {
-    "name": "with disabled item",
+    "name": "con item deshabilitado",
     "data": {
       "idPrefix": "disabled-item",
       "name": "colours",
       "items": [
         {
-          "value": "red",
-          "text": "Red"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "green",
-          "text": "Green",
+          "value": "correo-postal",
+          "text": "Correo postal",
           "disabled": true,
           "checked": true
         },
         {
-          "value": "blue",
-          "text": "Blue",
+          "value": "telefono",
+          "text": "Teléfono",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "with legend as a page heading",
-    "description": "use optional headingLevel param to set if h1, h2 h3...",
+    "name": "con un legend como encabezado",
+    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. 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": {
       "idPrefix": "legend-as-page-heading",
       "name": "legend-as-page-heading",
       "fieldset": {
         "legend": {
-          "text": "Which types of waste do you transport regularly?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "classes": "c-h2",
           "isPageHeading": true
         },
         "headingLevel": 2
       },
       "hint": {
-        "text": "Select all that apply"
+        "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "items": [
         {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
+          "value": "correp-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with a medium legend",
+    "name": "con un legend del tamaño de un encabezado h2",
     "data": {
       "idPrefix": "medium-legend",
       "name": "medium-legend",
       "fieldset": {
         "legend": {
-          "text": "Which types of waste do you transport regularly?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "classes": "c-h2"
         }
       },
       "hint": {
-        "text": "Select all that apply"
+        "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "errorMessage": {
-        "text": "Error: Select which types of waste you transport regularly"
+        "text": "Error: Tienes que seleccionar al menos una opción"
       },
       "items": [
         {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
+          "value": "correp-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "without fieldset",
+    "name": "sin fieldset",
     "data": {
       "idPrefix": "without-fieldset",
       "name": "without-fieldset",
       "items": [
         {
-          "value": "red",
-          "text": "Red"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "green",
-          "text": "Green"
+          "value": "correp-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "blue",
-          "text": "Blue"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with single option set 'aria-describedby' on input",
+    "name": "con una sóla opción usando 'aria-describedby' en el input",
     "data": {
       "idPrefix": "describedby",
       "name": "describedby",
       "errorMessage": {
-        "text": "Error: Please accept the terms and conditions"
+        "text": "Error: Por favor, debes aceptar los términos y condiciones"
       },
       "items": [
         {
-          "value": "yes",
-          "text": "I agree to the terms and conditions"
+          "value": "acepto",
+          "html": 'Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a>'
         }
       ]
     }
   },
   {
-    "name": "with single option (and hint) set 'aria-describedby' on input",
+    "name": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
     "data": {
       "name": "t-and-c-with-hint",
       "errorMessage": {
-        "text": "Error: Please accept the terms and conditions"
+        "text": "Error: Por favor, debes aceptar los términos y condiciones"
       },
       "items": [
         {
-          "value": "yes",
-          "text": "I agree to the terms and conditions",
+          "value": "acepto",
+          "html": 'Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a>',
           "hint": {
-            "text": "Go on, you know you want to!"
+            "text": "Puedes visualizarlos en ventana nueva del navegador"
           }
         }
       ]
     }
   },
   {
-    "name": "with fieldset and error message",
+    "name": "con fieldset y mensaje de error",
     "data": {
       "name": "colours",
       "errorMessage": {
-        "text": "Error: Please accept the terms and conditions"
+        "text": "Error: Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
-          "text": "What is your nationality?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "british",
-          "text": "British"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "irish",
-          "text": "Irish"
+          "value": "correo-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "other",
-          "text": "Citizen of another country"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with error message",
+    "name": "con mensaje de error",
     "data": {
       "idPrefix": "error-message",
       "name": "error-message",
       "errorMessage": {
-        "text": "Error: Please select an option"
+        "text": "Error: Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
-          "text": "Which types of waste do you transport regularly?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
+          "value": "correp-postal",
+          "text": "Correo postal"
         },
         {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with error message and hints on items",
+    "name": "con mensaje de error y pistas en los items",
     "data": {
       "idPrefix": "error-and-hints",
       "name": "error-and-hints",
       "errorMessage": {
-        "text": "Error: Please select an option"
+        "text": "Error: Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
-          "text": "Which types of waste do you transport regularly?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "animal",
-          "text": "Waste from animal carcasses",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "hint": {
-            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
+            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
           }
         },
         {
-          "value": "mines",
-          "text": "Waste from mines or quarries",
+          "value": "correo-postal",
+          "text": "Correo postal",
           "hint": {
-            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
+            "text": "Asegúrate de haber introducido correctamente tu dirección."
           }
         },
         {
-          "value": "farm",
-          "text": "Farm or agricultural waste",
+          "value": "telefono",
+          "text": "Teléfono",
           "hint": {
-            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
+            "text": "Sólo enviamos mensajes durante el día."
           }
         }
       ]
     }
   },
   {
-    "name": "with very long option text",
+    "name": "con un texto de item muy largo",
     "data": {
       "idPrefix": "long-option",
       "name": "long-option",
@@ -485,79 +484,79 @@
     }
   },
   {
-    "name": "with conditional items",
+    "name": "con items condicionales",
     "data": {
       "idPrefix": "with-conditional-items",
       "name": "with-conditional-items",
       "idPrefix": "how-contacted",
       "fieldset": {
         "legend": {
-          "text": "How do you want to be contacted?"
+          "text": "¿Cómo quieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "email",
-          "text": "Email",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('1').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
           "conditional": {
-            "html": telefonoContent
+            "html": telefonoContent('2').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('2').val
           }
         }
       ]
     }
   },
   {
-    "name": "with conditional item checked",
+    "name": "con item condicional seleccionado",
     "data": {
       "idPrefix": "with-conditional-items-checked",
       "name": "with-conditional-items-checked",
       "fieldset": {
         "legend": {
-          "text": "How do you want to be contacted?"
+          "text": "¿Cómo quieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "email",
-          "text": "Email",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('3').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
           "checked": true,
           "conditional": {
-            "html": telefonoContent
+            "html": telefonoContent('3').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('4').val
           }
         }
       ]
     }
   },
   {
-    "name": "with optional form-group classes showing group error",
+    "name": "con clases opcionales del form-group mostrando un error del grupo",
     "data": {
       "idPrefix": "optional-classes-showing-error",
       "name": "optional-classes-showing-error",
@@ -566,61 +565,61 @@
       },
       "fieldset": {
         "legend": {
-          "text": "How do you want to be contacted?"
+          "text": "¿Cómo quieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "email",
-          "text": "Email",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('5').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
           "checked": true,
           "conditional": {
-            "html": mobileErrorContent
+            "html": mobileErrorContent('1').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent
+            "html": mobileContent('6').val
           }
         }
       ]
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "idPrefix": "small",
-      "name": "small",
+      "name": "peque",
       "classes": "c-checkboxes--sm",
       "items": [
         {
-          "value": "british",
-          "text": "British",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "classes": "-mt-base",
           "label": {
             "classes": "text-sm -mt-1"
           }
         },
         {
-          "value": "irish",
-          "text": "Irish",
+          "value": "correo-postal",
+          "text": "Correo postal",
           "classes": "-mt-base",
           "label": {
             "classes": "text-sm -mt-1"
           }
         },
         {
-          "value": "other",
-          "text": "Citizen of another country",
+          "value": "telefono",
+          "text": "Teléfono",
           "classes": "-mt-base",
           "label": {
             "classes": "text-sm -mt-1"
@@ -630,8 +629,8 @@
     }
   },
   {
-    "name": "indeterminate",
-    "description": "isIndeterminate: true",
+    "name": "indeterminado",
+    "description": 'Usando el parámetro <code>"isIndeterminate": true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.',
     "data": {
       "idPrefix": "indeterminate",
       "name": "indeterminate",
@@ -650,8 +649,8 @@
     }
   },
   {
-    "name": "indeterminate cheched",
-    "description": "isIndeterminate: true, indeterminateChecked: true",
+    "name": "indeterminado marcado",
+    "description": 'Usando los parámetros <code>"isIndeterminate": true</code> y <code>"indeterminateChecked": true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.',
     "data": {
       "idPrefix": "indeterminate-checked",
       "name": "indeterminate-checked",