desy-html 10.2.2 → 11.0.1

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

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

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

@@ -1,18 +1,18 @@
-<!-- description-list -->
-<dl {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% for item in params.items %}
-  <div {%- if item.classes %} class="{{ item.classes }}"{% endif %}
-  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
-    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.term.html | safe if item.term.html else item.term.text }}
-    </dt>
-    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
-    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.definition.html | safe if item.definition.html else item.definition.text }}
-    </dd>
-  </div>
-  {% endfor %}
-</dl>
+<!-- description-list -->
+<dl {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% for item in params.items %}
+  <div {%- if item.classes %} class="{{ item.classes }}"{% endif %}
+  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
+    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.term.html | safe if item.term.html else item.term.text }}
+    </dt>
+    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
+    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.definition.html | safe if item.definition.html else item.definition.text }}
+    </dd>
+  </div>
+  {% endfor %}
+</dl>
 <!-- /description-list -->

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

@@ -1,62 +1,62 @@
-params:
-- name: items
-  type: array
-  required: true
-  description: Array of term/definition pairs.
-  params:
-  - name: term
-    type: object
-    required: true
-    description: term in dt.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dt item. 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 dt item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dt.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dt.
-  - name: definition
-    type: object
-    required: true
-    description: definition in dd.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dd item. 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 dd item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dd.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dd.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to a div container that contain the dt/dd pair.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the checkboxes container.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: items
+  type: array
+  required: true
+  description: Array of term/definition pairs.
+  params:
+  - name: term
+    type: object
+    required: true
+    description: term in dt.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dt item. 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 dt item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dt.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dt.
+  - name: definition
+    type: object
+    required: true
+    description: definition in dd.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dd item. 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 dd item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dd.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dd.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to a div container that contain the dt/dd pair.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the checkboxes container.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the nav tag.

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

@@ -1,45 +1,45 @@
-{% set exampleComponent = "details" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "summary": {
-        "html": "Más información"
-      },
-      "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
-    }
-  },
-  {
-    "name": "expandido",
-    "description": 'Usa el parámetro <code>"open": true</code> para mostrar inicialmente abierto un item.',
-    "data": {
-      "id": "mas-informacion",
-      "summary": {
-        "text": "Más información"
-      },
-      "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
-      "open": true
-    }
-  },
-  {
-    "name": "con HTML",
-    "data": {
-      "summary": {
-        "html": 'Más información <em>actualizada</em>'
-      },
-      "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
-    }
-  },
-  {
-    "name": "con clases",
-    "data": {
-      "summary": {
-        "html": 'Más información <em>actualizada</em>',
-        "classes": "hover:underline"
-      },
-      "classes": "p-base bg-primary-light text-primary-base",
-      "containerClasses": "p-base",
-      "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
-    }
-  }
+{% set exampleComponent = "details" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "summary": {
+        "html": "Más información"
+      },
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
+    }
+  },
+  {
+    "name": "expandido",
+    "description": 'Usa el parámetro <code>"open": true</code> para mostrar inicialmente abierto un item.',
+    "data": {
+      "id": "mas-informacion",
+      "summary": {
+        "text": "Más información"
+      },
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
+      "open": true
+    }
+  },
+  {
+    "name": "con HTML",
+    "data": {
+      "summary": {
+        "html": 'Más información <em>actualizada</em>'
+      },
+      "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    }
+  },
+  {
+    "name": "con clases",
+    "data": {
+      "summary": {
+        "html": 'Más información <em>actualizada</em>',
+        "classes": "hover:underline"
+      },
+      "classes": "p-base bg-primary-light text-primary-base",
+      "containerClasses": "p-base",
+      "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
+    }
+  }
 ] %}

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

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

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

@@ -1,18 +1,18 @@
-<!-- details -->
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
-  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
-    <span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
-      {{ params.summary.html | safe if params.summary.html else params.summary.text }}
-    </span>
-  </summary>
-  <div class="py-sm">
-    <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-      {% if caller %}
-      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-      {% elseif params.caller %}
-      {{ params.caller | safe }}
-      {% endif %}
-    </div>
-  </div>
-</details>
+<!-- details -->
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
+    <span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
+      {{ params.summary.html | safe if params.summary.html else params.summary.text }}
+    </span>
+  </summary>
+  <div class="py-sm">
+    <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+      {% if caller %}
+      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+      {% elseif params.caller %}
+      {{ params.caller | safe }}
+      {% endif %}
+    </div>
+  </div>
+</details>
 <!-- /details -->

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

@@ -1,41 +1,41 @@
-params:
-- name: summary
-  type: object
-  required: true
-  description: Summary that opens the content
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes that can be added to the inner container.
-- name: id
-  type: string
-  required: false
-  description: Id to add to the details element.
-- name: open
-  type: boolean
-  required: false
-  description: If true, details element will be expanded.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the `<details>` element.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the `<details>` element.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: summary
+  type: object
+  required: true
+  description: Summary that opens the content
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: id
+  type: string
+  required: false
+  description: Id to add to the details element.
+- name: open
+  type: boolean
+  required: false
+  description: If true, details element will be expanded.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the `<details>` element.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the `<details>` element.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: 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 dropdown component in a `call` block.