desy-html 13.0.1 → 14.0.0

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

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "text": "Pill por defecto"
     }
@@ -49,7 +50,7 @@
   },
   {
     "name": "Peque",
-    "description": "Usa las clases de tamaño de texto para establecer el tamaño.",
+    "description": "Usa las clases de tamaño de texto para establecer el tamaño. Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>",
     "data": {
       "text": "Peque pill",
       "classes": "text-sm"

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

@@ -1,37 +1,65 @@
+{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
 {% from "components/input/_macro.input.njk" import componentInput %}
 {% from "components/radios/_macro.radios.njk" import componentRadios %}
 
 {% macro telefonoContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono"
-    },
-    "id": "telefono-" + id,
-    "name": "telefono-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono fijo?",
+      "classes": "mb-sm sr-only"
+    }
+  }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono fijo"
+        },
+        "id": "telefono-" + id,
+        "name": "telefono-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro mobileContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "mobile-" + id,
-    "name": "mobile-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
+    }
+    }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "mobile-" + id,
+        "name": "mobile-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% 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"
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
     }
-  })  }}
+    }) %}
+    <div class="c-form-group">
+      {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "input-with-error-message-" + id,
+        "name": "test-name-" + id,
+        "errorMessage": {
+          "text": "Este campo no puede estar vacío"
+        }
+        })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro grandchildContent(id='id') %}
@@ -357,6 +385,7 @@
   },
   {
     "name": "sin fieldset",
+    "description": "Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.",
     "data": {
       "idPrefix": "without-fieldset",
       "name": "without-fieldset",
@@ -382,7 +411,7 @@
       "idPrefix": "fieldset-and-error",
       "name": "fieldset-and-error",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
@@ -411,7 +440,7 @@
         "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
       },
       "errorMessage": {
-        "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       },
       "fieldset": {
         "legend": {
@@ -436,6 +465,7 @@
   },
   {
     "name": "con items condicionales",
+    "description": "El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "conditional-items",
       "name": "conditional-items",
@@ -467,74 +497,9 @@
       ]
     }
   },
-  {
-    "name": "con items condicionales anidados",
-    "data": {
-      "idPrefix": "with-conditional-nested-items",
-      "name": "with-conditional-nested-items",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "presencial",
-          "text": "Presencial",
-          "checked": true,
-          "conditional": {
-            "html": nestedContent('1').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Por teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "en línea con items condicionales",
-    "data": {
-      "classes": "flex",
-      "idPrefix": "inline-with-conditional",
-      "name": "inline-with-conditional",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "classes": "mr-sm",
-          "conditional": {
-            "html": telefonoContent('3').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "classes": "mr-sm",
-          "checked": true,
-          "conditional": {
-            "html": mobileContent('3').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "classes": "mr-sm",
-          "conditional": {
-            "html": mobileContent('4').val
-          }
-        }
-      ]
-    }
-  },
   {
     "name": "con item condicional seleccionado",
+    "description": "Usa el parámetro <code>'checked': true</code> para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "conditional-item-checked",
       "name": "conditional-item-checked",

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

@@ -32,13 +32,14 @@
   },
   {
     "name": "Con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "searchbar-4",
       "label": {
         "text": "Buscar"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "mt-xs"
       }
     }

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

@@ -162,6 +162,7 @@
   },
   {
     "name": "con pista y mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "select-3",
       "name": "select-3",
@@ -172,7 +173,7 @@
         "text": "Esto es una pista."
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       },
       "items": [
         {
@@ -190,33 +191,6 @@
       ]
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "id": "select-4",
-      "name": "select-4",
-      "label": {
-        "text": "Esto es un label",
-        "isPageHeading": true
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    }
-  },
   {
     "name": "con anchura completa",
     "data": {
@@ -259,7 +233,7 @@
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "items": [

package/src/templates/components/status-item/_examples.status-item.njk

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "id": "default",
       "title": {

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -150,7 +150,7 @@ params:
   description: HTML attributes (for example data attributes) to add to the table container.
 
 accessibilityCriteria: |
-  ## Tables must:
+## Las tablas deben:
     1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
     2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
     3. El título de la tabla debe estar marcado como <caption>

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

@@ -29,6 +29,7 @@
   },
   {
     "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "name": "no-ni-reason",
       "id": "no-ni-reason",
@@ -36,7 +37,7 @@
         "text": "Esto es un label"
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
@@ -62,18 +63,6 @@
       "rows": 8
     }
   },
-  {
-    "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>.",
-    "data": {
-      "id": "textarea-with-page-heading-a",
-      "name": "address",
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {
@@ -123,7 +112,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

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

@@ -607,7 +607,7 @@
         "text": "Selecciona el organismo al que perteneces."
       },
       "errorMessage": {
-        "text": "Error: No tienes permiso para seleccionar ese organismo."
+        "text": "No tienes permiso para seleccionar ese organismo."
       },
       "idPrefix": "with-hint-and-error",
       "items": [
@@ -1797,7 +1797,7 @@
         },
         "placeholder": "Buscar organismo",
         "errorMessage": {
-          "text": "Error: Introduce al menos un carácter",
+          "text": "Introduce al menos un carácter",
           "classes": "mt-xs"
         }
       },
@@ -2675,5 +2675,159 @@
         }
       ]
     }
+  },
+  {
+    "name": "lazy rendering",
+    "description": "No pinta los nodos hijos hasta que el usuario no lo pide desplegando un nodo padre. Usalo sólo si el arbol tiene una cantidad enorme de items.",
+    "data": {
+      "name": "type-lazy-rendering",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "idPrefix": "type-lazy-rendering",
+      "lazyRendering": true,
+      "items": [
+        {
+          "text": "Item A",
+          "id": "item-a",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem A1",
+                "value": "subitem-a1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem A1.1",
+                      "value": "subsubitem-a1-1",
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Level 4 A1.1.1",
+                            "value": "lvl4-a1-1-1",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Level 5 A1.1.1.1",
+                                  "value": "lvl5-a1-1-1-1"
+                                },
+                                {
+                                  "text": "Level 5 A1.1.1.2",
+                                  "value": "lvl5-a1-1-1-2"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Level 4 A1.1.2",
+                            "value": "lvl4-a1-1-2"
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      "text": "SubSubitem A1.2",
+                      "value": "subsubitem-a1-2"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem A2",
+                "value": "subitem-a2"
+              },
+              {
+                "text": "Subitem A3",
+                "value": "subitem-a3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item B",
+          "id": "item-b",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem B1",
+                "value": "subitem-b1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem B1.1",
+                      "value": "subsubitem-b1-1",
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Level 4 B1.1.1",
+                            "value": "lvl4-b1-1-1"
+                          },
+                          {
+                            "text": "Level 4 B1.1.2",
+                            "value": "lvl4-b1-1-2"
+                          },
+                          {
+                            "text": "Level 4 B1.1.3",
+                            "value": "lvl4-b1-1-3"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem B2",
+                "value": "subitem-b2"
+              },
+              {
+                "text": "Subitem B3",
+                "value": "subitem-b3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item C",
+          "id": "item-c",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem C1",
+                "value": "subitem-c1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem C1.1",
+                      "value": "subsubitem-c1-1"
+                    },
+                    {
+                      "text": "SubSubitem C1.2",
+                      "value": "subsubitem-c1-2"
+                    },
+                    {
+                      "text": "SubSubitem C1.3",
+                      "value": "subsubitem-c1-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem C2",
+                "value": "subitem-c2"
+              },
+              {
+                "text": "Subitem C3",
+                "value": "subitem-c3"
+              }
+            ]
+          }
+        }
+      ]
+    }
   }
-] %}
+] %}