desy-html 11.0.4 → 11.1.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/_macro.example-render.njk +2 -0
- package/docs/ds/_ds.section.textos.njk +35 -24
- package/docs/index.html +10 -0
- package/package.json +1 -1
- package/src/css/base.css +2 -0
- package/src/js/desy-html.js +1 -7
- package/src/templates/components/accordion/_examples.accordion.njk +1 -2
- package/src/templates/components/accordion/_template.accordion.njk +1 -1
- package/src/templates/components/accordion-history/_template.accordion-history.njk +1 -1
- package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +9 -0
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +2 -2
- package/src/templates/components/tree/_examples.tree.njk +131 -26
- package/src/templates/components/tree/_template.tree.njk +42 -5
- package/src/templates/components/tree/params.tree.yaml +1 -11
|
@@ -109,6 +109,7 @@ import componentTooltip %}
|
|
|
109
109
|
{% from "components/tree/_macro.tree.njk"
|
|
110
110
|
import componentTree %}
|
|
111
111
|
|
|
112
|
+
|
|
112
113
|
{% macro exampleRender(data) %}
|
|
113
114
|
{% set exampleComponent = data.data.exampleComponent %}
|
|
114
115
|
{% set examples = data.data.examples %}
|
|
@@ -252,6 +253,7 @@ import componentTree %}
|
|
|
252
253
|
{{ componentTooltip(example.data) }}
|
|
253
254
|
{% elseif exampleComponent == "tree" %}
|
|
254
255
|
{{ componentTree(example.data) }}
|
|
256
|
+
|
|
255
257
|
{% endif %}
|
|
256
258
|
</div>
|
|
257
259
|
</div>
|
|
@@ -107,111 +107,122 @@
|
|
|
107
107
|
</ul>
|
|
108
108
|
<div class="pb-2xl"></div>
|
|
109
109
|
|
|
110
|
+
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
110
111
|
{{ DSSubsectionTitle({
|
|
111
|
-
title: "
|
|
112
|
+
title: "Párrafos"
|
|
112
113
|
}) }}
|
|
113
114
|
<ul class="divide-y divide-neutral-base">
|
|
114
115
|
<li>
|
|
115
116
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
116
117
|
<dt class="col-span-2 lg:col-span-2">
|
|
117
|
-
<p
|
|
118
|
+
<p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
|
|
118
119
|
</dt>
|
|
119
120
|
<dd class="col-span-2 lg:col-span-2">
|
|
120
|
-
<p class="text-neutral-dark text-sm"><code>.c-
|
|
121
|
+
<p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
|
|
121
122
|
</dd>
|
|
122
123
|
</dl>
|
|
123
124
|
</li>
|
|
124
125
|
<li>
|
|
125
126
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
126
127
|
<dt class="col-span-2 lg:col-span-2">
|
|
127
|
-
<p
|
|
128
|
+
<p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
|
|
128
129
|
</dt>
|
|
129
130
|
<dd class="col-span-2 lg:col-span-2">
|
|
130
|
-
<p class="text-neutral-dark text-sm"><code>.c-
|
|
131
|
+
<p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
|
|
131
132
|
</dd>
|
|
132
133
|
</dl>
|
|
133
134
|
</li>
|
|
134
135
|
<li>
|
|
135
136
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
136
137
|
<dt class="col-span-2 lg:col-span-2">
|
|
137
|
-
<p
|
|
138
|
+
<p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
|
|
138
139
|
</dt>
|
|
139
140
|
<dd class="col-span-2 lg:col-span-2">
|
|
140
|
-
<p class="text-neutral-dark text-sm"><code>.c-
|
|
141
|
+
<p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
|
|
141
142
|
</dd>
|
|
142
143
|
</dl>
|
|
143
144
|
</li>
|
|
144
145
|
<li>
|
|
145
146
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
146
|
-
<dt class="col-span-2 lg:col-span-2
|
|
147
|
-
<
|
|
147
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
148
|
+
<p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
|
|
148
149
|
</dt>
|
|
149
150
|
<dd class="col-span-2 lg:col-span-2">
|
|
150
|
-
<p class="text-neutral-dark text-sm"><code>.c-
|
|
151
|
+
<p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
|
|
152
|
+
</dd>
|
|
153
|
+
</dl>
|
|
154
|
+
</li>
|
|
155
|
+
<li>
|
|
156
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
157
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
158
|
+
<p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
|
|
159
|
+
</dt>
|
|
160
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
161
|
+
<p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
|
|
151
162
|
</dd>
|
|
152
163
|
</dl>
|
|
153
164
|
</li>
|
|
154
165
|
</ul>
|
|
155
166
|
<div class="pb-2xl"></div>
|
|
156
167
|
|
|
157
|
-
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
158
168
|
{{ DSSubsectionTitle({
|
|
159
|
-
title: "
|
|
169
|
+
title: "Enlaces"
|
|
160
170
|
}) }}
|
|
161
171
|
<ul class="divide-y divide-neutral-base">
|
|
162
172
|
<li>
|
|
163
173
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
164
174
|
<dt class="col-span-2 lg:col-span-2">
|
|
165
|
-
<p class="c-
|
|
175
|
+
<p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
|
|
166
176
|
</dt>
|
|
167
177
|
<dd class="col-span-2 lg:col-span-2">
|
|
168
|
-
<p class="text-neutral-dark text-sm"
|
|
178
|
+
<p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
|
|
169
179
|
</dd>
|
|
170
180
|
</dl>
|
|
171
181
|
</li>
|
|
172
182
|
<li>
|
|
173
183
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
174
184
|
<dt class="col-span-2 lg:col-span-2">
|
|
175
|
-
<p class="c-
|
|
185
|
+
<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path 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></a> en un texto.</p>
|
|
176
186
|
</dt>
|
|
177
187
|
<dd class="col-span-2 lg:col-span-2">
|
|
178
|
-
<p class="text-neutral-dark text-sm"
|
|
188
|
+
<p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
|
|
179
189
|
</dd>
|
|
180
190
|
</dl>
|
|
181
191
|
</li>
|
|
182
192
|
<li>
|
|
183
193
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
184
194
|
<dt class="col-span-2 lg:col-span-2">
|
|
185
|
-
<p class="c-
|
|
195
|
+
<p >Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
|
|
186
196
|
</dt>
|
|
187
197
|
<dd class="col-span-2 lg:col-span-2">
|
|
188
|
-
<p class="text-neutral-dark text-sm"
|
|
198
|
+
<p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
|
|
189
199
|
</dd>
|
|
190
200
|
</dl>
|
|
191
201
|
</li>
|
|
192
202
|
<li>
|
|
193
203
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
194
204
|
<dt class="col-span-2 lg:col-span-2">
|
|
195
|
-
<p class="
|
|
205
|
+
<p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
|
|
196
206
|
</dt>
|
|
197
207
|
<dd class="col-span-2 lg:col-span-2">
|
|
198
|
-
<p class="text-neutral-dark text-sm"
|
|
208
|
+
<p class="text-neutral-dark text-sm"><code>.c-link.c-link--neutral</code> - <code>normal</code> - <code>underline</code> - <code>neutral-dark</code> - hover: <code>black</code></p>
|
|
199
209
|
</dd>
|
|
200
210
|
</dl>
|
|
201
211
|
</li>
|
|
202
212
|
<li>
|
|
203
213
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
204
|
-
<dt class="col-span-2 lg:col-span-2">
|
|
205
|
-
<
|
|
214
|
+
<dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
|
|
215
|
+
<a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
|
|
206
216
|
</dt>
|
|
207
|
-
<dd class="col-span-2 lg:col-span-2
|
|
208
|
-
<p class="text-neutral-dark text-sm"
|
|
217
|
+
<dd class="col-span-2 lg:col-span-2">
|
|
218
|
+
<p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
|
|
209
219
|
</dd>
|
|
210
220
|
</dl>
|
|
211
221
|
</li>
|
|
212
222
|
</ul>
|
|
213
223
|
<div class="pb-2xl"></div>
|
|
214
224
|
|
|
225
|
+
|
|
215
226
|
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
216
227
|
{{ DSSubsectionTitle({
|
|
217
228
|
title: "Listas"
|
package/docs/index.html
CHANGED
|
@@ -38,6 +38,16 @@
|
|
|
38
38
|
|
|
39
39
|
<h2>Changelog (English)</h2>
|
|
40
40
|
<p>What's new in the latest version of desy-html</p>
|
|
41
|
+
<h3>v.11.1.0</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Added Tree navigation param to use the Tree as a folded menu.</li>
|
|
44
|
+
<li>Fixes in Tree, Accordion and Accordion history.</li>
|
|
45
|
+
</ul>
|
|
46
|
+
<h3>v.11.0.5</h3>
|
|
47
|
+
<ul class="text-sm">
|
|
48
|
+
<li>Minor fixes in breadcrumbs.</li>
|
|
49
|
+
<li>Added default font size and line height to body to improve accessibility.</li>
|
|
50
|
+
</ul>
|
|
41
51
|
<h3>v.11.0.4</h3>
|
|
42
52
|
<ul class="text-sm">
|
|
43
53
|
<li>Fixed previous responsive with Tailwind CSS breakpoint prefixes.</li>
|
package/package.json
CHANGED
package/src/css/base.css
CHANGED
package/src/js/desy-html.js
CHANGED
|
@@ -363,13 +363,7 @@ export function treeComponent(aria) {
|
|
|
363
363
|
|
|
364
364
|
if (moduleValue == 'c-tree__item'){
|
|
365
365
|
modules[item].addEventListener('click', function (event) {
|
|
366
|
-
|
|
367
|
-
if ((current.tagName == 'INPUT')||(current.tagName == 'LABEL')) {
|
|
368
|
-
event.stopPropagation();
|
|
369
|
-
} else {
|
|
370
|
-
event.stopPropagation();
|
|
371
|
-
event.preventDefault();
|
|
372
|
-
}
|
|
366
|
+
event.stopPropagation();
|
|
373
367
|
});
|
|
374
368
|
}
|
|
375
369
|
}
|
|
@@ -230,10 +230,9 @@
|
|
|
230
230
|
},
|
|
231
231
|
{
|
|
232
232
|
"name": "Mostrar todo u ocultar todo con JavaScript",
|
|
233
|
-
"description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el
|
|
233
|
+
"description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el idPrefix del acordeón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-example-js", true)</code> para mostrar todos los items expandidos.',
|
|
234
234
|
"data": {
|
|
235
235
|
"idPrefix": "show-all-accordion-example-js",
|
|
236
|
-
"id": "show-all-accordion-button-js",
|
|
237
236
|
"headingLevel": 3,
|
|
238
237
|
"heading": {
|
|
239
238
|
"text": "Encabezado de acordeón"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
{% endif %}
|
|
39
39
|
{% endif %}
|
|
40
40
|
{% if params.showControl %}
|
|
41
|
-
<button id="{{
|
|
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">
|
|
42
42
|
Mostrar todo
|
|
43
43
|
</button>
|
|
44
44
|
{% endif %}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
{% endif %}
|
|
40
40
|
{% endif %}
|
|
41
41
|
{% if params.showControl %}
|
|
42
|
-
<button id="{{
|
|
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">
|
|
43
43
|
Mostrar todo
|
|
44
44
|
</button>
|
|
45
45
|
{% endif %}
|
|
@@ -47,6 +47,11 @@
|
|
|
47
47
|
@apply lg:inline-flex;
|
|
48
48
|
@apply leading-loose;
|
|
49
49
|
@apply lg:leading-tight;
|
|
50
|
+
|
|
51
|
+
a, span {
|
|
52
|
+
@apply whitespace-normal;
|
|
53
|
+
@apply lg:truncate;
|
|
54
|
+
}
|
|
50
55
|
}
|
|
51
56
|
}
|
|
52
57
|
|
|
@@ -55,6 +60,10 @@
|
|
|
55
60
|
li {
|
|
56
61
|
@apply lg:inline;
|
|
57
62
|
@apply lg:leading-loose;
|
|
63
|
+
|
|
64
|
+
a, span {
|
|
65
|
+
@apply lg:whitespace-normal;
|
|
66
|
+
}
|
|
58
67
|
}
|
|
59
68
|
}
|
|
60
69
|
|
|
@@ -52,7 +52,7 @@ lg:grid-cols-max-content-8{% endif %}
|
|
|
52
52
|
{% endif %}
|
|
53
53
|
{% for item in params.items %}
|
|
54
54
|
{% if item.href %}
|
|
55
|
-
<li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
55
|
+
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
56
56
|
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
57
57
|
{% if loop.last %}
|
|
58
58
|
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
@@ -62,7 +62,7 @@ lg:grid-cols-max-content-8{% endif %}
|
|
|
62
62
|
</a>
|
|
63
63
|
</li>
|
|
64
64
|
{% else %}
|
|
65
|
-
<li class="flex items-baseline mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
65
|
+
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
66
66
|
<span class="no-underline {%- if loop.last %} text-black{% endif %} truncate"{% if loop.last %} aria-current="page"{% endif %}>
|
|
67
67
|
{% if loop.last %}
|
|
68
68
|
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
{
|
|
4
4
|
"name": "por defecto",
|
|
5
5
|
"data": {
|
|
6
|
-
"name": "por
|
|
6
|
+
"name": "por-defecto",
|
|
7
7
|
"classes": "mt-base",
|
|
8
|
-
"id": "tree-default",
|
|
9
8
|
"fieldset": {
|
|
10
9
|
"legend": {
|
|
11
10
|
"text": "Selecciona organismo"
|
|
@@ -170,6 +169,117 @@
|
|
|
170
169
|
]
|
|
171
170
|
}
|
|
172
171
|
},
|
|
172
|
+
{
|
|
173
|
+
"name": "tree navigation",
|
|
174
|
+
"data": {
|
|
175
|
+
"name": "tree-nav",
|
|
176
|
+
"classes": "mt-base",
|
|
177
|
+
"type": "navigation",
|
|
178
|
+
"idPrefix": "navigation-example",
|
|
179
|
+
"items": [
|
|
180
|
+
{
|
|
181
|
+
"text": "Item 1",
|
|
182
|
+
"id": "navigation-example-item-1",
|
|
183
|
+
"sub": {
|
|
184
|
+
"items": [
|
|
185
|
+
{
|
|
186
|
+
"text": "Subitem 1",
|
|
187
|
+
"value": "subitem-1",
|
|
188
|
+
"href": "#"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"text": "Subitem 2",
|
|
192
|
+
"value": "subitem-2",
|
|
193
|
+
"href": "#"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"text": "Subitem 3",
|
|
197
|
+
"value": "subitem-3",
|
|
198
|
+
"sub": {
|
|
199
|
+
"items": [
|
|
200
|
+
{
|
|
201
|
+
"text": "Subitem 1",
|
|
202
|
+
"value": "subitem-1",
|
|
203
|
+
"href": "#"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"text": "Subitem 2",
|
|
207
|
+
"value": "subitem-2",
|
|
208
|
+
"href": "#"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"text": "Subitem 3",
|
|
212
|
+
"value": "subitem-3",
|
|
213
|
+
"href": "#",
|
|
214
|
+
"active": true
|
|
215
|
+
}
|
|
216
|
+
],
|
|
217
|
+
"attributes": {
|
|
218
|
+
"aria-labelledby": "navigation-example-item-3"
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
"attributes": {
|
|
224
|
+
"aria-labelledby": "navigation-example-item-1"
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"text": "Item 2",
|
|
230
|
+
"id": "navigation-example-item-2",
|
|
231
|
+
"sub": {
|
|
232
|
+
"items": [
|
|
233
|
+
{
|
|
234
|
+
"text": "Subitem 1",
|
|
235
|
+
"value": "subitem-1",
|
|
236
|
+
"href": "#"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"text": "Subitem 2",
|
|
240
|
+
"value": "subitem-2",
|
|
241
|
+
"href": "#"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"text": "Subitem 3",
|
|
245
|
+
"value": "subitem-3",
|
|
246
|
+
"href": "#"
|
|
247
|
+
}
|
|
248
|
+
],
|
|
249
|
+
"attributes": {
|
|
250
|
+
"aria-labelledby": "navigation-example-item-2"
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"text": "Item 3",
|
|
256
|
+
"id": "navigation-example-item-3",
|
|
257
|
+
"sub": {
|
|
258
|
+
"items": [
|
|
259
|
+
{
|
|
260
|
+
"text": "Subitem 1",
|
|
261
|
+
"value": "subitem-1",
|
|
262
|
+
"href": "#"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"text": "Subitem 2",
|
|
266
|
+
"value": "subitem-2",
|
|
267
|
+
"href": "#"
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
"text": "Subitem 3",
|
|
271
|
+
"value": "subitem-3",
|
|
272
|
+
"href": "#"
|
|
273
|
+
}
|
|
274
|
+
],
|
|
275
|
+
"attributes": {
|
|
276
|
+
"aria-labelledby": "navigation-example-item-3"
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
]
|
|
281
|
+
}
|
|
282
|
+
},
|
|
173
283
|
{
|
|
174
284
|
"name": "con pista y error",
|
|
175
285
|
"data": {
|
|
@@ -911,7 +1021,7 @@
|
|
|
911
1021
|
"hint": {
|
|
912
1022
|
"text": "Selecciona el organismo al que perteneces."
|
|
913
1023
|
},
|
|
914
|
-
"idPrefix": "
|
|
1024
|
+
"idPrefix": "with-a-parent-item-opened",
|
|
915
1025
|
"items": [
|
|
916
1026
|
{
|
|
917
1027
|
"text": "Item 1",
|
|
@@ -991,7 +1101,6 @@
|
|
|
991
1101
|
"data": {
|
|
992
1102
|
"name": "with-many-depth-levels",
|
|
993
1103
|
"classes": "mt-base",
|
|
994
|
-
"id": "tree-item-deep",
|
|
995
1104
|
"fieldset": {
|
|
996
1105
|
"legend": {
|
|
997
1106
|
"text": "Selecciona organismo"
|
|
@@ -1000,7 +1109,7 @@
|
|
|
1000
1109
|
"hint": {
|
|
1001
1110
|
"text": "Selecciona el organismo al que perteneces."
|
|
1002
1111
|
},
|
|
1003
|
-
"idPrefix": "tree-item-nodes",
|
|
1112
|
+
"idPrefix": "tree-item-nodes-with-many-depth-levels",
|
|
1004
1113
|
"items": [
|
|
1005
1114
|
{
|
|
1006
1115
|
"text": "Item 1",
|
|
@@ -1652,7 +1761,7 @@
|
|
|
1652
1761
|
"hint": {
|
|
1653
1762
|
"text": "Selecciona el organismo al que perteneces."
|
|
1654
1763
|
},
|
|
1655
|
-
"idPrefix": "
|
|
1764
|
+
"idPrefix": "with-idprefix",
|
|
1656
1765
|
"items": [
|
|
1657
1766
|
{
|
|
1658
1767
|
"text": "Opción 1",
|
|
@@ -1735,7 +1844,7 @@
|
|
|
1735
1844
|
"text": "Selecciona el organismo al que perteneces."
|
|
1736
1845
|
},
|
|
1737
1846
|
"attributes": {
|
|
1738
|
-
"
|
|
1847
|
+
"data-attribute-1": "tree-id-example-attribute"
|
|
1739
1848
|
},
|
|
1740
1849
|
"items": [
|
|
1741
1850
|
{
|
|
@@ -1767,18 +1876,18 @@
|
|
|
1767
1876
|
"expanded": true,
|
|
1768
1877
|
"sub": {
|
|
1769
1878
|
"attributes": {
|
|
1770
|
-
"sub-
|
|
1771
|
-
"sub-
|
|
1772
|
-
"sub-
|
|
1879
|
+
"data-sub-attribute-1": "sub-value-A",
|
|
1880
|
+
"data-sub-attribute-2": "sub-value-B",
|
|
1881
|
+
"data-sub-attribute-3": "sub-value-C"
|
|
1773
1882
|
},
|
|
1774
1883
|
"items": [
|
|
1775
1884
|
{
|
|
1776
1885
|
"text": "Item",
|
|
1777
1886
|
"value": "item",
|
|
1778
1887
|
"attributes": {
|
|
1779
|
-
"item-
|
|
1780
|
-
"item-
|
|
1781
|
-
"item-
|
|
1888
|
+
"data-item-attribute-1": "item-value-A",
|
|
1889
|
+
"data-item-attribute-2": "item-value-B",
|
|
1890
|
+
"data-item-attribute-3": "item-value-C"
|
|
1782
1891
|
}
|
|
1783
1892
|
},
|
|
1784
1893
|
{
|
|
@@ -1817,15 +1926,14 @@
|
|
|
1817
1926
|
"name": "Mostrar u ocultar un item con JavaScript",
|
|
1818
1927
|
"description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar todos los items, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-js", "tree-item-js-example-item-1", true)</code> para mostrar todos los items expandidos.',
|
|
1819
1928
|
"data": {
|
|
1820
|
-
"name": "
|
|
1929
|
+
"name": "tree-item-js",
|
|
1821
1930
|
"classes": "mt-base",
|
|
1822
|
-
"id": "tree-item-js",
|
|
1823
1931
|
"fieldset": {
|
|
1824
1932
|
"legend": {
|
|
1825
1933
|
"text": "Selecciona organismo"
|
|
1826
1934
|
}
|
|
1827
1935
|
},
|
|
1828
|
-
"idPrefix": "tree-item-js
|
|
1936
|
+
"idPrefix": "tree-item-js",
|
|
1829
1937
|
"items": [
|
|
1830
1938
|
{
|
|
1831
1939
|
"text": "Item 1",
|
|
@@ -1903,15 +2011,14 @@
|
|
|
1903
2011
|
"name": "Mostrar u ocultar todos los items con JavaScript",
|
|
1904
2012
|
"description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements, show)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-js", ["tree-multiple-items-js-1", "tree-multiple-items-js-2"], true)</code> para mostrar todos los items expandidos.',
|
|
1905
2013
|
"data": {
|
|
1906
|
-
"name": "
|
|
2014
|
+
"name": "tree-multiple-items-js",
|
|
1907
2015
|
"classes": "mt-base",
|
|
1908
|
-
"id": "tree-multiple-items-js",
|
|
1909
2016
|
"fieldset": {
|
|
1910
2017
|
"legend": {
|
|
1911
2018
|
"text": "Selecciona organismo"
|
|
1912
2019
|
}
|
|
1913
2020
|
},
|
|
1914
|
-
"idPrefix": "tree-multiple-items-js
|
|
2021
|
+
"idPrefix": "tree-multiple-items-js",
|
|
1915
2022
|
"items": [
|
|
1916
2023
|
{
|
|
1917
2024
|
"text": "Item 1",
|
|
@@ -1989,15 +2096,14 @@
|
|
|
1989
2096
|
"name": "Mostrar u ocultar todos los items con JavaScript con diferentes estados",
|
|
1990
2097
|
"description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-states-js", [["tree-multiple-items-states-item-1", true], ["tree-multiple-items-states-item-3", false]])</code> para mostrar todos los items expandidos.',
|
|
1991
2098
|
"data": {
|
|
1992
|
-
"name": "
|
|
2099
|
+
"name": "tree-multiple-items-states-js",
|
|
1993
2100
|
"classes": "mt-base",
|
|
1994
|
-
"id": "tree-multiple-items-states-js",
|
|
1995
2101
|
"fieldset": {
|
|
1996
2102
|
"legend": {
|
|
1997
2103
|
"text": "Selecciona organismo"
|
|
1998
2104
|
}
|
|
1999
2105
|
},
|
|
2000
|
-
"idPrefix": "tree-multiple-items-states-
|
|
2106
|
+
"idPrefix": "tree-multiple-items-states-js",
|
|
2001
2107
|
"items": [
|
|
2002
2108
|
{
|
|
2003
2109
|
"text": "Item 1",
|
|
@@ -2073,11 +2179,10 @@
|
|
|
2073
2179
|
},
|
|
2074
2180
|
{
|
|
2075
2181
|
"name": "Mostrar u ocultar un item con muchos niveles de profundidad con JavaScript ",
|
|
2076
|
-
"description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar un item, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-deep-js", "sub-sub-sub-tree-item-
|
|
2182
|
+
"description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar un item, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-deep-js", "sub-sub-sub-tree-item-deep-js-2-2-2-0", true)</code> se abrirá el último elemento del arbol, y el resto de elementos superiores.',
|
|
2077
2183
|
"data": {
|
|
2078
|
-
"name": "
|
|
2184
|
+
"name": "tree-item-deep-js",
|
|
2079
2185
|
"classes": "mt-base",
|
|
2080
|
-
"id": "tree-item-deep-js",
|
|
2081
2186
|
"fieldset": {
|
|
2082
2187
|
"legend": {
|
|
2083
2188
|
"text": "Selecciona organismo"
|
|
@@ -2086,7 +2191,7 @@
|
|
|
2086
2191
|
"hint": {
|
|
2087
2192
|
"text": "Selecciona el organismo al que perteneces."
|
|
2088
2193
|
},
|
|
2089
|
-
"idPrefix": "tree-item-
|
|
2194
|
+
"idPrefix": "tree-item-deep-js",
|
|
2090
2195
|
"items": [
|
|
2091
2196
|
{
|
|
2092
2197
|
"text": "Item 1",
|
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
{#- fieldset is false by default -#}
|
|
21
21
|
{% set hasFieldset = true if params.fieldset else false %}
|
|
22
22
|
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
{% set ariaLabel = params.ariaLabel if params.ariaLabel %}
|
|
26
|
+
|
|
27
|
+
|
|
23
28
|
{#- macro to generate checkboxes -#}
|
|
24
29
|
{% macro checkboxItem(item, id, name, type) %}
|
|
25
30
|
{% set hasHint = true if item.hint.text or item.hint.html %}
|
|
@@ -28,6 +33,7 @@
|
|
|
28
33
|
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
|
|
29
34
|
<div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
|
|
30
35
|
<div class="relative flex items-start py-xs">
|
|
36
|
+
{% if type == 'checkbox' or type == 'radio' or type == undefined %}
|
|
31
37
|
<div class="flex items-center mx-sm">
|
|
32
38
|
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
|
|
33
39
|
{{-" checked" if item.checked }}
|
|
@@ -55,6 +61,26 @@
|
|
|
55
61
|
}) | indent(8) | trim }}
|
|
56
62
|
{% endif %}
|
|
57
63
|
</div>
|
|
64
|
+
{% endif %}
|
|
65
|
+
{% if type == 'navigation' %}
|
|
66
|
+
{% if item.href %}
|
|
67
|
+
<a {%- if id %} id="{{ id }}-link"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
68
|
+
{% if item.active %}
|
|
69
|
+
<strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
|
|
70
|
+
{% else %}
|
|
71
|
+
{{ item.html | safe if item.html else item.text }}
|
|
72
|
+
{% endif %}
|
|
73
|
+
</a>
|
|
74
|
+
{% else %}
|
|
75
|
+
<span {%- if id %} id="{{ id }}-link"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
76
|
+
{% if item.active %}
|
|
77
|
+
<strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
|
|
78
|
+
{% else %}
|
|
79
|
+
{{ item.html | safe if item.html else item.text }}
|
|
80
|
+
{% endif %}
|
|
81
|
+
</span>
|
|
82
|
+
{% endif %}
|
|
83
|
+
{% endif %}
|
|
58
84
|
</div>
|
|
59
85
|
</div>
|
|
60
86
|
{% endmacro %}
|
|
@@ -65,7 +91,7 @@
|
|
|
65
91
|
<div class="w-full h-full">
|
|
66
92
|
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
|
|
67
93
|
{%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
68
|
-
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
|
|
94
|
+
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
|
|
69
95
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
|
|
70
96
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
|
|
71
97
|
</span>
|
|
@@ -77,7 +103,7 @@
|
|
|
77
103
|
{% endif %}
|
|
78
104
|
{% if itemNode.sub.items %}
|
|
79
105
|
{% set subLevel = subLevel + "sub-" %}
|
|
80
|
-
<ul role="group" class=
|
|
106
|
+
<ul role="group" class='c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}' {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
81
107
|
{% for subitem in itemNode.sub.items %}
|
|
82
108
|
{% if subitem %}
|
|
83
109
|
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
|
|
@@ -86,11 +112,16 @@
|
|
|
86
112
|
{%- else -%}
|
|
87
113
|
{%- set subId = subLevel + id + "-" + loop.index0 -%}
|
|
88
114
|
{%- endif %}
|
|
115
|
+
{% if type == 'navigation' %}
|
|
116
|
+
<li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
|
|
117
|
+
{% else %}
|
|
89
118
|
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
|
|
119
|
+
{%- endif %}
|
|
120
|
+
|
|
90
121
|
{% if subitem.sub %}
|
|
91
122
|
{{ childrenTree(subitem, subId, name, type) | trim | indent(12) }}
|
|
92
123
|
{% else %}
|
|
93
|
-
<div {%- if subitem.id %}
|
|
124
|
+
<div {%- if subitem.id %} -link{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
94
125
|
{% if subitem.active %}
|
|
95
126
|
<div class="font-bold">
|
|
96
127
|
{{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
|
|
@@ -135,7 +166,7 @@
|
|
|
135
166
|
{% if params.searchbar %}
|
|
136
167
|
{{ componentSearchbar(params.searchbar) }}
|
|
137
168
|
{% endif %}
|
|
138
|
-
<ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{
|
|
169
|
+
<ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
|
|
139
170
|
{% for item in params.items %}
|
|
140
171
|
{% if item %}
|
|
141
172
|
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
|
|
@@ -150,7 +181,7 @@
|
|
|
150
181
|
{% set itemHintId = id + "-item-hint" if hasHint else "" %}
|
|
151
182
|
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
|
|
152
183
|
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
|
|
153
|
-
<li id="{{ id }}" class="c-tree__item ml-4 focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}
|
|
184
|
+
<li id="{{ id }}" class="{%- if t %}{% endif %}c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
|
|
154
185
|
{{ childrenTree(item, id, name, params.type) | trim }}
|
|
155
186
|
</li>
|
|
156
187
|
{% endif %}
|
|
@@ -159,6 +190,11 @@
|
|
|
159
190
|
{% endset -%}
|
|
160
191
|
|
|
161
192
|
{% set treeContent %}
|
|
193
|
+
{% if params.type == 'navigation' %}
|
|
194
|
+
<nav {%- if params.ariaLabel%} aria-label= "{{params.ariaLabel}}" {% else %} aria-label= "Árbol de navegación" {% endif -%} >
|
|
195
|
+
{{ innerHtml | safe }}
|
|
196
|
+
</nav>
|
|
197
|
+
{% elseif params.type == 'checkbox' or params.type == 'radio' or params.type == undefined %}
|
|
162
198
|
{% if params.fieldset %}
|
|
163
199
|
{% call componentFieldset({
|
|
164
200
|
describedBy: describedBy,
|
|
@@ -173,6 +209,7 @@
|
|
|
173
209
|
{% else %}
|
|
174
210
|
{{ innerHtml | safe }}
|
|
175
211
|
{% endif %}
|
|
212
|
+
{% endif %}
|
|
176
213
|
{% endset %}
|
|
177
214
|
|
|
178
215
|
<!-- tree -->
|
|
@@ -2,7 +2,7 @@ params:
|
|
|
2
2
|
- name: type
|
|
3
3
|
type: string
|
|
4
4
|
required: false
|
|
5
|
-
description: Type of input control to render. Admitted values are `checkbox` and `radio` or not set. Defaults to `radio`.
|
|
5
|
+
description: Type of input control to render. Admitted values are `navigation`, `checkbox` and `radio` or not set. Defaults to `radio`.
|
|
6
6
|
- name: searchbar
|
|
7
7
|
type: component
|
|
8
8
|
required: false
|
|
@@ -155,13 +155,3 @@ params:
|
|
|
155
155
|
type: object
|
|
156
156
|
required: false
|
|
157
157
|
description: HTML attributes (for example data attributes) to add to the tree container.
|
|
158
|
-
|
|
159
|
-
accessibilityCriteria: |
|
|
160
|
-
## sub reveals
|
|
161
|
-
Must:
|
|
162
|
-
- be visible as static content if JavaScript is unavailable or fails
|
|
163
|
-
- be hidden if JavaScript is available and is collapsed
|
|
164
|
-
- indicate if content is expanded or collapsed
|
|
165
|
-
- indicate that there is collapsed content to interact with
|
|
166
|
-
|
|
167
|
-
Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575
|