desy-html 11.1.2 → 12.0.0

package/src/templates/components/dropdown/_styles.dropdown.css

@@ -69,6 +69,13 @@
   }
 
 
+  .c-dropdown--lg {
+    @apply px-4;
+    @apply py-3;
+    @apply text-lg;
+  }
+
+
   .c-dropdown--sm {
     @apply px-2;
     @apply py-1;

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