desy-html 6.5.0 → 7.0.0

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

@@ -12,7 +12,7 @@
         href: params.skipLink.href if params.skipLink.href else "#content"
       })  }}
     </nav>
-    <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">

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

@@ -278,23 +278,3 @@ params:
   type: nunjucks-block
   required: false
   description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.
-
-previewLayout: full-width
-accessibilityCriteria: |
-  Text and links in the Header must:
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-
-  Links in the Header must:
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - indicate when they have focus
-  - change in appearance when touched (in the touch-down state)
-  - change in appearance when hovered
-  - have visible text
-
-  Images in the Header must:
-  - be presentational when linked to from accompanying text (crown icon).
-
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)

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

@@ -271,7 +271,7 @@
 
 {% set exampleOffcanvas %}
   <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Carpeta del gestor</h3>
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
     {{ componentNav({
       "idPrefix": "nav-mobile-pages",
       "hasNav": false,
@@ -327,7 +327,7 @@
           "items": [
             {
               "href": "#",
-              "text": "Carpeta del gestor",
+              "text": "Gestor de expedientes",
               "active": true
             },
             {
@@ -549,8 +549,8 @@
 {% set customNavigationHtmlItainnovaHero %}
   <div class="py-xl lg:py-3xl text-white lg:text-center">
     <div class="lg:w-2/3 lg:mx-auto">
-      <h1 class="c-h3 lg:c-h1 lg:text-4xl lg:mb-sm">Centro tecnológico referencia en investigación e innovación tecnológica</h1>
-      <div class="c-paragraph-sm lg:c-paragraph-lg lg:mb-0">Damos soporte a las empresas a través de servicios, formación y aumentando su competitividad a través de la innovación.</div>
+      <h1 class="font-bold text-lg leading-tight lg:text-4xl mb-sm">Centro tecnológico referencia en investigación e innovación tecnológica</h1>
+      <div class="text-base lg:text-lg mb-0">Damos soporte a las empresas a través de servicios, formación y aumentando su competitividad a través de la innovación.</div>
     </div>
   </div>
 {% endset %}

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

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

package/src/templates/components/header-advanced/params.header-advanced.yaml

@@ -336,23 +336,3 @@ params:
   type: nunjucks-block
   required: false
   description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.
-
-previewLayout: full-width
-accessibilityCriteria: |
-  Text and links in the Header must:
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-
-  Links in the Header must:
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - indicate when they have focus
-  - change in appearance when touched (in the touch-down state)
-  - change in appearance when hovered
-  - have visible text
-
-  Images in the Header must:
-  - be presentational when linked to from accompanying text (crown icon).
-
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)

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
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple
+          }
+        }
+      ],
+      "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
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex
+          }
+        }
+      ],
+      "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
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "containerClasses": "my-base px-base border border-neutral-base rounded",
+          "icon": {
+            "html": iconSimple
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "containerClasses": "px-base border border-neutral-base my-sm",
+          "icon": {
+            "html": iconSimple
+          }
+        }
+      ],
+      "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 %}