desy-html 13.0.1 → 14.0.0

package/docs/_include.template-header.njk

@@ -358,6 +358,11 @@
     href: "examples-tree.html",
     text: "Tree",
     id: "page-examples-tree"
+  },
+  {
+    href: "examples-treegrid.html",
+    text: "Treegrid",
+    id: "page-examples-treegrid"
   }],
   attributes: {
     "id": "navegacion-ejemplos-offcanvas",

package/docs/_macro.example-render.njk

@@ -108,6 +108,8 @@ import componentToggle %}
 import componentTooltip %}
 {% from "components/tree/_macro.tree.njk"
 import componentTree %}
+{% from "components/treegrid/_macro.treegrid.njk"
+import componentTreegrid %}
 
 
 {% macro exampleRender(data) %}
@@ -296,6 +298,9 @@ import componentTree %}
           {{ componentTooltip(example.data) }}
           {% elseif exampleComponent == "tree" %}
           {{ componentTree(example.data) }}
+          {% elseif exampleComponent == "treegrid" %}
+          {{ componentTreegrid(example.data) }}
+          {% else %}
 
           {% endif %}
         </div>

package/docs/componentes.html

@@ -176,6 +176,9 @@
     <div>
       <p class="c-paragraph-base"><a href="examples-tree.html" class="c-link">Tree</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-treegrid.html" class="c-link">Treegrid</a></p>
+    </div>
   </div>
   <div class="pb-2xl"></div>
 {% endblock %}

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

@@ -67,7 +67,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.date-input.njk

@@ -119,7 +119,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -159,7 +159,7 @@
         "text": "Por ejemplo, 31 3 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -199,7 +199,7 @@
         "text": "Por ejemplo, 31 3 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.file-upload.njk

@@ -46,7 +46,7 @@
         "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
       },
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error message goes here"
       },
       "classes": "text-sm lg:text-base"
     })  }}

package/docs/ds/_ds.example.input-group.njk

@@ -151,7 +151,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {

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

@@ -45,7 +45,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -61,7 +61,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -117,7 +117,7 @@
       "id": "input-24",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "c-input--sm w-full"
@@ -136,7 +136,7 @@
       "id": "input-25",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "c-input--sm w-full"
@@ -156,7 +156,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

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

@@ -67,7 +67,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {

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

@@ -37,7 +37,7 @@
         "text": "Buscar"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "mt-xs"
       },
       "value": "Value",

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

@@ -84,7 +84,7 @@
         "text": "Label"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {
@@ -114,7 +114,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {
@@ -224,7 +224,7 @@
         "classes": "text-sm"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "items": [
@@ -257,7 +257,7 @@
         "classes": "text-sm"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "items": [
@@ -366,7 +366,7 @@
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "items": [

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

@@ -46,7 +46,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -62,7 +62,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -116,7 +116,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "maxlength": 10,
       "classes": "w-full"
@@ -133,7 +133,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "maxlength": 10,
       "classes": "w-full"
@@ -190,7 +190,7 @@
       "id": "input-24",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "text-sm w-full"
@@ -209,7 +209,7 @@
       "id": "input-25",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "text-sm w-full"
@@ -229,7 +229,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

package/docs/examples-treegrid.html

@@ -0,0 +1,8 @@
+{% set title = "Treegrid. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+
+{% set activePage = "page-componentes" %}
+{% set activeComponent = "Treegrid" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/treegrid/_examples.treegrid.njk" as exampleData %}
+{% endblock %}

package/docs/index.html

@@ -39,6 +39,14 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.14.0.0</h3>
+  <ul class="text-sm">
+    <li>Added Treegrid component. Better gulp compilation with errors.</li>
+  </ul>
+  <h3>v.13.0.2</h3>
+  <ul class="text-sm">
+    <li>Accesibility fixes in most of the component examples.</li>
+  </ul>
   <h3>v.13.0.1</h3>
   <ul class="text-sm">
     <li>Removed backstop npm script entries as they are not used.</li>

package/gulpfile.js

@@ -5,6 +5,7 @@ import gulp from 'gulp';
 import sourcemaps from 'gulp-sourcemaps';
 import clean from 'gulp-clean';
 import nunjucksRender from 'gulp-nunjucks-render';
+import plumber from 'gulp-plumber';
 import browserSyncPackage from 'browser-sync';
 import postcss from 'gulp-postcss';
 import atimport from 'postcss-import';
@@ -75,7 +76,12 @@ function css() {
         tailwindcssNesting(),
         tailwindcss(TAILWIND_CONFIG),
         autoprefixer()
-      ])
+      ]).on('error', function(err) {
+        console.log('\x1b[31m%s\x1b[0m', '=== POSTCSS ERROR ===');
+        console.log('\x1b[31m%s\x1b[0m', err.message);
+        console.log('\x1b[31m%s\x1b[0m', '===================');
+        process.exit(1);
+      })
     )
     .pipe(stripCssComments({preserve: false}))
     .pipe(footer('\n'))
@@ -89,6 +95,14 @@ function html() {
 
 function nunjucks() {
   return gulp.src(SOURCE_NUNJUCKS_DIR)
+    .pipe(plumber({
+      errorHandler: function(err) {
+        console.log('\x1b[31m%s\x1b[0m', '=== NUNJUCKS ERROR ===');
+        console.log('\x1b[31m%s\x1b[0m', 'Error: ' + err.message);
+        console.log('\x1b[31m%s\x1b[0m', '=====================');
+        process.exit(1);
+      }
+    }))
     .pipe(nunjucksRender({
         envOptions: {
           autoescape: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "13.0.1",
+  "version": "14.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": {
@@ -52,6 +52,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-footer": "^2.1.0",
     "gulp-nunjucks-render": "^2.2.3",
+    "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^9.0.1",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-strip-css-comments": "^2.0.0",

package/src/css/styles.css

@@ -43,6 +43,7 @@
 @import "../templates/components/toggle/_styles.toggle.css";
 @import "../templates/components/tooltip/_styles.tooltip.css";
 @import "../templates/components/tree/_styles.tree.css";
+@import "../templates/components/treegrid/_styles.treegrid.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";
 @import "./component.headroom.css";

package/src/js/aria/MenuNavigation.js

@@ -35,7 +35,10 @@ export function MenuNavigation(aria) {
           const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
           getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
           getElement.setAttribute('aria-current', 'true');
-          getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
+          const mainSpan = getElement.querySelector('span:not(.sr-only)');
+          if (mainSpan) {
+            mainSpan.innerHTML = `<strong class="font-bold">${mainSpan.textContent}</strong>`;
+          }
           element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
         }
       })
@@ -97,7 +100,10 @@ export function MenuNavigation(aria) {
         const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
         getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
         getElementParent.removeAttribute('aria-current');
-        getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+        const mainSpanParent2 = getElementParent.querySelector('span:not(.sr-only)');
+        if (mainSpanParent2) {
+          mainSpanParent2.innerHTML = mainSpanParent2.textContent;
+        }
         link.removeAttribute('aria-current');
         link.innerHTML = `${link.textContent}`;
       }
@@ -107,7 +113,10 @@ export function MenuNavigation(aria) {
         const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
         getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
         getElementParent.setAttribute('aria-current', 'true');
-        getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
+        const mainSpanParent = getElementParent.querySelector('span:not(.sr-only)');
+        if (mainSpanParent) {
+          mainSpanParent.innerHTML = `<strong class="font-bold">${mainSpanParent.textContent}</strong>`;
+        }
       }
     });
   };