desy-html 5.2.0 → 5.2.1

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.
@@ -0,0 +1,56 @@
1
+ {% from "components/toggle/_macro.toggle.njk" import componentToggle %}
2
+
3
+ <div class="grid lg:grid-cols-2 gap-xl mb-lg">
4
+ <div>
5
+ {{ componentToggle({
6
+ "classes": "c-button c-button--transparent no-underline",
7
+ "offState": {
8
+ "classes": "",
9
+ "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>Notificar por correo electrónico</span>"
10
+ },
11
+ "onState": {
12
+ "classes": "",
13
+ "html": "Notificar por correo electrónico"
14
+ }
15
+ }) }}
16
+ <div class="pb-base"></div>
17
+ {{ componentToggle({
18
+ "classes": "c-button c-button--sm c-button--transparent no-underline",
19
+ "offState": {
20
+ "classes": "",
21
+ "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\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg><span aria-hidden=\"true\">Ocultar heredados del servicio</span><span class=\"sr-only\">Mostrar heredados del servicio</span></span>"
22
+ },
23
+ "onState": {
24
+ "classes": "",
25
+ "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\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(3.42857)\"><circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"currentColor\" /><path d=\"m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z\" fill=\"currentColor\"/></g></svg>Mostrar heredados del servicio</span>"
26
+ }
27
+ }) }}
28
+ </div>
29
+ <div>
30
+ <ul>
31
+ <li class="flex flex-wrap w-full justify-between p-base border-t border-b border-neutral-base">
32
+ <div>
33
+ <p id="id-text">Notificar por email</p>
34
+ </div>
35
+ <div>
36
+ {{ componentToggle({
37
+ "classes": "",
38
+ "isSwitch": true,
39
+ "offState": {
40
+ "classes": "",
41
+ "html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 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-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>"
42
+ },
43
+ "onState": {
44
+ "classes": "",
45
+ "html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 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-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>"
46
+ },
47
+ "attributes": {
48
+ "aria-labelledby": "id-text"
49
+ }
50
+ }) }}
51
+ </div>
52
+ </li>
53
+ </ul>
54
+ </div>
55
+
56
+ </div>
@@ -0,0 +1,457 @@
1
+ {% from "components/tree/_macro.tree.njk" import componentTree %}
2
+
3
+ <div class="grid lg:grid-cols-4 gap-xl mb-lg">
4
+ <div>
5
+ {{ componentTree({
6
+ "name": "with-a-parent-item-opened",
7
+ "classes": "mt-base",
8
+ "fieldset": {
9
+ "legend": {
10
+ "text": "Selecciona organismo"
11
+ }
12
+ },
13
+ "hint": {
14
+ "text": "Selecciona el organismo al que perteneces."
15
+ },
16
+ "idPrefix": "tree-item",
17
+ "items": [
18
+ {
19
+ "text": "Item 1",
20
+ "id": "tree-item-item-1",
21
+ "sub": {
22
+ "items": [
23
+ {
24
+ "text": "Subitem 1",
25
+ "value": "subitem-1"
26
+ },
27
+ {
28
+ "text": "Subitem 2",
29
+ "value": "subitem-2"
30
+ },
31
+ {
32
+ "text": "Subitem 3",
33
+ "value": "subitem-3"
34
+ }
35
+ ],
36
+ "attributes": {
37
+ "aria-labelledby": "tree-item-item-1"
38
+ }
39
+ }
40
+ },
41
+ {
42
+ "text": "Item 2",
43
+ "id": "tree-item-item-2",
44
+ "expanded": true,
45
+ "sub": {
46
+ "items": [
47
+ {
48
+ "text": "Subitem 1",
49
+ "value": "subitem-1"
50
+ },
51
+ {
52
+ "text": "Subitem 2",
53
+ "value": "subitem-2"
54
+ },
55
+ {
56
+ "text": "Subitem 3",
57
+ "value": "subitem-3"
58
+ }
59
+ ],
60
+ "attributes": {
61
+ "aria-labelledby": "tree-item-item-2"
62
+ }
63
+ }
64
+ },
65
+ {
66
+ "text": "Item 3",
67
+ "id": "tree-item-item-3",
68
+ "sub": {
69
+ "items": [
70
+ {
71
+ "text": "Subitem 1",
72
+ "value": "subitem-1"
73
+ },
74
+ {
75
+ "text": "Subitem 2",
76
+ "value": "subitem-2"
77
+ },
78
+ {
79
+ "text": "Subitem 3",
80
+ "value": "subitem-3"
81
+ }
82
+ ],
83
+ "attributes": {
84
+ "aria-labelledby": "tree-item-item-3"
85
+ }
86
+ }
87
+ }
88
+ ]
89
+ }) }}
90
+ </div>
91
+ <div>
92
+ {{ componentTree({
93
+ "name": "indeterminate",
94
+ "classes": "mt-base",
95
+ "type": "checkbox",
96
+ "fieldset": {
97
+ "legend": {
98
+ "text": "Selecciona organismo"
99
+ }
100
+ },
101
+ "hint": {
102
+ "text": "Selecciona el organismo al que perteneces."
103
+ },
104
+ "idPrefix": "indeterminate-example",
105
+ "items": [
106
+ {
107
+ "text": "Item 1",
108
+ "id": "indeterminate-example-item-1",
109
+ "isIndeterminate": true,
110
+ "sub": {
111
+ "items": [
112
+ {
113
+ "text": "Subitem 1",
114
+ "value": "subitem-1"
115
+ },
116
+ {
117
+ "text": "Subitem 2",
118
+ "value": "subitem-2"
119
+ },
120
+ {
121
+ "text": "Subitem 3",
122
+ "value": "subitem-3"
123
+ }
124
+ ],
125
+ "attributes": {
126
+ "aria-labelledby": "indeterminate-example-item-1"
127
+ }
128
+ }
129
+ },
130
+ {
131
+ "text": "Item 2",
132
+ "id": "indeterminate-example-item-2",
133
+ "isIndeterminate": true,
134
+ "indeterminateChecked": true,
135
+ "checked": false,
136
+ "expanded": true,
137
+ "sub": {
138
+ "items": [
139
+ {
140
+ "text": "Subitem 1",
141
+ "value": "subitem-1"
142
+ },
143
+ {
144
+ "text": "Subitem 2",
145
+ "value": "subitem-2",
146
+ "checked": true
147
+ },
148
+ {
149
+ "text": "Subitem 3",
150
+ "value": "subitem-3"
151
+ }
152
+ ],
153
+ "attributes": {
154
+ "aria-labelledby": "indeterminate-example-item-2"
155
+ }
156
+ }
157
+ },
158
+ {
159
+ "text": "Item 3",
160
+ "id": "indeterminate-example-item-3",
161
+ "isIndeterminate": true,
162
+ "sub": {
163
+ "items": [
164
+ {
165
+ "text": "Subitem 1",
166
+ "value": "subitem-1"
167
+ },
168
+ {
169
+ "text": "Subitem 2",
170
+ "value": "subitem-2"
171
+ },
172
+ {
173
+ "text": "Subitem 3",
174
+ "value": "subitem-3"
175
+ }
176
+ ],
177
+ "attributes": {
178
+ "aria-labelledby": "indeterminate-example-item-3"
179
+ }
180
+ }
181
+ }
182
+ ]
183
+ }) }}
184
+ </div>
185
+ <div>
186
+ {{ componentTree({
187
+ "name": "with-searchbar",
188
+ "classes": "mt-base",
189
+ "fieldset": {
190
+ "legend": {
191
+ "text": "Selecciona organismo"
192
+ }
193
+ },
194
+ "searchbar": {
195
+ "id": "with-searchbar-searchbar",
196
+ "label": {
197
+ "text": "Buscar"
198
+ },
199
+ "placeholder": "Buscar organismo"
200
+ },
201
+ "items": [
202
+ {
203
+ "text": "Item 1",
204
+ "id": "with-searchbar-item-1",
205
+ "sub": {
206
+ "items": [
207
+ {
208
+ "text": "Subitem 1",
209
+ "value": "subitem-1"
210
+ },
211
+ {
212
+ "text": "Subitem 2",
213
+ "value": "subitem-2"
214
+ },
215
+ {
216
+ "text": "Subitem 3",
217
+ "value": "subitem-3"
218
+ }
219
+ ],
220
+ "attributes": {
221
+ "aria-labelledby": "with-searchbar-item-1"
222
+ }
223
+ }
224
+ },
225
+ {
226
+ "text": "Item 2",
227
+ "id": "with-searchbar-item-2",
228
+ "sub": {
229
+ "items": [
230
+ {
231
+ "text": "Subitem 1",
232
+ "value": "subitem-1"
233
+ },
234
+ {
235
+ "text": "Subitem 2",
236
+ "value": "subitem-2"
237
+ },
238
+ {
239
+ "text": "Subitem 3",
240
+ "value": "subitem-3"
241
+ }
242
+ ],
243
+ "attributes": {
244
+ "aria-labelledby": "with-searchbar-item-2"
245
+ }
246
+ }
247
+ },
248
+ {
249
+ "text": "Item 3",
250
+ "id": "with-searchbar-item-3",
251
+ "sub": {
252
+ "items": [
253
+ {
254
+ "text": "Subitem 1",
255
+ "value": "subitem-1"
256
+ },
257
+ {
258
+ "text": "Subitem 2",
259
+ "value": "subitem-2"
260
+ },
261
+ {
262
+ "text": "Subitem 3",
263
+ "value": "subitem-3"
264
+ }
265
+ ],
266
+ "attributes": {
267
+ "aria-labelledby": "with-searchbar-item-3"
268
+ }
269
+ }
270
+ }
271
+ ]
272
+ }) }}
273
+ </div>
274
+ <div>
275
+ {{ componentTree({
276
+ "name": "with-many-depth-levels",
277
+ "classes": "mt-base",
278
+ "fieldset": {
279
+ "legend": {
280
+ "text": "Selecciona organismo"
281
+ }
282
+ },
283
+ "hint": {
284
+ "text": "Selecciona el organismo al que perteneces."
285
+ },
286
+ "idPrefix": "tree-item-nodes",
287
+ "items": [
288
+ {
289
+ "text": "Item 1",
290
+ "sub": {
291
+ "items": [
292
+ {
293
+ "text": "Subitem 1",
294
+ "value": "subitem-1"
295
+ },
296
+ {
297
+ "text": "Subitem 2",
298
+ "value": "subitem-2"
299
+ },
300
+ {
301
+ "text": "Subitem 3",
302
+ "value": "subitem-3"
303
+ }
304
+ ]
305
+ }
306
+ },
307
+ {
308
+ "text": "Item 2",
309
+ "sub": {
310
+ "items": [
311
+ {
312
+ "text": "Subitem 1",
313
+ "value": "subitem-1"
314
+ },
315
+ {
316
+ "text": "Subitem 2",
317
+ "value": "subitem-2"
318
+ },
319
+ {
320
+ "text": "Subitem 3",
321
+ "value": "subitem-3"
322
+ }
323
+ ]
324
+ }
325
+ },
326
+ {
327
+ "text": "Item 3",
328
+ "expanded": true,
329
+ "sub": {
330
+ "items": [
331
+ {
332
+ "text": "Subitem 1",
333
+ "sub": {
334
+ "items": [
335
+ {
336
+ "text": "Subitem 1",
337
+ "value": "subitem-1"
338
+ },
339
+ {
340
+ "text": "Subitem 2",
341
+ "value": "subitem-2"
342
+ },
343
+ {
344
+ "text": "Subitem 3",
345
+ "value": "subitem-3"
346
+ }
347
+ ]
348
+ }
349
+ },
350
+ {
351
+ "text": "Subitem 2",
352
+ "sub": {
353
+ "items": [
354
+ {
355
+ "text": "Subitem 1",
356
+ "value": "subitem-1"
357
+ },
358
+ {
359
+ "text": "Subitem 2",
360
+ "value": "subitem-2"
361
+ },
362
+ {
363
+ "text": "Subitem 3",
364
+ "value": "subitem-3"
365
+ }
366
+ ]
367
+ }
368
+ },
369
+ {
370
+ "text": "Subitem 3",
371
+ "sub": {
372
+ "items": [
373
+ {
374
+ "text": "Subitem 1",
375
+ "value": "subitem-1"
376
+ },
377
+ {
378
+ "text": "Subitem 2",
379
+ "value": "subitem-2"
380
+ },
381
+ {
382
+ "text": "Subitem 3",
383
+ "value": "subitem-3",
384
+ "expanded": true,
385
+ "sub": {
386
+ "items": [
387
+ {
388
+ "text": "Subitem 1",
389
+ "sub": {
390
+ "items": [
391
+ {
392
+ "text": "Subitem 1",
393
+ "value": "subitem-1"
394
+ },
395
+ {
396
+ "text": "Subitem 2",
397
+ "value": "subitem-2"
398
+ },
399
+ {
400
+ "text": "Subitem 3",
401
+ "value": "subitem-3"
402
+ }
403
+ ]
404
+ }
405
+ },
406
+ {
407
+ "text": "Subitem 2",
408
+ "sub": {
409
+ "items": [
410
+ {
411
+ "text": "Subitem 1",
412
+ "value": "subitem-1"
413
+ },
414
+ {
415
+ "text": "Subitem 2",
416
+ "value": "subitem-2"
417
+ },
418
+ {
419
+ "text": "Subitem 3",
420
+ "value": "subitem-3"
421
+ }
422
+ ]
423
+ }
424
+ },
425
+ {
426
+ "text": "Subitem 3",
427
+ "expanded": true,
428
+ "sub": {
429
+ "items": [
430
+ {
431
+ "text": "Subitem 1",
432
+ "value": "subitem-1"
433
+ },
434
+ {
435
+ "text": "Subitem 2",
436
+ "value": "subitem-2"
437
+ },
438
+ {
439
+ "text": "Subitem 3",
440
+ "value": "subitem-3"
441
+ }
442
+ ]
443
+ }
444
+ }
445
+ ]
446
+ }
447
+ }
448
+ ]
449
+ }
450
+ }
451
+ ]
452
+ }
453
+ }
454
+ ]
455
+ }) }}
456
+ </div>
457
+ </div>
@@ -51,6 +51,11 @@
51
51
  }) }}
52
52
  {% include "ds/_ds.example.radios.njk" %}
53
53
  <div class="pb-lg"></div>
54
+ {{ DSSubsectionTitle({
55
+ title: "Tree"
56
+ }) }}
57
+ {% include "ds/_ds.example.tree.njk" %}
58
+ <div class="pb-lg"></div>
54
59
  {{ DSSubsectionTitle({
55
60
  title: "Listbox por defecto"
56
61
  }) }}
@@ -20,6 +20,11 @@
20
20
  title: "Details"
21
21
  }) }}
22
22
  {% include "ds/_ds.example.details.njk" %}
23
+ <div class="pb-lg"></div>
24
+ {{ DSSubsectionTitle({
25
+ title: "Toggle"
26
+ }) }}
27
+ {% include "ds/_ds.example.toggle.njk" %}
23
28
  <div class="pb-lg"></div>
24
29
  {{ DSSubsectionTitle({
25
30
  title: "Tabs"
package/docs/index.html CHANGED
@@ -38,6 +38,10 @@
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.5.2.1</h3>
42
+ <ul class="text-sm">
43
+ <li>Docs improvements.</li>
44
+ </ul>
41
45
  <h3>v.5.2.0</h3>
42
46
  <ul class="text-sm">
43
47
  <li>Added toggle component.</li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "desy-html",
3
- "version": "5.2.0",
3
+ "version": "5.2.1",
4
4
  "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
5
5
  "author": {
6
6
  "name": "Desy (SDA Servicios Digitales de Aragón)",