desy-html 4.1.3 → 4.2.1

package/docs/index.html

@@ -38,6 +38,18 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.4.2.1</h3>
+  <ul class="text-sm">
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.4.2.0</h3>
+  <ul class="text-sm">
+    <li>Checkboxes can be indeterminate at init.</li>
+    <li>Fixes in alert. Now it's read by screen readers.</li>
+    <li>Header now uses dropdowns.</li>
+    <li>Dropdowns, listboxes and tooltips now closes when loosing focus.</li>
+    <li>Minor improvements in documentation.</li>
+  </ul>
   <h3>v.4.1.3</h3>
   <ul class="text-sm">
     <li>Minor improvements.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "4.1.3",
+  "version": "4.2.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/desy-html.js

@@ -34,6 +34,26 @@ export function dropdownComponent(aria) {
       const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
       if(buttonDropdown && tooltip) {
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEsc = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -68,7 +88,7 @@ export function dropdownComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEsc],
+          plugins: [hideOnEsc,hideOnPopperBlur],
           role: false,
           aria: {
             content: 'auto'
@@ -96,7 +116,26 @@ export function listboxComponent(aria) {
 
       if(buttonListbox && tooltip) {
         const listbox = new aria.Listbox(list);
-
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEscOrEnter = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -131,7 +170,7 @@ export function listboxComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEscOrEnter],
+          plugins: [hideOnEscOrEnter,hideOnPopperBlur],
           role: false,
           aria: {
             content: 'auto'
@@ -210,6 +249,26 @@ export function tooltipComponent(aria) {
       const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
       const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
       if(tooltipButton && tooltipTooltip) {
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEsc = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -241,7 +300,7 @@ export function tooltipComponent(aria) {
           trigger: 'mouseenter focus',
           hideOnClick: false,
           theme: '',
-          plugins: [hideOnEsc],
+          plugins: [hideOnEsc,hideOnPopperBlur],
           role: 'tooltip',
           aria: {
             content: ariaContent

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

@@ -5,12 +5,12 @@
   {{ componentButton(params.button)  }}
   <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   </div>
-  <script type="text/template" id="{{ 'template-' + params.id }}">
+  <div class="hidden" id="{{ 'template-' + params.id }}">
     {% if caller %}
     {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
     {% elseif params.caller %}
     {{ params.caller | safe }}
     {% endif %}
-  </script>
+  </div>
 </div>
 <!-- /alert -->

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

@@ -609,5 +609,27 @@
         }
       ]
     }
+  },
+  {
+    "name": "indeterminate cheched",
+    "description": "isIndeterminate: true, indeterminateChecked: true",
+    "data": {
+      "idPrefix": "indeterminate-checked",
+      "name": "indeterminate-checked",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate-checked-item",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
   }
 ] %}

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

@@ -70,17 +70,18 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} 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-base">
         <div class="flex items-center mx-sm">
-          <input x-model="isChecked" 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 }}"
+          <input x-model="isChecked" x-ref="inputCheck" 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 }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
           {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-          {%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+          {%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}
+          {%- if item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
         </div>
         <div class="pt-0.5 leading-5">
           {{ componentLabel({

package/src/templates/components/checkboxes/params.checkboxes.yaml

@@ -74,6 +74,14 @@ params:
     type: boolean
     required: false
     description: If true, checkbox will be checked.
+  - name: isIndeterminate
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an additional indeterminate state to show a partial true.
+  - name: indeterminateChecked
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
   - name: conditional
     type: boolean
     required: false

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

@@ -160,6 +160,7 @@
     @apply text-white;
 
     &:hover:not(disabled),
+    &:active:not(disabled),
     &.ds-hover:not(disabled) {
       @apply bg-black;
       @apply border-none;

package/src/templates/components/header/_template.header.header__dropdown.njk

@@ -1,23 +1,17 @@
+            {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
             <div class="ml-4 flex items-center lg:ml-6">
-              <div x-data="{ isOpen: false }" class="ml-3 relative">
+              <div class="ml-3 relative">
                 <div>
-                  <button id="header-dropdown-button" @click="isOpen = !isOpen" class="inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-haspopup="true"  x-bind:aria-expanded="String(isOpen)" x-on:keydown.escape="isOpen = false; document.getElementById('header-dropdown-button').focus();">
-                    <span class="inline-block align-middle text-right">{{ params.html | safe if params.html else params.text }}</span> <svg class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" aria-hidden="true" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-                  </button>
-                </div>
-                <div  x-show="isOpen"
-                      x-transition:enter="transition ease-out duration-100 transform"
-                      x-transition:enter-start="opacity-0 scale-95"
-                      x-transition:enter-end="opacity-100 scale-100"
-                      x-transition:leave="transition ease-in duration-75 transform"
-                      x-transition:leave-start="opacity-100 scale-100"
-                      x-transition:leave-end="opacity-0 scale-95"
-                      @click.away="isOpen = false"
-                      x-on:keydown.escape="isOpen = false; document.getElementById('header-dropdown-button').focus();"
-                      class="origin-top-right absolute right-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md">
-                  <div class="bg-white shadow-xs">
-                    {{ caller() if caller }}
-                  </div>
+                  {% call componentDropdown({
+                    "text": params.html | safe if params.html else params.text,
+                    "classes": "c-dropdown--header"
+                  })  %}
+                      {% if caller %}
+                      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+                      {% elseif params.caller %}
+                      {{ params.caller | safe }}
+                      {% endif %}
+                  {% endcall %}
                 </div>
               </div>
             </div>

package/src/templates/components/header/_template.header.header__subnav.njk

@@ -1,29 +1,21 @@
+          {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+
+
           {% if params.items %}
             <div class="hidden lg:flex items-center">
-              <div x-data="{ isOpen: false }" class="ml-3 relative">
-                <h2 id="subnav-title">
-                  <button id="header-subnav-button" @click="isOpen = !isOpen" class="pr-2 pl-3 py-4 border-r border-l border-neutral-base text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-haspopup="true"  x-bind:aria-expanded="String(isOpen)" x-on:keydown.escape="isOpen = false; document.getElementById('header-subnav-button').focus();">
-                    <span class="inline-block align-middle">{{ params.html | safe if params.html else params.text }}</span> <svg class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" aria-hidden="true" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-                  </button>
+              <div class="ml-3 py-2 relative border-r border-l border-neutral-base">
+                <h2 id="subnav-title" class="">
+                  {% call componentDropdown({
+                    "text": params.html | safe if params.html else params.text,
+                    "classes": "c-dropdown--header"
+                  })  %}
+                      {% if caller %}
+                      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+                      {% elseif params.caller %}
+                      {{ params.caller | safe }}
+                      {% endif %}
+                  {% endcall %}
                 </h2>
-                <div  x-show="isOpen"
-                      x-transition:enter="transition ease-out duration-100 transform"
-                      x-transition:enter-start="opacity-0 scale-95"
-                      x-transition:enter-end="opacity-100 scale-100"
-                      x-transition:leave="transition ease-in duration-75 transform"
-                      x-transition:leave-start="opacity-100 scale-100"
-                      x-transition:leave-end="opacity-0 scale-95"
-                      @click.away="isOpen = false"
-                      x-on:keydown.escape="isOpen = false; document.getElementById('header-subnav-button').focus();"
-                      class="origin-top-left absolute left-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md">
-                  <div class="bg-white shadow-xs">
-                    {% if caller %}
-                    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-                    {% elseif params.caller %}
-                    {{ params.caller | safe }}
-                    {% endif %}
-                  </div>
-                </div>
               </div>
             </div>
           {% else %}

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

@@ -336,6 +336,175 @@
       }
     }
   },
+  {
+    "name": "With one disabled parent item",
+    "data": {
+      "id": "with-disabled",
+      "idPrefix": "disabled-example",
+      "ariaLabel":"Menubar description",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-disabled-example-item-1-2",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-1-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-disabled-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-2-2"
+            }
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-disabled-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "text": "Group",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-3-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Mixed items",
+          "ariaLabel": "Mixeditems",
+          "id": "menuitems-disabled-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "menuitems-disabled-example-item-4-2"
+            }
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-disabled-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menubar description of use"
+      }
+    }
+  },
   {
     "name": "Small",
     "description": "Using modifier classes in items.",

package/src/templates/components/menubar/params.menubar.yaml

@@ -56,6 +56,10 @@ params:
     type: text
     required: true
     description: aria-label for parent items. Should be similar as item text or item html text content.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If disabled, the item will be disabled
   - name: sub
     type: boolean
     required: false