npm - desy-html - Versions diffs - 5.1.1 → 5.3.0 - Mend

desy-html 5.1.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/docs/_include.template-header.njk CHANGED Viewed

@@ -250,12 +250,16 @@
         href: "examples-textarea.html",
         text: "Textarea"
       },
+      {
+        href: "examples-toggle.html",
+        text: "Toggle"
+      },
       {
         href: "examples-tooltip.html",
         text: "Tooltip"
       },
       {
-        href: "/examples-tree.html",
+        href: "examples-tree.html",
         text: "Tree"
       }],
       attributes: {

package/docs/_macro.example-render.njk CHANGED Viewed

@@ -89,6 +89,8 @@ import componentTableAdvanced %}
 import componentTabs %}
 {% from "components/textarea/_macro.textarea.njk"
 import componentTextarea %}
+{% from "components/toggle/_macro.toggle.njk"
+import componentToggle %}
 {% from "components/tooltip/_macro.tooltip.njk"
 import componentTooltip %}
 {% from "components/tree/_macro.tree.njk"
@@ -206,6 +208,8 @@ import componentTree %}
       {{ componentTabs(example.data) }}
       {% elseif exampleComponent == "textarea" %}
       {{ componentTextarea(example.data) }}
+      {% elseif exampleComponent == "toggle" %}
+      {{ componentToggle(example.data) }}
       {% elseif exampleComponent == "tooltip" %}
       {{ componentTooltip(example.data) }}
       {% elseif exampleComponent == "tree" %}

package/docs/componentes.html CHANGED Viewed

@@ -145,6 +145,9 @@
     <div>
       <p class="c-paragraph-base"><a href="examples-textarea.html" class="c-link">Textarea</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-toggle.html" class="c-link">Toggle</a></p>
+    </div>
     <div>
       <p class="c-paragraph-base"><a href="examples-tooltip.html" class="c-link">Tooltip</a></p>
     </div>

package/docs/ds/_ds.example.toggle.njk ADDED Viewed

@@ -0,0 +1,56 @@
+{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
+<div class="grid lg:grid-cols-2 gap-xl mb-lg">
+  <div>
+    {{ componentToggle({
+      "classes": "c-button c-button--transparent no-underline",
+      "offState": {
+        "classes": "",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"/></svg>Notificar por correo electrónico</span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "Notificar por correo electrónico"
+      }
+    })  }}
+    <div class="pb-base"></div>
+    {{ componentToggle({
+      "classes": "c-button c-button--sm c-button--transparent no-underline",
+      "offState": {
+        "classes": "",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg><span aria-hidden=\"true\">Ocultar heredados del servicio</span><span class=\"sr-only\">Mostrar heredados del servicio</span></span>"
+      },
+      "onState": {
+        "classes": "",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(3.42857)\"><circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"currentColor\" /><path d=\"m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z\" fill=\"currentColor\"/></g></svg>Mostrar heredados del servicio</span>"
+      }
+    })  }}
+  </div>
+  <div>
+    <ul>
+      <li class="flex flex-wrap w-full justify-between p-base border-t border-b border-neutral-base">
+        <div>
+          <p id="id-text">Notificar por email</p>
+        </div>
+        <div>
+          {{ componentToggle({
+            "classes": "",
+            "isSwitch": true,
+            "offState": {
+              "classes": "",
+              "html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">on</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
+            },
+            "onState": {
+              "classes": "",
+              "html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">off</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
+            },
+            "attributes": {
+              "aria-labelledby": "id-text"
+            }
+          })  }}
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>

package/docs/ds/_ds.example.tree.njk ADDED Viewed

@@ -0,0 +1,457 @@
+{% from "components/tree/_macro.tree.njk" import componentTree %}
+<div class="grid lg:grid-cols-4 gap-xl mb-lg">
+  <div>
+    {{ componentTree({
+      "name": "with-a-parent-item-opened",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "tree-item",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-item-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-item-item-2",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-item-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-3"
+            }
+          }
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentTree({
+      "name": "indeterminate",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "indeterminate-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "indeterminate-example-item-1",
+          "isIndeterminate": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "indeterminate-example-item-2",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2",
+                "checked": true
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "indeterminate-example-item-3",
+          "isIndeterminate": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-3"
+            }
+          }
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentTree({
+      "name": "with-searchbar",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "searchbar": {
+        "id": "with-searchbar-searchbar",
+        "label": {
+          "text": "Buscar"
+        },
+        "placeholder": "Buscar organismo"
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "with-searchbar-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "with-searchbar-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-searchbar-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-3"
+            }
+          }
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentTree({
+      "name": "with-many-depth-levels",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "tree-item-nodes",
+      "items": [
+        {
+          "text": "Item 1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item 2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item 3",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem 2",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem 3",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3",
+                      "expanded": true,
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Subitem 1",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Subitem 2",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Subitem 3",
+                            "expanded": true,
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    })  }}
+  </div>
+</div>

package/docs/ds/_ds.section.forms.njk CHANGED Viewed

@@ -51,6 +51,11 @@
   }) }}
   {% include "ds/_ds.example.radios.njk" %}
   <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Tree"
+  }) }}
+  {% include "ds/_ds.example.tree.njk" %}
+  <div class="pb-lg"></div>
   {{ DSSubsectionTitle({
     title: "Listbox por defecto"
   }) }}

package/docs/ds/_ds.section.mostrar-ocultar.njk CHANGED Viewed

@@ -20,6 +20,11 @@
       title: "Details"
     }) }}
   {% include "ds/_ds.example.details.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Toggle"
+    }) }}
+  {% include "ds/_ds.example.toggle.njk" %}
   <div class="pb-lg"></div>
     {{ DSSubsectionTitle({
       title: "Tabs"

package/docs/examples-toggle.html ADDED Viewed

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

package/docs/index.html CHANGED Viewed

@@ -38,6 +38,26 @@
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.5.3.0</h3>
+  <ul class="text-sm">
+    <li>Added missing params in input-group for inputs.</li>
+    <li>Docs improvements.</li>
+    <li>Minor validation fixes.</li>
+  </ul>
+  <h3>v.5.2.2</h3>
+  <ul class="text-sm">
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.5.2.1</h3>
+  <ul class="text-sm">
+    <li>Docs improvements.</li>
+  </ul>
+  <h3>v.5.2.0</h3>
+  <ul class="text-sm">
+    <li>Added toggle component.</li>
+    <li>Added searchbar to tree component.</li>
+    <li>Minor validation fixes.</li>
+  </ul>
   <h3>v.5.1.1</h3>
   <ul class="text-sm">
     <li>Fixed pagination from having too much listbox height.</li>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "5.1.1",
+  "version": "5.3.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/templates/components/checkboxes/_template.checkboxes.njk CHANGED Viewed

@@ -80,8 +80,7 @@
           {%- 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="pt-0.5 leading-5">
           {{ componentLabel({