desy-html 7.3.1 → 7.4.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.
Files changed (57) hide show
  1. package/docs/_macro.example-render.njk +1 -1
  2. package/docs/index.html +4 -0
  3. package/package.json +1 -1
  4. package/src/templates/components/accordion/_examples.accordion.njk +108 -104
  5. package/src/templates/components/accordion-history/_examples.accordion-history.njk +116 -112
  6. package/src/templates/components/alert/_examples.alert.njk +10 -6
  7. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +52 -52
  8. package/src/templates/components/button/_examples.button.njk +71 -71
  9. package/src/templates/components/button-loader/_examples.button-loader.njk +72 -72
  10. package/src/templates/components/card/_examples.card.njk +43 -43
  11. package/src/templates/components/character-count/_examples.character-count.njk +35 -33
  12. package/src/templates/components/checkboxes/_examples.checkboxes.njk +200 -201
  13. package/src/templates/components/collapsible/_examples.collapsible.njk +24 -9
  14. package/src/templates/components/date-input/_examples.date-input.njk +14 -14
  15. package/src/templates/components/description-list/_examples.description-list.njk +45 -44
  16. package/src/templates/components/details/_examples.details.njk +17 -16
  17. package/src/templates/components/dialog/_examples.dialog.njk +5 -6
  18. package/src/templates/components/dropdown/_examples.dropdown.njk +34 -35
  19. package/src/templates/components/error-message/_examples.error-message.njk +8 -2
  20. package/src/templates/components/error-summary/_examples.error-summary.njk +19 -19
  21. package/src/templates/components/fieldset/_examples.fieldset.njk +27 -25
  22. package/src/templates/components/file-upload/_examples.file-upload.njk +7 -7
  23. package/src/templates/components/footer/_examples.footer.njk +24 -24
  24. package/src/templates/components/header/_examples.header.njk +12 -12
  25. package/src/templates/components/header-mini/_examples.header-mini.njk +5 -5
  26. package/src/templates/components/hint/_examples.hint.njk +4 -4
  27. package/src/templates/components/input/_examples.input.njk +66 -64
  28. package/src/templates/components/input-group/_examples.input-group.njk +15 -17
  29. package/src/templates/components/item/_examples.item.njk +21 -20
  30. package/src/templates/components/label/_examples.label.njk +11 -9
  31. package/src/templates/components/links-list/_examples.links-list.njk +34 -34
  32. package/src/templates/components/listbox/_examples.listbox.njk +146 -146
  33. package/src/templates/components/media-object/_examples.media-object.njk +7 -7
  34. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +54 -54
  35. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +65 -66
  36. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +71 -71
  37. package/src/templates/components/menubar/_examples.menubar.njk +42 -42
  38. package/src/templates/components/modal/_examples.modal.njk +21 -15
  39. package/src/templates/components/modal/_template.modal.njk +5 -5
  40. package/src/templates/components/nav/_examples.nav.njk +66 -66
  41. package/src/templates/components/notification/_examples.notification.njk +14 -13
  42. package/src/templates/components/pagination/_examples.pagination.njk +7 -6
  43. package/src/templates/components/pill/_examples.pill.njk +29 -29
  44. package/src/templates/components/radios/_examples.radios.njk +153 -142
  45. package/src/templates/components/searchbar/_examples.searchbar.njk +11 -11
  46. package/src/templates/components/select/_examples.select.njk +63 -63
  47. package/src/templates/components/skip-link/_examples.skip-link.njk +4 -4
  48. package/src/templates/components/spinner/_examples.spinner.njk +11 -11
  49. package/src/templates/components/status/_examples.status.njk +4 -4
  50. package/src/templates/components/status-item/_examples.status-item.njk +21 -21
  51. package/src/templates/components/table/_examples.table.njk +58 -56
  52. package/src/templates/components/table-advanced/_examples.table-advanced.njk +83 -83
  53. package/src/templates/components/tabs/_examples.tabs.njk +30 -29
  54. package/src/templates/components/textarea/_examples.textarea.njk +28 -27
  55. package/src/templates/components/toggle/_examples.toggle.njk +10 -11
  56. package/src/templates/components/tooltip/_examples.tooltip.njk +9 -9
  57. package/src/templates/components/tree/_examples.tree.njk +58 -57
package/src/templates/components/accordion-history/_examples.accordion-history.njk CHANGED
@@ -1,88 +1,88 @@
1
1
  {% set exampleComponent = "accordion-history" %}
2
2
  {% set examples = [
3
3
  {
4
- "name": "default",
5
- "description": "Assumes allowMultiple and allowToggle are both false",
4
+ "name": "Por defecto",
5
+ "description": 'Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.',
6
6
  "data": {
7
7
  "idPrefix": "accordion-example",
8
8
  "headingLevel": 3,
9
9
  "items": [
10
10
  {
11
- "headerText": "Accordion Item 1",
12
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
11
+ "headerText": "Item de acordeón 1",
12
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
13
13
  },
14
14
  {
15
- "headerText": "Accordion Item 2",
16
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
15
+ "headerText": "Item de acordeón 2",
16
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
17
17
  },
18
18
  {
19
- "headerText": "Accordion Item 3",
20
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
19
+ "headerText": "Item de acordeón 3",
20
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
21
21
  }
22
22
  ]
23
23
  }
24
24
  },
25
25
  {
26
- "name": "with status",
27
- "description": "Set status to each item: past, current and pending",
26
+ "name": "Con estado",
27
+ "description": 'Usa el parámetro <code>"status": past/current/pending</code> para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro <code>"status": muted/currentmuted</code> para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.',
28
28
  "data": {
29
29
  "idPrefix": "accordion-status",
30
30
  "headingLevel": 3,
31
31
  "items": [
32
32
  {
33
- "headerText": "Accordion Item muted",
34
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
33
+ "headerText": "Item de acordeón muteado",
34
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
35
35
  "status": "muted"
36
36
  },
37
37
  {
38
- "headerText": "Accordion Item currentmuted",
39
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
38
+ "headerText": "Item de acordeón actual muteado",
39
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
40
40
  "status": "currentmuted"
41
41
  },
42
42
  {
43
- "headerText": "Accordion Item past",
44
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
43
+ "headerText": "Item de acordeón pasado",
44
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
45
45
  "status": "past"
46
46
  },
47
47
  {
48
- "headerText": "Accordion Item current",
49
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
48
+ "headerText": "Item de acordeón actual",
49
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
50
50
  "status": "current"
51
51
  },
52
52
  {
53
- "headerText": "Accordion Item pending",
54
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
53
+ "headerText": "Item de acordeón pendiente",
54
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
55
55
  "status": "pending"
56
56
  }
57
57
  ]
58
58
  }
59
59
  },
60
60
  {
61
- "name": "Allow multiple",
62
- "description": "allowMultiple = true. Assumes allowToggle is true",
61
+ "name": "Permite múltiples",
62
+ "description": 'Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.',
63
63
  "data": {
64
64
  "idPrefix": "allowmultiple-example",
65
65
  "headingLevel": 3,
66
66
  "allowMultiple": true,
67
67
  "items": [
68
68
  {
69
- "headerText": "Accordion Item 1",
70
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
69
+ "headerText": "Item de acordeón 1",
70
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
71
71
  },
72
72
  {
73
- "headerText": "Accordion Item 2",
74
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
73
+ "headerText": "Item de acordeón 2",
74
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
75
75
  },
76
76
  {
77
- "headerText": "Accordion Item 3",
78
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
77
+ "headerText": "Item de acordeón 3",
78
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
79
79
  }
80
80
  ]
81
81
  }
82
82
  },
83
83
  {
84
- "name": "Allow toggle",
85
- "description": "allowToggle = true. Assumes allowMultiple is false",
84
+ "name": "Permite cerrar",
85
+ "description": 'Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.',
86
86
  "data": {
87
87
  "idPrefix": "allowtoggle-example",
88
88
  "headingLevel": 3,
@@ -90,70 +90,72 @@
90
90
  "showControl": false,
91
91
  "items": [
92
92
  {
93
- "headerText": "Accordion Item 1",
94
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
93
+ "headerText": "Item de acordeón 1",
94
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
95
95
  },
96
96
  {
97
- "headerText": "Accordion Item 2",
98
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
97
+ "headerText": "Item de acordeón 2",
98
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
99
99
  },
100
100
  {
101
- "headerText": "Accordion Item 3",
102
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
101
+ "headerText": "Item de acordeón 3",
102
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
103
103
  }
104
104
  ]
105
105
  }
106
106
  },
107
107
  {
108
- "name": "With one item opened",
108
+ "name": "Con un item abierto",
109
+ "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
109
110
  "data": {
110
111
  "idPrefix": "with-one-item-opened-example",
111
112
  "headingLevel": 3,
112
113
  "allowToggle": true,
113
114
  "items": [
114
115
  {
115
- "headerText": "Accordion Item 1",
116
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
116
+ "headerText": "Item de acordeón 1",
117
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
117
118
  },
118
119
  {
119
- "headerText": "Accordion Item 2",
120
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
120
+ "headerText": "Item de acordeón 2",
121
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
121
122
  "open": true
122
123
  },
123
124
  {
124
- "headerText": "Accordion Item 3",
125
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
125
+ "headerText": "Item de acordeón 3",
126
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
126
127
  }
127
128
  ]
128
129
  }
129
130
  },
130
131
  {
131
- "name": "With 2 items opened",
132
+ "name": "Con 2 items abiertos",
133
+ "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
132
134
  "data": {
133
135
  "idPrefix": "with-2-items-opened-example",
134
136
  "headingLevel": 3,
135
137
  "allowMultiple": true,
136
138
  "items": [
137
139
  {
138
- "headerText": "Accordion Item 1",
139
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
140
+ "headerText": "Item de acordeón 1",
141
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
140
142
  "open": true
141
143
  },
142
144
  {
143
- "headerText": "Accordion Item 2",
144
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
145
+ "headerText": "Item de acordeón 2",
146
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
145
147
  },
146
148
  {
147
- "headerText": "Accordion Item 3",
148
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
149
+ "headerText": "Item de acordeón 3",
150
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
149
151
  "open": true
150
152
  }
151
153
  ]
152
154
  }
153
155
  },
154
156
  {
155
- "name": "disabled and allowToggle and allowMultiple",
156
- "description": "will hide the show/hide info and disable click in items",
157
+ "name": "Deshabilitados con allowToggle y allowMultiple",
158
+ "description": 'Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>"disabled": true</code>.',
157
159
  "data": {
158
160
  "idPrefix": "accordion-disabled",
159
161
  "headingLevel": 3,
@@ -161,17 +163,17 @@
161
163
  "allowMultiple": true,
162
164
  "items": [
163
165
  {
164
- "headerText": "Accordion Item not disabled",
165
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
166
+ "headerText": "Item de acordeón not deshabilitado",
167
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
166
168
  },
167
169
  {
168
- "headerText": "Accordion Item disabled",
169
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
170
+ "headerText": "Item de acordeón deshabilitado",
171
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
170
172
  "disabled": true
171
173
  },
172
174
  {
173
- "headerText": "Accordion Item disabled and open",
174
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
175
+ "headerText": "Item de acordeón disabled and open",
176
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
175
177
  "disabled": true,
176
178
  "open": true
177
179
  }
@@ -179,32 +181,33 @@
179
181
  }
180
182
  },
181
183
  {
182
- "name": "With heading",
184
+ "name": "Con encabezado",
185
+ "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
183
186
  "data": {
184
187
  "idPrefix": "heading-example",
185
188
  "headingLevel": 3,
186
189
  "heading": {
187
- "text": "Accordion example"
190
+ "text": "Encabezado de acordeón"
188
191
  },
189
192
  "items": [
190
193
  {
191
- "headerText": "Accordion Item 1",
192
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
194
+ "headerText": "Item de acordeón 1",
195
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
193
196
  },
194
197
  {
195
- "headerText": "Accordion Item 2",
196
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
198
+ "headerText": "Item de acordeón 2",
199
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
197
200
  },
198
201
  {
199
- "headerText": "Accordion Item 3",
200
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
202
+ "headerText": "Item de acordeón 3",
203
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
201
204
  }
202
205
  ]
203
206
  }
204
207
  },
205
208
  {
206
- "name": "With heading level 4",
207
- "description": "headingLevel is 4 in this example. The headings in this component start with h4 in this example. h4 for the heading and h5 inside the buttons.",
209
+ "name": "Con encabezado de nivel 4",
210
+ "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.',
208
211
  "data": {
209
212
  "idPrefix": "accordion-heading-level-example",
210
213
  "headingLevel": 4,
@@ -214,57 +217,58 @@
214
217
  "items": [
215
218
  {
216
219
  "headerText": "This is Item 1 with h5",
217
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
220
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
218
221
  },
219
222
  {
220
223
  "headerText": "This is Item 2 with h5",
221
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
224
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
222
225
  },
223
226
  {
224
227
  "headerText": "This is Item 3 with h5",
225
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
228
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
226
229
  }
227
230
  ]
228
231
  }
229
232
  },
230
233
  {
231
- "name": "With heading and show controls",
234
+ "name": "Con encabezado y controles de Mostrar todo",
235
+ "description": 'Usa el parámetro <code>"showControl": true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.',
232
236
  "data": {
233
237
  "idPrefix": "heading-and-show-controls-example",
234
238
  "headingLevel": 3,
235
239
  "heading": {
236
- "text": "Accordion example"
240
+ "text": "Encabezado de acordeón"
237
241
  },
238
242
  "showControl": true,
239
243
  "allowMultiple": true,
240
244
  "items": [
241
245
  {
242
- "headerText": "Accordion Item 1",
243
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
246
+ "headerText": "Item de acordeón 1",
247
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
244
248
  },
245
249
  {
246
- "headerText": "Accordion Item 2",
247
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
250
+ "headerText": "Item de acordeón 2",
251
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
248
252
  "open": true
249
253
  },
250
254
  {
251
- "headerText": "Accordion Item 3",
252
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
255
+ "headerText": "Item de acordeón 3",
256
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
253
257
  }
254
258
  ]
255
259
  }
256
260
  },
257
261
  {
258
- "name": "with custom show/hide info",
259
- "description": "The last item has empty strings to don't show any info",
262
+ "name": "Con controles personalizados para mostrar/ocultar",
263
+ "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',
260
264
  "data": {
261
265
  "idPrefix": "accordion-show-hide",
262
266
  "headingLevel": 3,
263
267
  "allowMultiple": true,
264
268
  "items": [
265
269
  {
266
- "headerText": "Accordion Item 1",
267
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
270
+ "headerText": "Item de acordeón 1",
271
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
268
272
  "show": {
269
273
  "text": "Expandir detalles"
270
274
  },
@@ -273,8 +277,8 @@
273
277
  }
274
278
  },
275
279
  {
276
- "headerText": "Accordion Item 2",
277
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
280
+ "headerText": "Item de acordeón 2",
281
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
278
282
  "show": {
279
283
  "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
280
284
  },
@@ -283,8 +287,8 @@
283
287
  }
284
288
  },
285
289
  {
286
- "headerText": "Accordion Item 3",
287
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
290
+ "headerText": "Item de acordeón 3",
291
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
288
292
  "show": {
289
293
  "text": ""
290
294
  },
@@ -296,55 +300,55 @@
296
300
  }
297
301
  },
298
302
  {
299
- "name": "with html in headers",
300
- "description": "To avoid event problems, use pointer-events-none class in subelements",
303
+ "name": "Con HTML en las cabeceras de los items",
304
+ "description": 'Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.',
301
305
  "data": {
302
306
  "idPrefix": "accordion-example-pointer-events-none",
303
307
  "headingLevel": 3,
304
308
  "items": [
305
309
  {
306
- "headerHtml": '<span class="block pointer-events-none">Accordion Item 1</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
307
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
310
+ "headerHtml": '<span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
311
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
308
312
  },
309
313
  {
310
- "headerHtml": '<span class="block pointer-events-none">Accordion Item 2</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
311
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
314
+ "headerHtml": '<span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
315
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
312
316
  },
313
317
  {
314
- "headerHtml": '<span class="block pointer-events-none">Accordion Item 3</span><span class="block pointer-events-none font-normal">Subelement also receives events</span>',
315
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
318
+ "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
319
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
316
320
  }
317
321
  ]
318
322
  }
319
323
  },
320
324
  {
321
- "name": "With classes applied",
322
- "description": "Show code to display the classes applied in html",
325
+ "name": "Con clases de CSS aplicadas",
326
+ "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
323
327
  "data": {
324
328
  "idPrefix": "classes-example",
325
329
  "headingLevel": 3,
326
330
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
327
331
  "items": [
328
332
  {
329
- "headerText": "Accordion Item 1",
330
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
333
+ "headerText": "Item de acordeón 1",
334
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
331
335
  },
332
336
  {
333
- "headerText": "Accordion Item 2",
334
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
335
- "classes": "py-sm bg-neutral-light border-neutral-base rounded-lg",
337
+ "headerText": "Item de acordeón 2",
338
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-white rounded-lg h-40"></div></div>',
339
+ "classes": "p-sm bg-primary-light",
336
340
  "open": true
337
341
  },
338
342
  {
339
- "headerText": "Accordion Item 3",
340
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
343
+ "headerText": "Item de acordeón 3",
344
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
341
345
  }
342
346
  ]
343
347
  }
344
348
  },
345
349
  {
346
- "name": "With attributes applied",
347
- "description": "Show code to display the attributes applied in html",
350
+ "name": "Con atributos aplicados",
351
+ "description": 'Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.',
348
352
  "data": {
349
353
  "idPrefix": "attributes-example",
350
354
  "headingLevel": 3,
@@ -353,22 +357,22 @@
353
357
  },
354
358
  "items": [
355
359
  {
356
- "headerText": "Accordion Item 1",
357
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
360
+ "headerText": "Item de acordeón 1",
361
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
358
362
  "attributes": {
359
363
  "data-attr": "accordion-item-test-a"
360
364
  }
361
365
  },
362
366
  {
363
- "headerText": "Accordion Item 2",
364
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
367
+ "headerText": "Item de acordeón 2",
368
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
365
369
  "attributes": {
366
370
  "data-attr": "accordion-item-test-b"
367
371
  }
368
372
  },
369
373
  {
370
- "headerText": "Accordion Item 3",
371
- "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
374
+ "headerText": "Item de acordeón 3",
375
+ "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
372
376
  "attributes": {
373
377
  "data-attr": "accordion-item-test-c"
374
378
  }
package/src/templates/components/alert/_examples.alert.njk CHANGED
@@ -42,11 +42,11 @@
42
42
  {% set exampleComponent = "alert" %}
43
43
  {% set examples = [
44
44
  {
45
- "name": "success",
46
- "description": "role=alert",
45
+ "name": "alert mostrando una notificación de éxito",
46
+ "description": 'Utilizamos los atributos <code>"role": "alert"</code> y <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla. 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
- "text": "Open success",
49
+ "text": "Abrir éxito",
50
50
  "attributes": {
51
51
  "onclick": "openAlert('success-id', this)"
52
52
  }
@@ -60,16 +60,20 @@
60
60
  }
61
61
  },
62
62
  {
63
- "name": "alert",
64
- "description": "role=alert. Show code to see the function call with the focusFirst item in action.",
63
+ "name": "alert mostrando una notificación de alerta",
64
+ "description": 'Utilizamos los atributos <code>"role": "alert"</code> y <code>"aria-live": "assertive"</code>, para que lo lea el lector de pantalla. 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.',
65
65
  "data": {
66
66
  "button": {
67
- "text": "Open alert",
67
+ "text": "Abrir alerta",
68
68
  "attributes": {
69
69
  "onclick": "openAlert('alert-id', this, 'secondary-id-title')"
70
70
  }
71
71
  },
72
72
  "id": "alert-id",
73
+ "attributes": {
74
+ "role": "alert",
75
+ "aria-live": "assertive"
76
+ },
73
77
  "caller": secondaryExample
74
78
  }
75
79
  }