desy-html 10.2.2 → 11.0.1

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

@@ -1,74 +1,74 @@
-<!-- item -->
-<div  {%- if params.id %} id="{{ params.id }}"{% endif %} class="flex flex-wrap p-base bg-white border border-neutral-base rounded {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% if params.isDraggable %}
-  <div class="self-center h-full mr-lg">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-neutral-base" aria-label="Elemento ordenable" focusable="false" role="img"><g fill="currentColor"><path d="M41 28a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M41 70a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M41 112a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z"/></g></svg>
-  </div>
-  {% endif %}
-  {% if params.isLocked %}
-  <div class="self-center h-full mr-lg">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-base h-base text-neutral-dark" aria-label="Bloqueado" focusable="false" role="img"><path d="M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z" fill="currentColor"/></svg>
-  </div>
-  {% endif %}
-  {% if params.icon %}
-  <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}self-center h-full mr-base{% endif %}">
-    {% if params.icon.html %}
-    {{ params.icon.html | safe }}
-    {% elseif params.icon.type == 'document' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
-    {% elseif params.icon.type == 'link' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
-    {% elseif params.icon.type == 'clipboard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
-    {% endif %}
-  </div>
-  {% endif %}
-  <div class="lg:flex flex-1 self-center">
-    <div class="lg:flex-1 lg:self-center">
-      {% if params.headingLevel == "1" %}
-      <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h1>
-      {% elseif params.headingLevel == "2" %}
-      <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h2>
-      {% elseif params.headingLevel == "3" %}
-      <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h3>
-      {% elseif params.headingLevel == "4" %}
-      <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h4>
-      {% elseif params.headingLevel == "5" %}
-      <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h5>
-      {% else %}
-      <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
-      {% endif %}
-      {% if params.description %}
-      <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.description.html | safe if params.description.html else params.description.text }}
-      </p>
-      {% endif %}
-      {% if params.items %}
-      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
-        {% for item in params.items %}
-        <li class="lg:inline-block px-sm text-sm text-neutral-dark">{{ item.text }}</li>
-        {% endfor %}
-      </ul>
-      {% endif %}
-      {% if params.content %}
-      <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
-        {{ params.content.html | safe if params.content.html else params.content.text }}
-      </p>
-      {% endif %}
-    </div>
-    {% if caller %}
-      {% set myCaller = caller() %}
-      {% if myCaller | string != '' %}
-    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
-      {{ myCaller }}
-    </div>
-      {% endif %}
-    {% elseif params.caller %}
-    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
-      {{ params.caller | safe }}
-    </div>
-    {% endif %}
-  </div>
-</div>
+<!-- item -->
+<div  {%- if params.id %} id="{{ params.id }}"{% endif %} class="flex flex-wrap p-base bg-white border border-neutral-base rounded {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.isDraggable %}
+  <div class="self-center h-full mr-lg">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-neutral-base" aria-label="Elemento ordenable" focusable="false" role="img"><g fill="currentColor"><path d="M41 28a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M41 70a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M41 112a10 10 0 1010-10 10 10 0 00-10 10z"/><path d="M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z"/></g></svg>
+  </div>
+  {% endif %}
+  {% if params.isLocked %}
+  <div class="self-center h-full mr-lg">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-base h-base text-neutral-dark" aria-label="Bloqueado" focusable="false" role="img"><path d="M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z" fill="currentColor"/></svg>
+  </div>
+  {% endif %}
+  {% if params.icon %}
+  <div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}self-center h-full mr-base{% endif %}">
+    {% if params.icon.html %}
+    {{ params.icon.html | safe }}
+    {% elseif params.icon.type == 'document' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
+    {% elseif params.icon.type == 'link' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
+    {% elseif params.icon.type == 'clipboard' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
+    {% endif %}
+  </div>
+  {% endif %}
+  <div class="lg:flex flex-1 self-center">
+    <div class="lg:flex-1 lg:self-center">
+      {% if params.headingLevel == "1" %}
+      <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h1>
+      {% elseif params.headingLevel == "2" %}
+      <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h2>
+      {% elseif params.headingLevel == "3" %}
+      <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h3>
+      {% elseif params.headingLevel == "4" %}
+      <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h4>
+      {% elseif params.headingLevel == "5" %}
+      <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h5>
+      {% else %}
+      <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
+      {% endif %}
+      {% if params.description %}
+      <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.description.html | safe if params.description.html else params.description.text }}
+      </p>
+      {% endif %}
+      {% if params.items %}
+      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
+        {% for item in params.items %}
+        <li class="lg:inline-block px-sm text-sm text-neutral-dark">{{ item.text }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      {% if params.content %}
+      <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
+        {{ params.content.html | safe if params.content.html else params.content.text }}
+      </p>
+      {% endif %}
+    </div>
+    {% if caller %}
+      {% set myCaller = caller() %}
+      {% if myCaller | string != '' %}
+    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
+      {{ myCaller }}
+    </div>
+      {% endif %}
+    {% elseif params.caller %}
+    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
+      {{ params.caller | safe }}
+    </div>
+    {% endif %}
+  </div>
+</div>
 <!-- /item -->

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

@@ -1,101 +1,101 @@
-params:
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on. If no headingLevel is present the title will be a p tag.
-- name: title
-  type: object
-  required: true
-  description: This is the title
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item title.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the item title.
-- name: description
-  type: object
-  required: false
-  description: This is the optional description under title
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item description.
-- name: items
-  type: array
-  required: false
-  description: This is a list of metadata
-  - name: text
-    type: string
-    required: true
-    description: Text of the metadata item.
-- name: content
-  type: object
-  required: false
-  description: This is the bottom content
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the content.
-- name: icon
-  type: object
-  required: false
-  description: This is the optional icon at left
-  - name: html
-    type: string
-    required: false
-    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
-  - name: type
-    type: string
-    required: false
-    description: Predefined icon types are `document`, `link`, `clipboard`
-  - name: containerClasses
-    type: string
-    required: false
-    description: Classes applied to the parent div of icon. Useful to vertical align the icon.
-- name: isDraggable
-  type: boolean
-  required: false
-  description: If true, the item shows a handler icon on left.
-- name: id
-  type: string
-  required: false
-  description: Optional id attribute to add to the div container tag.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the div container tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the div container tag.
-- 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 item component in a `call` block.
+params:
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on. If no headingLevel is present the title will be a p tag.
+- name: title
+  type: object
+  required: true
+  description: This is the title
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item title.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item title.
+- name: description
+  type: object
+  required: false
+  description: This is the optional description under title
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item description.
+- name: items
+  type: array
+  required: false
+  description: This is a list of metadata
+  - name: text
+    type: string
+    required: true
+    description: Text of the metadata item.
+- name: content
+  type: object
+  required: false
+  description: This is the bottom content
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the content.
+- name: icon
+  type: object
+  required: false
+  description: This is the optional icon at left
+  - name: html
+    type: string
+    required: false
+    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+  - name: type
+    type: string
+    required: false
+    description: Predefined icon types are `document`, `link`, `clipboard`
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes applied to the parent div of icon. Useful to vertical align the icon.
+- name: isDraggable
+  type: boolean
+  required: false
+  description: If true, the item shows a handler icon on left.
+- name: id
+  type: string
+  required: false
+  description: Optional id attribute to add to the div container tag.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the div container tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the div container tag.
+- 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 item component in a `call` block.

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

@@ -1,35 +1,35 @@
-{% set exampleComponent = "label" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "text": "Esto es un label"
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "classes": "inline-block p-base bg-primary-light",
-      "text": "Esto es un label"
-    }
-  },
-  {
-    "name": "con label como encabezado",
-    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>"headingLevel"</code>, el label no estará rodeado de un encabezado.',
-    "data": {
-      "text": "Esto es un label",
-      "classes": "c-h1",
-      "isPageHeading": true
-    }
-  },
-  {
-    "name": "con label como encabezado con h3",
-    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
-    "data": {
-      "text": "Esto es un label",
-      "classes": "c-h3",
-      "isPageHeading": true,
-      "headingLevel": "3"
-    }
-  }
+{% set exampleComponent = "label" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "text": "Esto es un label"
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "classes": "inline-block p-base bg-primary-light",
+      "text": "Esto es un label"
+    }
+  },
+  {
+    "name": "con label como encabezado",
+    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>"headingLevel"</code>, el label no estará rodeado de un encabezado.',
+    "data": {
+      "text": "Esto es un label",
+      "classes": "c-h1",
+      "isPageHeading": true
+    }
+  },
+  {
+    "name": "con label como encabezado con h3",
+    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
+    "data": {
+      "text": "Esto es un label",
+      "classes": "c-h3",
+      "isPageHeading": true,
+      "headingLevel": "3"
+    }
+  }
 ] %}

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

@@ -1,5 +1,5 @@
-<!-- _macro.label.njk -->
-
-{% macro componentLabel(params) %}
-{% include "./_template.label.njk" %}
-{% endmacro %}
+<!-- _macro.label.njk -->
+
+{% macro componentLabel(params) %}
+{% include "./_template.label.njk" %}
+{% endmacro %}

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

@@ -1,38 +1,38 @@
-{% if params.html or params.text %}
-{% set labelHtml %}
-<label class="block {%- if params.classes %} {{ params.classes }}{% endif %}"
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | safe if params.html else params.text }}</label>{% endset %}
-
-<!-- label -->
-{% if params.isPageHeading %}
-  {% if params.headingLevel == "1" %}
-<h1 class="block ">
-  {{ labelHtml | safe }}
-</h1>
-{% elseif params.headingLevel == "2" %}
-<h2 class="block ">
-  {{ labelHtml | safe }}
-</h2>
-{% elseif params.headingLevel == "3" %}
-<h3 class="block ">
-  {{ labelHtml | safe }}
-</h3>
-{% elseif params.headingLevel == "4" %}
-<h4 class="block ">
-  {{ labelHtml | safe }}
-</h4>
-{% elseif params.headingLevel == "5" %}
-<h5 class="block ">
-  {{ labelHtml | safe }}
-</h5>
-{% else %}
-<h1 class="block ">
-  {{ labelHtml | safe }}
-</h1>
-{% endif %}
-{% else %}
-{{ labelHtml | safe }}
-{% endif %}
-{% endif %}
+{% if params.html or params.text %}
+{% set labelHtml %}
+<label class="block {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | safe if params.html else params.text }}</label>{% endset %}
+
+<!-- label -->
+{% if params.isPageHeading %}
+  {% if params.headingLevel == "1" %}
+<h1 class="block ">
+  {{ labelHtml | safe }}
+</h1>
+{% elseif params.headingLevel == "2" %}
+<h2 class="block ">
+  {{ labelHtml | safe }}
+</h2>
+{% elseif params.headingLevel == "3" %}
+<h3 class="block ">
+  {{ labelHtml | safe }}
+</h3>
+{% elseif params.headingLevel == "4" %}
+<h4 class="block ">
+  {{ labelHtml | safe }}
+</h4>
+{% elseif params.headingLevel == "5" %}
+<h5 class="block ">
+  {{ labelHtml | safe }}
+</h5>
+{% else %}
+<h1 class="block ">
+  {{ labelHtml | safe }}
+</h1>
+{% endif %}
+{% else %}
+{{ labelHtml | safe }}
+{% endif %}
+{% endif %}
 <!-- /label -->

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

@@ -1,29 +1,29 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the 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 the label. If `html` is provided, the `text` argument will be ignored.
-- name: for
-  type: string
-  required: true
-  description: The value of the for attribute, the id of the input the label is associated with.
-- name: isPageHeading
-  type: boolean
-  required: false
-  description: Whether the label also acts as the heading for the page.
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the label tag.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the 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 the label. If `html` is provided, the `text` argument will be ignored.
+- name: for
+  type: string
+  required: true
+  description: The value of the for attribute, the id of the input the label is associated with.
+- name: isPageHeading
+  type: boolean
+  required: false
+  description: Whether the label also acts as the heading for the page.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the label tag.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the label tag.