desy-html 7.3.0 → 7.4.0

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

@@ -1,12 +1,12 @@
 {% set exampleComponent = "menubar" %}
 {% set examples =  [
   {
-    "name": "Default example",
-    "description": "With mixed parameters",
+    "name": "Por defecto",
+    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejmplo muestra parámetros mixtos.",
     "data": {
       "id": "with-all-parent-items-1",
       "idPrefix": "parent-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -81,8 +81,8 @@
           "classes": "mb-base mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "menuitems-example-item-4-1",
           "sub": {
             "items": [
@@ -153,12 +153,12 @@
     }
   },
   {
-    "name": "Has Selection in parent items",
-    "description": "When a selection has been made in any children, the parent item could be colored.",
+    "name": "Tiene selección en items padres",
+    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color.",
     "data": {
       "id": "with-all-parent-items-2",
       "idPrefix": "parent-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -235,8 +235,8 @@
           "classes": "c-menubar__button--has-selection mb-base mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "menuitems-example-item-4-2",
           "sub": {
             "items": [
@@ -307,11 +307,11 @@
     }
   },
   {
-    "name": "With one disabled parent item",
+    "name": "con un item padre deshabilitado",
     "data": {
       "id": "with-disabled",
       "idPrefix": "disabled-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -389,8 +389,8 @@
           "classes": "mb-base mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "menuitems-disabled-example-item-4-2",
           "sub": {
             "items": [
@@ -461,11 +461,11 @@
     }
   },
   {
-    "name": "With one active parent item",
+    "name": "con un item padre activo",
     "data": {
       "id": "with-active",
       "idPrefix": "active-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -543,8 +543,8 @@
           "classes": "mb-base mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "menuitems-active-example-item-4-2",
           "sub": {
             "items": [
@@ -615,12 +615,12 @@
     }
   },
   {
-    "name": "Small",
-    "description": "Using modifier classes in items.",
+    "name": "peque",
+    "description": "Usando clases modificadoras en los items.",
     "data": {
       "id": "small-items",
       "idPrefix": "small-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -697,8 +697,8 @@
           "classes": "c-menubar__button--sm mb-sm mr-sm"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "small-example-item-4",
           "sub": {
             "items": [
@@ -769,12 +769,12 @@
     }
   },
   {
-    "name": "Transparent",
-    "description": "Using modifier classes in items",
+    "name": "transparente",
+    "description": "Usando clases modificadoras en los items.",
     "data": {
       "id": "transparent-items",
       "idPrefix": "transparent-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -851,8 +851,8 @@
           "classes": "c-menubar__button--transparent mb-sm mr-sm"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "transparent-example-item-4",
           "sub": {
             "items": [
@@ -923,12 +923,12 @@
     }
   },
   {
-    "name": "Header",
-    "description": "In special cases, a special fixed header with a menubar could be useful. If you need a navigation menu with links, use the component Menu navigation instead.",
+    "name": "con estilos de cabecera",
+    "description": "En casos especiales, una cabecera fija con un Menubar puede ser útil. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar.",
     "data": {
       "id": "header-items",
       "idPrefix": "header-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Menuitem",
@@ -1005,8 +1005,8 @@
           "classes": "c-menubar__button--header mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "header-example-item-4",
           "sub": {
             "items": [
@@ -1078,12 +1078,12 @@
     }
   },
   {
-    "name": "Filter example",
-    "description": "Used over a list of items to filter and order them. Using .c-menubar--last-right modifier to position last item to right over lg: breakpoint.",
+    "name": "Ejemplo de filtros",
+    "description": 'Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.',
     "data": {
       "id": "filter-items",
       "idPrefix": "filter-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "items": [
         {
           "text": "Estados y trámites",
@@ -1313,14 +1313,14 @@
     }
   },
   {
-    "name": "With label example",
-    "description": "With label that explains this menu acts to other element. You can use classes: sr-only to show only for screen readers.",
+    "name": "con label",
+    "description": 'Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.',
     "data": {
       "id": "with-label-items",
       "idPrefix": "label-example",
-      "ariaLabel":"Menubar description",
+      "ariaLabel":"Menubar descrición",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
@@ -1396,8 +1396,8 @@
           "classes": "mb-base mr-base"
         },
         {
-          "text": "Mixed items",
-          "ariaLabel": "Mixeditems",
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
           "id": "menuitems-example-item-4-3",
           "sub": {
             "items": [

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "modal" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "default-example",
       "title": {
@@ -20,8 +20,8 @@
     }
   },
   {
-    "name": "isButtonLoader",
-    "description": "If an additional param in items called isButtonLoader is true, then a Button loader is used with this item.",
+    "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": {
@@ -42,7 +42,8 @@
     }
   },
   {
-    "name": "with headingLevel 3",
+    "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": {
@@ -62,7 +63,8 @@
     }
   },
   {
-    "name": "with secondary action",
+    "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": {
@@ -86,7 +88,8 @@
     }
   },
   {
-    "name": "with caller",
+    "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": {
@@ -111,7 +114,8 @@
     }
   },
   {
-    "name": "with many actions",
+    "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": {
@@ -143,7 +147,7 @@
     }
   },
   {
-    "name": "with many actions isButtonLoader",
+    "name": "con muchas acciones y botón loader",
     "data": {
       "id": "many-actions-is-button-loader-example",
       "title": {
@@ -183,7 +187,8 @@
     }
   },
   {
-    "name": "with icon type delete",
+    "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": {
@@ -210,7 +215,7 @@
     }
   },
   {
-    "name": "with icon type discard",
+    "name": "con icono de tipo descartar",
     "data": {
       "id": "icon-type-B-example",
       "title": {
@@ -237,7 +242,7 @@
     }
   },
   {
-    "name": "with icon type changes",
+    "name": "con icono de tipo cambios",
     "data": {
       "id": "icon-type-C-example",
       "title": {
@@ -264,7 +269,7 @@
     }
   },
   {
-    "name": "with icon type edit",
+    "name": "con icono de tipo editar",
     "data": {
       "id": "icon-type-D-example",
       "title": {
@@ -291,7 +296,7 @@
     }
   },
   {
-    "name": "with icon type publish",
+    "name": "con icono de tipo publicar",
     "data": {
       "id": "icon-type-E-example",
       "title": {
@@ -318,7 +323,8 @@
     }
   },
   {
-    "name": "with custom icon",
+    "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": {
@@ -342,7 +348,7 @@
       ],
       "isDismissible": true,
       "icon": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" aria-label="Pregunta" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M52.5 52.5a17.5 17.5 0 1123.333 16.503A8.75 8.75 0 0070 77.257v5.868M70 100.625a2.188 2.188 0 102.188 2.188A2.188 2.188 0 0070 100.624h0" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.749995"/><path d="M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0z" stroke-miterlimit="10" stroke-width="8.749995"/></g></svg>'
+        "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>'
       }
     }
   }

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

@@ -11,15 +11,15 @@
     {% if params.icon.html %}
     {{ params.icon.html | safe }}
     {% elseif params.icon.type == 'discard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808" stroke-width="8.749995"/></g></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM5.29,5.29a9.63,9.63,0,0,1,12.23-1,.26.26,0,0,1,0,.4L4.67,17.56a.27.27,0,0,1-.4,0,9.49,9.49,0,0,1,1-12.24ZM18.75,18.76a9.53,9.53,0,0,1-12.23,1,.26.26,0,0,1,0-.4L19.37,6.49a.26.26,0,0,1,.4,0,9.49,9.49,0,0,1-1,12.24Z" fill="currentColor"></path></svg>
     {% elseif params.icon.type == 'delete' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z" stroke-width="8.749995"/></g></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M19.5,7.5H4.5A.5.5,0,0,0,4,8V22a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V8A.5.5,0,0,0,19.5,7.5Zm-9.25,13a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Zm5,0a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Z" fill="currentColor"></path><path d="M22,4H17.25A.25.25,0,0,1,17,3.75V2.5A2.5,2.5,0,0,0,14.5,0h-5A2.5,2.5,0,0,0,7,2.5V3.75A.25.25,0,0,1,6.75,4H2A1,1,0,0,0,2,6H22a1,1,0,0,0,0-2ZM9,3.75V2.5A.5.5,0,0,1,9.5,2h5a.5.5,0,0,1,.5.5V3.75a.25.25,0,0,1-.25.25H9.25A.25.25,0,0,1,9,3.75Z" fill="currentColor"></path></g></svg>
     {% elseif params.icon.type == 'publish' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z" stroke-width="8.749995"/><path d="M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11" stroke-width="8.749995"/></g></svg>
+    <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" focusable="false" aria-hidden="true" role="presentation"><path d="M23.82,1.12A.5.5,0,0,0,23.31,1l-23,9.5A.5.5,0,0,0,0,11a.51.51,0,0,0,.32.46l6.33,2.45a.52.52,0,0,0,.47-.05l8.4-6a.5.5,0,0,1,.64.77l-7,6.75a.51.51,0,0,0-.15.36V22.5a.49.49,0,0,0,.37.48.49.49,0,0,0,.56-.23l3.17-5.42a.25.25,0,0,1,.33-.1l5.83,3.21a.5.5,0,0,0,.73-.33l4-18.5A.5.5,0,0,0,23.82,1.12Z" fill="currentColor"></path></svg>
     {% elseif params.icon.type == 'changes' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75" stroke-width="8.749995"/><path d="M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5" stroke-width="8.749995"/></g></svg>
+    <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" focusable="false" aria-hidden="true" role="presentation"><g><path d="M12,13a1,1,0,0,0,1-1V8a1,1,0,1,0-2,0v4A1,1,0,0,0,12,13Z" fill="currentColor"></path><circle cx="11.99" cy="15.71" r="1.25" fill="currentColor"></circle><path d="M19.29,5.53a9.72,9.72,0,0,0-9.55-3A10.25,10.25,0,0,0,2.38,9.61a.26.26,0,0,1-.27.18l-1-.13a.47.47,0,0,0-.47.22.47.47,0,0,0,0,.52l2.47,4.35a.51.51,0,0,0,.44.25.52.52,0,0,0,.36-.16l3.47-3.59a.48.48,0,0,0,.12-.51A.5.5,0,0,0,7,10.41l-1.88-.24A.23.23,0,0,1,5,10.05a.22.22,0,0,1,0-.21,7.67,7.67,0,0,1,5.37-4.9,7.23,7.23,0,0,1,7.1,2.25,1.25,1.25,0,1,0,1.87-1.66Z" fill="currentColor"></path><path d="M4.79,16.7a1.24,1.24,0,0,0-.11,1.76,9.72,9.72,0,0,0,9.55,3,10.24,10.24,0,0,0,7.37-7.12.24.24,0,0,1,.27-.17l1.06.12a.5.5,0,0,0,.48-.22.49.49,0,0,0,0-.52l-2.5-4.33A.51.51,0,0,0,20.55,9a.52.52,0,0,0-.43.15l-3.45,3.62a.5.5,0,0,0-.11.51.49.49,0,0,0,.41.33l1.85.22A.25.25,0,0,1,19,14a.22.22,0,0,1,0,.21,7.67,7.67,0,0,1-5.36,4.9,7.26,7.26,0,0,1-7.11-2.25A1.24,1.24,0,0,0,4.79,16.7Z" fill="currentColor"></path></g></svg>
     {% elseif params.icon.type == 'edit' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z" stroke-width="8.749995"/><path d="M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75" stroke-width="8.749995"/></g></svg>
+    <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" focusable="false" aria-hidden="true" role="presentation"><g><path d="M13.94,15a2,2,0,0,1-.67.45L9.73,16.86a2,2,0,0,1-2.6-2.6l1.41-3.53A2.18,2.18,0,0,1,9,10.05l5.88-5.88a.25.25,0,0,0-.17-.43H3.37A3.12,3.12,0,0,0,.25,6.86V20.62a3.12,3.12,0,0,0,3.12,3.12H17.13a3.12,3.12,0,0,0,3.12-3.12V9.29a.25.25,0,0,0-.43-.17Z" fill="currentColor"></path><path d="M18.57,3.3a.51.51,0,0,0-.71,0l-7.81,7.82a.36.36,0,0,0-.11.16L8.52,14.82a.51.51,0,0,0,.11.54.54.54,0,0,0,.54.11l3.54-1.42a.45.45,0,0,0,.17-.11l7.81-7.81a.51.51,0,0,0,.15-.35.53.53,0,0,0-.15-.36Z" fill="currentColor"></path><path d="M23.16,3.65a2,2,0,0,0,0-2.82,2,2,0,0,0-2.83,0L19.28,1.89a.56.56,0,0,0-.15.35.47.47,0,0,0,.15.35L21.4,4.71a.47.47,0,0,0,.35.15.57.57,0,0,0,.35-.15Z" fill="currentColor"></path></g></svg>
     {% endif %}
   </div>
   {% endif %}