desy-html 8.10.2 → 8.12.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/index.html +15 -0
- package/package.json +1 -1
- package/src/css/styles.css +2 -0
- package/src/js/aria/accordion.js +66 -34
- package/src/js/aria/notification.js +47 -23
- package/src/js/aria/toggle.js +46 -31
- package/src/js/aria/tree.js +2 -3
- package/src/js/aria/treeitem.js +54 -0
- package/src/js/desy-html.js +6 -3
- package/src/templates/components/accordion/_examples.accordion.njk +29 -0
- package/src/templates/components/accordion/_template.accordion.njk +1 -1
- package/src/templates/components/accordion/params.accordion.yaml +5 -1
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +29 -0
- package/src/templates/components/accordion-history/_template.accordion-history.njk +1 -1
- package/src/templates/components/accordion-history/params.accordion-history.yaml +5 -1
- package/src/templates/components/footer/_examples.footer.njk +73 -7
- package/src/templates/components/footer/_styles.footer.css +37 -0
- package/src/templates/components/footer/_template.footer.njk +25 -5
- package/src/templates/components/footer/params.footer.yaml +27 -3
- package/src/templates/components/header-advanced/_template.header-advanced.njk +2 -2
- package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
- package/src/templates/components/menu-navigation/params.menu-navigation.yaml +4 -0
- package/src/templates/components/menubar/_template.menubar.njk +2 -2
- package/src/templates/components/notification/_examples.notification.njk +11 -0
- package/src/templates/components/pagination/_template.pagination.njk +1 -1
- package/src/templates/components/pagination/params.pagination.yaml +2 -2
- package/src/templates/components/table-advanced/_template.table-advanced.njk +1 -1
- package/src/templates/components/table-advanced/params.table-advanced.yaml +0 -4
- package/src/templates/components/toggle/_examples.toggle.njk +53 -0
- package/src/templates/components/toggle/_styles.toggle.css +31 -0
- package/src/templates/components/toggle/_template.toggle.njk +1 -0
- package/src/templates/components/toggle/params.toggle.yaml +4 -0
- package/src/templates/components/tree/_examples.tree.njk +447 -0
- package/src/templates/components/tree/_template.tree.njk +1 -1
- package/src/templates/components/tree/params.tree.yaml +5 -1
|
@@ -78,12 +78,32 @@ text-neutral-dark {{ params.classes if params.classes }}"
|
|
|
78
78
|
</div>
|
|
79
79
|
{% endif %}
|
|
80
80
|
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
{% endif %}
|
|
81
|
+
</div>
|
|
82
|
+
<div class="overflow-hidden">
|
|
83
|
+
<div class="flex flex-wrap gap-base lg:gap-x-2xl w-full pt-lg">
|
|
85
84
|
{% if not params.noLogo %}
|
|
86
|
-
|
|
85
|
+
<div {%- if params.logo.containerClasses %} class="{{ params.logo.containerClasses }}"{% endif %}>
|
|
86
|
+
<p><a href="{%- if params.urlFeder or params.logo.url %}{%- if params.logo.url %} {{ params.logo.url }} {%- else -%} {{ params.urlFeder }}{% endif %} {%- else -%} https://www.aragon.es/-/fondos-europeos-aragon {% endif %}" class="inline-block text-sm c-link no-underline" title="Más información sobre los Fondos Europeos">
|
|
87
|
+
{% if params.logo.type == 'UE' %}
|
|
88
|
+
<span class="inline-block c-footer__logo c-footer__logo--ue" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea."></span>
|
|
89
|
+
{% elseif params.logo.type == 'FSE+' %}
|
|
90
|
+
<span class="inline-block c-footer__logo c-footer__logo--fse" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Social Europeo Plus (FSE+)."></span>
|
|
91
|
+
{% elseif params.logo.type == 'FEDER' %}
|
|
92
|
+
<span class="inline-block c-footer__logo c-footer__logo--feder" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER)."></span>
|
|
93
|
+
{% elseif params.logo.type == 'plurifondo' %}
|
|
94
|
+
<span class="inline-block c-footer__logo c-footer__logo--plurifondo" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Plurifondo."></span>
|
|
95
|
+
{% else %}
|
|
96
|
+
<span class="inline-block c-footer__logo c-footer__logo--feder" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER)."></span>
|
|
97
|
+
{% endif %}
|
|
98
|
+
</a></p>
|
|
99
|
+
</div>
|
|
100
|
+
{% endif %}
|
|
101
|
+
{% if params.icon %}
|
|
102
|
+
<div class="{% if params.icon.containerClasses %}{{ params.icon.containerClasses }}{% else %}flex-1{% endif %}">
|
|
103
|
+
{% if params.icon.html %}
|
|
104
|
+
{{ params.icon.html | safe }}
|
|
105
|
+
{% endif %}
|
|
106
|
+
</div>
|
|
87
107
|
{% endif %}
|
|
88
108
|
</div>
|
|
89
109
|
</div>
|
|
@@ -77,15 +77,39 @@ params:
|
|
|
77
77
|
- name: noLogo
|
|
78
78
|
type: boolean
|
|
79
79
|
required: false
|
|
80
|
-
description: When true, there will be no
|
|
80
|
+
description: When true, there will be no logo.
|
|
81
|
+
- name: logo
|
|
82
|
+
type: object
|
|
83
|
+
required: false
|
|
84
|
+
description: This is the optional logo. Defaults to default `FEDER` type logo with default url link that points to https://www.aragon.es/-/fondos-europeos-aragon.
|
|
85
|
+
- name: html
|
|
86
|
+
type: string
|
|
87
|
+
required: false
|
|
88
|
+
description: Use this html to insert a custom svg inline logo. If this is set, the type are not used.
|
|
89
|
+
- name: url
|
|
90
|
+
type: string
|
|
91
|
+
required: false
|
|
92
|
+
description: Add a custom link to the logo. Defaults to: https://www.aragon.es/-/fondos-europeos-aragon
|
|
93
|
+
- name: type
|
|
94
|
+
type: string
|
|
95
|
+
required: false
|
|
96
|
+
description: Predefined icon types are `UE`, `FEDER`, `FSE+` and `Plurifondo`. Defaults to `FEDER`.
|
|
97
|
+
- name: containerClasses
|
|
98
|
+
type: string
|
|
99
|
+
required: false
|
|
100
|
+
description: Classes applied to the parent div of logo. Useful to position the logo.
|
|
81
101
|
- name: icon
|
|
82
102
|
type: object
|
|
83
103
|
required: false
|
|
84
|
-
description: This is the optional icon
|
|
104
|
+
description: This is the optional icon or custom html next of logo.
|
|
85
105
|
- name: html
|
|
86
106
|
type: string
|
|
87
107
|
required: false
|
|
88
108
|
description: Use this html to insert a custom svg inline icon.
|
|
109
|
+
- name: containerClasses
|
|
110
|
+
type: string
|
|
111
|
+
required: false
|
|
112
|
+
description: Classes applied to the parent div of icon. Useful to position the icon. Defaults to `flex-1`.
|
|
89
113
|
- name: containerClasses
|
|
90
114
|
type: string
|
|
91
115
|
required: false
|
|
@@ -101,4 +125,4 @@ params:
|
|
|
101
125
|
- name: urlFeder
|
|
102
126
|
type: string
|
|
103
127
|
required: false
|
|
104
|
-
description: Add a custom link to the
|
|
128
|
+
description: (Deprecated, use logo.url instead). Add a custom link to the logo. Defaults to: https://www.aragon.es/-/fondos-europeos-aragon
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
{% if params.super.customHtml %}
|
|
28
28
|
{{ params.super.customHtml }}
|
|
29
29
|
{% else %}
|
|
30
|
-
<div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }};
|
|
30
|
+
<div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" {%- if params.super.backgroundFullColor or params.super.backgroundFullUrl %} style="{% if params.super.backgroundFullColor %}background-color: {{ params.super.backgroundFullColor }};{% endif %} {%- if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"{% endif %}>
|
|
31
31
|
<div class="container h-full mx-auto px-base">
|
|
32
32
|
<div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
|
|
33
33
|
{% if params.super.logo %}
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
{% if params.sub.customHtml %}
|
|
151
151
|
{{ params.sub.customHtml }}
|
|
152
152
|
{% else %}
|
|
153
|
-
<div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }};
|
|
153
|
+
<div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" {%- if params.sub.backgroundFullColor or params.sub.backgroundFullUrl %} style="{% if params.sub.backgroundFullColor %}background-color: {{ params.sub.backgroundFullColor }};{% endif %} {%- if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"{% endif %}>
|
|
154
154
|
<div class="container h-full mx-auto px-base">
|
|
155
155
|
<div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
|
|
156
156
|
{% if params.sub.logo %}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
|
|
4
4
|
<div class="bg-white border-b border-neutral-base">
|
|
5
5
|
<div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
|
|
6
|
-
<a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black">
|
|
7
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current"
|
|
6
|
+
<a href="{{ params.homepageUrl | default('https://www.aragon.es/') }}" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black" aria-label="Gobierno de Aragón. Ir a aragon.es">
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
|
|
8
8
|
</a>
|
|
9
9
|
{{ params.customNavigationHtml | safe if params.customNavigationHtml }}
|
|
10
10
|
</div>
|
|
@@ -44,6 +44,10 @@ params:
|
|
|
44
44
|
type: string
|
|
45
45
|
required: true
|
|
46
46
|
description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.
|
|
47
|
+
- name: classes
|
|
48
|
+
type: string
|
|
49
|
+
required: false
|
|
50
|
+
description: Classes to add to the divider.
|
|
47
51
|
- name: sub
|
|
48
52
|
type: boolean
|
|
49
53
|
required: false
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{% set subId = "sub-" + id %}
|
|
24
24
|
<li class="relative" role="none">
|
|
25
25
|
{% if item.sub %}
|
|
26
|
-
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-
|
|
26
|
+
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} id="{{ id }}"
|
|
27
27
|
{%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
|
|
28
28
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
29
29
|
<span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
</a>
|
|
33
33
|
{% endif %}
|
|
34
34
|
{% if item.href and not item.sub %}
|
|
35
|
-
<a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-
|
|
35
|
+
<a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
36
36
|
{{ item.html | safe if item.html else item.text }}
|
|
37
37
|
</a>
|
|
38
38
|
{% endif %}
|
|
@@ -111,6 +111,17 @@
|
|
|
111
111
|
"id": "with-close-button"
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
|
+
{
|
|
115
|
+
"name": "Cerrar la notificación con JavaScript",
|
|
116
|
+
"description": 'Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification("with-close-button-js")</code> para cerrar la notificación. Es necesario usar el parámetro <code>"isDismissible": true</code>',
|
|
117
|
+
"data": {
|
|
118
|
+
"title": {
|
|
119
|
+
"text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
|
|
120
|
+
},
|
|
121
|
+
"isDismissible": true,
|
|
122
|
+
"id": "with-close-button-js"
|
|
123
|
+
}
|
|
124
|
+
},
|
|
114
125
|
{
|
|
115
126
|
"name": "con icono personalizado y clases",
|
|
116
127
|
"data": {
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
{{ componentListbox({
|
|
156
156
|
"id": "items-listbox-" + idPrefix,
|
|
157
157
|
"text": params.itemsPerPage,
|
|
158
|
-
"label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
|
|
158
|
+
"label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-[0]" },
|
|
159
159
|
"doesChangeButtonText": true,
|
|
160
160
|
"classesContainer": "flex flex-wrap items-center gap-xs",
|
|
161
161
|
"classes": "c-listbox--sm c-listbox--transparent",
|
|
@@ -58,7 +58,7 @@ params:
|
|
|
58
58
|
- name: firstText
|
|
59
59
|
type: string
|
|
60
60
|
required: false
|
|
61
|
-
description: Text for the first button. Defaults to "
|
|
61
|
+
description: Text for the first button. Defaults to "Primera".
|
|
62
62
|
- name: showLast
|
|
63
63
|
type: boolean
|
|
64
64
|
required: false
|
|
@@ -70,7 +70,7 @@ params:
|
|
|
70
70
|
- name: lastText
|
|
71
71
|
type: string
|
|
72
72
|
required: false
|
|
73
|
-
description: Text for the last button. Defaults to "
|
|
73
|
+
description: Text for the last button. Defaults to "Última".
|
|
74
74
|
- name: itemsListbox
|
|
75
75
|
type: object
|
|
76
76
|
required: false
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em"><path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor"/></svg>
|
|
50
50
|
</span>
|
|
51
51
|
<span class="c-table-advanced__none">
|
|
52
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-
|
|
52
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em"><path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor"/></svg>
|
|
53
53
|
</span>
|
|
54
54
|
</span>
|
|
55
55
|
{% endif %}
|
|
@@ -87,10 +87,6 @@ params:
|
|
|
87
87
|
type: string
|
|
88
88
|
required: false
|
|
89
89
|
description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
|
|
90
|
-
- name: classes
|
|
91
|
-
type: string
|
|
92
|
-
required: false
|
|
93
|
-
description: Classes to add to the table tfoot cell.
|
|
94
90
|
- name: colspan
|
|
95
91
|
type: integer
|
|
96
92
|
required: false
|
|
@@ -18,6 +18,22 @@
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
|
+
{
|
|
22
|
+
"name": "Expandir con JavaScript",
|
|
23
|
+
"description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, open)</code>, para expandir un item , usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-expanded-js", true)</code> para mostrar el item actual expandido.',
|
|
24
|
+
"data": {
|
|
25
|
+
"classes": "c-button",
|
|
26
|
+
"id": "toggle-expanded-js",
|
|
27
|
+
"offState": {
|
|
28
|
+
"classes": "",
|
|
29
|
+
"html": 'Mostrar detalles'
|
|
30
|
+
},
|
|
31
|
+
"onState": {
|
|
32
|
+
"classes": "c-button--has-selection",
|
|
33
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Mostrar detalles</span>'
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
21
37
|
{
|
|
22
38
|
"name": "2 iconos",
|
|
23
39
|
"description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambian sus iconos. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
|
|
@@ -52,6 +68,23 @@
|
|
|
52
68
|
}
|
|
53
69
|
}
|
|
54
70
|
},
|
|
71
|
+
{
|
|
72
|
+
"name": "Pressed con Javascript",
|
|
73
|
+
"description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>, para expandir un item , usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-pressed-js", true)</code> para mostrar el item actual expandido.',
|
|
74
|
+
"data": {
|
|
75
|
+
"isExpandible": false,
|
|
76
|
+
"classes": "c-button",
|
|
77
|
+
"id": "toggle-pressed-js",
|
|
78
|
+
"offState": {
|
|
79
|
+
"classes": "",
|
|
80
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
|
|
81
|
+
},
|
|
82
|
+
"onState": {
|
|
83
|
+
"classes": "c-button--has-selection",
|
|
84
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z" fill="currentColor" transform="scale(3.42857)"/><path d="M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
},
|
|
55
88
|
{
|
|
56
89
|
"name": "Pressed",
|
|
57
90
|
"description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
|
|
@@ -107,6 +140,26 @@
|
|
|
107
140
|
}
|
|
108
141
|
}
|
|
109
142
|
},
|
|
143
|
+
{
|
|
144
|
+
"name": "isSwitch con JavaScript",
|
|
145
|
+
"description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>, para modificar el estado del Switch, usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-switch-js", true)</code> para mostrar el switch activado.',
|
|
146
|
+
"data": {
|
|
147
|
+
"classes": "",
|
|
148
|
+
"id": "toggle-switch-js",
|
|
149
|
+
"isSwitch": true,
|
|
150
|
+
"offState": {
|
|
151
|
+
"classes": "",
|
|
152
|
+
"html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
|
|
153
|
+
},
|
|
154
|
+
"onState": {
|
|
155
|
+
"classes": "",
|
|
156
|
+
"html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
|
|
157
|
+
},
|
|
158
|
+
"attributes": {
|
|
159
|
+
"aria-labelledby": "id-text"
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
},
|
|
110
163
|
{
|
|
111
164
|
"name": "isSwitch peque",
|
|
112
165
|
"data": {
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
_styles.toggle.css
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
@layer components {
|
|
6
|
+
.c-toggle {
|
|
7
|
+
[aria-expanded="true"],
|
|
8
|
+
[aria-pressed="true"],
|
|
9
|
+
[aria-checked="true"] {
|
|
10
|
+
.c-button--is-not-pressed {
|
|
11
|
+
@apply hidden;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.c-button--is-pressed {
|
|
15
|
+
@apply block;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[aria-expanded="false"],
|
|
20
|
+
[aria-pressed="false"],
|
|
21
|
+
[aria-checked="false"] {
|
|
22
|
+
.c-button--is-not-pressed {
|
|
23
|
+
@apply block;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.c-button--is-pressed {
|
|
27
|
+
@apply hidden;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
{% endif %}
|
|
18
18
|
type="button"
|
|
19
19
|
class="c-toggle__button {{ params.classes if params.classes else '' }}"
|
|
20
|
+
id="{{ params.id }}"
|
|
20
21
|
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
|
|
21
22
|
>
|
|
22
23
|
<span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
|
|
@@ -23,6 +23,10 @@ params:
|
|
|
23
23
|
type: string
|
|
24
24
|
required: true
|
|
25
25
|
description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
|
|
26
|
+
- name: id
|
|
27
|
+
type: string
|
|
28
|
+
required: false
|
|
29
|
+
description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
|
|
26
30
|
- name: classes
|
|
27
31
|
type: string
|
|
28
32
|
required: false
|