desy-html 6.5.0 → 7.0.0

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

@@ -0,0 +1,92 @@
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "links-list-item" %}
+
+{% set arrow %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
+{% endset %}
+
+
+{% set innerHtml %}
+  <ul>
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+          {%- if loop.first -%}
+            {%- set id = idPrefix %}
+          {% else %}
+            {%- set id = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        {% set subId = "sub-" + id %}
+    <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}px-base border-y border-neutral-base -my-px{% endif %}">
+      {% if item.href %}
+        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <div class="flex gap-base justify-between items-center flex-1">
+            {% if item.icon %}
+              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.icon.html %}
+                  {{ item.icon.html | safe }}
+                {% endif %}
+              </div>
+            {% endif %}
+            <div class="flex-1">
+              {% if item.active %}
+                <strong>{{ item.html | safe if item.html else item.text }}</strong>
+              {% else %}
+                {{ item.html | safe if item.html else item.text }}
+              {% endif %}
+            </div>
+          </div>
+          {{ arrow | safe }}
+        </a>
+      {% else %}
+        <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <div class="flex gap-base justify-between items-center flex-1">
+            {% if item.icon %}
+              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.icon.html %}
+                  {{ item.icon.html | safe }}
+                {% endif %}
+              </div>
+            {% endif %}
+            <div class="flex-1">
+              {% if item.active %}
+                <strong>{{ item.html | safe if item.html else item.text }}</strong>
+              {% else %}
+                {{ item.html | safe if item.html else item.text }}
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      {% endif %}
+      {% if item.sub.html %}
+        <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
+          {{ item.sub.html | safe }}
+        </div>
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- links-list -->
+
+
+{% if params.hasNav == false %}
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</div>
+{% else %}
+<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</nav>
+{% endif %}
+<!-- /links-list -->

package/src/templates/components/links-list/params.links-list.yaml

@@ -0,0 +1,82 @@
+params:
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: hasNav
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
+- name: items
+  type: array
+  required: true
+  description: Array of nav items objects.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: Item link.
+  - name: target
+    type: string
+    required: false
+    description: The target where the item should link to.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav will be disabled.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+    - name: html
+      type: string
+      required: true
+      description: Provide content for the sub.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the sub container.
+  - name: icon
+    type: object
+    required: false
+    description: This is the optional icon at left
+    - name: html
+      type: string
+      required: true
+      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+    - name: containerClasses
+      type: string
+      required: false
+      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes to add to the parent `<li> of the item.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the nav container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the nav container.

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,15 +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: expanded
-    type: boolean
-    required: false
-    description: If true, nav sub will be expanded.
   - name: divider
     required: false
     description: If true, a divider border will be shown after the item.
@@ -80,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/_examples.table.njk

@@ -1,54 +1,10 @@
 {% set exampleComponent = "table" %}
 {% set examples =  [
   {
-    "name": "default",
-    "data": {
-      "rows": [
-        [
-          {
-            "text": "January"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          }
-        ],
-        [
-          {
-            "text": "February"
-          },
-          {
-            "text": "75€",
-            "classes": "text-right"
-          },
-          {
-            "text": "55€",
-            "classes": "text-right"
-          }
-        ],
-        [
-          {
-            "text": "March"
-          },
-          {
-            "text": "165€",
-            "classes": "text-right"
-          },
-          {
-            "text": "125€",
-            "classes": "text-right"
-          }
-        ]
-      ]
-    }
-  },
-  {
-    "name": "table with head",
+    "name": "table default",
     "data": {
+      "caption": "Caption de la tabla",
+      "captionClasses": "sr-only mb-base font-bold text-left text-lg",
       "head": [
         {
           "text": "Month you apply"
@@ -106,7 +62,7 @@
     }
   },
   {
-    "name": "table with head and caption",
+    "name": "table with caption visible",
     "data": {
       "caption": "Caption 1: Months and rates",
       "captionClasses": "mb-base font-bold text-left text-lg",

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/_examples.table-advanced.njk

@@ -1,56 +1,11 @@
 {% set exampleComponent = "table-advanced" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "table default",
     "data": {
-      "rows": [
-        [
-          {
-            "text": "January"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          }
-        ],
-        [
-          {
-            "text": "February"
-          },
-          {
-            "text": "75€",
-            "classes": "text-right"
-          },
-          {
-            "text": "55€",
-            "classes": "text-right"
-          }
-        ],
-        [
-          {
-            "text": "March"
-          },
-          {
-            "text": "165€",
-            "classes": "text-right"
-          },
-          {
-            "text": "125€",
-            "classes": "text-right"
-          }
-        ]
-      ],
-      "classes": "min-w-full"
-    }
-  },
-  {
-    "name": "table with head",
-    "data": {
-      "idPrefix": "table-with-head",
+      "idPrefix": "table-default",
+      "caption": "Caption de la tabla",
+      "captionClasses": "sr-only mb-base font-bold text-left text-lg",
       "head": [
         {
           "text": "Month you apply"
@@ -109,10 +64,10 @@
     }
   },
   {
-    "name": "table with head and caption",
+    "name": "table with caption visible",
     "description": "Also with firstCellIsHeader: true",
     "data": {
-      "idPrefix": "table-with-head-and-caption",
+      "idPrefix": "table-with-caption",
       "caption": "Caption 1: Months and rates",
       "captionClasses": "mb-base font-bold text-left text-lg",
       "firstCellIsHeader": true,

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 %}