desy-html 6.5.0 → 6.6.0

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 -->

package/src/templates/components/links-list/params.links-list.yaml

@@ -0,0 +1,82 @@
+params:
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: hasNav
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
+- name: items
+  type: array
+  required: true
+  description: Array of nav items objects.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: Item link.
+  - name: target
+    type: string
+    required: false
+    description: The target where the item should link to.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each nav item label. 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 to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav will be disabled.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+    - name: html
+      type: string
+      required: true
+      description: Provide content for the sub.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the sub container.
+  - name: icon
+    type: object
+    required: false
+    description: This is the optional icon at left
+    - name: html
+      type: string
+      required: true
+      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+    - name: containerClasses
+      type: string
+      required: false
+      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes to add to the parent `<li> of the item.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the nav container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the nav container.

package/src/templates/components/menu-vertical/params.menu-vertical.yaml

@@ -37,10 +37,6 @@ params:
     required: false
     description: Provide hint to each nav item.
     isComponent: true
-  - name: expanded
-    type: boolean
-    required: false
-    description: If true, nav sub will be expanded.
   - name: divider
     required: false
     description: If true, a divider border will be shown after the item.