desy-html 12.0.1 → 13.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/_include.template-header.njk +320 -326
- package/docs/_macro.example-render.njk +8 -8
- package/docs/ds/_ds.example.textos.njk +1 -1
- package/docs/ds/_ds.section.espaciado.njk +2 -2
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/ds/_ds.section.typography.njk +1 -1
- package/docs/index.html +14 -0
- package/docs/pagina-accesibilidad.html +1 -1
- package/docs/pagina-mapa-web.html +1 -1
- package/docs/plantilla-con-header-advanced.html +1 -1
- package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +1 -1
- package/docs/plantilla-editar-con-cabecera-fija.html +1 -1
- package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +1 -1
- package/docs/plantilla-logueado-con-cabecera-fija.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app.html +1 -1
- package/docs/plantilla-logueado-con-titulo-de-app.html +1 -1
- package/docs/plantilla-sin-loguear.html +1 -1
- package/package.json +1 -1
- package/src/js/aria/MenuNavigation.js +4 -1
- package/src/js/aria/MenubarAction.js +100 -25
- package/src/js/aria/listbox.js +1 -1
- package/src/js/aria/tabs.js +0 -2
- package/src/js/desy-html.js +3 -11
- package/src/js/index.js +0 -2
- package/src/templates/components/accordion/_template.accordion.njk +7 -7
- package/src/templates/components/accordion-history/_template.accordion-history.njk +17 -17
- package/src/templates/components/alert/_examples.alert.njk +3 -3
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +27 -27
- package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +7 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +1 -1
- package/src/templates/components/button/_examples.button.njk +12 -13
- package/src/templates/components/button-loader/_examples.button-loader.njk +5 -5
- package/src/templates/components/button-loader/_template.button-loader.njk +1 -1
- package/src/templates/components/card/_examples.card.njk +25 -22
- package/src/templates/components/card/_template.card.njk +10 -10
- package/src/templates/components/character-count/_examples.character-count.njk +1 -1
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -3
- package/src/templates/components/date-input/_template.date-input.njk +0 -1
- package/src/templates/components/datepicker/_template.datepicker.njk +1 -2
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +1 -1
- package/src/templates/components/file-upload/_examples.file-upload.njk +6 -6
- package/src/templates/components/file-upload/_template.file-upload.njk +0 -1
- package/src/templates/components/footer/_template.footer.njk +2 -1
- package/src/templates/components/header/_examples.header.njk +5 -4
- package/src/templates/components/header/_template.header.header__navigation.njk +24 -26
- package/src/templates/components/header/_template.header.njk +1 -0
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +63 -52
- package/src/templates/components/header-mini/_examples.header-mini.njk +1 -1
- package/src/templates/components/input/_template.input.njk +1 -2
- package/src/templates/components/input-group/_examples.input-group.njk +2 -2
- package/src/templates/components/input-group/_template.input-group.njk +1 -2
- package/src/templates/components/item/_examples.item.njk +13 -2
- package/src/templates/components/item/_template.item.njk +3 -3
- package/src/templates/components/links-list/_examples.links-list.njk +32 -0
- package/src/templates/components/listbox/_template.listbox.njk +3 -3
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +34 -19
- package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +2 -1
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +4 -4
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +0 -23
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +3 -5
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +2 -2
- package/src/templates/components/menubar/_styles.menubar.css +10 -0
- package/src/templates/components/menubar/_template.menubar.njk +2 -1
- package/src/templates/components/nav/_template.nav.njk +1 -1
- package/src/templates/components/notification/_template.notification.njk +2 -2
- package/src/templates/components/pagination/_template.pagination.njk +6 -6
- package/src/templates/components/pill/_examples.pill.njk +6 -6
- package/src/templates/components/radios/_template.radios.njk +1 -2
- package/src/templates/components/searchbar/_template.searchbar.njk +0 -1
- package/src/templates/components/select/_template.select.njk +0 -3
- package/src/templates/components/spinner/_template.spinner.njk +4 -0
- package/src/templates/components/status-item/_examples.status-item.njk +1 -1
- package/src/templates/components/table/_examples.table.njk +21 -298
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table/params.table.yaml +4 -0
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +4 -184
- package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -2
- package/src/templates/components/textarea/_template.textarea.njk +0 -1
- package/src/templates/components/toggle/_examples.toggle.njk +12 -12
- package/src/templates/components/tooltip/_template.tooltip.njk +1 -1
- package/src/js/aria/HeaderNavigation.js +0 -55
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
{% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
|
|
25
25
|
{% set headingContent %}{{ params.heading.html | filterquotes | safe if params.heading.html else params.heading.text }}{% endset %}
|
|
26
26
|
{% if params.headingLevel == "1" %}
|
|
27
|
-
<h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
|
|
27
|
+
<h1 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h1>
|
|
28
28
|
{% elseif params.headingLevel == "2" %}
|
|
29
|
-
<h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
|
|
29
|
+
<h2 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h2>
|
|
30
30
|
{% elseif params.headingLevel == "3" %}
|
|
31
|
-
<h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
|
|
31
|
+
<h3 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h3>
|
|
32
32
|
{% elseif params.headingLevel == "4" %}
|
|
33
|
-
<h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
|
|
33
|
+
<h4 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h4>
|
|
34
34
|
{% elseif params.headingLevel == "5" %}
|
|
35
|
-
<h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
|
|
35
|
+
<h5 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h5>
|
|
36
36
|
{% else %}
|
|
37
|
-
<h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
|
|
37
|
+
<h2 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h2>
|
|
38
38
|
{% endif %}
|
|
39
39
|
{% endif %}
|
|
40
40
|
{% if params.showControl %}
|
|
41
|
-
<button id="{{ idPrefix }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
|
|
41
|
+
<button id="{{ idPrefix }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button" aria-labelledby="{{ idPrefix }}{% if params.heading.html or params.heading.text %} {{ idPrefix }}-heading{% endif %}">
|
|
42
42
|
Mostrar todo
|
|
43
43
|
</button>
|
|
44
44
|
{% endif %}
|
|
@@ -25,21 +25,21 @@
|
|
|
25
25
|
{% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
|
|
26
26
|
{% set headingContent %}{{ params.heading.html | filterquotes | safe if params.heading.html else params.heading.text }}{% endset %}
|
|
27
27
|
{% if params.headingLevel == "1" %}
|
|
28
|
-
<h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
|
|
28
|
+
<h1 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h1>
|
|
29
29
|
{% elseif params.headingLevel == "2" %}
|
|
30
|
-
<h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
|
|
30
|
+
<h2 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h2>
|
|
31
31
|
{% elseif params.headingLevel == "3" %}
|
|
32
|
-
<h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
|
|
32
|
+
<h3 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h3>
|
|
33
33
|
{% elseif params.headingLevel == "4" %}
|
|
34
|
-
<h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
|
|
34
|
+
<h4 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h4>
|
|
35
35
|
{% elseif params.headingLevel == "5" %}
|
|
36
|
-
<h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
|
|
36
|
+
<h5 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h5>
|
|
37
37
|
{% else %}
|
|
38
|
-
<h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
|
|
38
|
+
<h2 {{ headingAttributes | safe }} id="{{ idPrefix }}-heading">{{ headingContent | safe }}</h2>
|
|
39
39
|
{% endif %}
|
|
40
40
|
{% endif %}
|
|
41
41
|
{% if params.showControl %}
|
|
42
|
-
<button id="{{ idPrefix }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
|
|
42
|
+
<button id="{{ idPrefix }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button" aria-labelledby="{{ idPrefix }}{% if params.heading.html or params.heading.text %} {{ idPrefix }}-heading{% endif %}">
|
|
43
43
|
Mostrar todo
|
|
44
44
|
</button>
|
|
45
45
|
{% endif %}
|
|
@@ -70,15 +70,15 @@
|
|
|
70
70
|
>
|
|
71
71
|
{{ item.headerHtml | safe if item.headerHtml else item.headerText }}
|
|
72
72
|
{% if item.status == 'current' %}
|
|
73
|
-
<span class="sr-only">(Estado: actual) </span>
|
|
73
|
+
<span class="sr-only" id="{{ id }}-status">(Estado: actual) </span>
|
|
74
74
|
{% elseif item.status == 'pending' %}
|
|
75
|
-
<span class="sr-only">(Estado: pendiente) </span>
|
|
75
|
+
<span class="sr-only" id="{{ id }}-status">(Estado: pendiente) </span>
|
|
76
76
|
{% elseif item.status == 'muted' %}
|
|
77
|
-
<span class="sr-only">(Estado:
|
|
77
|
+
<span class="sr-only" id="{{ id }}-status">(Estado: muteado) </span>
|
|
78
78
|
{% elseif item.status == 'currentmuted' %}
|
|
79
|
-
<span class="sr-only">(Estado: actual) </span>
|
|
79
|
+
<span class="sr-only" id="{{ id }}-status">(Estado: actual muteado) </span>
|
|
80
80
|
{% else %}
|
|
81
|
-
<span class="sr-only">(Estado: pasado) </span>
|
|
81
|
+
<span class="sr-only" id="{{ id }}-status">(Estado: pasado) </span>
|
|
82
82
|
{% endif %}
|
|
83
83
|
<span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
|
|
84
84
|
<span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
|
|
@@ -151,15 +151,15 @@
|
|
|
151
151
|
{% endif %}
|
|
152
152
|
{% endif %}
|
|
153
153
|
{% if item.status == 'current' %}
|
|
154
|
-
<div class="absolute top-5 -left-6 w-3 h-3 bg-white ring-2 ring-primary-base rounded-full" role="img"
|
|
154
|
+
<div class="absolute top-5 -left-6 w-3 h-3 bg-white ring-2 ring-primary-base rounded-full" role="img" aria-labelledby="{{ id }}-title"></div>
|
|
155
155
|
{% elseif item.status == 'pending' %}
|
|
156
|
-
<div class="absolute top-5 -left-6 w-3 h-3 bg-white border-2 border-neutral-base rounded-full" role="img"
|
|
156
|
+
<div class="absolute top-5 -left-6 w-3 h-3 bg-white border-2 border-neutral-base rounded-full" role="img" aria-labelledby="{{ id }}-title"></div>
|
|
157
157
|
{% elseif item.status == 'muted' %}
|
|
158
|
-
<div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base border-2 border-neutral-base rounded-full" role="img"
|
|
158
|
+
<div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base border-2 border-neutral-base rounded-full" role="img" aria-labelledby="{{ id }}-title"></div>
|
|
159
159
|
{% elseif item.status == 'currentmuted' %}
|
|
160
|
-
<div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base ring-2 ring-neutral-base rounded-full" role="img"
|
|
160
|
+
<div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base ring-2 ring-neutral-base rounded-full" role="img" aria-labelledby="{{ id }}-title"></div>
|
|
161
161
|
{% else %}
|
|
162
|
-
<div class="absolute top-5 -left-6 w-3 h-3 bg-primary-base border-2 border-primary-base rounded-full" role="img"
|
|
162
|
+
<div class="absolute top-5 -left-6 w-3 h-3 bg-primary-base border-2 border-primary-base rounded-full" role="img" aria-labelledby="{{ id }}-title"></div>
|
|
163
163
|
{% endif %}
|
|
164
164
|
<div
|
|
165
165
|
{% if not item.open %}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
{% set examples = [
|
|
44
44
|
{
|
|
45
45
|
"name": "alert mostrando una notificación de éxito",
|
|
46
|
-
"description": "Utilizamos los atributos <code>'role': 'alert'</code> y <code>'aria-live': 'assertive'</code
|
|
46
|
+
"description": "Utilizamos los atributos <code>'role': 'alert'</code> y <code>'aria-live': 'assertive'</code> para que no pasen desapercibidas al lector de pantalla si no movemos el foco tras abrir la notificación. Si la notificación fuese de estado, como que la página se ha cargado, entonces se usará <code>'role': 'alert'</code> y <code>'aria-live': 'polite'</code>. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.",
|
|
47
47
|
"data": {
|
|
48
48
|
"button": {
|
|
49
49
|
"text": "Abrir éxito",
|
|
@@ -61,12 +61,12 @@
|
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "alert mostrando una notificación de alerta",
|
|
64
|
-
"description": "
|
|
64
|
+
"description": "La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación. Debido al uso de este argumento tras abrir este alert movemos el foco al título de la notificación, en este caso no es necesario usar los atributos <code>'role': 'alert'</code> y <code>'aria-live': 'assertive'</code>.",
|
|
65
65
|
"data": {
|
|
66
66
|
"button": {
|
|
67
67
|
"text": "Abrir alerta",
|
|
68
68
|
"attributes": {
|
|
69
|
-
"onclick": "openAlert('alert-id', this, 'secondary-id-title')"
|
|
69
|
+
"onclick": "openAlert('alert-id', this, 'secondary-id-title');"
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
72
|
"id": "alert-id",
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
{
|
|
4
4
|
"name": "por defecto",
|
|
5
5
|
"data": {
|
|
6
|
+
"inlineOnMobile": true,
|
|
7
|
+
"inlineOnDesktop": true,
|
|
6
8
|
"items": [
|
|
7
9
|
{
|
|
8
10
|
"text": "Sección",
|
|
@@ -18,6 +20,8 @@
|
|
|
18
20
|
{
|
|
19
21
|
"name": "con 1 sólo nivel",
|
|
20
22
|
"data": {
|
|
23
|
+
"inlineOnMobile": true,
|
|
24
|
+
"inlineOnDesktop": true,
|
|
21
25
|
"items": [
|
|
22
26
|
{
|
|
23
27
|
"text": "Sección",
|
|
@@ -29,6 +33,8 @@
|
|
|
29
33
|
{
|
|
30
34
|
"name": "con múltiples niveles",
|
|
31
35
|
"data": {
|
|
36
|
+
"inlineOnMobile": true,
|
|
37
|
+
"inlineOnDesktop": true,
|
|
32
38
|
"items": [
|
|
33
39
|
{
|
|
34
40
|
"text": "Inicio",
|
|
@@ -51,49 +57,41 @@
|
|
|
51
57
|
},
|
|
52
58
|
{
|
|
53
59
|
"name": "con cadenas muy largas",
|
|
54
|
-
"description": "
|
|
60
|
+
"description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. De esta forma, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
|
|
55
61
|
"data": {
|
|
56
62
|
"items": [
|
|
57
63
|
{
|
|
58
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
59
|
-
"href": "/"
|
|
64
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
60
65
|
},
|
|
61
66
|
{
|
|
62
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
63
|
-
"href": "/"
|
|
67
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
64
68
|
},
|
|
65
69
|
{
|
|
66
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
67
|
-
"href": "/"
|
|
70
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
68
71
|
},
|
|
69
72
|
{
|
|
70
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
71
|
-
"href": "/"
|
|
73
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
72
74
|
}
|
|
73
75
|
]
|
|
74
76
|
}
|
|
75
77
|
},
|
|
76
78
|
{
|
|
77
79
|
"name": "Último item más largo y con truncado en cadenas largas",
|
|
78
|
-
"description": "Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.",
|
|
80
|
+
"description": "Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code>. Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.",
|
|
79
81
|
"data": {
|
|
80
82
|
"classes": "c-breadcrumbs--truncated",
|
|
81
83
|
"items": [
|
|
82
84
|
{
|
|
83
|
-
"text": "Inicio"
|
|
84
|
-
"href": "/"
|
|
85
|
+
"text": "Inicio"
|
|
85
86
|
},
|
|
86
87
|
{
|
|
87
|
-
"text": "Actividades industriales y energía"
|
|
88
|
-
"href": "/"
|
|
88
|
+
"text": "Actividades industriales y energía"
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables"
|
|
92
|
-
"href": "/"
|
|
91
|
+
"text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables"
|
|
93
92
|
},
|
|
94
93
|
{
|
|
95
|
-
"text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento"
|
|
96
|
-
"href": "/"
|
|
94
|
+
"text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento"
|
|
97
95
|
}
|
|
98
96
|
]
|
|
99
97
|
}
|
|
@@ -101,6 +99,8 @@
|
|
|
101
99
|
{
|
|
102
100
|
"name": "Item a mitad sin href",
|
|
103
101
|
"data": {
|
|
102
|
+
"inlineOnMobile": true,
|
|
103
|
+
"inlineOnDesktop": true,
|
|
104
104
|
"items": [
|
|
105
105
|
{
|
|
106
106
|
"text": "Inicio",
|
|
@@ -123,6 +123,8 @@
|
|
|
123
123
|
{
|
|
124
124
|
"name": "con la última miga de pan como página actual con href",
|
|
125
125
|
"data": {
|
|
126
|
+
"inlineOnMobile": true,
|
|
127
|
+
"inlineOnDesktop": true,
|
|
126
128
|
"items": [
|
|
127
129
|
{
|
|
128
130
|
"text": "Inicio",
|
|
@@ -142,6 +144,8 @@
|
|
|
142
144
|
{
|
|
143
145
|
"name": "con la última miga de pan como página actual sin href",
|
|
144
146
|
"data": {
|
|
147
|
+
"inlineOnMobile": true,
|
|
148
|
+
"inlineOnDesktop": true,
|
|
145
149
|
"items": [
|
|
146
150
|
{
|
|
147
151
|
"text": "Inicio",
|
|
@@ -305,7 +309,7 @@
|
|
|
305
309
|
{
|
|
306
310
|
"name": "con botón atrás",
|
|
307
311
|
"data": {
|
|
308
|
-
|
|
312
|
+
"hasBackButton": true,
|
|
309
313
|
"items": [
|
|
310
314
|
{
|
|
311
315
|
"text": "Inicio",
|
|
@@ -354,20 +358,16 @@
|
|
|
354
358
|
"classes": "c-breadcrumbs--truncated",
|
|
355
359
|
"items": [
|
|
356
360
|
{
|
|
357
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
358
|
-
"href": "#"
|
|
361
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
359
362
|
},
|
|
360
363
|
{
|
|
361
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
362
|
-
"href": "#"
|
|
364
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
363
365
|
},
|
|
364
366
|
{
|
|
365
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
366
|
-
"href": "#"
|
|
367
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
367
368
|
},
|
|
368
369
|
{
|
|
369
|
-
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
370
|
-
"href": "#"
|
|
370
|
+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
|
|
371
371
|
}
|
|
372
372
|
]
|
|
373
373
|
}
|
|
@@ -6,9 +6,10 @@
|
|
|
6
6
|
.c-breadcrumbs {
|
|
7
7
|
li ~ li::before {
|
|
8
8
|
@apply inline-block;
|
|
9
|
-
|
|
9
|
+
@apply relative;
|
|
10
|
+
top: 0.1em;
|
|
11
|
+
content: url("data:image/svg+xml,%3Csvg width='0.8em' height='0.8em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' role='presentation' aria-hidden='true' %3E%3Cpath d='M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
|
|
10
12
|
@apply px-sm;
|
|
11
|
-
@apply text-neutral-dark;
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -69,10 +70,12 @@
|
|
|
69
70
|
|
|
70
71
|
|
|
71
72
|
.c-breadcrumbs__backbutton {
|
|
72
|
-
@apply mr-
|
|
73
|
+
@apply mr-base;
|
|
74
|
+
@apply relative;
|
|
75
|
+
@apply top-0.5;
|
|
73
76
|
|
|
74
77
|
& + li::before {
|
|
75
|
-
@apply hidden
|
|
78
|
+
@apply !hidden;
|
|
76
79
|
}
|
|
77
80
|
}
|
|
78
81
|
}
|
|
@@ -47,7 +47,7 @@ lg:grid-cols-max-content-8{% endif %}
|
|
|
47
47
|
<ol class="{% if not params.inlineOnDesktop %}lg:grid {{ gridClass }}{% endif %} w-full items-baseline text-sm">
|
|
48
48
|
{% if params.hasBackButton %}
|
|
49
49
|
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
|
|
50
|
-
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior"
|
|
50
|
+
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg></span></a>
|
|
51
51
|
</li>
|
|
52
52
|
{% endif %}
|
|
53
53
|
{% for item in params.items %}
|
|
@@ -196,6 +196,7 @@
|
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
198
|
"name": "enlace",
|
|
199
|
+
"description": "Si añades el atributo <code>href</code> se comporta como un enlace y generará la etiqueta <code><a></code> en lugar de la etiqueta <code><button></code>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.",
|
|
199
200
|
"data": {
|
|
200
201
|
"text": "Botón enlace",
|
|
201
202
|
"href": "/"
|
|
@@ -203,8 +204,9 @@
|
|
|
203
204
|
},
|
|
204
205
|
{
|
|
205
206
|
"name": "botón enlace con target blank",
|
|
207
|
+
"description": "Si añades el atributo <code>href</code> se comporta como un enlace y generará la etiqueta <code><a></code> en lugar de la etiqueta <code><button></code>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.",
|
|
206
208
|
"data": {
|
|
207
|
-
"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='
|
|
209
|
+
"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='presentation'><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>",
|
|
208
210
|
"href": "http://www.google.com",
|
|
209
211
|
"target": "_blank",
|
|
210
212
|
"attributes": {
|
|
@@ -215,6 +217,7 @@
|
|
|
215
217
|
},
|
|
216
218
|
{
|
|
217
219
|
"name": "enlace deshabilitado",
|
|
220
|
+
"description": "Si añades el atributo <code>href</code> se comporta como un enlace y generará la etiqueta <code><a></code> en lugar de la etiqueta <code><button></code>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.",
|
|
218
221
|
"data": {
|
|
219
222
|
"text": "Botón enlace deshabilitado",
|
|
220
223
|
"href": "/",
|
|
@@ -224,15 +227,13 @@
|
|
|
224
227
|
{
|
|
225
228
|
"name": "botón con icono a la derecha",
|
|
226
229
|
"data": {
|
|
227
|
-
"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='
|
|
228
|
-
"href": "/"
|
|
230
|
+
"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='presentation'><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>"
|
|
229
231
|
}
|
|
230
232
|
},
|
|
231
233
|
{
|
|
232
234
|
"name": "botón con icono a la izquierda",
|
|
233
235
|
"data": {
|
|
234
|
-
"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='
|
|
235
|
-
"href": "/"
|
|
236
|
+
"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='presentation'><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"
|
|
236
237
|
}
|
|
237
238
|
},
|
|
238
239
|
{
|
|
@@ -240,8 +241,8 @@
|
|
|
240
241
|
"description": "Transparente con icono a la izquierda",
|
|
241
242
|
"data": {
|
|
242
243
|
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg>Volver",
|
|
243
|
-
"
|
|
244
|
-
"
|
|
244
|
+
"href": "/",
|
|
245
|
+
"classes": "c-button--transparent"
|
|
245
246
|
}
|
|
246
247
|
},
|
|
247
248
|
{
|
|
@@ -249,15 +250,14 @@
|
|
|
249
250
|
"description": "Transparente con icono a la derecha",
|
|
250
251
|
"data": {
|
|
251
252
|
"html": "Ver más<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
|
|
252
|
-
"
|
|
253
|
-
"
|
|
253
|
+
"href": "/",
|
|
254
|
+
"classes": "c-button--transparent"
|
|
254
255
|
}
|
|
255
256
|
},
|
|
256
257
|
{
|
|
257
258
|
"name": "botón sólo con icono",
|
|
258
259
|
"data": {
|
|
259
|
-
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='
|
|
260
|
-
"href": "/",
|
|
260
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='presentation' 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>",
|
|
261
261
|
"classes": "c-button--primary align-bottom"
|
|
262
262
|
}
|
|
263
263
|
|
|
@@ -265,8 +265,7 @@
|
|
|
265
265
|
{
|
|
266
266
|
"name": "button peque sólo con icono",
|
|
267
267
|
"data": {
|
|
268
|
-
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='
|
|
269
|
-
"href": "/",
|
|
268
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='presentation' 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>",
|
|
270
269
|
"classes": "c-button--primary c-button--sm align-bottom"
|
|
271
270
|
}
|
|
272
271
|
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
{
|
|
217
217
|
"name": "botón enlace con target blank",
|
|
218
218
|
"data": {
|
|
219
|
-
"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='
|
|
219
|
+
"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='presentation'><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>",
|
|
220
220
|
"href": "http://www.google.com",
|
|
221
221
|
"target": "_blank",
|
|
222
222
|
"attributes": {
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
{
|
|
236
236
|
"name": "botón con icono a la derecha",
|
|
237
237
|
"data": {
|
|
238
|
-
"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='
|
|
238
|
+
"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='presentation'><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>",
|
|
239
239
|
"href": "/"
|
|
240
240
|
}
|
|
241
241
|
},
|
|
@@ -243,14 +243,14 @@
|
|
|
243
243
|
"name": "botón con icono a la izquierda",
|
|
244
244
|
"data": {
|
|
245
245
|
|
|
246
|
-
"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='
|
|
246
|
+
"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='presentation'><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",
|
|
247
247
|
"href": "/"
|
|
248
248
|
}
|
|
249
249
|
},
|
|
250
250
|
{
|
|
251
251
|
"name": "botón sólo con icono",
|
|
252
252
|
"data": {
|
|
253
|
-
"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='
|
|
253
|
+
"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='presentation' 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>",
|
|
254
254
|
"href": "/",
|
|
255
255
|
"classes": "c-button-loader--primary p-3 align-bottom"
|
|
256
256
|
}
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
{
|
|
259
259
|
"name": "button peque sólo con icono",
|
|
260
260
|
"data": {
|
|
261
|
-
"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='
|
|
261
|
+
"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='presentation' 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>",
|
|
262
262
|
"href": "/",
|
|
263
263
|
"classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
|
|
264
264
|
}
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
<!-- button-loader -->
|
|
54
54
|
{%- if element == 'a' %}
|
|
55
55
|
|
|
56
|
-
<a href="{{ params.href if params.href else '#' }}"
|
|
56
|
+
<a href="{{ params.href if params.href else '#' }}" draggable="false" {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
|
|
57
57
|
{{ iconLoader | safe }}
|
|
58
58
|
{{ iconSuccess | safe }}
|
|
59
59
|
<span class="c-button-loader__content inline-flex align-baseline">
|