desy-html 6.4.1 → 6.6.0

package/src/templates/components/card/_examples.card.njk

@@ -0,0 +1,277 @@
+{% set exampleComponent = "card" %}
+
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+{% set defaultContent %}
+  <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
+  <div class="prose max-w-none">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+{% endset %}
+
+{% set linksContent %}
+  <h2 class="c-h1">Tus datos médicos e información personal</h2>
+  <ul class="text-lg">
+    <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
+    <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
+  </ul>
+{% endset %}
+
+{% set verButton %}
+  {{ componentButton({
+    "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" 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>",
+    "classes": "c-button--transparent",
+    "href": "#",
+    "attributes": {
+      "id": "boton-card-1",
+      "aria-labelledby": "boton-card-1 titulo-card-1"
+    }
+  })  }}
+{% endset %}
+
+{% set verDetalleButton %}
+  {{ componentButton({
+    "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" 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>",
+    "classes": "c-button--transparent",
+    "href": "#",
+    "attributes": {
+      "id": "boton-card-1",
+      "aria-labelledby": "boton-card-1 titulo-card-1"
+    }
+  })  }}
+{% endset %}
+
+{% set withIconContent %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
+  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verButton | safe }}
+{% endset %}
+
+{% set withButton %}
+  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verButton | safe }}
+{% endset %}
+
+{% set areaPersonalContent %}
+  <h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
+  <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
+  <ul class="flex flex-wrap gap-base">
+    <li>
+      {{ componentButton({
+        "text": "Acceder a Tu área personal",
+        "classes": "c-button--primary"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Descargar la app"
+      })  }}
+    </li>
+  </ul>
+{% endset %}
+
+{% set postContent %}
+  <p class="c-paragraph-sm mb-base">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
+    <strong>18 octubre 2022</strong>
+  </p>
+  <h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
+  <div class="prose max-w-none mb-base">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+  </div>
+  {{ verDetalleButton | safe }}
+{% endset %}
+
+
+
+{% set examples =  [
+  {
+    "name": "default",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": defaultContent | safe
+    }
+  },
+  {
+    "name": "with icon",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": withIconContent | safe
+    }
+  },
+  {
+    "name": "simple sidebar",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton | safe
+    }
+  },
+  {
+    "name": "with super",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton | safe,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with sub",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton | safe,
+      "sub": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with img left in desktop",
+    "description": "In mobile the img is in super area.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton | safe,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "with img right in desktop",
+    "description": "In mobile the img is in super area.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton | safe,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "home block without padding",
+    "data": {
+      "classes": "lg:w-1/2",
+      "containerClasses": "py-lg border-t-8 border-neutral-dark",
+      "caller": linksContent | safe
+    }
+  },
+  {
+    "name": "home block with buttons",
+    "data": {
+      "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": areaPersonalContent | safe,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
+        "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "items in list",
+    "description": "Image with fixed dimensions in desktop, text flexible.",
+    "data": {
+      "classes": "lg:w-3/4",
+      "containerClasses": "p-lg bg-neutral-lighter",
+      "caller": postContent | safe,
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "home mini block with icon",
+    "data": {
+      "classes": "lg:w-1/4",
+      "containerClasses": "p-base bg-neutral-lighter",
+      "caller": withIconContent | safe
+    }
+  }
+] %}

package/src/templates/components/card/_macro.card.njk

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

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

@@ -0,0 +1,35 @@
+<!-- card -->
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    {% if params.super %}
+      <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 %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.super.html | safe if params.super.html}}
+      </div>
+    {% endif %}
+    <div class="flex">
+      {% if params.left %}
+        <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+          {{ params.left.html | safe if params.left.html}}
+        </div>
+      {% endif %}
+      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
+        {% if caller %}
+        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe }}
+        {% endif %}
+      </div>
+      {% if params.right %}
+        <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+          {{ params.right.html | safe if params.right.html}}
+        </div>
+      {% endif %}
+    </div>
+    {% if params.sub %}
+      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.sub.html | safe if params.sub.html}}
+      </div>
+    {% endif %}
+  </div>
+</div>
+<!-- /card -->

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

@@ -0,0 +1,113 @@
+params:
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the card component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the card component.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Content in the flexible content area. 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 media-object component in a `call` block.
+- name: super
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the super area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: sub
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the sub area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the sub area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the sub area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub area.
+- name: left
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the left area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the left area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the left area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the left area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: right
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the right area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the right area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the right area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the right area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the right area.

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

@@ -4,7 +4,7 @@
   <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
   <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
   </button>
-  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}
+  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
     {{ params.html | safe }}
     {% else %}

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