desy-html 6.6.0 → 7.0.1

package/src/templates/components/links-list/_examples.links-list.njk

@@ -43,21 +43,21 @@
           "href": "#",
           "text": "Item 1",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         },
         {
           "href": "#",
           "text": "Item 2",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         },
         {
           "href": "#",
           "text": "Item 3",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         }
       ],
@@ -76,7 +76,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex | safe
+            "html": iconComplex
           }
         },
         {
@@ -84,7 +84,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex | safe
+            "html": iconComplex
           }
         },
         {
@@ -92,7 +92,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex | safe
+            "html": iconComplex
           }
         }
       ],
@@ -111,7 +111,7 @@
           "text": "Item 1",
           "containerClasses": "px-base border border-neutral-base my-sm",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         },
         {
@@ -119,7 +119,7 @@
           "text": "Item 2",
           "containerClasses": "my-base px-base border border-neutral-base rounded",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         },
         {
@@ -127,7 +127,7 @@
           "text": "Item 3",
           "containerClasses": "px-base border border-neutral-base my-sm",
           "icon": {
-            "html": iconSimple | safe
+            "html": iconSimple
           }
         }
       ],

package/src/templates/components/menu-navigation/params.menu-navigation.yaml

@@ -76,13 +76,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the nav container.
-
-accessibilityCriteria: |
-  ## sub reveals
-  Must:
-  - be visible as static content if JavaScript is unavailable or fails
-  - be hidden if JavaScript is available and is collapsed
-  - indicate if content is expanded or collapsed
-  - indicate that there is collapsed content to interact with
-
-  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

package/src/templates/components/menu-vertical/_template.menu-vertical.njk

@@ -1,11 +1,7 @@
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. We need this for error messages and hints as well -#}
+   instead. -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
 
-{#- fieldset is false by default -#}
-{% set hasFieldset = true if params.fieldset else false %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
   <ul class="text-base">
     {% for item in params.items %}

package/src/templates/components/menu-vertical/params.menu-vertical.yaml

@@ -32,11 +32,6 @@ params:
     type: string
     required: false
     description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-  - name: hint
-    type: object
-    required: false
-    description: Provide hint to each nav item.
-    isComponent: true
   - name: divider
     required: false
     description: If true, a divider border will be shown after the item.
@@ -76,13 +71,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the nav container.
-
-accessibilityCriteria: |
-  ## sub reveals
-  Must:
-  - be visible as static content if JavaScript is unavailable or fails
-  - be hidden if JavaScript is available and is collapsed
-  - indicate if content is expanded or collapsed
-  - indicate that there is collapsed content to interact with
-
-  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

package/src/templates/components/radios/params.radios.yaml

@@ -102,13 +102,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the radio input tag.
-
-accessibilityCriteria: |
-  ## Conditional reveals
-  Must:
-  - be visible as static content if JavaScript is unavailable or fails
-  - be hidden if JavaScript is available and is collapsed
-  - indicate if content is expanded or collapsed
-  - indicate that there is collapsed content to interact with
-
-  Note that we have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

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

@@ -88,7 +88,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/table-advanced/_template.table-advanced.njk

@@ -76,7 +76,7 @@
                     "classes": "mb-0"
                   },
                   "label": {
-                    "text": "Filtrar en esta columna",
+                    "text": "Filtrar por esta columna",
                     "classes": "sr-only"
                   },
                   "id": item.select.id if item.select.id else idSelect,

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

@@ -124,4 +124,5 @@ accessibilityCriteria: |
     4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
     5. Después de un encabezado (h1, h2…) no puede ir directamente una tabla, o se entiende que se está usando el encabezado para lo que debería ser el <caption>
     6. La tabla debe tener una descripción especialmente si la tabla es grande o compleja, tiene varios niveles de encabezados, tiene totales o enlaces, etc. La descripción intenta suplir la primera impresión que tienen de la tabla las personas que pueden verla, por ejemplo, vemos que en la última columna hay enlaces o en la última fila hay totales. Como en HTML 5 ya no está admitido el atributo summary en las tablas, lo que se hace es poner la descripción en un párrafo antes de la tabla y asociarlo a la tabla con aria-describedby (así se evita también el error 5). El caption y la descripción no deben ser iguales.
-    7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
+    7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
+    8. Las tablas complejas como esta deben tener una descripción. La descripción se incluye en un texto visible antes de la tabla (aunque puede estar en un <details>) y se asocia a la tabla mediante el atributo aria-describedby de la tabla.

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

@@ -52,6 +52,22 @@
       }
     }
   },
+  {
+    "name": "Pressed",
+    "description": "pressed = true. If pressed is true the toggle is on.",
+    "data": {
+      "pressed": true,
+      "classes": "c-button",
+      "offState": {
+        "classes": "",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
+      },
+      "onState": {
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z" fill="currentColor" transform="scale(3.42857)"/><path d="M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
+      }
+    }
+  },
   {
     "name": "isSwitch",
     "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
@@ -71,6 +87,26 @@
       }
     }
   },
+  {
+    "name": "isSwitch pressed",
+    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "data": {
+      "classes": "",
+      "pressed": true,
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
+  },
   {
     "name": "isSwitch small",
     "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",

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

@@ -3,11 +3,16 @@
 >
   <!-- Button -->
   <button
-    {% if params.isSwitch %}
+    {% if params.isSwitch and params.pressed == null %}
       role = "switch"
       aria-checked="false"
+    {% elseif params.isSwitch and params.pressed == true %}
+      role = "switch"
+      aria-checked="true"
     {% elseif params.isExpandible == false %}
       aria-pressed="false"
+    {% elseif params.pressed == true %}
+      aria-pressed="true"
     {% else %}
       aria-expanded="false"
     {% endif %}

package/docs/examples-header-2.html

@@ -1,5 +0,0 @@
-{% set title = "Header. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
-{% extends "_template.examples.njk" %}
-{% block contentBlock %}
-  {% import "components/header/_examples.header-2.njk" as exampleData %}
-{% endblock %}