desy-html 10.2.2 → 11.0.1

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

@@ -1,77 +1,77 @@
-{% set exampleComponent = "collapsible" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "collapsible-default",
-      "headerText": "Cabecera del collapsible",
-      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    }
-  },
-  {
-    "name": "expandido",
-    "description": 'Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.',
-    "data": {
-      "id": "collapsible-initially-expanded",
-      "headerText": "Cabecera del collapsible",
-      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-      "open": true
-    }
-  },
-  {
-    "name": "expandido con JavaScript",
-    "description": 'También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>,  para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible("collapsible-expanded-title", true)</code> para mostrar el item actual abierto.',
-    "data": {
-      "id": "collapsible-expanded",
-      "headerText": "Cabecera del collapsible",
-      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    }
-  },
-  {
-    "name": "con HTML",
-    "data": {
-      "id": "collapsible-html",
-      "headerText": "Cabecera del collapsible",
-      "html": '<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
-      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
-      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
-    }
-  },
-  {
-    "name": "con clases aplicadas",
-    "description": "Puedes añadir clases a todos los elementos para cambiar su apariencia",
-    "data": {
-      "id": "collapsible-default",
-      "headerText": "Cabecera del collapsible",
-      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-      "classes": "p-base bg-primary-light flex flex-wrap gap-base",
-      "buttonClasses": "c-button self-start",
-      "showClasses": "!hidden",
-      "hideClasses": "!hidden",
-      "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
-    }
-  }
-] %}
+{% set exampleComponent = "collapsible" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "collapsible-default",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }
+  },
+  {
+    "name": "expandido",
+    "description": 'Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.',
+    "data": {
+      "id": "collapsible-initially-expanded",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+      "open": true
+    }
+  },
+  {
+    "name": "expandido con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>,  para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible("collapsible-expanded-title", true)</code> para mostrar el item actual abierto.',
+    "data": {
+      "id": "collapsible-expanded",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }
+  },
+  {
+    "name": "con HTML",
+    "data": {
+      "id": "collapsible-html",
+      "headerText": "Cabecera del collapsible",
+      "html": '<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
+      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
+      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
+    }
+  },
+  {
+    "name": "con clases aplicadas",
+    "description": "Puedes añadir clases a todos los elementos para cambiar su apariencia",
+    "data": {
+      "id": "collapsible-default",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+      "classes": "p-base bg-primary-light flex flex-wrap gap-base",
+      "buttonClasses": "c-button self-start",
+      "showClasses": "!hidden",
+      "hideClasses": "!hidden",
+      "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
+    }
+  }
+] %}

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

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

package/src/templates/components/collapsible/_styles.collapsible.css

@@ -1,33 +1,33 @@
-/* ==========================================================================
-   _styles.collapsible.css
-   ========================================================================== */
-
-@layer components {
-  .c-collapsible[data-expanded="true"] {
-    .c-collapsible__show {
-      @apply hidden;
-    }
-
-    .c-collapsible__hide {
-      @apply block;
-    }
-
-    .c-collapsible__content{
-      @apply block;
-    }
-  }
-
-  .c-collapsible[data-expanded="false"] {
-    .c-collapsible__show {
-      @apply block;
-    }
-
-    .c-collapsible__hide {
-      @apply hidden;
-    }
-
-    .c-collapsible__content{
-      @apply hidden;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.collapsible.css
+   ========================================================================== */
+
+@layer components {
+  .c-collapsible[data-expanded="true"] {
+    .c-collapsible__show {
+      @apply hidden;
+    }
+
+    .c-collapsible__hide {
+      @apply block;
+    }
+
+    .c-collapsible__content{
+      @apply block;
+    }
+  }
+
+  .c-collapsible[data-expanded="false"] {
+    .c-collapsible__show {
+      @apply block;
+    }
+
+    .c-collapsible__hide {
+      @apply hidden;
+    }
+
+    .c-collapsible__content{
+      @apply hidden;
+    }
+  }
+}

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

@@ -1,17 +1,17 @@
-<!-- collapsible -->
-<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="false" {% else %} data-expanded="true" {% endif %} data-module="c-collapsible">
-  <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="{%- if params.buttonClasses %} {{ params.buttonClasses }}{% else -%} group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{% endif %}" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
-    <span class="c-collapsible__show {% if params.showClasses %} {{ params.showClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="false">Mostrar</span>
-    <span class="c-collapsible__hide {% if params.hideClasses %} {{ params.hideClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="true">Ocultar</span>
-  </button>
-  <div aria-hidden="true" class="c-collapsible__content {% if params.contentClasses %} {{ params.contentClasses }}{% else -%} py-sm{% endif %}" {%- if params.id %} id="{{params.id}}"{% endif %}>
-    {% if params.html %}
-    {{ params.html | safe }}
-    {% else %}
-    <p>
-      {{ params.text }}
-    </p>
-    {% endif %}
-  </div>
-</div>
-<!-- /collapsible -->
+<!-- collapsible -->
+<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="false" {% else %} data-expanded="true" {% endif %} data-module="c-collapsible">
+  <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="{%- if params.buttonClasses %} {{ params.buttonClasses }}{% else -%} group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{% endif %}" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
+    <span class="c-collapsible__show {% if params.showClasses %} {{ params.showClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="false">Mostrar</span>
+    <span class="c-collapsible__hide {% if params.hideClasses %} {{ params.hideClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="true">Ocultar</span>
+  </button>
+  <div aria-hidden="true" class="c-collapsible__content {% if params.contentClasses %} {{ params.contentClasses }}{% else -%} py-sm{% endif %}" {%- if params.id %} id="{{params.id}}"{% endif %}>
+    {% if params.html %}
+    {{ params.html | safe }}
+    {% else %}
+    <p>
+      {{ params.text }}
+    </p>
+    {% endif %}
+  </div>
+</div>
+<!-- /collapsible -->

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

@@ -1,49 +1,49 @@
-params:
-- name: headerText
-  type: string
-  required: true
-  description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-- name: headerHtml
-  type: string
-  required: true
-  description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the disclosed part of the collapsible element. 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 the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
-- name: id
-  type: string
-  required: false
-  description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.
-- name: open
-  type: boolean
-  required: false
-  description: If true, collapsible element will be expanded.
-- name: buttonClasses
-  type: string
-  required: false
-  description: Classes to add to the button element.
-- name: showClasses
-  type: string
-  required: false
-  description: Classes to add to the show element.
-- name: hideClasses
-  type: string
-  required: false
-  description: Classes to add to the hide element.
-- name: contentClasses
-  type: string
-  required: false
-  description: Classes to add to the content element.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the collapsible container element.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: headerText
+  type: string
+  required: true
+  description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+- name: headerHtml
+  type: string
+  required: true
+  description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the disclosed part of the collapsible element. 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 the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
+- name: id
+  type: string
+  required: false
+  description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.
+- name: open
+  type: boolean
+  required: false
+  description: If true, collapsible element will be expanded.
+- name: buttonClasses
+  type: string
+  required: false
+  description: Classes to add to the button element.
+- name: showClasses
+  type: string
+  required: false
+  description: Classes to add to the show element.
+- name: hideClasses
+  type: string
+  required: false
+  description: Classes to add to the hide element.
+- name: contentClasses
+  type: string
+  required: false
+  description: Classes to add to the content element.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the collapsible container element.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the collapsible container element.