desy-html 10.2.2 → 11.0.1

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

@@ -1,69 +1,69 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: Required id attribute to add to the button for activation.
-- name: isExpandible
-  type: boolean
-  required: false
-  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
-- name: isSwitch
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
-- name: pressed
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
-- name: onState
-  type: object
-  required: true
-  description: On state elements
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the state. 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 the state. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the state span tag.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the state span tag.
-- name: offState
-  type: object
-  required: true
-  description: Off state elements
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the state. 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 the state. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the state span tag.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the state span tag.
-- name: classes
-    type: string
-    required: false
-    description: Classes to add to the test component span tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the test component span tag.
+params:
+- name: id
+  type: string
+  required: true
+  description: Required id attribute to add to the button for activation.
+- name: isExpandible
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
+- name: isSwitch
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
+- name: pressed
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
+- name: onState
+  type: object
+  required: true
+  description: On state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. 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 the state. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: offState
+  type: object
+  required: true
+  description: Off state elements
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the state. 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 the state. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the state span tag.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the state span tag.
+- name: classes
+    type: string
+    required: false
+    description: Classes to add to the test component span tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the test component span tag.

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

@@ -1,87 +1,87 @@
-{% set exampleComponent = "tooltip" %}
-{% set examples =  [
-  {
-    "name": "por defecto (sólo icono)",
-    "data": {
-      "id": "example-default",
-      "icon": {
-        "type": "question"
-      },
-      "caller": '<p class="c-paragraph-base mb-0">Esto es un tooltip</p>'
-    }
-  },
-  {
-    "name": "sólo texto",
-    "data": {
-      "id": "example-text",
-      "text": "Sólo texto",
-      "caller": '<p class="c-paragraph-base mb-0">Esto es un tooltip</p>'
-    }
-  },
-  {
-    "name": "con html",
-    "data": {
-      "id": "example-html",
-      "html": '<p class="inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs text-primary-base" aria-hidden="true" focusable="false"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>',
-      "caller": '<p class="c-paragraph-base mb-0">Si este contenido tiene texto extenso o con código, mira el ejemplo "complex" más abajo.</p>'
-    }
-  },
-  {
-    "name": "pregunta",
-    "data": {
-      "id": "example-question",
-      "text": "Pregunta",
-      "icon": {
-        "type": "question"
-      },
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "info",
-    "data": {
-      "id": "example-info",
-      "text": "Información",
-      "icon": {
-        "type": "info"
-      },
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "alerta",
-    "data": {
-      "id": "example-alert",
-      "text": "Alerta",
-      "icon": {
-        "type": "alert"
-      },
-      "classes": "text-alert-base",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
-    }
-  },
-  {
-    "name": "icono personalizado",
-    "data": {
-      "id": "example-custom-icon",
-      "text": "Icono personalizado",
-      "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-neutral-dark" role="img" aria-label="Ayuda"><path d="M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>'
-      },
-      "classes": "text-neutral-dark",
-      "caller": '<p class="c-paragraph-base mb-0">1520 - Subvención para actividades de educación de personas adultas</p>'
-    }
-  },
-  {
-    "name": "complejo",
-    "description": 'Usa <code>"complex": true</code> para que el contenido del tooltip tenga textos largos o contenido mixto.',
-    "data": {
-      "id": "complex-html",
-      "icon": {
-        "type": "question"
-      },
-      "complex": true,
-      "caller": '<p class="c-paragraph-base mb-0">El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>'
-    }
-  }
+{% set exampleComponent = "tooltip" %}
+{% set examples =  [
+  {
+    "name": "por defecto (sólo icono)",
+    "data": {
+      "id": "example-default",
+      "icon": {
+        "type": "question"
+      },
+      "caller": '<p class="c-paragraph-base mb-0">Esto es un tooltip</p>'
+    }
+  },
+  {
+    "name": "sólo texto",
+    "data": {
+      "id": "example-text",
+      "text": "Sólo texto",
+      "caller": '<p class="c-paragraph-base mb-0">Esto es un tooltip</p>'
+    }
+  },
+  {
+    "name": "con html",
+    "data": {
+      "id": "example-html",
+      "html": '<p class="inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs text-primary-base" aria-hidden="true" focusable="false"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>',
+      "caller": '<p class="c-paragraph-base mb-0">Si este contenido tiene texto extenso o con código, mira el ejemplo "complex" más abajo.</p>'
+    }
+  },
+  {
+    "name": "pregunta",
+    "data": {
+      "id": "example-question",
+      "text": "Pregunta",
+      "icon": {
+        "type": "question"
+      },
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "info",
+    "data": {
+      "id": "example-info",
+      "text": "Información",
+      "icon": {
+        "type": "info"
+      },
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "alerta",
+    "data": {
+      "id": "example-alert",
+      "text": "Alerta",
+      "icon": {
+        "type": "alert"
+      },
+      "classes": "text-alert-base",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+    }
+  },
+  {
+    "name": "icono personalizado",
+    "data": {
+      "id": "example-custom-icon",
+      "text": "Icono personalizado",
+      "icon": {
+        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-neutral-dark" role="img" aria-label="Ayuda"><path d="M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>'
+      },
+      "classes": "text-neutral-dark",
+      "caller": '<p class="c-paragraph-base mb-0">1520 - Subvención para actividades de educación de personas adultas</p>'
+    }
+  },
+  {
+    "name": "complejo",
+    "description": 'Usa <code>"complex": true</code> para que el contenido del tooltip tenga textos largos o contenido mixto.',
+    "data": {
+      "id": "complex-html",
+      "icon": {
+        "type": "question"
+      },
+      "complex": true,
+      "caller": '<p class="c-paragraph-base mb-0">El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>'
+    }
+  }
 ] %}

package/src/templates/components/tooltip/_macro.tooltip.njk

@@ -1,3 +1,3 @@
-{% macro componentTooltip(params) %}
-{% include "./_template.tooltip.njk" %}
-{% endmacro %}
+{% macro componentTooltip(params) %}
+{% include "./_template.tooltip.njk" %}
+{% endmacro %}

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

@@ -1,40 +1,40 @@
-<!-- tooltip -->
-{% set idButton = params.id + "-button" %}
-{% set idTooltip = params.id + "-tooltip" %}
-<div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }} {{ idTooltip }}">
-    {% if params.text or params.html %}
-    {% if params.html %}
-    {{ params.html | safe }}
-    {% else %}
-    <p>
-      {{ params.text }}
-    </p>
-    {% endif %}
-    {% endif %}
-    {% if params.icon and params.text %}
-    <span class="inline-block w-1.5"></span>
-    {% endif %}
-    {% if params.icon %}
-    <span class="inline-block">
-      {% if params.icon.html %}
-      {{ params.icon.html | safe }}
-      {% elseif params.icon.type == 'info' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-      {% elseif params.icon.type == 'alert' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-      {% else %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
-      {% endif %}
-    </span>
-    {% endif %}
-  </div>
-  <div id="{{ idTooltip }}" class="-my-xs p-sm shadow-md bg-black rounded text-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-tooltip-tooltip" >
-    {% if caller %}
-    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-    {% elseif params.caller %}
-    {{ params.caller | safe }}
-    {% endif %}
-  </div>
-</div>
+<!-- tooltip -->
+{% set idButton = params.id + "-button" %}
+{% set idTooltip = params.id + "-tooltip" %}
+<div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }} {{ idTooltip }}">
+    {% if params.text or params.html %}
+    {% if params.html %}
+    {{ params.html | safe }}
+    {% else %}
+    <p>
+      {{ params.text }}
+    </p>
+    {% endif %}
+    {% endif %}
+    {% if params.icon and params.text %}
+    <span class="inline-block w-1.5"></span>
+    {% endif %}
+    {% if params.icon %}
+    <span class="inline-block">
+      {% if params.icon.html %}
+      {{ params.icon.html | safe }}
+      {% elseif params.icon.type == 'info' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% elseif params.icon.type == 'alert' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% else %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
+      {% endif %}
+    </span>
+    {% endif %}
+  </div>
+  <div id="{{ idTooltip }}" class="-my-xs p-sm shadow-md bg-black rounded text-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-tooltip-tooltip" >
+    {% if caller %}
+    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+    {% elseif params.caller %}
+    {{ params.caller | safe }}
+    {% endif %}
+  </div>
+</div>
 <!-- /tooltip -->

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

@@ -1,41 +1,41 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the tooltip
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the tooltip. 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 the tooltip. If `html` is provided, the `text` argument will be ignored.
-- name: icon
-  type: object
-  required: false
-  description: This is the icon at right
-  - name: html
-    type: string
-    required: false
-    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
-  - name: type
-    type: string
-    required: false
-    description: Predefined icon types are `question`, `info` and `alert`. Defaults to `question`.
-- name: complex
-  type: boolean
-  required: false
-  description: Use as `true` if the tooltip content has long texts. This way the content will be read with aria-describedby instead of aria-labelledby, so it will be more verbose.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the tooltip component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the tooltip component.
-- name: caller
-  type: nunjucks-block
-  required: true
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the tooltip
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the tooltip. 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 the tooltip. If `html` is provided, the `text` argument will be ignored.
+- name: icon
+  type: object
+  required: false
+  description: This is the icon at right
+  - name: html
+    type: string
+    required: false
+    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+  - name: type
+    type: string
+    required: false
+    description: Predefined icon types are `question`, `info` and `alert`. Defaults to `question`.
+- name: complex
+  type: boolean
+  required: false
+  description: Use as `true` if the tooltip content has long texts. This way the content will be read with aria-describedby instead of aria-labelledby, so it will be more verbose.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the tooltip component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the tooltip component.
+- name: caller
+  type: nunjucks-block
+  required: true
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.