desy-html 10.2.1 → 10.2.2

package/src/templates/components/button-loader/_examples.button-loader.njk

@@ -1,282 +1,282 @@
-{% set exampleComponent = "button-loader" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "text": "Por defecto"
-    }
-  },
-  {
-    "name": "Por defecto con el estado cargando",
-    "description": "Simula activar el estado cargando",
-    "data": {
-      "name": "loading",
-      "text": "Cargando",
-      "state": "is-loading",
-      "classes": "c-button-loader--is-loading",
-      "loader": {
-        "text": "Acción en curso"
-      }
-    }
-  },
-  {
-    "name": "Por defecto con estado éxito",
-    "description": "Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.",
-    "data": {
-      "name": "éxito",
-      "text": "Éxito",
-      "state": "is-success",
-      "success" : {
-        "text": "Acción realizada con éxito"
-      },
-      "classes": "c-button-loader--is-success"
-    }
-  },
-  {
-    "name": "por defecto con estado activo",
-    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
-    "data": {
-      "name": "active",
-      "text": "Activo",
-      "classes": "ds-active"
-    }
-  },
-  {
-    "name": "por defecto con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
-    "data": {
-      "name": "hover",
-      "text": "Hover",
-      "classes": "ds-hover"
-    }
-  },
-  {
-    "name": "por defecto con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
-    "data": {
-      "name": "focus",
-      "text": "Focus",
-      "classes": "ds-focus"
-    }
-  },
-  {
-    "name": "por defecto deshabilitado",
-    "data": {
-      "text": "Deshabilitado",
-      "disabled": true
-    }
-  },
-  {
-    "name": "primario",
-    "data": {
-      "text": "Primario",
-      "classes": "c-button-loader--primary"
-    }
-  },
-  {
-    "name": "primario con estado activo",
-    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
-    "data": {
-      "name": "active",
-      "text": "Activo",
-      "classes": "c-button-loader--primary ds-active"
-    }
-  },
-  {
-    "name": "primario con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
-    "data": {
-      "name": "hover",
-      "text": "Hover",
-      "classes": "c-button-loader--primary ds-hover"
-    }
-  },
-  {
-    "name": "primario con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
-    "data": {
-      "name": "focus",
-      "text": "Focus",
-      "classes": "c-button-loader--primary ds-focus"
-    }
-  },
-  {
-    "name": "primario deshabilitado",
-    "data": {
-      "text": "Deshabilitado",
-      "disabled": true,
-      "classes": "c-button-loader--primary"
-    }
-  },
-  {
-    "name": "alerta",
-    "data": {
-      "text": "Alerta",
-      "classes": "c-button-loader--alert"
-    }
-  },
-  {
-    "name": "alerta con estado activo",
-    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
-    "data": {
-      "name": "active",
-      "text": "Activo",
-      "classes": "c-button-loader--alert ds-active"
-    }
-  },
-  {
-    "name": "alerta con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
-    "data": {
-      "name": "hover",
-      "text": "Hover",
-      "classes": "c-button-loader--alert ds-hover"
-    }
-  },
-  {
-    "name": "alerta con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
-    "data": {
-      "name": "focus",
-      "text": "Focus",
-      "classes": "c-button-loader--alert ds-focus"
-    }
-  },
-  {
-    "name": "alerta deshabilitado",
-    "data": {
-      "text": "Deshabilitado",
-      "disabled": true,
-      "classes": "c-button-loader--alert"
-    }
-  },
-  {
-    "name": "transparente",
-    "data": {
-      "text": "Transparente",
-      "classes": "c-button-loader--transparent"
-    }
-  },
-  {
-    "name": "transparente con estado activo",
-    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
-    "data": {
-      "name": "active",
-      "text": "Activo",
-      "classes": "c-button-loader--transparent ds-active"
-    }
-  },
-  {
-    "name": "transparente con estado hover",
-    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
-    "data": {
-      "name": "hover",
-      "text": "Hover",
-      "classes": "c-button-loader--transparent ds-hover"
-    }
-  },
-  {
-    "name": "transparente con estado focus",
-    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
-    "data": {
-      "name": "focus",
-      "text": "Focus",
-      "classes": "c-button-loader--transparent ds-focus"
-    }
-  },
-  {
-    "name": "transparente deshabilitado",
-    "data": {
-      "text": "Deshabilitado",
-      "disabled": true,
-      "classes": "c-button-loader--transparent"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "text": "Peque",
-      "classes": "c-button-loader--sm"
-    }
-  },
-  {
-    "name": "enlace",
-    "data": {
-      "text": "Botón enlace",
-      "href": "/"
-    }
-  },
-  {
-    "name": "botón enlace con target blank",
-    "data": {
-      "html": 'Botón enlace con target <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="self-center ml-sm" aria-hidden="true" focusable="false" role="img"><g><path id="Union" fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
-      "href": "http://www.google.com",
-      "target": "_blank",
-      "attributes": {
-        "title": "Se abre en ventana nueva"
-      }
-    }
-  },
-  {
-    "name": "enlace deshabilitado",
-    "data": {
-      "text": "Botón enlace deshabilitado",
-      "href": "/",
-      "disabled": true
-    }
-  },
-  {
-    "name": "botón con icono a la derecha",
-    "data": {
-      "html": 'Botón con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center ml-2" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
-      "href": "/"
-    }
-  },
-  {
-    "name": "botón con icono a la izquierda",
-    "data": {
-    
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center mr-2" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>Botón con icono',
-      "href": "/"
-    }
-  },
-  {
-    "name": "botón sólo con icono",
-    "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="img" aria-label="Borrar"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
-      "href": "/",
-      "classes": "c-button-loader--primary p-3 align-bottom"
-    }
-  },
-  {
-    "name": "button peque sólo con icono",
-    "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="img" aria-label="Borrar"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
-      "href": "/",
-      "classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
-    }
-  },
-  {
-    "name": "input",
-    "data": {
-      "element": "input",
-      "name": "send-form",
-      "text": "Enviar"
-    }
-  },
-  {
-    "name": "input deshabilitado",
-    "data": {
-      "element": "input",
-      "text": "Enviar",
-      "disabled": true
-    }
-  },
-  {
-    "name": "prevenir doble click",
-    "data": {
-      "text": "Enviar",
-      "preventDoubleClick": true
-    }
-  }
+{% set exampleComponent = "button-loader" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "text": "Por defecto"
+    }
+  },
+  {
+    "name": "Por defecto con el estado cargando",
+    "description": "Simula activar el estado cargando",
+    "data": {
+      "name": "loading",
+      "text": "Cargando",
+      "state": "is-loading",
+      "classes": "c-button-loader--is-loading",
+      "loader": {
+        "text": "Acción en curso"
+      }
+    }
+  },
+  {
+    "name": "Por defecto con estado éxito",
+    "description": "Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.",
+    "data": {
+      "name": "éxito",
+      "text": "Éxito",
+      "state": "is-success",
+      "success" : {
+        "text": "Acción realizada con éxito"
+      },
+      "classes": "c-button-loader--is-success"
+    }
+  },
+  {
+    "name": "por defecto con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
+    "data": {
+      "name": "active",
+      "text": "Activo",
+      "classes": "ds-active"
+    }
+  },
+  {
+    "name": "por defecto con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "data": {
+      "name": "hover",
+      "text": "Hover",
+      "classes": "ds-hover"
+    }
+  },
+  {
+    "name": "por defecto con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "data": {
+      "name": "focus",
+      "text": "Focus",
+      "classes": "ds-focus"
+    }
+  },
+  {
+    "name": "por defecto deshabilitado",
+    "data": {
+      "text": "Deshabilitado",
+      "disabled": true
+    }
+  },
+  {
+    "name": "primario",
+    "data": {
+      "text": "Primario",
+      "classes": "c-button-loader--primary"
+    }
+  },
+  {
+    "name": "primario con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
+    "data": {
+      "name": "active",
+      "text": "Activo",
+      "classes": "c-button-loader--primary ds-active"
+    }
+  },
+  {
+    "name": "primario con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "data": {
+      "name": "hover",
+      "text": "Hover",
+      "classes": "c-button-loader--primary ds-hover"
+    }
+  },
+  {
+    "name": "primario con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "data": {
+      "name": "focus",
+      "text": "Focus",
+      "classes": "c-button-loader--primary ds-focus"
+    }
+  },
+  {
+    "name": "primario deshabilitado",
+    "data": {
+      "text": "Deshabilitado",
+      "disabled": true,
+      "classes": "c-button-loader--primary"
+    }
+  },
+  {
+    "name": "alerta",
+    "data": {
+      "text": "Alerta",
+      "classes": "c-button-loader--alert"
+    }
+  },
+  {
+    "name": "alerta con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
+    "data": {
+      "name": "active",
+      "text": "Activo",
+      "classes": "c-button-loader--alert ds-active"
+    }
+  },
+  {
+    "name": "alerta con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "data": {
+      "name": "hover",
+      "text": "Hover",
+      "classes": "c-button-loader--alert ds-hover"
+    }
+  },
+  {
+    "name": "alerta con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "data": {
+      "name": "focus",
+      "text": "Focus",
+      "classes": "c-button-loader--alert ds-focus"
+    }
+  },
+  {
+    "name": "alerta deshabilitado",
+    "data": {
+      "text": "Deshabilitado",
+      "disabled": true,
+      "classes": "c-button-loader--alert"
+    }
+  },
+  {
+    "name": "transparente",
+    "data": {
+      "text": "Transparente",
+      "classes": "c-button-loader--transparent"
+    }
+  },
+  {
+    "name": "transparente con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
+    "data": {
+      "name": "active",
+      "text": "Activo",
+      "classes": "c-button-loader--transparent ds-active"
+    }
+  },
+  {
+    "name": "transparente con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
+    "data": {
+      "name": "hover",
+      "text": "Hover",
+      "classes": "c-button-loader--transparent ds-hover"
+    }
+  },
+  {
+    "name": "transparente con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
+    "data": {
+      "name": "focus",
+      "text": "Focus",
+      "classes": "c-button-loader--transparent ds-focus"
+    }
+  },
+  {
+    "name": "transparente deshabilitado",
+    "data": {
+      "text": "Deshabilitado",
+      "disabled": true,
+      "classes": "c-button-loader--transparent"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "text": "Peque",
+      "classes": "c-button-loader--sm"
+    }
+  },
+  {
+    "name": "enlace",
+    "data": {
+      "text": "Botón enlace",
+      "href": "/"
+    }
+  },
+  {
+    "name": "botón enlace con target blank",
+    "data": {
+      "html": 'Botón enlace con target <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="self-center ml-sm" aria-hidden="true" focusable="false" role="img"><g><path id="Union" fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+      "href": "http://www.google.com",
+      "target": "_blank",
+      "attributes": {
+        "title": "Se abre en ventana nueva"
+      }
+    }
+  },
+  {
+    "name": "enlace deshabilitado",
+    "data": {
+      "text": "Botón enlace deshabilitado",
+      "href": "/",
+      "disabled": true
+    }
+  },
+  {
+    "name": "botón con icono a la derecha",
+    "data": {
+      "html": 'Botón con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center ml-2" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+      "href": "/"
+    }
+  },
+  {
+    "name": "botón con icono a la izquierda",
+    "data": {
+    
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center mr-2" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>Botón con icono',
+      "href": "/"
+    }
+  },
+  {
+    "name": "botón sólo con icono",
+    "data": {
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="img" aria-label="Borrar"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+      "href": "/",
+      "classes": "c-button-loader--primary p-3 align-bottom"
+    }
+  },
+  {
+    "name": "button peque sólo con icono",
+    "data": {
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="img" aria-label="Borrar"><g><path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+      "href": "/",
+      "classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
+    }
+  },
+  {
+    "name": "input",
+    "data": {
+      "element": "input",
+      "name": "send-form",
+      "text": "Enviar"
+    }
+  },
+  {
+    "name": "input deshabilitado",
+    "data": {
+      "element": "input",
+      "text": "Enviar",
+      "disabled": true
+    }
+  },
+  {
+    "name": "prevenir doble click",
+    "data": {
+      "text": "Enviar",
+      "preventDoubleClick": true
+    }
+  }
 ] %}

package/src/templates/components/button-loader/_macro.button-loader.njk

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