desy-html 10.2.2 → 11.0.1

package/src/templates/components/accordion-history/params.accordion-history.yaml

@@ -1,129 +1,129 @@
-params:
-- name: idPrefix
-  type: string
-  required: true
-  description: String to prefix id for each accordion item if no id is specified on each item.
-- 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: allowToggle
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
-- name: allowMultiple
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
-- name: heading
-  type: object
-  required: false
-  description: Options for the heading
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the item. Not required, but recommended to improve the accessibility.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the heading.
-- name: showControl
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
-- name: items
-  type: array
-  required: true
-  description: Array of accordion items objects.
-  params:
-  - name: headerText
-    type: string
-    required: true
-    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: headerHtml
-    type: string
-    required: true
-    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the item. Not required, but recommended to improve the accessibility.
-  - name: open
-    type: boolean
-    required: false
-    description: If true, accordion item will be expanded.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, accordion item will be disabled and will not show the show/hide control.
-  - name: status
-    type: string
-    required: false
-    description: Available values: `current`,`past`,`pending`,`muted`, `currentmuted`. Defaults to `past`. If `current`, the item will show with primary border and white background. If `past`, the item will show with primary color. If `pending` the item has neutral color and dashed line. If `muted` the item has neutral color and background. `currentmuted` is like `current` but with `muted` styles.
-  - name: show
-    type: object
-    required: false
-    description: Options to customize the show info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in show info. 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 show info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the show info.
-  - name: hide
-    type: object
-    required: false
-    description: Options to customize the hide info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in hide info. 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 hide info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the hide info.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the accordion item element.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the accordion item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the accordion container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+params:
+- name: idPrefix
+  type: string
+  required: true
+  description: String to prefix id for each accordion item if no id is specified on each item.
+- 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: allowToggle
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
+- name: allowMultiple
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
+- name: heading
+  type: object
+  required: false
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+- name: showControl
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
+- name: items
+  type: array
+  required: true
+  description: Array of accordion items objects.
+  params:
+  - name: headerText
+    type: string
+    required: true
+    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: headerHtml
+    type: string
+    required: true
+    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: open
+    type: boolean
+    required: false
+    description: If true, accordion item will be expanded.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, accordion item will be disabled and will not show the show/hide control.
+  - name: status
+    type: string
+    required: false
+    description: Available values: `current`,`past`,`pending`,`muted`, `currentmuted`. Defaults to `past`. If `current`, the item will show with primary border and white background. If `past`, the item will show with primary color. If `pending` the item has neutral color and dashed line. If `muted` the item has neutral color and background. `currentmuted` is like `current` but with `muted` styles.
+  - name: show
+    type: object
+    required: false
+    description: Options to customize the show info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in show info. 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 show info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the show info.
+  - name: hide
+    type: object
+    required: false
+    description: Options to customize the hide info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in hide info. 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 hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the hide info.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the accordion item element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the accordion item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the accordion container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the accordion container.

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

@@ -1,80 +1,80 @@
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-
-{% set defaultExample %}
-  {{ componentNotification({
-    "title": {
-      "text": "El documento se ha cargado correctamente",
-      "classes": "outline-none"
-    },
-    "type": "success",
-    "isDismissible": true,
-    "id": "default-id"
-  })  }}
-{% endset %}
-
-{% set secondaryExample %}
-  {{ componentNotification({
-    "title": {
-      "text": "Problemas encontrados",
-      "classes": "mr-lg"
-    },
-    "items": [
-      {
-        "text": "Campo Nombre de la empresa está vacío",
-        "href": "#empresa"
-      },
-      {
-        "text": "Campo Fecha de inicio de la actividad está vacío",
-        "href": "#actividad"
-      },
-      {
-        "text": "El formato de correo electrónico es incorrecto",
-        "href": "#email"
-      }
-    ],
-    "type": "alert",
-    "isDismissible": true,
-    "id": "secondary-id"
-  })  }}
-{% endset %}
-
-
-{% set exampleComponent = "alert" %}
-{% set examples =  [
-  {
-    "name": "alert mostrando una notificación de éxito",
-    "description": 'Utilizamos los atributos <code>"role": "alert"</code> y  <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.',
-    "data": {
-      "button": {
-        "text": "Abrir éxito",
-        "attributes": {
-          "onclick": "openAlert('success-id', this)"
-        }
-      },
-      "id": "success-id",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      },
-      "caller": defaultExample
-    }
-  },
-  {
-    "name": "alert mostrando una notificación de alerta",
-    "description": 'Utilizamos los atributos <code>"role": "alert"</code> y  <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla.  La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación.',
-    "data": {
-      "button": {
-        "text": "Abrir alerta",
-        "attributes": {
-          "onclick": "openAlert('alert-id', this, 'secondary-id-title')"
-        }
-      },
-      "id": "alert-id",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      },
-      "caller": secondaryExample
-    }
-  }
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+
+{% set defaultExample %}
+  {{ componentNotification({
+    "title": {
+      "text": "El documento se ha cargado correctamente",
+      "classes": "outline-none"
+    },
+    "type": "success",
+    "isDismissible": true,
+    "id": "default-id"
+  })  }}
+{% endset %}
+
+{% set secondaryExample %}
+  {{ componentNotification({
+    "title": {
+      "text": "Problemas encontrados",
+      "classes": "mr-lg"
+    },
+    "items": [
+      {
+        "text": "Campo Nombre de la empresa está vacío",
+        "href": "#empresa"
+      },
+      {
+        "text": "Campo Fecha de inicio de la actividad está vacío",
+        "href": "#actividad"
+      },
+      {
+        "text": "El formato de correo electrónico es incorrecto",
+        "href": "#email"
+      }
+    ],
+    "type": "alert",
+    "isDismissible": true,
+    "id": "secondary-id"
+  })  }}
+{% endset %}
+
+
+{% set exampleComponent = "alert" %}
+{% set examples =  [
+  {
+    "name": "alert mostrando una notificación de éxito",
+    "description": 'Utilizamos los atributos <code>"role": "alert"</code> y  <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.',
+    "data": {
+      "button": {
+        "text": "Abrir éxito",
+        "attributes": {
+          "onclick": "openAlert('success-id', this)"
+        }
+      },
+      "id": "success-id",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      },
+      "caller": defaultExample
+    }
+  },
+  {
+    "name": "alert mostrando una notificación de alerta",
+    "description": 'Utilizamos los atributos <code>"role": "alert"</code> y  <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla.  La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación.',
+    "data": {
+      "button": {
+        "text": "Abrir alerta",
+        "attributes": {
+          "onclick": "openAlert('alert-id', this, 'secondary-id-title')"
+        }
+      },
+      "id": "alert-id",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      },
+      "caller": secondaryExample
+    }
+  }
 ] %}

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

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

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

@@ -1,9 +1,9 @@
-/* ==========================================================================
-   _styles.alert.css
-   ========================================================================== */
-
-@layer components {
-  [role="alert"]:empty {
-    @apply hidden;
-  }
-}
+/* ==========================================================================
+   _styles.alert.css
+   ========================================================================== */
+
+@layer components {
+  [role="alert"]:empty {
+    @apply hidden;
+  }
+}

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

@@ -1,16 +1,16 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-
-<!-- alert -->
-<div>
-  {{ componentButton(params.button) | indent(2)  }}
-  <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  </div>
-  <div class="hidden" id="{{ 'template-' + params.id }}">
-  {% if caller %}
-  {{ caller() | indent(6) }} {#- if statement allows usage of `call` to be optional -#}
-  {% elseif params.caller %}
-  {{ params.caller | safe | indent(6) }}
-  {% endif %}
-  </div>
-</div>
-<!-- /alert -->
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+<!-- alert -->
+<div>
+  {{ componentButton(params.button) | indent(2)  }}
+  <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  </div>
+  <div class="hidden" id="{{ 'template-' + params.id }}">
+  {% if caller %}
+  {{ caller() | indent(6) }} {#- if statement allows usage of `call` to be optional -#}
+  {% elseif params.caller %}
+  {{ params.caller | safe | indent(6) }}
+  {% endif %}
+  </div>
+</div>
+<!-- /alert -->

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

@@ -1,25 +1,25 @@
-params:
-- name: button
-  type: component
-  required: true
-  description: Button component to intereact with the dialog.
-- name: labelledId
-  type: string
-  required: true
-  description: Required id attribute to reference with aria-labelledby in the div container tag.
-- name: id
-  type: string
-  required: true
-  description: Required 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: true
-  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: button
+  type: component
+  required: true
+  description: Button component to intereact with the dialog.
+- name: labelledId
+  type: string
+  required: true
+  description: Required id attribute to reference with aria-labelledby in the div container tag.
+- name: id
+  type: string
+  required: true
+  description: Required 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: true
+  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.