npm - desy-html - Versions diffs - 4.3.0 → 5.0.0 - Mend

desy-html 4.3.0 → 5.0.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 (8) hide show

package/docs/index.html CHANGED Viewed

@@ -38,6 +38,10 @@
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.5.0.0</h3>
+  <ul class="text-sm">
+    <li>Header now uses correct dropdown params.</li>
+  </ul>
   <h3>v.4.3.0</h3>
   <ul class="text-sm">
     <li>Added disabled and active param in menubar and fixed accesibility issues.</li>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "4.3.0",
+  "version": "5.0.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/dropdown/params.dropdown.yaml CHANGED Viewed

@@ -2,19 +2,19 @@ params:
 - name: text
   type: string
   required: true
-  description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
+  description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
 - name: html
   type: string
   required: true
-  description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
+  description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
 - name: hiddenText
   type: string
   required: false
-  description: Text for screenreaders only after the button element.
+  description: Text for screenreaders only after the dropdown element.
 - name: classesContainer
   type: string
   required: false
-  description: Classes to add to the container div of button and tooltip elements.
+  description: Classes to add to the container div of dropdown and tooltip elements.
 - name: classesTooltip
   type: string
   required: false
@@ -22,11 +22,11 @@ params:
 - name: classes
   type: string
   required: false
-  description: Classes to add to the button element.
+  description: Classes to add to the dropdown element.
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the button element.
+  description: HTML attributes (for example data attributes) to add to the dropdown element.
 - name: caller
   type: nunjucks-block
   required: false

package/src/templates/components/header/_examples.header.njk CHANGED Viewed

@@ -156,7 +156,7 @@
     }
   },
   {
-    "name": "Espanded logo",
+    "name": "Expanded logo",
     "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano.",
     "data": {
       "homepageUrl": "/",
@@ -262,6 +262,26 @@
       }
     }
   },
+  {
+    "name": "con dropdown personalizado",
+    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "html": '<p class="text-right">Marta Pérez <br>(Administración)</p>',
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      }
+    }
+  },
   {
     "name": "con todo",
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",

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

@@ -3,8 +3,13 @@
               <div class="ml-3 relative">
                 <div>
                   {% call componentDropdown({
-                    "text": params.html | safe if params.html else params.text,
-                    "classes": "c-dropdown--header"
+                    "text": params.text,
+                    "html": params.html,
+                    "hiddenText": params.hiddenText,
+                    "classesContainer": params.classesContainer,
+                    "classesTooltip": params.classesTooltip,
+                    "classes": params.classes,
+                    "attributes": params.attributes
                   })  %}
                       {% if caller %}
                       {{ caller() }} {#- if statement allows usage of `call` to be optional -#}

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

@@ -6,8 +6,13 @@
               <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"
+                    "text": params.text,
+                    "html": params.html,
+                    "hiddenText": params.hiddenText,
+                    "classesContainer": params.classesContainer,
+                    "classesTooltip": params.classesTooltip,
+                    "classes": params.classes,
+                    "attributes": params.attributes
                   })  %}
                       {% if caller %}
                       {{ caller() }} {#- if statement allows usage of `call` to be optional -#}

package/src/templates/components/header/_template.header.njk CHANGED Viewed

@@ -26,28 +26,32 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.878 51.894" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/><path data-name="typo" d="M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z" fill-rule="evenodd"/></svg>
                 <svg class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" viewBox="0 0 51.894 51.894" width="32" height="32" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/></svg>
               </a>
-              {% if params.subnav.text %}
-              <div {%- if params.subnav.classes %} class="{{ params.subnav.classes }}"{% endif %}>
-                {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
-                {% call componentHeaderSubnav({
-                  text: params.subnav.text,
-                  items: params.subnav.items
-                }) %}
-                  {% if params.subnav.items %}
-                    {% from "../nav/_macro.nav.njk" import componentNav %}
-                    {{ componentNav({
-                      isMenu: true,
-                      idPrefix: "header-subnav-nav-item",
-                      items: params.subnav.items,
-                      classes: "w-max max-w-64",
-                      attributes: {
-                        "id": "id-subnav-nav",
-                        "aria-label": "Aplicaciones"
-                      }
-                    }) }}
-                  {% endif %}
-                {% endcall %}
-              </div>
+              {% if params.subnav %}
+              {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
+              {% call componentHeaderSubnav({
+                "text": params.subnav.text,
+                "html": params.subnav.html,
+                "hiddenText": params.subnav.hiddenText,
+                "classesContainer": params.subnav.classesContainer,
+                "classesTooltip": params.subnav.classesTooltip,
+                "classes": params.subnav.classes if params.subnav.classes else "c-dropdown--header",
+                "attributes": params.subnav.attributes,
+                "items": params.subnav.items
+              }) %}
+                {% if params.subnav.items %}
+                  {% from "../nav/_macro.nav.njk" import componentNav %}
+                  {{ componentNav({
+                    isMenu: true,
+                    idPrefix: "header-subnav-nav-item",
+                    items: params.subnav.items,
+                    classes: "w-max max-w-64",
+                    attributes: {
+                      "id": "id-subnav-nav",
+                      "aria-label": "Aplicaciones"
+                    }
+                  }) }}
+                {% endif %}
+              {% endcall %}
               {% endif %}
             </div>
             {% if params.navigation.items %}
@@ -63,24 +67,28 @@
             {% endif %}
           </div>
           {% if params.dropdown.items %}
-          <div class="{{ params.dropdown.classes if params.dropdown.classes else 'hidden lg:block' }}">
-            {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
-            {% call componentHeaderDropdown({
-              text: params.dropdown.text
-            }) %}
-              {% from "../nav/_macro.nav.njk" import componentNav %}
-              {{ componentNav({
-                isMenu: true,
-                idPrefix: "header-dropdown-nav-item",
-                items: params.dropdown.items,
-                classes: "w-max max-w-64",
-                attributes: {
-                  "id": "id-dropdown-nav",
-                  "aria-label": "Menú de usuario"
-                }
-              }) }}
-            {% endcall %}
-          </div>
+          {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
+          {% call componentHeaderDropdown({
+            "text": params.dropdown.text,
+            "html": params.dropdown.html,
+            "hiddenText": params.dropdown.hiddenText,
+            "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
+            "classesTooltip": params.dropdown.classesTooltip,
+            "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
+            "attributes": params.dropdown.attributes
+          }) %}
+            {% from "../nav/_macro.nav.njk" import componentNav %}
+            {{ componentNav({
+              isMenu: true,
+              idPrefix: "header-dropdown-nav-item",
+              items: params.dropdown.items,
+              classes: "w-max max-w-64",
+              attributes: {
+                "id": "id-dropdown-nav",
+                "aria-label": "Menú de usuario"
+              }
+            }) }}
+          {% endcall %}
           {% endif %}
           {% if params.offcanvas %}
           {% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}

package/src/templates/components/header/params.header.yaml CHANGED Viewed

@@ -19,11 +19,31 @@ params:
   - name: text
     type: string
     required: true
-    description: Text for the subnav item. If no items are defined, there will be simple text instead a dropdown.
+    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: hiddenText
+    type: string
+    required: false
+    description: Text for screenreaders only after the dropdown element.
+  - name: classesContainer
+    type: string
+    required: false
+    description: Classes to add to the container div of dropdown and tooltip elements.
+  - name: classesTooltip
+    type: string
+    required: false
+    description: Classes to add to the tooltip content.
   - name: classes
     type: string
     required: false
-    description: Classes for the subnav component.
+    description: Classes to add to the dropdown element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
     required: true
@@ -77,11 +97,31 @@ params:
   - name: text
     type: string
     required: true
-    description: Text for the dropdown item.
+    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: hiddenText
+    type: string
+    required: false
+    description: Text for screenreaders only after the dropdown element.
+  - name: classesContainer
+    type: string
+    required: false
+    description: Classes to add to the container div of dropdown and tooltip elements. Defaults to 'hidden lg:block'
+  - name: classesTooltip
+    type: string
+    required: false
+    description: Classes to add to the tooltip content.
   - name: classes
     type: string
     required: false
-    description: Classes for the dropdown component. Defaults to 'hidden lg:block'.
+    description: Classes to add to the dropdown element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
     required: true