desy-html 7.3.1 → 7.4.0

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

@@ -1,59 +1,57 @@
 {% from "components/input/_macro.input.njk" import componentInput %}
 
-{% set exampleComponent = "radios" %}
-
-{% 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 = "radios" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "idPrefix": "default",
-      "name": "default",
+      "name": "por defecto",
       "fieldset": {
         "legend": {
-          "text": "Have you changed your name?"
+          "text": "¿Quieres que te contactemos por correo electrónico?"
         }
       },
       "hint": {
-        "text": "This includes changing your last name or spelling your name differently."
+        "text": "Sólo puedes seleccionar un elemento."
       },
       "items": [
         {
-          "value": "yes",
-          "text": "Yes"
+          "value": "si",
+          "text": "Si"
         },
         {
           "value": "no",
@@ -64,23 +62,23 @@
     }
   },
   {
-    "name": "inline",
+    "name": "En línea",
     "data": {
       "idPrefix": "inline",
       "classes": "flex",
       "name": "inline",
       "fieldset": {
         "legend": {
-          "text": "Have you changed your name?"
+          "text": "¿Quieres que te contactemos por correo electrónico?"
         }
       },
       "hint": {
-        "text": "This includes changing your last name or spelling your name differently."
+        "text": "Sólo puedes seleccionar un elemento."
       },
       "items": [
         {
-          "value": "yes",
-          "text": "Yes",
+          "value": "si",
+          "text": "Si",
           "classes": "mr-sm"
         },
         {
@@ -93,22 +91,22 @@
     }
   },
   {
-    "name": "with disabled",
+    "name": "Con deshabilitado",
     "data": {
       "idPrefix": "example-disabled",
       "name": "example-disabled",
       "fieldset": {
         "legend": {
-          "text": "Have you changed your name?"
+          "text": "¿Quieres que te contactemos por correo electrónico?"
         }
       },
       "hint": {
-        "text": "This includes changing your last name or spelling your name differently."
+        "text": "Sólo puedes seleccionar un elemento."
       },
       "items": [
         {
-          "value": "yes",
-          "text": "Yes",
+          "value": "si",
+          "text": "Si",
           "disabled": true,
           "checked": true
         },
@@ -121,220 +119,233 @@
     }
   },
   {
-    "name": "with legend as 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 part of the Housing Act was your licence issued under?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "classes": "c-h2",
           "isPageHeading": true
         },
         "headingLevel": 2
       },
       "hint": {
-        "text": "Select one of the options below."
+        "text": "Selecciona una de las opciones."
       },
       "items": [
         {
           "value": "part-2",
-          "html": "<span class=\" block font-bold \">Part 2 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are 3 or more stories high and occupied by 5 or more people</span>"
+          "text": "Por correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
+          }
         },
         {
           "value": "part-3",
-          "html": "<span class=\" block font-bold \">Part 3 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are within a geographical area defined by a local council</span>"
+          "text": "Por correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido correctamente tu dirección."
+          }
         }
       ]
     }
   },
   {
-    "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 part of the Housing Act was your licence issued under?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "classes": "c-h2"
         }
       },
       "hint": {
-        "text": "Select one of the options below."
+        "text": "Selecciona una de las opciones."
       },
       "items": [
         {
           "value": "part-2",
-          "html": "<span class=\" block font-bold \">Part 2 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are 3 or more stories high and occupied by 5 or more people</span>"
+          "text": "Por correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
+          }
         },
         {
           "value": "part-3",
-          "html": "<span class=\" block font-bold \">Part 3 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are within a geographical area defined by a local council</span>"
+          "text": "Por correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido correctamente tu dirección."
+          }
         }
       ]
     }
   },
   {
-    "name": "with a divider",
+    "name": "con un divisor",
     "data": {
       "idPrefix": "example-divider",
       "name": "example-divider",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?"
+          "text": "¿Cómo prefieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "governement-gateway",
-          "text": "Use Digital Cert"
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
         },
         {
-          "value": "clave-verify",
-          "text": "Use Cl@ve"
+          "value": "correo-postal",
+          "text": "Correo postal"
         },
         {
-          "divider": "or"
+          "divider": "o bien"
         },
         {
-          "value": "create-account",
-          "text": "Create an account"
+          "value": "telefono",
+          "text": "Teléfono"
         }
       ]
     }
   },
   {
-    "name": "with hints on items",
+    "name": "Con pistas en los items",
     "data": {
       "idPrefix": "hints-on-items",
       "name": "hints-on-items",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "isPageHeading": true
         }
       },
       "items": [
         {
-          "value": "gateway",
-          "text": "Sign in with Digital Cert",
+          "value": "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."
           }
         },
         {
-          "value": "verify",
-          "text": "Sign in with Cl@ve",
+          "value": "correo-postal",
+          "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",
       "name": "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": "Sólo puedes elegir un elemento."
       },
       "hasDividers": true,
       "items": [
         {
-          "value": "gateway",
-          "text": "Sign in with Digital Cert",
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "classes": "font-normal",
           "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."
           }
         },
         {
-          "value": "verify",
-          "text": "Sign in with Cl@ve",
+          "value": "correo-postal",
+          "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 in 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",
       "name": "classes",
       "fieldset": {
         "legend": {
-          "text": "How do you want to sign in?",
+          "text": "¿Cómo prefieres que te contactemos?",
           "isPageHeading": true
         }
       },
       "items": [
         {
-          "value": "gateway",
-          "text": "Sign in with Digital Cert",
+          "value": "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"
         },
         {
-          "value": "verify",
-          "text": "Sign in with Cl@ve",
+          "value": "correo-postal",
+          "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": "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 fieldset and error message",
+    "name": "con fieldset y mensaje de error",
     "data": {
       "idPrefix": "fieldset-and-error",
       "name": "fieldset-and-error",
       "errorMessage": {
-        "text": "Error: Please select an option"
+        "text": "Error: Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
-          "text": "Have you changed your name?"
+          "text": "¿Quieres que te contactemos por correo electrónico?"
         }
       },
       "items": [
         {
-          "value": "yes",
-          "text": "Yes"
+          "value": "si",
+          "text": "Si"
         },
         {
           "value": "no",
@@ -345,7 +356,7 @@
     }
   },
   {
-    "name": "with very long option text",
+    "name": "con un texto de item muy largo",
     "data": {
       "idPrefix": "very-long",
       "name": "very-long",
@@ -377,119 +388,119 @@
     }
   },
   {
-    "name": "with conditional items",
+    "name": "con items condicionales",
     "data": {
       "idPrefix": "conditional-items",
       "name": "conditional-items",
       "fieldset": {
         "legend": {
-          "text": "How do you want to be contacted?"
+          "text": "¿Cómo quieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "email",
-          "text": "Email",
-          "checked": true,
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "conditional": {
-            "html": telefonoContent | trim | safe
+            "html": mobileContent('1').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": telefonoContent('2').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('2').val
           }
         }
       ]
     }
   },
   {
-    "name": "inline with conditional items",
+    "name": "en línea con items condicionales",
     "data": {
       "classes": "flex",
       "idPrefix": "inline-with-conditional",
       "name": "inline-with-conditional",
       "fieldset": {
         "legend": {
-          "text": "How do you want to be contacted?"
+          "text": "¿Cómo quieres que te contactemos?"
         }
       },
       "items": [
         {
-          "value": "email",
-          "text": "Email",
-          "checked": true,
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
           "classes": "mr-sm",
           "conditional": {
-            "html": telefonoContent | trim | safe
+            "html": telefonoContent('3').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
           "classes": "mr-sm",
+          "checked": true,
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('3').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "classes": "mr-sm",
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('4').val
           }
         }
       ]
     }
   },
   {
-    "name": "with conditional item checked",
+    "name": "con item condicional seleccionado",
     "data": {
       "idPrefix": "conditional-item-checked",
       "name": "conditional-item-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": telefonoContent | trim | safe
+            "html": telefonoContent('4').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('5').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
-          "checked": true,
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('6').val
           }
         }
       ]
     }
   },
   {
-    "name": "with optional form-group classes showing group error",
+    "name": "con clases opcionales del form-group mostrando un error del grupo",
     "data": {
       "idPrefix": "classes-group-error",
       "name": "classes-group-error",
@@ -498,45 +509,45 @@
       },
       "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": telefonoContent | trim | safe
+            "html": telefonoContent('5').val
           }
         },
         {
-          "value": "phone",
-          "text": "Phone",
+          "value": "telefono",
+          "text": "Teléfono",
           "checked": true,
           "conditional": {
-            "html": mobileErrorContent | trim | safe
+            "html": mobileErrorContent('1').val
           }
         },
         {
-          "value": "text",
-          "text": "Text message",
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
           "conditional": {
-            "html": mobileContent | trim | safe
+            "html": mobileContent('7').val
           }
         }
       ]
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "idPrefix": "small",
-      "name": "small",
+      "name": "peque",
       "classes": "c-radios--sm",
       "items": [
         {
-          "value": "yes",
-          "text": "Yes",
+          "value": "si",
+          "text": "Si",
           "classes": "-mt-base",
           "label": {
             "classes": "text-sm -mt-1"