desy-html 10.2.0 → 10.2.2

package/docs/ds/_ds.example.textarea.njk

@@ -1,238 +1,238 @@
-{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
-{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
-
-<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-11",
-      "name": "test-name",
-      "placeholder": "Placeholder",
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-12",
-      "name": "test-name",
-      "disabled": true,
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo"
-      },
-      "id": "input-13",
-      "name": "test-name",
-      "value": "Value",
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-14",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error"
-      },
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo"
-      },
-      "id": "input-15",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error"
-      },
-      "classes": "w-full"
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
-  <div>
-    {{ componentCharacterCount({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-11",
-      "name": "test-name",
-      "maxlength": 10,
-      "placeholder": "Placeholder",
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentCharacterCount({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-12",
-      "name": "test-name",
-      "disabled": true,
-      "maxlength": 10,
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentCharacterCount({
-      "label": {
-        "text": "Label"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo"
-      },
-      "id": "input-13",
-      "name": "test-name",
-      "maxlength": 10,
-      "value": "Value",
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentCharacterCount({
-      "label": {
-        "text": "Label"
-      },
-      "id": "input-14",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error"
-      },
-      "maxlength": 10,
-      "classes": "w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentCharacterCount({
-      "label": {
-        "text": "Label"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo"
-      },
-      "id": "input-15",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error"
-      },
-      "maxlength": 10,
-      "classes": "w-full"
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label",
-        "classes": "text-sm"
-      },
-      "id": "input-21",
-      "name": "test-name",
-      "classes": "text-sm w-full",
-      "placeholder": "Placeholder"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label",
-        "classes": "text-sm"
-      },
-      "id": "input-22",
-      "name": "test-name",
-      "classes": "text-sm w-full",
-      "disabled": true
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label",
-        "classes": "text-sm"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo",
-        "classes": "text-sm"
-      },
-      "id": "input-23",
-      "name": "test-name",
-      "classes": "text-sm w-full",
-      "value": "Value"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label",
-        "classes": "text-sm"
-      },
-      "id": "input-24",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error",
-        "classes": "text-sm"
-      },
-      "classes": "text-sm w-full"
-    })  }}
-  </div>
-  <div>
-    {{ componentTextarea({
-      "label": {
-        "text": "Label",
-        "classes": "text-sm"
-      },
-      "hint": {
-        "text": "Hint texto descriptivo",
-        "classes": "text-sm"
-      },
-      "id": "input-25",
-      "name": "test-name",
-      "errorMessage": {
-        "text": "Error: Mensaje de error",
-        "classes": "text-sm"
-      },
-      "classes": "text-sm w-full"
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-3 gap-xl mb-lg items-end">
-  <div>
-    {{ componentTextarea({
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
-      },
-      "label": {
-        "text": "Inline label:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "id": "classes-applied-b",
-      "name": "classes-applied-b",
-      "errorMessage": {
-        "text": "Error: Error message goes here",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "classes": "lg:flex-1"
-    })  }}
-  </div>
+{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
+{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
+
+<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-11",
+      "name": "test-name",
+      "placeholder": "Placeholder",
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-12",
+      "name": "test-name",
+      "disabled": true,
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo"
+      },
+      "id": "input-13",
+      "name": "test-name",
+      "value": "Value",
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-14",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error"
+      },
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo"
+      },
+      "id": "input-15",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error"
+      },
+      "classes": "w-full"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
+  <div>
+    {{ componentCharacterCount({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-11",
+      "name": "test-name",
+      "maxlength": 10,
+      "placeholder": "Placeholder",
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentCharacterCount({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-12",
+      "name": "test-name",
+      "disabled": true,
+      "maxlength": 10,
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentCharacterCount({
+      "label": {
+        "text": "Label"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo"
+      },
+      "id": "input-13",
+      "name": "test-name",
+      "maxlength": 10,
+      "value": "Value",
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentCharacterCount({
+      "label": {
+        "text": "Label"
+      },
+      "id": "input-14",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error"
+      },
+      "maxlength": 10,
+      "classes": "w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentCharacterCount({
+      "label": {
+        "text": "Label"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo"
+      },
+      "id": "input-15",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error"
+      },
+      "maxlength": 10,
+      "classes": "w-full"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label",
+        "classes": "text-sm"
+      },
+      "id": "input-21",
+      "name": "test-name",
+      "classes": "text-sm w-full",
+      "placeholder": "Placeholder"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label",
+        "classes": "text-sm"
+      },
+      "id": "input-22",
+      "name": "test-name",
+      "classes": "text-sm w-full",
+      "disabled": true
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label",
+        "classes": "text-sm"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo",
+        "classes": "text-sm"
+      },
+      "id": "input-23",
+      "name": "test-name",
+      "classes": "text-sm w-full",
+      "value": "Value"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label",
+        "classes": "text-sm"
+      },
+      "id": "input-24",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error",
+        "classes": "text-sm"
+      },
+      "classes": "text-sm w-full"
+    })  }}
+  </div>
+  <div>
+    {{ componentTextarea({
+      "label": {
+        "text": "Label",
+        "classes": "text-sm"
+      },
+      "hint": {
+        "text": "Hint texto descriptivo",
+        "classes": "text-sm"
+      },
+      "id": "input-25",
+      "name": "test-name",
+      "errorMessage": {
+        "text": "Error: Mensaje de error",
+        "classes": "text-sm"
+      },
+      "classes": "text-sm w-full"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-3 gap-xl mb-lg items-end">
+  <div>
+    {{ componentTextarea({
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
+      },
+      "label": {
+        "text": "Inline label:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "id": "classes-applied-b",
+      "name": "classes-applied-b",
+      "errorMessage": {
+        "text": "Error: Error message goes here",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "classes": "lg:flex-1"
+    })  }}
+  </div>
 </div>

package/docs/ds/_ds.example.textos.njk

@@ -1,28 +1,28 @@
-<h1 class="c-h0">Título 0</h1>
-<h1 class="c-h1">Título 1</h1>
-<h2 class="c-h2">Título 2</h2>
-<h3 class="c-h3">Título 3</h3>
-<h4 class="c-h4">Título 4</h4>
-<p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
-<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
-<p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
-<p class="c-paragraph-lg">Párrafo destacados</p>
-<p class="c-paragraph-base">Párrafo por defecto</p>
-<p class="c-paragraph-base text-neutral-dark">Párrafo secundario</p>
-<p class="c-paragraph-sm">Párrafo pequeño</p>
-<p class="c-paragraph-sm text-neutral-dark">Párrafo pequeño secundario</p>
-<ul class="c-ul">
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-</ul>
-<ul class="c-ul c-ul--no-bullets">
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-</ul>
-<ul class="c-ol">
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+<h1 class="c-h0">Título 0</h1>
+<h1 class="c-h1">Título 1</h1>
+<h2 class="c-h2">Título 2</h2>
+<h3 class="c-h3">Título 3</h3>
+<h4 class="c-h4">Título 4</h4>
+<p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
+<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
+<p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
+<p class="c-paragraph-lg">Párrafo destacados</p>
+<p class="c-paragraph-base">Párrafo por defecto</p>
+<p class="c-paragraph-base text-neutral-dark">Párrafo secundario</p>
+<p class="c-paragraph-sm">Párrafo pequeño</p>
+<p class="c-paragraph-sm text-neutral-dark">Párrafo pequeño secundario</p>
+<ul class="c-ul">
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+</ul>
+<ul class="c-ul c-ul--no-bullets">
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+</ul>
+<ul class="c-ol">
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+  <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
 </ul>