desy-html 10.2.2 → 11.0.1

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

@@ -1,86 +1,86 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the listbox.
-- name: isMultiselectable
-  type: boolean
-  required: false
-  description: Defaults to false. If true, allows multiple selections.
-- name: doesChangeButtonText
-  type: boolean
-  required: false
-  description: Defaults to false. If true, the button text is updated with option selected text.
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
-- name: label
-  type: object
-  required: true
-  description: Label text or HTML by specifying value for either text or html keys.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the element that acts as label.
-- name: classesContainer
-  type: string
-  required: false
-  description: Classes to add to the container div of button and tooltip elements.
-- name: classesTooltip
-  type: string
-  required: false
-  description: Classes to add to the tooltip content.
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
-- name: items
-  type: array
-  required: true
-  description: Array of items objects.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each 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 item. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-  - name: active
-    type: boolean
-    required: false
-    description: If true, item will be active.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the button element.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the listbox.
+- name: isMultiselectable
+  type: boolean
+  required: false
+  description: Defaults to false. If true, allows multiple selections.
+- name: doesChangeButtonText
+  type: boolean
+  required: false
+  description: Defaults to false. If true, the button text is updated with option selected text.
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
+- name: label
+  type: object
+  required: true
+  description: Label text or HTML by specifying value for either text or html keys.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the element that acts as label.
+- name: classesContainer
+  type: string
+  required: false
+  description: Classes to add to the container div of button and tooltip elements.
+- name: classesTooltip
+  type: string
+  required: false
+  description: Classes to add to the tooltip content.
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
+- name: items
+  type: array
+  required: true
+  description: Array of items objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each 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 item. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, item will be active.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the button element.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the button element.

package/src/templates/components/media-object/_examples.media-object.njk

@@ -1,49 +1,49 @@
-{% set exampleComponent = "media-object" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
-    }
-  },
-  {
-    "name": "invertido",
-    "data": {
-      "reverse": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
-    }
-  },
-  {
-    "name": "figure centrado verticalmente",
-    "data": {
-      "center": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
-    }
-  },
-  {
-    "name": "clases añadiendo padding y margin",
-    "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
-    "data": {
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
-      "figureClasses": "mr-base",
-      "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
-      "classes": "mb-base"
-    }
-  },
-  {
-    "name": "Orden invertido con clases, padding y margin",
-    "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
-    "data": {
-      "reverse": true,
-      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
-      "figureClasses": "ml-base",
-      "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
-      "classes": "mb-base"
-    }
-  }
+{% set exampleComponent = "media-object" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+    }
+  },
+  {
+    "name": "invertido",
+    "data": {
+      "reverse": true,
+      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+    }
+  },
+  {
+    "name": "figure centrado verticalmente",
+    "data": {
+      "center": true,
+      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+    }
+  },
+  {
+    "name": "clases añadiendo padding y margin",
+    "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
+    "data": {
+      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureClasses": "mr-base",
+      "contentClasses": "text-sm",
+      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "classes": "mb-base"
+    }
+  },
+  {
+    "name": "Orden invertido con clases, padding y margin",
+    "description": "Lo más habitual es añadir clases para dar estilos al componente, el figure y los elementos de contenido.",
+    "data": {
+      "reverse": true,
+      "figureHtml": "<div class=\" w-20 h-20 \"><div class=\" h-full border-4 border-dashed border-gray-200 rounded-lg \"></div></div>",
+      "figureClasses": "ml-base",
+      "contentClasses": "text-sm",
+      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "classes": "mb-base"
+    }
+  }
 ] %}

package/src/templates/components/media-object/_macro.media-object.njk

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

package/src/templates/components/media-object/_template.media-object.njk

@@ -1,22 +1,22 @@
-{%- if params.reverse == true %}
-  {% set figureClassNames = "order-1" %}
-{% endif %}
-
-{%- if params.figureClasses %}
-  {% set figureClassNames = figureClassNames + " " + params.figureClasses %}
-{% endif %}
-
-<!-- media-object -->
-<div class="flex {%- if params.center %} items-center{% endif %}{%- if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div {%- if figureClassNames %} class="{{ figureClassNames }}"{% endif %}>
-    {{ params.figureHtml | safe }}
-  </div>
-  <div class="flex-1{%- if params.contentClasses %} {{ params.contentClasses }}{% endif %}">
-    {% if caller %}
-    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-    {% elseif params.caller %}
-    {{ params.caller | safe }}
-    {% endif %}
-  </div>
-</div>
+{%- if params.reverse == true %}
+  {% set figureClassNames = "order-1" %}
+{% endif %}
+
+{%- if params.figureClasses %}
+  {% set figureClassNames = figureClassNames + " " + params.figureClasses %}
+{% endif %}
+
+<!-- media-object -->
+<div class="flex {%- if params.center %} items-center{% endif %}{%- if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div {%- if figureClassNames %} class="{{ figureClassNames }}"{% endif %}>
+    {{ params.figureHtml | safe }}
+  </div>
+  <div class="flex-1{%- if params.contentClasses %} {{ params.contentClasses }}{% endif %}">
+    {% if caller %}
+    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+    {% elseif params.caller %}
+    {{ params.caller | safe }}
+    {% endif %}
+  </div>
+</div>
 <!-- /media-object -->

package/src/templates/components/media-object/params.media-object.yaml

@@ -1,17 +1,17 @@
-params:
-- name: figureHtml
-  type: string
-  required: true
-  description: HTML for the figure.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the media object component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the media object component.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: figureHtml
+  type: string
+  required: true
+  description: HTML for the figure.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the media object component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the media object 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.