desy-html 11.2.0 → 12.0.0

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

@@ -274,7 +274,7 @@
             "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
           },
           "definition": {
-            "html": '<strong>45,5€</strong>',
+            "html": "<strong>45,5€</strong>",
             "classes": "lg:w-2/3 px-base py-sm"
           },
           "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
@@ -381,7 +381,7 @@
             "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
           },
           "definition": {
-            "html": '<strong>Si</strong>',
+            "html": "<strong>Si</strong>",
             "classes": "lg:w-2/3 px-base py-sm lg:text-right"
           },
           "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
@@ -399,7 +399,7 @@
             "classes": "mb-sm"
           },
           "definition": {
-            "html": '<span class="font-bold text-4xl">45</span> <svg class="inline-block align-baseline ml-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1.6rem" height="1.6rem"><path d="M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z"/></svg><a href="/" class="c-link block mt-sm font-normal text-sm">Ver todos</a>'
+            "html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
           }
         }
       ],

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

@@ -6,11 +6,11 @@
   {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
     {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.term.html | safe if item.term.html else item.term.text }}
+      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
     </dt>
     <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
     {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.definition.html | safe if item.definition.html else item.definition.text }}
+      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
     </dd>
   </div>
   {% endfor %}

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

@@ -11,7 +11,7 @@
   },
   {
     "name": "expandido",
-    "description": 'Usa el parámetro <code>"open": true</code> para mostrar inicialmente abierto un item.',
+    "description": "Usa el parámetro <code>'open': true</code> para mostrar inicialmente abierto un item.",
     "data": {
       "id": "mas-informacion",
       "summary": {
@@ -25,7 +25,7 @@
     "name": "con HTML",
     "data": {
       "summary": {
-        "html": 'Más información <em>actualizada</em>'
+        "html": "Más información <em>actualizada</em>"
       },
       "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
     }
@@ -34,7 +34,7 @@
     "name": "con clases",
     "data": {
       "summary": {
-        "html": 'Más información <em>actualizada</em>',
+        "html": "Más información <em>actualizada</em>",
         "classes": "hover:underline"
       },
       "classes": "p-base bg-primary-light text-primary-base",

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

@@ -2,7 +2,7 @@
 <details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
   <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
     <span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
-      {{ params.summary.html | safe if params.summary.html else params.summary.text }}
+      {{ params.summary.html | filterquotes | safe if params.summary.html else params.summary.text }}
     </span>
   </summary>
   <div class="py-sm">

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

@@ -39,7 +39,7 @@
     ],
     "itemsSecondary": [
       {
-        "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+        "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
         "attributes": {
           "onclick": "closeDialog(this)"
         }
@@ -60,7 +60,7 @@
     },
     "itemsSecondary": [
       {
-        "html": 'Cerrar',
+        "html": "Cerrar",
         "attributes": {
           "onclick": "closeDialog(this)"
         }
@@ -75,7 +75,7 @@
 {% set examples =  [
   {
     "name": "Modal lanzado con un Dialog",
-    "description": 'Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>"role":"dialog"</code> y <code>"aria-modal": true</code>',
+    "description": "Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>'role':'dialog'</code> y <code>'aria-modal': true</code>",
     "data": {
       "button": {
         "text": "Abrir modal",
@@ -116,7 +116,7 @@
   },
   {
     "name": "Modal lanzado con un Dialog con JavaScript",
-    "description": 'También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog("modal-javascript", "button-javascript-action-example", "label-javascript-action-example")</code> para mostrar la modal.',
+    "description": "También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog('modal-javascript', 'button-javascript-action-example', 'label-javascript-action-example')</code> para mostrar la modal.",
     "data": {
       "button": {
         "text": "Abrir modal con JavaScript",

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

@@ -4,34 +4,34 @@
     "name": "por defecto",
     "data": {
       "text": "Por defecto",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
     "name": "con estado activo",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "description": "Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.",
     "data": {
       "text": "Activo",
       "classes": "ds-active",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
     "name": "con estado hover",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "description": "Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.",
     "data": {
       "text": "Hover",
       "classes": "ds-hover",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
     "name": "con estado focus",
-    "description": 'Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.',
+    "description": "Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.",
     "data": {
       "text": "Focus",
       "classes": "ds-focus",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -40,7 +40,7 @@
     "data": {
       "text": "Primario",
       "classes": "c-dropdown--primary",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -48,7 +48,7 @@
     "data": {
       "text": "Transparente",
       "classes": "c-dropdown--transparent",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -56,7 +56,7 @@
     "data": {
       "text": "Header",
       "classes": "c-dropdown--header",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -64,7 +64,7 @@
     "data": {
       "text": "Grande",
       "classes": "c-dropdown--lg",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -72,7 +72,7 @@
     "data": {
       "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--sm",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -81,7 +81,7 @@
     "data": {
       "text": "Botón pequeño con texto muy largo",
       "classes": "c-dropdown--has-selection c-dropdown--sm",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -89,7 +89,7 @@
     "data": {
       "text": "Deshabilitado",
       "disabled": true,
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -98,7 +98,7 @@
     "data": {
       "text": "Clases en container",
       "classesContainer": "inline-block p-base bg-primary-light",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
     }
   },
   {
@@ -107,7 +107,7 @@
     "data": {
       "text": "Clases al contenido del tooltip",
       "classesTooltip": "max-h-64 overflow-y-auto",
-      "caller": "<div class=\" w-64 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"></div></div>"
+      "caller": "<div class=' w-64 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '></div></div>"
     }
   },
   {
@@ -117,7 +117,21 @@
       "text": "Dropdown anchura completa",
       "classes": "w-full justify-between",
       "classesTooltip": "w-max max-h-64 overflow-y-auto",
-      "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"
+      "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:900px '></div></div></div>"
+    }
+  },
+  {
+    "name": "Con role dialog",
+    "description": 'Usa los atributos <code>data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional"</code> para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.',
+    "data": {
+      "text": "Marta Pérez",
+      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+      "attributes": {
+        "data-aria-haspopup": "dialog",
+        "data-role": "dialog",
+        "data-aria-modal": "false",
+        "data-aria-label": "Información adicional"
+      }
     }
   }
 ] %}

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

@@ -17,7 +17,7 @@ treat it as an interactive element - without this it will be
 <!-- dropdown -->
 <div data-module="c-dropdown" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
   <button {{- commonAttributes | safe }}>
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{{ params.html | safe if params.html else params.text }}</span>
+    <span class="inline-flex self-center max-w-xs align-middle truncate">{{ params.html | filterquotes | safe if params.html else params.text }}</span>
     {# Indentation is intentional to output HTML nicely #}
     {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
   </button>

package/src/templates/components/error-message/_examples.error-message.njk

@@ -9,7 +9,7 @@
   {
     "name": "con HTML",
     "data": {
-      "html": 'Error: esto es un <em>mensaje de error con HTML</em>'
+      "html": "Error: esto es un <em>mensaje de error con HTML</em>"
     }
   }
 ] %}

package/src/templates/components/error-message/_template.error-message.njk

@@ -3,6 +3,6 @@
 <!-- error-message -->
 <p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block font-semibold text-alert-base {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if visuallyHiddenText %}
-  <span class="sr-only">{{ visuallyHiddenText }}:</span>{% endif -%}{{ params.html | safe if params.html else params.text }}
+  <span class="sr-only">{{ visuallyHiddenText }}:</span>{% endif -%}{{ params.html | filterquotes | safe if params.html else params.text }}
 </p>
 <!-- /error-message -->

package/src/templates/components/error-summary/_template.error-summary.njk

@@ -37,9 +37,9 @@
     {% for item in params.errorList %}
       <li>
       {% if item.href %}
-        <a href="{{ item.href }}" class="c-link c-link--alert"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+        <a href="{{ item.href }}" class="c-link c-link--alert"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
       {% else %}
-        {{ item.html | safe if item.html else item.text }}
+        {{ item.html | filterquotes | safe if item.html else item.text }}
       {% endif %}
       </li>
     {% endfor %}

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

@@ -38,7 +38,7 @@
   },
   {
     "name": "con error",
-    "description": 'Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid="true"</code> aplicado en el HTML.',
+    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML.",
     "data": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",
@@ -50,7 +50,7 @@
   },
   {
     "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>. Si no se establece un <code>"headingLevel"</code>, por defecto usará un <code>&lt;h1&gt;</code>.',
+    "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>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
     "data": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",
@@ -63,7 +63,7 @@
   },
   {
     "name": "con label como encabezado con h3",
-    "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>.',
+    "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": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",

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

@@ -9,32 +9,32 @@
   {% if params.legend.isPageHeading %}
     {% if params.headingLevel == "1" %}
     <h1>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h1>
   {% elseif params.headingLevel == "2" %}
     <h2>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h2>
   {% elseif params.headingLevel == "3" %}
     <h3>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h3>
   {% elseif params.headingLevel == "4" %}
     <h4>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h4>
   {% elseif params.headingLevel == "5" %}
     <h5>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h5>
   {% else %}
   {{ params.headingLevel }}
     <h1>
-      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+      {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
     </h1>
   {% endif %}
   {% else %}
-    {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+    {{ params.legend.html | filterquotes | safe if params.legend.html else params.legend.text }}
   {% endif %}
   </legend>
   {% endif %}