desy-html 10.2.2 → 11.0.1

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

@@ -1,355 +1,355 @@
-{% set exampleComponent = "modal" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "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"
-        }
-      ],
-      "isDismissible": true
-    }
-  },
-  {
-    "name": "Con Button Loader",
-    "description": 'Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>"isButtonLoader": true</code>.',
-    "data": {
-      "id": "button-loader-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",
-          "isButtonLoader": true,
-          "state": "is-loading",
-          "classes": "c-button-loader--primary c-button-loader--is-loading"
-        }
-      ],
-      "isDismissible": true
-    }
-  },
-  {
-    "name": "Con encabezado de nivel 3",
-    "description": '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": {
-      "id": "headinglevel-example",
-      "title": {
-        "text": "Esto es un h3"
-      },
-      "headingLevel": 3,
-      "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"
-        }
-      ],
-      "isDismissible": true
-    }
-  },
-  {
-    "name": "Con acción secundaria",
-    "description": 'Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
-    "data": {
-      "id": "secondary-action-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
-      },
-      "itemsPrimary": [
-        {
-          "text": "Editar servicio",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true
-    }
-  },
-  {
-    "name": "con caller",
-    "description": 'Entre <code>{% call %}</code> y <code>{% endcall %}</code> puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.',
-    "data": {
-      "id": "caller-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
-      },
-      "itemsPrimary": [
-        {
-          "text": "Editar servicio",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true,
-      "caller": '<div class="prose max-w-auto mx-auto"><p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p></div>'
-    }
-  },
-  {
-    "name": "con muchas acciones",
-    "description": 'No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.',
-    "data": {
-      "id": "many-actions-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": "Guardar cambios y publicar",
-          "classes": "c-button--primary"
-        },
-        {
-          "text": "Guardar cambios"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Más información",
-          "classes": "c-button--transparent"
-        },
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true,
-      "classes": "max-w-4xl"
-    }
-  },
-  {
-    "name": "con muchas acciones y botón loader",
-    "data": {
-      "id": "many-actions-is-button-loader-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": "Guardar cambios y publicar",
-          "isButtonLoader": true,
-          "state": "is-success",
-          "classes": "c-button-loader--primary c-button-loader--is-success"
-        },
-        {
-          "text": "Guardar cambios",
-          "isButtonLoader": true
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Más información",
-          "isButtonLoader": true,
-          "state": "is-loading",
-          "classes": "c-button-loader--transparent c-button-loader--is-loading"
-        },
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
-          "isButtonLoader": true,
-          "state": "is-success",
-          "classes": "c-button-loader--is-success"
-        }
-      ],
-      "isDismissible": true,
-      "classes": "max-w-4xl"
-    }
-  },
-  {
-    "name": "con icono de tipo borrar/eliminar",
-    "description": 'Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
-    "data": {
-      "id": "icon-type-A-example",
-      "title": {
-        "text": "Borrar servicio"
-      },
-      "description": {
-        "text": "Esta acción no se puede deshacer ¿Estás seguro?"
-      },
-      "itemsPrimary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Si, borrar servicio",
-          "classes": "c-button--alert"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "delete"
-      }
-    }
-  },
-  {
-    "name": "con icono de tipo descartar",
-    "data": {
-      "id": "icon-type-B-example",
-      "title": {
-        "text": "Descartar cambios"
-      },
-      "description": {
-        "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
-      },
-      "itemsPrimary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Si, descartar cambios",
-          "classes": "c-button--alert"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "discard"
-      }
-    }
-  },
-  {
-    "name": "con icono de tipo cambios",
-    "data": {
-      "id": "icon-type-C-example",
-      "title": {
-        "text": "Hay cambios sin guardar"
-      },
-      "description": {
-        "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
-      },
-      "itemsPrimary": [
-        {
-          "text": "Guardar y salir",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "text": "Descartar cambios y salir"
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "changes"
-      }
-    }
-  },
-  {
-    "name": "con icono de tipo editar",
-    "data": {
-      "id": "icon-type-D-example",
-      "title": {
-        "text": "Editar servicio publicado"
-      },
-      "description": {
-        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
-      },
-      "itemsPrimary": [
-        {
-          "text": "Lo sé, quiero editarlo",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "edit"
-      }
-    }
-  },
-  {
-    "name": "con icono de tipo publicar",
-    "data": {
-      "id": "icon-type-E-example",
-      "title": {
-        "text": "Publicar"
-      },
-      "description": {
-        "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
-      },
-      "itemsPrimary": [
-        {
-          "text": "Publicar",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "type": "publish"
-      }
-    }
-  },
-  {
-    "name": "con icono personalizado",
-    "description": 'Utiliza el parámetro <code>"icon"</code> y su parámetro <code>"html"</code> para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <code>&lt;svg&gt;</code> de este ejemplo, incluido el <code>aria-label</code>.',
-    "data": {
-      "id": "custom-icon-example",
-      "title": {
-        "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
-        "classes": "c-h2 mt-base focus:outline-none focus:underline"
-      },
-      "description": {
-        "html": '<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>',
-        "classes": "mb-lg text-left"
-      },
-      "itemsPrimary": [
-        {
-          "text": "Si, comenzar proceso",
-          "classes": "c-button--primary"
-        }
-      ],
-      "itemsSecondary": [
-        {
-          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
-        }
-      ],
-      "isDismissible": true,
-      "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" aria-label="Pregunta" focusable="false"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z" fill="currentColor"></path></svg>'
-      }
-    }
-  }
+{% set exampleComponent = "modal" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "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"
+        }
+      ],
+      "isDismissible": true
+    }
+  },
+  {
+    "name": "Con Button Loader",
+    "description": 'Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro <code>"isButtonLoader": true</code>.',
+    "data": {
+      "id": "button-loader-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",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--primary c-button-loader--is-loading"
+        }
+      ],
+      "isDismissible": true
+    }
+  },
+  {
+    "name": "Con encabezado de nivel 3",
+    "description": '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": {
+      "id": "headinglevel-example",
+      "title": {
+        "text": "Esto es un h3"
+      },
+      "headingLevel": 3,
+      "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"
+        }
+      ],
+      "isDismissible": true
+    }
+  },
+  {
+    "name": "Con acción secundaria",
+    "description": 'Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
+    "data": {
+      "id": "secondary-action-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+      },
+      "itemsPrimary": [
+        {
+          "text": "Editar servicio",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true
+    }
+  },
+  {
+    "name": "con caller",
+    "description": 'Entre <code>{% call %}</code> y <code>{% endcall %}</code> puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.',
+    "data": {
+      "id": "caller-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+      },
+      "itemsPrimary": [
+        {
+          "text": "Editar servicio",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true,
+      "caller": '<div class="prose max-w-auto mx-auto"><p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p></div>'
+    }
+  },
+  {
+    "name": "con muchas acciones",
+    "description": 'No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.',
+    "data": {
+      "id": "many-actions-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": "Guardar cambios y publicar",
+          "classes": "c-button--primary"
+        },
+        {
+          "text": "Guardar cambios"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Más información",
+          "classes": "c-button--transparent"
+        },
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true,
+      "classes": "max-w-4xl"
+    }
+  },
+  {
+    "name": "con muchas acciones y botón loader",
+    "data": {
+      "id": "many-actions-is-button-loader-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": "Guardar cambios y publicar",
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--primary c-button-loader--is-success"
+        },
+        {
+          "text": "Guardar cambios",
+          "isButtonLoader": true
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Más información",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--transparent c-button-loader--is-loading"
+        },
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--is-success"
+        }
+      ],
+      "isDismissible": true,
+      "classes": "max-w-4xl"
+    }
+  },
+  {
+    "name": "con icono de tipo borrar/eliminar",
+    "description": 'Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.',
+    "data": {
+      "id": "icon-type-A-example",
+      "title": {
+        "text": "Borrar servicio"
+      },
+      "description": {
+        "text": "Esta acción no se puede deshacer ¿Estás seguro?"
+      },
+      "itemsPrimary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Si, borrar servicio",
+          "classes": "c-button--alert"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "delete"
+      }
+    }
+  },
+  {
+    "name": "con icono de tipo descartar",
+    "data": {
+      "id": "icon-type-B-example",
+      "title": {
+        "text": "Descartar cambios"
+      },
+      "description": {
+        "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
+      },
+      "itemsPrimary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Si, descartar cambios",
+          "classes": "c-button--alert"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "discard"
+      }
+    }
+  },
+  {
+    "name": "con icono de tipo cambios",
+    "data": {
+      "id": "icon-type-C-example",
+      "title": {
+        "text": "Hay cambios sin guardar"
+      },
+      "description": {
+        "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
+      },
+      "itemsPrimary": [
+        {
+          "text": "Guardar y salir",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Descartar cambios y salir"
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "changes"
+      }
+    }
+  },
+  {
+    "name": "con icono de tipo editar",
+    "data": {
+      "id": "icon-type-D-example",
+      "title": {
+        "text": "Editar servicio publicado"
+      },
+      "description": {
+        "html": '<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'
+      },
+      "itemsPrimary": [
+        {
+          "text": "Lo sé, quiero editarlo",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "edit"
+      }
+    }
+  },
+  {
+    "name": "con icono de tipo publicar",
+    "data": {
+      "id": "icon-type-E-example",
+      "title": {
+        "text": "Publicar"
+      },
+      "description": {
+        "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
+      },
+      "itemsPrimary": [
+        {
+          "text": "Publicar",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "type": "publish"
+      }
+    }
+  },
+  {
+    "name": "con icono personalizado",
+    "description": 'Utiliza el parámetro <code>"icon"</code> y su parámetro <code>"html"</code> para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <code>&lt;svg&gt;</code> de este ejemplo, incluido el <code>aria-label</code>.',
+    "data": {
+      "id": "custom-icon-example",
+      "title": {
+        "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
+        "classes": "c-h2 mt-base focus:outline-none focus:underline"
+      },
+      "description": {
+        "html": '<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>',
+        "classes": "mb-lg text-left"
+      },
+      "itemsPrimary": [
+        {
+          "text": "Si, comenzar proceso",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>'
+        }
+      ],
+      "isDismissible": true,
+      "icon": {
+        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" aria-label="Pregunta" focusable="false"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z" fill="currentColor"></path></svg>'
+      }
+    }
+  }
 ] %}