desy-html 5.1.1 → 5.3.0

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

@@ -2,6 +2,7 @@
 {% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
 {% from "../hint/_macro.hint.njk" import componentHint %}
 {% from "../label/_macro.label.njk" import componentLabel %}
+{% from "../searchbar/_macro.searchbar.njk" import componentSearchbar %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -28,14 +29,13 @@
   <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-xs">
       <div class="flex items-center mx-sm">
-        <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 }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif -%} 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 }}-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 -%}
         {%- 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.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+        {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
       </div>
       <div class="flex-1 pt-0.5 leading-5">
         {{ componentLabel({
@@ -63,14 +63,14 @@
 {% macro childrenTree(itemNode, id, name, type) %}
     {% if itemNode.sub %}
       <div class="w-full h-full">
-        <span class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
+        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
         {%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
           <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
           </span>
           {{ checkboxItem(itemNode, id, name, type) }}
-        </span>
+        </div>
       </div>
     {% else %}
       {{ checkboxItem(itemNode, id, name, type) }}
@@ -92,9 +92,9 @@
               {% else %}
                 <div {%- if subitem.id %} id="{{ id }}"{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
                   {% if subitem.active %}
-                    <strong>
+                    <div class="font-bold">
                       {{ checkboxItem(subitem, subId, name, type) }}
-                    </strong>
+                    </div>
                   {% else %}
                     {{ checkboxItem(subitem, subId, name, type) }}
                   {% endif %}
@@ -132,7 +132,10 @@
       visuallyHiddenText: params.errorMessage.visuallyHiddenText
     }) | indent(2) | trim }}
   {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" role="tree" aria-labelledby="{{ idPrefix }}-heading" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+  {% if params.searchbar %}
+    {{ componentSearchbar(params.searchbar)  }}
+  {% endif %}
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

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

@@ -3,6 +3,10 @@ params:
   type: string
   required: false
   description: Type of input control to render. Admitted values are `checkbox` and `radio` or not set. Defaults to `radio`.
+- name: searchbar
+  type: component
+  required: false
+  description: A searchbar component to filter the items. Inherits all the searchbar component params.
 - name: describedBy
   type: string
   required: false