desy-html 16.0.4 → 17.0.0

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,80 +1,80 @@
-{% set exampleComponent = "media-object" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Recuerda que este componente, por accesibilidad, debería esta rodeado de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code> en caso de que haya varios seguidos. O bien, que el contenido contenga algún encabezado.",
-    "data": {
-      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "<p class='c-paragraph-base'>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.</p>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Contiene una imagen cuadrada pequeña alineada a la izquierda, seguida de un bloque de texto de múltiples líneas en negro con tipografía normal que ocupa el espacio restante a la derecha. El texto comienza al nivel superior de la imagen.",
-    "_generated": {
-      "hash": "1c3bfac759d6d9fb1e3a16b43cfe00b5",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:05:30.864Z"
-    }
-  },
-  {
-    "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": "<p class='c-paragraph-base'>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.</p>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Presenta una imagen cuadrada pequeña alineada a la derecha, con un bloque de texto de múltiples líneas en negro con tipografía normal posicionado a la izquierda ocupando el espacio disponible. El texto comienza al nivel superior de la imagen.",
-    "_generated": {
-      "hash": "63c905f73e7f9b1bdf68c1258b54818b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:05:30.864Z"
-    }
-  },
-  {
-    "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": "<p class='c-paragraph-base'>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.</p>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Incluye una imagen cuadrada pequeña alineada a la izquierda, con un bloque extenso de texto de múltiples líneas en negro con tipografía normal a la derecha. El contenido de texto está verticalmente centrado respecto a la imagen, creando espacio visual balanceado arriba y abajo de la imagen.",
-    "_generated": {
-      "hash": "45d2190c13789fcb1251dbc717ff08ef",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:05:30.864Z"
-    }
-  },
-  {
-    "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": "<p class='c-paragraph-base'>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.</p>",
-      "classes": "mb-base"
-    },
-    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, con espaciado interno visible alrededor del contenido. El contenedor muestra separación clara entre el texto y los bordes del rectángulo.",
-    "_generated": {
-      "hash": "725bd9abf7e7c4b0489b3c60a9d77469",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:05:38.750Z"
-    }
-  },
-  {
-    "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": "<p class='c-paragraph-base'>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.</p>",
-      "classes": "mb-base"
-    },
-    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, distribuido en líneas continuas con espaciado interno. El contenedor presenta márgenes externos que lo separan de otros elementos y padding interno uniforme.",
-    "_generated": {
-      "hash": "b03b1262c8f33a74ff4f25d8c9fc8e21",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:05:38.750Z"
-    }
-  }
+{% set exampleComponent = "media-object" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Recuerda que este componente, por accesibilidad, debería esta rodeado de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code> en caso de que haya varios seguidos. O bien, que el contenido contenga algún encabezado.",
+    "data": {
+      "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
+      "caller": "<p class='c-paragraph-base'>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.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Contiene una imagen cuadrada pequeña alineada a la izquierda, seguida de un bloque de texto de múltiples líneas en negro con tipografía normal que ocupa el espacio restante a la derecha. El texto comienza al nivel superior de la imagen.",
+    "_generated": {
+      "hash": "1c3bfac759d6d9fb1e3a16b43cfe00b5",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
+    }
+  },
+  {
+    "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": "<p class='c-paragraph-base'>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.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Presenta una imagen cuadrada pequeña alineada a la derecha, con un bloque de texto de múltiples líneas en negro con tipografía normal posicionado a la izquierda ocupando el espacio disponible. El texto comienza al nivel superior de la imagen.",
+    "_generated": {
+      "hash": "63c905f73e7f9b1bdf68c1258b54818b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
+    }
+  },
+  {
+    "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": "<p class='c-paragraph-base'>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.</p>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris de 1px y fondo blanco. Incluye una imagen cuadrada pequeña alineada a la izquierda, con un bloque extenso de texto de múltiples líneas en negro con tipografía normal a la derecha. El contenido de texto está verticalmente centrado respecto a la imagen, creando espacio visual balanceado arriba y abajo de la imagen.",
+    "_generated": {
+      "hash": "45d2190c13789fcb1251dbc717ff08ef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:30.864Z"
+    }
+  },
+  {
+    "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": "<p class='c-paragraph-base'>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.</p>",
+      "classes": "mb-base"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, con espaciado interno visible alrededor del contenido. El contenedor muestra separación clara entre el texto y los bordes del rectángulo.",
+    "_generated": {
+      "hash": "725bd9abf7e7c4b0489b3c60a9d77469",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:38.750Z"
+    }
+  },
+  {
+    "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": "<p class='c-paragraph-base'>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.</p>",
+      "classes": "mb-base"
+    },
+    "visualDescription": "Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene texto de párrafo negro en fuente regular, distribuido en líneas continuas con espaciado interno. El contenedor presenta márgenes externos que lo separan de otros elementos y padding interno uniforme.",
+    "_generated": {
+      "hash": "b03b1262c8f33a74ff4f25d8c9fc8e21",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:05:38.750Z"
+    }
+  }
 ] %}

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.