desy-html 8.0.0 → 8.1.0

package/docs/index.html

@@ -38,6 +38,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.1.0</h3>
+  <ul class="text-sm">
+    <li>Added a new modifier class in Menu horizontal to show scroll in mobile.</li>
+    <li>Bug fixes.</li>
+  </ul>
+  <h3>v.8.0.1</h3>
+  <ul class="text-sm">
+    <li>Fixed a bug in examples Nunjucks code.</li>
+  </ul>
   <h3>v.8.0.0</h3>
   <ul class="text-sm">
     <li>Improved indentation in examples.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/checkBoxes.js

@@ -6,6 +6,10 @@ export function CheckBox(aria) {
       this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
         item.addEventListener('click', this.toggleConditional.bind(this))
       })
+
+      this.rootEl.querySelectorAll('.c-checkboxes__indeterminate-active').forEach(item => {
+        this.toggleIndeterminate(item, true)
+      })
     }
 
     toggleConditional(event) {
@@ -24,11 +28,17 @@ export function CheckBox(aria) {
         })
       }
     }
+
+    toggleIndeterminate(event) {
+      const selectInput = event.querySelector('input');
+      selectInput.readOnly = true
+      selectInput.indeterminate = true
+    }
   }
 
   const checkBoxesElements = document.querySelectorAll('[data-module="c-checkboxes"]');
   checkBoxesElements.forEach((checkBoxElement) => {
-    if (checkBoxElement.querySelector('.c-checkboxes__conditional')) {
+    if (checkBoxElement.querySelector('.c-checkboxes__conditional') || checkBoxElement.querySelector('.c-checkboxes__indeterminate-active')) {
       new CheckBox(checkBoxElement);
     }
   });

package/src/js/aria/treeitem.js

@@ -95,6 +95,12 @@ export function Treeitem(aria) {
       this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
       this.domNode.addEventListener('mouseout', this.handleMouseOut.bind(this));
     }
+
+    const getCheckboxes = document.querySelectorAll('.c-checkboxes__indeterminate-active');
+    Array.from(getCheckboxes).forEach((checkbox) => {
+      checkbox.readOnly = true
+      checkbox.indeterminate = true
+    });
   };
 
   aria.Treeitem.prototype.isExpanded = function () {

package/src/js/globals/get-nunjucks-code-from-example.js

@@ -12,7 +12,7 @@ function getNunjucksCodeFromExample (componentName, params, pathName) {
   const macroName = kebabCaseToPascalCase(componentName)
 
   return outdent`
-    {% from "${pathName}s/${componentName}/macro.njk" import ${pathName}${macroName} %}
+    {% from "${pathName}s/${componentName}/_macro.${componentName}.njk" import ${pathName}${macroName} %}
 
     {{ ${pathName}${macroName}(${
       JSON.stringify(params, undefined, 2)

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

@@ -72,7 +72,7 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) %}
-    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
+    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {%- elif item.isIndeterminate and not item.indeterminateChecked %} c-checkboxes__indeterminate {%- elif item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate c-checkboxes__indeterminate-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
           <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"

package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk

@@ -163,9 +163,9 @@
   },
   {
     "name": "con clases aplicadas: tabs en móvil",
-    "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--tabs-mobile</code>',
+    "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',
     "data": {
-      "classes": "c-menu-horizontal--tabs-mobile",
+      "classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
       "items": [
         {
           "href": "#",

package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css

@@ -54,5 +54,15 @@
       @apply outline-none;
     }
   }
+
+  .c-menu-horizontal--scroll {
+    .c-menu-horizontal__list {
+      @apply relative w-full flex lg:flex-nowrap snap-x overflow-x-auto -mb-0.5;
+
+      & > li {
+        @apply snap-start;
+      }
+    }
+  }
 }
 

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

@@ -77,7 +77,7 @@
         "type": "submit",
         "classes": "c-button--primary ml-sm"
       },
-      "classes": "flex-1 pr-sm"
+      "classes": "flex-1"
     }
   },
   {
@@ -93,7 +93,7 @@
         "type": "submit",
         "classes": "c-button--sm ml-sm"
       },
-      "classes": "flex-1 pr-sm c-input--sm"
+      "classes": "flex-1 c-input--sm"
     }
   }
 ] %}

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

@@ -18,7 +18,7 @@
   for: params.id
 }) }}
 <div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
-  <input class="c-input block pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  {%- if not params.button %} w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
+  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}

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

@@ -29,7 +29,7 @@
   <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
     <div class="relative flex items-start py-xs">
       <div class="flex items-center mx-sm">
-        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
+        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
         {{-" checked" if item.checked }}
         {{-" disabled" if item.disabled }}
         {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}