desy-html 7.1.0 → 7.1.1

package/README.md

@@ -11,7 +11,7 @@ See live examples of desy-html components: [https://desy.aragon.es/](https://des
 * Run `npm install` first.
 * Use `npm run dev` to generate CSS from `src/styles.css` to `/dist/styles.css`,  listen to changes in njk, css and html, and browser-sync reload.
 * Use `npm run prod` to generate CSS, Purge it and Minify it.
-* Dependencies: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS and CSSnano configed in PostCSS
+* Dependencies: Node.js v16.17.1, Tailwind CSS and AutoPrefixer configed in PostCSS
 
 ### How do I start a project that uses desy-html components? ###
 
@@ -26,7 +26,7 @@ To start a new project that uses desy-html as dependency, don't use this repo, u
 * desy-html is maintained by a team at SDA Servicios Digitales de Aragón (Spain). If you want to know more about desy-html, please email any of the commiters.
 
 ### Software license ###
-Unless stated otherwise, the codebase is released under the [https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12](EUPL-1.2 License). This covers both the codebase and any sample code in the documentation.
+Unless stated otherwise, the codebase is released under the [EUPL-1.2 License](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12). This covers both the codebase and any sample code in the documentation.
 
 ### Thanks ###
 

package/docs/index.html

@@ -38,6 +38,11 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.7.1.1</h3>
+  <ul class="text-sm">
+    <li>Fixed a bug in checkboxes and radios. Now the conditionals work properly.</li>
+    <li>Minor fixes.</li>
+  </ul>
   <h3>v.7.1.0</h3>
   <ul class="text-sm">
     <li>Added class to Tabs to better display them inline with scroll if needed in mobile.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "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

@@ -0,0 +1,36 @@
+export function CheckBox(aria) {
+
+  class CheckBox {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
+        item.addEventListener('click', this.toggleConditional.bind(this))
+      })
+    }
+
+    toggleConditional(event) {
+      const { target: { nodeName, checked, type }, target } = event
+      if(nodeName === 'INPUT' && type === 'checkbox') {
+        this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
+          if(item.contains(target) && checked){
+            item.classList.remove('c-checkboxes__conditional-hidden')
+            item.classList.add('c-checkboxes__conditional-active')
+          }
+
+          if(item.contains(target) && !checked){
+            item.classList.remove('c-checkboxes__conditional-active')
+            item.classList.add('c-checkboxes__conditional-hidden')
+          }
+        })
+      }
+    }
+  }
+
+  const checkBoxesElements = document.querySelectorAll('[data-module="c-checkboxes"]');
+  checkBoxesElements.forEach((checkBoxElement) => {
+    if (checkBoxElement.querySelector('.c-checkboxes__conditional')) {
+      new CheckBox(checkBoxElement);
+    }
+  });
+
+}

package/src/js/aria/radioButton.js

@@ -0,0 +1,34 @@
+export function RadioButton(aria) {
+
+  class RadioButton {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
+        item.addEventListener('click', this.toggleConditional.bind(this))
+      })
+    }
+
+    toggleConditional(event) {
+      const { target: { nodeName, type }, target } = event
+      if(type === 'radio' && nodeName === 'INPUT') {
+        this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
+          if(item.contains(target)){
+            item.classList.remove('c-radios__conditional-hidden')
+            item.classList.add('c-radios__conditional-active')
+          } else {
+            item.classList.remove('c-radios__conditional-active')
+            item.classList.add('c-radios__conditional-hidden')
+          }
+        })
+      }
+    }
+  }
+
+  const radioElements = document.querySelectorAll('[data-module="c-radios"]');
+  radioElements.forEach((radioElement) => {
+    if (radioElement.querySelector('.c-radios__conditional')) {
+      new RadioButton(radioElement);
+    }
+  });
+
+}

package/src/js/desy-html.js

@@ -15,6 +15,8 @@ import { Tree } from './aria/tree.js';
 import { Toggle } from './aria/toggle.js';
 import { Collapsible } from './aria/collapsible.js';
 import { notification } from './aria/notification.js';
+import { RadioButton } from './aria/radioButton.js';
+import { CheckBox } from './aria/checkBoxes.js';
 
 
 export function accordionComponent(aria) {
@@ -367,3 +369,11 @@ export function treeComponent(aria) {
 export function notificationComponent(aria) {
   notification(aria);
 }
+
+export function radioButtonComponent(aria) {
+  RadioButton(aria);
+}
+
+export function checkBoxComponent(aria) {
+  CheckBox(aria);
+}

package/src/js/index.js

@@ -17,7 +17,9 @@ import {
   tooltipComponent,
   toggleComponent,
   treeComponent,
-  notificationComponent
+  notificationComponent,
+  radioButtonComponent,
+  checkBoxComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -36,6 +38,8 @@ tooltipComponent(aria);
 toggleComponent(aria);
 treeComponent(aria);
 notificationComponent(aria);
+radioButtonComponent(aria);
+checkBoxComponent(aria);
 
 document.querySelectorAll('.c-code-snippet__button').forEach(button => {
   button.addEventListener('click', (event) => {

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

@@ -16,4 +16,16 @@
       @apply h-base !important;
     }
   }
+
+  .c-checkboxes__conditional-active {
+    .c-checkboxes__conditional-item{
+      @apply block;
+    }
+  }
+
+  .c-checkboxes__conditional-hidden {
+    .c-checkboxes__conditional-item{
+      @apply hidden;
+    }
+  }
 }

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

@@ -49,7 +49,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-checkboxes"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% for item in params.items %}
       {% if item %}
@@ -70,7 +70,7 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% 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 {% 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 }}"
@@ -102,7 +102,7 @@
         </div>
       </div>
       {% if item.conditional.html %}
-        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
           {{ item.conditional.html | safe }}
         </div>
       {% endif %}

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

@@ -59,7 +59,7 @@
     {% if params.isDismissible %}
       <div class="absolute top-0 right-0 p-sm">
         <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
-          <svg class="pointer-events-none " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+          <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
         </button>
       </div>
     {% endif %}

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

@@ -353,6 +353,7 @@
         {
           "value": "email",
           "text": "Email",
+          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
           }
@@ -389,6 +390,7 @@
         {
           "value": "email",
           "text": "Email",
+          "checked": true,
           "classes": "mr-sm",
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
@@ -434,7 +436,6 @@
         {
           "value": "phone",
           "text": "Phone",
-          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
           }
@@ -442,6 +443,7 @@
         {
           "value": "text",
           "text": "Text message",
+          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal 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 \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
           }
@@ -514,4 +516,4 @@
       ]
     }
   }
-] %}
+] %}

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

@@ -16,4 +16,16 @@
       @apply h-base !important;
     }
   }
+
+  .c-radios__conditional-active {
+    .c-radios__conditional-item {
+      @apply block;
+    }
+  }
+
+  .c-radios__conditional-hidden {
+    .c-radios__conditional-item {
+      @apply hidden;
+    }
+  }
 }

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

@@ -43,11 +43,11 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% for item in params.items %}
       {% if item %}
-        <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% 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-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
           {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
           {%- if item.id -%}
             {%- set id = item.id -%}
@@ -97,7 +97,7 @@
             </div>
           </div>
           {% if item.conditional.html %}
-          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>
           {% endif %}