desy-html 12.1.0 → 13.0.0

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

@@ -1,138 +1,138 @@
-{% from "components/modal/_macro.modal.njk" import componentModal %}
-
-{% set defaultExample %}
-  {{ componentModal({
-    "id": "default-example",
-    "title": {
-      "text": "Aviso"
-    },
-    "description": {
-      "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
-    },
-    "itemsPrimary": [
-      {
-        "text": "De acuerdo, continuar",
-        "classes": "c-button--primary",
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-{% set secondaryExample %}
-  {{ componentModal({
-    "id": "secondary-action-example",
-    "title": {
-      "text": "Editar servicio publicado"
-    },
-    "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
-    },
-    "itemsPrimary": [
-      {
-        "text": "Editar servicio",
-        "classes": "c-button--primary"
-      }
-    ],
-    "itemsSecondary": [
-      {
-        "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-{% set javascriptExample %}
-  {{ componentModal({
-    "id": "javascript-action-example",
-    "title": {
-      "text": "Servicio publicado"
-    },
-    "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
-    },
-    "itemsSecondary": [
-      {
-        "html": "Cerrar",
-        "attributes": {
-          "onclick": "closeDialog(this)"
-        }
-      }
-    ],
-    "isDismissible": true
-  })  }}
-{% endset %}
-
-
-{% set exampleComponent = "dialog" %}
-{% set examples =  [
-  {
-    "name": "Modal lanzado con un Dialog",
-    "description": "Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>'role':'dialog'</code> y <code>'aria-modal': true</code>",
-    "data": {
-      "button": {
-        "text": "Abrir modal",
-        "attributes": {
-          "onclick": "openDialog('default', this, 'label-default-example')",
-          "id": "button-label-default-example"
-        }
-      },
-      "id": "default",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "label-default-example",
-        "aria-modal": true
-      },
-      "caller": defaultExample
-    }
-  },
-  {
-    "name": "Modal lanzado con un Dialog con acciones secundarias",
-    "data": {
-      "button": {
-        "text": "Abrir modal con acciones secundarias",
-        "attributes": {
-          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
-          "id": "button-label-secondary-action-example"
-        }
-      },
-      "id": "secondary",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "secondary-action-example",
-        "aria-modal": true
-      },
-      "caller": secondaryExample
-    }
-  },
-  {
-    "name": "Modal lanzado con un Dialog con JavaScript",
-    "description": "También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog('modal-javascript', 'button-javascript-action-example', 'label-javascript-action-example')</code> para mostrar la modal.",
-    "data": {
-      "button": {
-        "text": "Abrir modal con JavaScript",
-        "attributes": {
-          "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
-          "id": "button-javascript-action-example"
-        }
-      },
-      "id": "modal-javascript",
-      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
-      "attributes": {
-        "role": "dialog",
-        "aria-labelledby": "javascript-action-example",
-        "aria-modal": true
-      },
-      "caller": javascriptExample
-    }
-  }
-] %}
+{% from "components/modal/_macro.modal.njk" import componentModal %}
+
+{% set defaultExample %}
+  {{ componentModal({
+    "id": "default-example",
+    "title": {
+      "text": "Aviso"
+    },
+    "description": {
+      "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
+    },
+    "itemsPrimary": [
+      {
+        "text": "De acuerdo, continuar",
+        "classes": "c-button--primary",
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+{% set secondaryExample %}
+  {{ componentModal({
+    "id": "secondary-action-example",
+    "title": {
+      "text": "Editar servicio publicado"
+    },
+    "description": {
+      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+    },
+    "itemsPrimary": [
+      {
+        "text": "Editar servicio",
+        "classes": "c-button--primary"
+      }
+    ],
+    "itemsSecondary": [
+      {
+        "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+{% set javascriptExample %}
+  {{ componentModal({
+    "id": "javascript-action-example",
+    "title": {
+      "text": "Servicio publicado"
+    },
+    "description": {
+      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+    },
+    "itemsSecondary": [
+      {
+        "html": "Cerrar",
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
+
+{% set exampleComponent = "dialog" %}
+{% set examples =  [
+  {
+    "name": "Modal lanzado con un Dialog",
+    "description": "Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>'role':'dialog'</code> y <code>'aria-modal': true</code>",
+    "data": {
+      "button": {
+        "text": "Abrir modal",
+        "attributes": {
+          "onclick": "openDialog('default', this, 'label-default-example')",
+          "id": "button-label-default-example"
+        }
+      },
+      "id": "default",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "label-default-example",
+        "aria-modal": true
+      },
+      "caller": defaultExample
+    }
+  },
+  {
+    "name": "Modal lanzado con un Dialog con acciones secundarias",
+    "data": {
+      "button": {
+        "text": "Abrir modal con acciones secundarias",
+        "attributes": {
+          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
+          "id": "button-label-secondary-action-example"
+        }
+      },
+      "id": "secondary",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "secondary-action-example",
+        "aria-modal": true
+      },
+      "caller": secondaryExample
+    }
+  },
+  {
+    "name": "Modal lanzado con un Dialog con JavaScript",
+    "description": "También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog('modal-javascript', 'button-javascript-action-example', 'label-javascript-action-example')</code> para mostrar la modal.",
+    "data": {
+      "button": {
+        "text": "Abrir modal con JavaScript",
+        "attributes": {
+          "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
+          "id": "button-javascript-action-example"
+        }
+      },
+      "id": "modal-javascript",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "javascript-action-example",
+        "aria-modal": true
+      },
+      "caller": javascriptExample
+    }
+  }
+] %}

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

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

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

@@ -1,19 +1,19 @@
-/* ==========================================================================
-   _styles.dialog.css
-   ========================================================================== */
-
-@layer components {
-  body {
-    &.has-dialog {
-      @apply overflow-hidden;
-    }
-  }
-
-  .dialog-backdrop {
-    @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
-
-    &.active {
-      @apply grid h-screen place-items-center;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.dialog.css
+   ========================================================================== */
+
+@layer components {
+  body {
+    &.has-dialog {
+      @apply overflow-hidden;
+    }
+  }
+
+  .dialog-backdrop {
+    @apply hidden fixed overflow-y-auto inset-0 bg-black bg-opacity-50 z-50;
+
+    &.active {
+      @apply grid h-screen place-items-center;
+    }
+  }
+}

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

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

package/src/templates/components/dialog/params.dialog.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.