desy-html 10.2.1 → 10.2.2

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

@@ -1,735 +1,735 @@
-{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
-{% from "components/input/_macro.input.njk" import componentInput %}
-
-{% macro telefonoContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono"
-    },
-    "id": "telefono-" + id,
-    "name": "telefono-name-" + id
-  })  }}
-{% endmacro %}
-
-{% macro mobileContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "mobile-" + id,
-    "name": "mobile-name-" + id
-  })  }}
-{% endmacro %}
-
-{% macro mobileErrorContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "input-with-error-message-" + id,
-    "name": "test-name-" + id,
-    "errorMessage": {
-      "text": "Error: Este campo no puede estar vacío"
-    }
-  })  }}
-{% endmacro %}
-
-{% macro grandchildContent(id='id') %}
-  {{ componentCheckboxes({
-    "idPrefix": "grandchild-" + id,
-    "name": "grandchild-" + id,
-    "items": [
-      {
-        "name": "oficina-principal",
-        "id": "oficina-principal-id",
-        "value": "oficina-principal",
-        "text": "Oficina principal"
-      },
-      {
-        "name": "oficina-secundaria",
-        "id": "oficina-secundaria-id",
-        "value": "oficina-secundaria",
-        "text": "Oficina secundaria"
-      }
-    ]
-  }) }}
-{% endmacro %}
-
-{% macro nestedContent(id='id') %}
-  {{ componentCheckboxes({
-    "idPrefix": "with-conditional-items-checked-nested-" + id,
-    "name": "with-conditional-items-checked-nested-" + id,
-    "items": [
-      {
-        "value": "oficinas-de-registro",
-        "text": "Oficinas de registro",
-        "checked": true,
-        "conditional": {
-          "html": grandchildContent(id).val
-        }
-      }
-    ]
-  }) }}
-{% endmacro %}
-
-
-
-{% set exampleComponent = "checkboxes" %}
-{% set examples =  [{
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "default",
-      "name": "default",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con id y name",
-    "data": {
-      "idPrefix": "with-id-and-name",
-      "name": "with-id-and-name",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-id",
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "name": "correo-postal",
-          "id": "correo-postal-id",
-          "value": "correo-postal",
-          "text": "Correo postal"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con pistas en los items",
-    "data": {
-      "idPrefix": "hints-on-items",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "isPageHeading": true
-        }
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-a",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
-          }
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-a",
-          "value": "desy-correo-postal-a",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con líneas divisorias",
-    "data": {
-      "idPrefix": "has-dividers",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "hasDividers": true,
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-b",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-b",
-          "value": "desy-correo-postal-b",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        },
-        {
-          "name": "telefono",
-          "id": "telefono-b",
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": telefonoContent('1').val
-          }
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-c",
-          "value": "desy-correo-postal-c",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        }
-      ]
-    }
-  },
-  {
-    "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": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-c",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
-          },
-          "classes": "bg-primary-light"
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-d",
-          "value": "desy-correo-postal-d",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          },
-          "classes": "bg-neutral-lighter"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "disabled-item",
-      "name": "colours",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "disabled": true,
-          "checked": true
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "disabled": true
-        }
-      ]
-    }
-  },
-  {
-    "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": "¿Cómo prefieres que te contactemos?",
-          "classes": "c-h2",
-          "isPageHeading": true
-        },
-        "headingLevel": 2
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con un legend del tamaño de un encabezado h2",
-    "data": {
-      "idPrefix": "medium-legend",
-      "name": "medium-legend",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "classes": "c-h2"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "sin fieldset",
-    "data": {
-      "idPrefix": "without-fieldset",
-      "name": "without-fieldset",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con una sóla opción usando 'aria-describedby' en el input",
-    "data": {
-      "idPrefix": "describedby",
-      "name": "describedby",
-      "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
-      },
-      "items": [
-        {
-          "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": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
-    "data": {
-      "name": "t-and-c-with-hint",
-      "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
-      },
-      "items": [
-        {
-          "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": "Puedes visualizarlos en ventana nueva del navegador"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con fieldset y mensaje de error",
-    "data": {
-      "name": "colours",
-      "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con mensaje de error",
-    "data": {
-      "idPrefix": "error-message",
-      "name": "error-message",
-      "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con mensaje de error y pistas en los items",
-    "data": {
-      "idPrefix": "error-and-hints",
-      "name": "error-and-hints",
-      "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
-          }
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido correctamente tu dirección."
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "hint": {
-            "text": "Sólo enviamos mensajes durante el día."
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con un texto de item muy largo",
-    "data": {
-      "idPrefix": "long-option",
-      "name": "long-option",
-      "hint": {
-        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
-      },
-      "errorMessage": {
-        "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-      },
-      "fieldset": {
-        "legend": {
-          "text": "Maecenas faucibus mollis interdum?"
-        }
-      },
-      "items": [
-        {
-          "value": "nullam",
-          "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
-        },
-        {
-          "value": "aenean",
-          "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
-        },
-        {
-          "value": "fusce",
-          "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
-        }
-      ]
-    }
-  },
-  {
-    "name": "con items condicionales",
-    "data": {
-      "idPrefix": "with-conditional-items",
-      "name": "with-conditional-items",
-      "idPrefix": "how-contacted",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('1').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "conditional": {
-            "html": telefonoContent('2').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('2').val
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con items condicionales anidados",
-    "data": {
-      "idPrefix": "with-conditional-nested-items",
-      "name": "with-conditional-nested-items",
-      "idPrefix": "how-contacted-nested",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "presencial",
-          "text": "Presencial",
-          "checked": true,
-          "conditional": {
-            "html": nestedContent('1').val
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con item condicional seleccionado",
-    "data": {
-      "idPrefix": "with-conditional-items-checked",
-      "name": "with-conditional-items-checked",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('3').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": telefonoContent('3').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('4').val
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "con clases opcionales del form-group mostrando un error del grupo",
-    "data": {
-      "idPrefix": "optional-classes-showing-error",
-      "name": "optional-classes-showing-error",
-      "formGroup": {
-        "classes": "c-form-group--error"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('5').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": mobileErrorContent('1').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('6').val
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "idPrefix": "small",
-      "name": "peque",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "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",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "indeterminate",
-          "text": "1 elemento seleccionado",
-          "isIndeterminate": true,
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "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",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "indeterminate-checked-item",
-          "text": "1 elemento seleccionado",
-          "isIndeterminate": true,
-          "indeterminateChecked": true,
-          "checked": false,
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    }
-  }
+{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
+{% from "components/input/_macro.input.njk" import componentInput %}
+
+{% macro telefonoContent(id='id') %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono"
+    },
+    "id": "telefono-" + id,
+    "name": "telefono-name-" + id
+  })  }}
+{% endmacro %}
+
+{% macro mobileContent(id='id') %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "mobile-" + id,
+    "name": "mobile-name-" + id
+  })  }}
+{% endmacro %}
+
+{% macro mobileErrorContent(id='id') %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "input-with-error-message-" + id,
+    "name": "test-name-" + id,
+    "errorMessage": {
+      "text": "Error: Este campo no puede estar vacío"
+    }
+  })  }}
+{% endmacro %}
+
+{% macro grandchildContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "grandchild-" + id,
+    "name": "grandchild-" + id,
+    "items": [
+      {
+        "name": "oficina-principal",
+        "id": "oficina-principal-id",
+        "value": "oficina-principal",
+        "text": "Oficina principal"
+      },
+      {
+        "name": "oficina-secundaria",
+        "id": "oficina-secundaria-id",
+        "value": "oficina-secundaria",
+        "text": "Oficina secundaria"
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+{% macro nestedContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "with-conditional-items-checked-nested-" + id,
+    "name": "with-conditional-items-checked-nested-" + id,
+    "items": [
+      {
+        "value": "oficinas-de-registro",
+        "text": "Oficinas de registro",
+        "checked": true,
+        "conditional": {
+          "html": grandchildContent(id).val
+        }
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+
+
+{% set exampleComponent = "checkboxes" %}
+{% set examples =  [{
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "default",
+      "name": "default",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con id y name",
+    "data": {
+      "idPrefix": "with-id-and-name",
+      "name": "with-id-and-name",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-id",
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "name": "correo-postal",
+          "id": "correo-postal-id",
+          "value": "correo-postal",
+          "text": "Correo postal"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con pistas en los items",
+    "data": {
+      "idPrefix": "hints-on-items",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?",
+          "isPageHeading": true
+        }
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-a",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
+          }
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-a",
+          "value": "desy-correo-postal-a",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con líneas divisorias",
+    "data": {
+      "idPrefix": "has-dividers",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "hasDividers": true,
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-b",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-b",
+          "value": "desy-correo-postal-b",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        },
+        {
+          "name": "telefono",
+          "id": "telefono-b",
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": telefonoContent('1').val
+          }
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-c",
+          "value": "desy-correo-postal-c",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        }
+      ]
+    }
+  },
+  {
+    "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": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-c",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
+          },
+          "classes": "bg-primary-light"
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-d",
+          "value": "desy-correo-postal-d",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          },
+          "classes": "bg-neutral-lighter"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "disabled-item",
+      "name": "colours",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "disabled": true,
+          "checked": true
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "disabled": true
+        }
+      ]
+    }
+  },
+  {
+    "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": "¿Cómo prefieres que te contactemos?",
+          "classes": "c-h2",
+          "isPageHeading": true
+        },
+        "headingLevel": 2
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con un legend del tamaño de un encabezado h2",
+    "data": {
+      "idPrefix": "medium-legend",
+      "name": "medium-legend",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?",
+          "classes": "c-h2"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "errorMessage": {
+        "text": "Error: Tienes que seleccionar al menos una opción"
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "sin fieldset",
+    "data": {
+      "idPrefix": "without-fieldset",
+      "name": "without-fieldset",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con una sóla opción usando 'aria-describedby' en el input",
+    "data": {
+      "idPrefix": "describedby",
+      "name": "describedby",
+      "errorMessage": {
+        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+      },
+      "items": [
+        {
+          "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": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
+    "data": {
+      "name": "t-and-c-with-hint",
+      "errorMessage": {
+        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+      },
+      "items": [
+        {
+          "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": "Puedes visualizarlos en ventana nueva del navegador"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "con fieldset y mensaje de error",
+    "data": {
+      "name": "colours",
+      "errorMessage": {
+        "text": "Error: Tienes que seleccionar al menos una opción"
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con mensaje de error",
+    "data": {
+      "idPrefix": "error-message",
+      "name": "error-message",
+      "errorMessage": {
+        "text": "Error: Tienes que seleccionar al menos una opción"
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con mensaje de error y pistas en los items",
+    "data": {
+      "idPrefix": "error-and-hints",
+      "name": "error-and-hints",
+      "errorMessage": {
+        "text": "Error: Tienes que seleccionar al menos una opción"
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
+          }
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido correctamente tu dirección."
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "hint": {
+            "text": "Sólo enviamos mensajes durante el día."
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "con un texto de item muy largo",
+    "data": {
+      "idPrefix": "long-option",
+      "name": "long-option",
+      "hint": {
+        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
+      },
+      "errorMessage": {
+        "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+      },
+      "fieldset": {
+        "legend": {
+          "text": "Maecenas faucibus mollis interdum?"
+        }
+      },
+      "items": [
+        {
+          "value": "nullam",
+          "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
+        },
+        {
+          "value": "aenean",
+          "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
+        },
+        {
+          "value": "fusce",
+          "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
+        }
+      ]
+    }
+  },
+  {
+    "name": "con items condicionales",
+    "data": {
+      "idPrefix": "with-conditional-items",
+      "name": "with-conditional-items",
+      "idPrefix": "how-contacted",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('1').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "conditional": {
+            "html": telefonoContent('2').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('2').val
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "con items condicionales anidados",
+    "data": {
+      "idPrefix": "with-conditional-nested-items",
+      "name": "with-conditional-nested-items",
+      "idPrefix": "how-contacted-nested",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "presencial",
+          "text": "Presencial",
+          "checked": true,
+          "conditional": {
+            "html": nestedContent('1').val
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "con item condicional seleccionado",
+    "data": {
+      "idPrefix": "with-conditional-items-checked",
+      "name": "with-conditional-items-checked",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('3').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": telefonoContent('3').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('4').val
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "con clases opcionales del form-group mostrando un error del grupo",
+    "data": {
+      "idPrefix": "optional-classes-showing-error",
+      "name": "optional-classes-showing-error",
+      "formGroup": {
+        "classes": "c-form-group--error"
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('5').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": mobileErrorContent('1').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('6').val
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "idPrefix": "small",
+      "name": "peque",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "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",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "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",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate-checked-item",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
+  }
 ] %}