desy-html 6.4.1 → 6.6.0

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -27,7 +27,7 @@
       {% if params.super.customHtml %}
         {{ params.super.customHtml }}
       {% else %}
-        <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}">
+        <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}">
           <div class="container h-full mx-auto px-base">
             <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
               {% if params.super.logo %}
@@ -78,7 +78,7 @@
         </div>
       </div>
     {% endif %}
-    <div class="bg-neutral-lighter border-b border-neutral-base" x-data="{ isOn: false }" >
+    <div class="bg-neutral-lighter border-b border-neutral-base">
       <div class="container mx-auto px-base">
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
@@ -149,7 +149,7 @@
       {% else %}
         <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}">
           <div class="container h-full mx-auto px-base">
-            <div class="relative h-full bg-cover bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
+            <div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
               {% if params.sub.logo %}
                 <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
                   <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">

package/src/templates/components/links-list/_examples.links-list.njk

@@ -0,0 +1,504 @@
+{% set exampleComponent = "links-list" %}
+
+{% set iconSimple %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
+{% endset %}
+
+{% set iconComplex %}
+  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
+  </div>
+{% endset %}
+
+{% set examples =  [
+  {
+    "name": "default",
+    "data": {
+      "idPrefix": "default",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with icon",
+    "data": {
+      "idPrefix": "with-icon",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with classes applied",
+    "data": {
+      "idPrefix": "with-classes-applied",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | safe
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with containerClasses applied",
+    "data": {
+      "idPrefix": "with-containerclasses",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "containerClasses": "px-base border border-neutral-base my-sm",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "containerClasses": "my-base px-base border border-neutral-base rounded",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "containerClasses": "px-base border border-neutral-base my-sm",
+          "icon": {
+            "html": iconSimple | safe
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with disabled item",
+    "data": {
+      "idPrefix": "with-disabled-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "disabled": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "without href",
+    "data": {
+      "idPrefix": "without-href",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with active item",
+    "data": {
+      "idPrefix": "with-active-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with target in links",
+    "data": {
+      "idPrefix": "with-target-in-links",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with very long option text",
+    "data": {
+      "idPrefix": "with-very-long-option-text",
+      "items": [
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with descriptive content",
+    "data": {
+      "idPrefix": "descriptive-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with idPrefix",
+    "description": "See code to display the idPrefix applied",
+    "data": {
+      "idPrefix": "site-menu-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1"
+        },
+        {
+          "href": "#",
+          "text": "Option 2"
+        },
+        {
+          "href": "#",
+          "text": "Option 3"
+        },
+        {
+          "href": "#",
+          "text": "Option 4"
+        },
+        {
+          "href": "#",
+          "text": "Option 5"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with individual ids",
+    "description": "See code to display the ids applied",
+    "data": {
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1",
+          "id": "option-A"
+        },
+        {
+          "href": "#",
+          "text": "Option 2",
+          "id": "option-B"
+        },
+        {
+          "href": "#",
+          "text": "Option 3",
+          "id": "option-C"
+        },
+        {
+          "href": "#",
+          "text": "Option 4",
+          "id": "option-D"
+        },
+        {
+          "href": "#",
+          "text": "Option 5",
+          "id": "option-E"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "with attributes",
+    "description": "See code to display the attributes applied",
+    "data": {
+      "attributes": {
+        "id": "nav-id-example"
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 2",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 3",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          },
+          "sub": {
+            "attributes": {
+              "data-attribute-1": "value-A",
+              "data-attribute-2": "value-B",
+              "data-attribute-3": "value-C"
+            },
+            "html": '<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 4",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 5",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "hasNav false",
+    "description": "Use this to not wrap the component in a nav tag, assuming the component will be wrapped with a custom nav with it's own aria-label if it's needed.",
+    "data": {
+      "idPrefix": "hasnav-false",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  },
+  {
+    "name": "mixed example",
+    "data": {
+      "idPrefix": "mixed-example",
+      "items": [
+        {
+          "href": "#",
+          "html": "<strong>Deudas</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes <span class="text-alert-base">deudas fuera de plazo</span></p>'
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Historial de pagos</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Certificado de corriente de pago</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes <strong>1 certificado disponible</strong>.</p>'
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Valoraciones de inmuebles</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": '<p class="c-paragraph-base mb-0">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>'
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    }
+  }
+] %}

package/src/templates/components/links-list/_macro.links-list.njk

@@ -0,0 +1,3 @@
+{% macro componentLinksList(params) %}
+{% include "./_template.links-list.njk" %}
+{% endmacro %}

package/src/templates/components/links-list/_template.links-list.njk

@@ -0,0 +1,92 @@
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "links-list-item" %}
+
+{% set arrow %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
+{% endset %}
+
+
+{% set innerHtml %}
+  <ul>
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+          {%- if loop.first -%}
+            {%- set id = idPrefix %}
+          {% else %}
+            {%- set id = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        {% set subId = "sub-" + id %}
+    <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}px-base border-y border-neutral-base -my-px{% endif %}">
+      {% if item.href %}
+        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <div class="flex gap-base justify-between items-center flex-1">
+            {% if item.icon %}
+              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.icon.html %}
+                  {{ item.icon.html | safe }}
+                {% endif %}
+              </div>
+            {% endif %}
+            <div class="flex-1">
+              {% if item.active %}
+                <strong>{{ item.html | safe if item.html else item.text }}</strong>
+              {% else %}
+                {{ item.html | safe if item.html else item.text }}
+              {% endif %}
+            </div>
+          </div>
+          {{ arrow | safe }}
+        </a>
+      {% else %}
+        <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <div class="flex gap-base justify-between items-center flex-1">
+            {% if item.icon %}
+              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.icon.html %}
+                  {{ item.icon.html | safe }}
+                {% endif %}
+              </div>
+            {% endif %}
+            <div class="flex-1">
+              {% if item.active %}
+                <strong>{{ item.html | safe if item.html else item.text }}</strong>
+              {% else %}
+                {{ item.html | safe if item.html else item.text }}
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      {% endif %}
+      {% if item.sub.html %}
+        <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
+          {{ item.sub.html | safe }}
+        </div>
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- links-list -->
+
+
+{% if params.hasNav == false %}
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</div>
+{% else %}
+<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</nav>
+{% endif %}
+<!-- /links-list -->