desy-html 11.2.0 → 12.0.0

package/docs/_global.foot.njk

@@ -1,7 +1,7 @@
 {% from "components/footer/_macro.footer.njk" import componentFooter %}
 {{ componentFooter({
   "meta": {
-    "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
   },
   "classes": "lg:mt-48"
 })  }}

package/docs/_macro.example-render.njk

@@ -117,29 +117,72 @@ import componentTree %}
 
   <div>
     <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
-    {% call componentDetails({
-      "summary": {
-        "html": "Mostrar parámetros",
-        "classes": "c-link text-sm"
-      }
-    })  %}
-      <div class="c-markup">
-        <div class="py-base">
-          <h2 class="mb-sm font-bold">Parámetros del componente</h2>
-          {% from "_macro.load-component-params.njk" import loadComponentParams %}
+    {% from "_macro.load-component-params.njk" import loadComponentParams %}
+    <div class="sr-only">
+      <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
+      <p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
+      <pre>
+        <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
+      </pre>
+    </div>
+    <div aria-hidden="true">
+      {% call componentDetails({
+        "summary": {
+          "html": "Mostrar parámetros",
+          "classes": "c-link text-sm"
+        }
+      })  %}
+        <div class="c-markup">
+          <div class="py-base">
+            <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}"</span></h2>
             <pre>
               <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | highlight("yaml") | safe }}
               </code>
             </pre>
+          </div>
         </div>
-      </div>
-    {% endcall %}
+      {% endcall %}
+    </div>
   </div>
   {% for example in examples %}
-    <div class="grid grid-cols-1 gap-x-xl mt-xl">
+    <article class="grid grid-cols-1 gap-x-xl mt-xl">
       <div class="pt-xl">
         <h3 id="{{ example.name |filterslugify }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
         <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
+        <div class="sr-only">
+          <h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+          <p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
+          <p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
+          <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+          <pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
+              {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
+            </code>
+          </pre>
+        </div>
+        {% if example.data.caller %}
+          {% from "_macro.render-caller.njk" import renderCaller %}
+          {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
+          {% set callerNunjucks %}
+            {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+          {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
+{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
+{{ callerHtml }}
+{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
+
+          </div>
+        {% else %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
+          </div>
+        {% endif %}
       </div>
       <div class="pt-base lg:pt-lg">
         <div class="p-base border border-neutral-base">
@@ -260,13 +303,13 @@ import componentTree %}
       <div class="pt-base lg:pt-lg mb-base">
           {% set htmlContent %}
             {{ componentButton({
-              "text": "Copiar código",
+              "html": 'Copiar código<span class="sr-only"> HTML</span>',
               "classes": "c-button--sm c-button--transparent mb-sm",
               "attributes": {
                 "data-module": "c-button-copy"
               }
             }) }}
-            <pre class="hljs"><code class="language-html hljs text-sm">
+            <pre class="hljs" aria-hidden="true"><code class="language-html hljs text-sm">
                 {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
               </code>
             </pre>
@@ -279,7 +322,7 @@ import componentTree %}
                 {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
               {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
               {{ componentButton({
-                "text": "Copiar código",
+                "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
                 "classes": "c-button--sm c-button--transparent mb-sm",
                 "attributes": {
                   "data-module": "c-button-copy"
@@ -291,7 +334,7 @@ import componentTree %}
 {% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
               {% else %}
                 {{ componentButton({
-                  "text": "Copiar código",
+                  "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
                   "classes": "c-button--sm c-button--transparent mb-sm",
                   "attributes": {
                     "data-module": "c-button-copy"
@@ -307,6 +350,7 @@ import componentTree %}
           }
         })  %}
             {{ componentTabs({
+              "headingLevel": 4,
               "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
               "idPrefix": "tab-" + loop.index,
               "classes": "c-tabs--scroll",
@@ -327,6 +371,6 @@ import componentTree %}
             })  }}
         {% endcall %}
       </div>
-    </div>
+    </article>
   {% endfor %}
 {% endmacro %}

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

@@ -215,7 +215,7 @@
           <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
         </dt>
         <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-current</code> - hover: <code>primary-dark.underline</code></p>
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-primary-base</code> - hover: <code>primary-dark.underline</code></p>
         </dd>
       </dl>
     </li>

package/docs/index.html

@@ -7,6 +7,7 @@
 <div class="prose pb-xl">
 <div class="pb-lg"></div>
   <h1>desy-html</h1>
+  <p>Versión: {{ '' | filterversion }}</p>
   <p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
   <p>Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: <a href="https://bitbucket.org/sdaragon/desy-angular">desy-angular librería NPM</a>, <a href="https://desy.aragon.es/desy-angular">Ejemplos de desy-angular</a></p>
   <p>Mira ejemplos de componentes y plantillas de página en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
@@ -38,6 +39,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.12.0.0</h3>
+  <ul class="text-sm">
+    <li>Datepicker now uses Spanish date format: DD-MM-AAAA.</li>
+    <li>Dropdowns that has no menu, now has the correct arias using data attributes.</li>
+    <li>Accesibility fixes in Header mini, Datepicker, Dropdown, Tooltip and Links list.</li>
+    <li>Docs examples in Nunjucks have single quotes in attributes instead of escaped double quotes.</li>
+    <li>Docs improvements for AI and robots.</li>
+    <li>Validation fixes.</li>
+  </ul>
   <h3>v.11.2.0</h3>
   <ul class="text-sm">
     <li>Added global function to Links list and Tree navigation to activate items.</li>

package/docs/pagina-prueba.html

@@ -47,7 +47,7 @@
         "text": "Ejemplo de modal"
       },
       "description": {
-        "html": ''
+        "html": ""
       },
       "itemsPrimary": [
         {
@@ -57,7 +57,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)"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -38,7 +38,7 @@
     "autoprefixer": "^10.4.19",
     "hex-rgb": "^5.0.0",
     "highlight.js": "^11.9.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.0",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "tailwindcss": "^3.4.15"

package/src/css/component.text.css

@@ -82,7 +82,6 @@
     }
 
     .c-link--no-underline {
-      @apply text-current;
       @apply no-underline;
 
       &:hover {

package/src/js/aria/utils.js

@@ -1,4 +1,3 @@
-
 export function utils(aria) {
   /**
    * @namespace aria
@@ -29,7 +28,7 @@ export function utils(aria) {
 
 
   // Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-  aria.Utils.matches = function (element, selector) {
+  aria.Utils.matches = function(element, selector) {
     if (!Element.prototype.matches) {
       Element.prototype.matches =
         Element.prototype.matchesSelector ||
@@ -37,7 +36,7 @@ export function utils(aria) {
         Element.prototype.msMatchesSelector ||
         Element.prototype.oMatchesSelector ||
         Element.prototype.webkitMatchesSelector ||
-        function (s) {
+        function(s) {
           var matches = element.parentNode.querySelectorAll(s);
           var i = matches.length;
           while (--i >= 0 && matches.item(i) !== this) {}
@@ -48,19 +47,19 @@ export function utils(aria) {
     return element.matches(selector);
   };
 
-  aria.Utils.remove = function (item) {
+  aria.Utils.remove = function(item) {
     if (item.remove && typeof item.remove === 'function') {
       return item.remove();
     }
     if (item.parentNode &&
-        item.parentNode.removeChild &&
-        typeof item.parentNode.removeChild === 'function') {
+      item.parentNode.removeChild &&
+      typeof item.parentNode.removeChild === 'function') {
       return item.parentNode.removeChild(item);
     }
     return false;
   };
 
-  aria.Utils.isFocusable = function (element) {
+  aria.Utils.isFocusable = function(element) {
     if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
       return true;
     }
@@ -83,7 +82,7 @@ export function utils(aria) {
     }
   };
 
-  aria.Utils.getAncestorBySelector = function (element, selector) {
+  aria.Utils.getAncestorBySelector = function(element, selector) {
     if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) {
       // Element is not inside an element that matches selector
       return null;
@@ -95,8 +94,7 @@ export function utils(aria) {
     while (ancestor === null) {
       if (aria.Utils.matches(currentNode.parentNode, selector)) {
         ancestor = currentNode.parentNode;
-      }
-      else {
+      } else {
         currentNode = currentNode.parentNode;
       }
     }
@@ -104,25 +102,92 @@ export function utils(aria) {
     return ancestor;
   };
 
-  aria.Utils.hasClass = function (element, className) {
+  aria.Utils.hasClass = function(element, className) {
     return (new RegExp('(\\s|^)' + className + '(\\s|$)')).test(element.className);
   };
 
-  aria.Utils.addClass = function (element, className) {
+  aria.Utils.addClass = function(element, className) {
     if (!aria.Utils.hasClass(element, className)) {
       element.className += ' ' + className;
     }
   };
 
-  aria.Utils.removeClass = function (element, className) {
+  aria.Utils.removeClass = function(element, className) {
     var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
     element.className = element.className.replace(classRegex, ' ').trim();
   };
 
-  aria.Utils.bindMethods = function (object /* , ...methodNames */) {
+  aria.Utils.bindMethods = function(object /* , ...methodNames */ ) {
     var methodNames = Array.prototype.slice.call(arguments, 1);
-    methodNames.forEach(function (method) {
+    methodNames.forEach(function(method) {
       object[method] = object[method].bind(object);
     });
   };
 }
+
+// Function to convert ISO date(s) to DD-MM-YYYY format
+export function formatDateToDDMMYYYY(isoDate) {
+  if (!isoDate) return '';
+  try {
+    // Case 1: Multiple dates separated by space
+    if (isoDate.includes(' ')) {
+      return isoDate
+        .split(' ')
+        .map(date => formatSingleDate(date))
+        .join(' ');
+    }
+    // Case 2: Date range separated by /
+    if (isoDate.includes('/')) {
+      const [startDate, endDate] = isoDate.split('/');
+      return `${formatSingleDate(startDate)}/${formatSingleDate(endDate)}`;
+    }
+    // Case 3: Single date
+    return formatSingleDate(isoDate);
+  } catch (error) {
+    console.error('Error formatting date:', error);
+    return '';
+  }
+}
+
+// Helper function to format a single date
+export function formatSingleDate(isoDate) {
+  const date = new Date(isoDate);
+  if (isNaN(date.getTime())) {
+    return '';
+  }
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+  return `${day}-${month}-${year}`;
+}
+
+// Function to convert DD-MM-YYYY format to ISO
+export function convertToISOFormat(ddmmyyyyDate) {
+  if (!ddmmyyyyDate) return '';
+  try {
+    // For multiple dates
+    if (ddmmyyyyDate.includes(' ')) {
+      return ddmmyyyyDate
+        .split(' ')
+        .map(date => convertSingleDateToISO(date))
+        .join(' ');
+    }
+    // For date ranges
+    if (ddmmyyyyDate.includes('/')) {
+      const [startDate, endDate] = ddmmyyyyDate.split('/');
+      return `${convertSingleDateToISO(startDate)}/${convertSingleDateToISO(endDate)}`;
+    }
+    // For single date
+    return convertSingleDateToISO(ddmmyyyyDate);
+  } catch (error) {
+    console.error('Error converting to ISO format:', error);
+    return '';
+  }
+}
+
+// Helper function to convert a single date to ISO
+function convertSingleDateToISO(ddmmyyyyDate) {
+  if (!ddmmyyyyDate) return '';
+  const [day, month, year] = ddmmyyyyDate.split('-');
+  return `${year}-${month}-${day}`;
+}