desy-html 5.0.0 → 5.0.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.
- package/docs/index.html +4 -1
- package/package.json +1 -1
- package/src/templates/components/description-list/_examples.description-list.njk +63 -0
- package/src/templates/components/header/_examples.header.njk +12 -0
- package/src/templates/components/header/_template.header.header__offcanvas.njk +1 -1
- package/src/templates/components/header/_template.header.header__subnav.njk +17 -18
- package/src/templates/components/header/_template.header.njk +16 -12
- package/src/templates/components/header/params.header.yaml +1 -1
package/docs/index.html
CHANGED
|
@@ -38,7 +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.0.
|
|
41
|
+
<h3>v.5.0.1</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Fixed accesibility bad semantics in subnav. Added dropdown contentHtml rendering and example.</li>
|
|
44
|
+
</ul><h3>v.5.0.0</h3>
|
|
42
45
|
<ul class="text-sm">
|
|
43
46
|
<li>Header now uses correct dropdown params.</li>
|
|
44
47
|
</ul>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.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)",
|
|
@@ -178,6 +178,69 @@
|
|
|
178
178
|
]
|
|
179
179
|
}
|
|
180
180
|
},
|
|
181
|
+
{
|
|
182
|
+
"name": "grouped",
|
|
183
|
+
"data": {
|
|
184
|
+
"classes": "w-full py-sm border-t border-b border-neutral-base",
|
|
185
|
+
"items": [
|
|
186
|
+
{
|
|
187
|
+
"term": {
|
|
188
|
+
"text": "Código de procedimiento",
|
|
189
|
+
"classes": "lg:w-1/3"
|
|
190
|
+
},
|
|
191
|
+
"definition": {
|
|
192
|
+
"text": "G00345-BX",
|
|
193
|
+
"classes": "lg:flex-1 font-semibold"
|
|
194
|
+
},
|
|
195
|
+
"classes": "lg:flex py-sm"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"term": {
|
|
199
|
+
"text": "Nombre del procedimiento",
|
|
200
|
+
"classes": "lg:w-1/3"
|
|
201
|
+
},
|
|
202
|
+
"definition": {
|
|
203
|
+
"text": "Resolución definitiva",
|
|
204
|
+
"classes": "lg:flex-1 font-semibold"
|
|
205
|
+
},
|
|
206
|
+
"classes": "lg:flex py-sm"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"term": {
|
|
210
|
+
"text": "CSV",
|
|
211
|
+
"classes": "lg:w-1/3"
|
|
212
|
+
},
|
|
213
|
+
"definition": {
|
|
214
|
+
"text": "CSVK45WT8V5T110CPPC",
|
|
215
|
+
"classes": "lg:flex-1 font-semibold"
|
|
216
|
+
},
|
|
217
|
+
"classes": "lg:flex py-sm"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"term": {
|
|
221
|
+
"text": "Fecha de captura",
|
|
222
|
+
"classes": "lg:w-1/3"
|
|
223
|
+
},
|
|
224
|
+
"definition": {
|
|
225
|
+
"text": "13 de Diciembre de 2021. A las 11:48:08",
|
|
226
|
+
"classes": "lg:flex-1 font-semibold"
|
|
227
|
+
},
|
|
228
|
+
"classes": "lg:flex py-sm"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"term": {
|
|
232
|
+
"text": "Categoría",
|
|
233
|
+
"classes": "lg:w-1/3"
|
|
234
|
+
},
|
|
235
|
+
"definition": {
|
|
236
|
+
"text": "Documento simple",
|
|
237
|
+
"classes": "lg:flex-1 font-semibold"
|
|
238
|
+
},
|
|
239
|
+
"classes": "lg:flex py-sm"
|
|
240
|
+
}
|
|
241
|
+
]
|
|
242
|
+
}
|
|
243
|
+
},
|
|
181
244
|
{
|
|
182
245
|
"name": "with table like appaerance",
|
|
183
246
|
"data": {
|
|
@@ -282,6 +282,18 @@
|
|
|
282
282
|
}
|
|
283
283
|
}
|
|
284
284
|
},
|
|
285
|
+
{
|
|
286
|
+
"name": "con contenido personalizado en dropdown",
|
|
287
|
+
"description": "El dropdown puede contener cualquier tipo de información.",
|
|
288
|
+
"data": {
|
|
289
|
+
"homepageUrl": "/",
|
|
290
|
+
"dropdown": {
|
|
291
|
+
"text": "Marta Pérez",
|
|
292
|
+
"contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
|
|
293
|
+
"classesTooltip": "w-64 max-h-48 overflow-y-auto"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
},
|
|
285
297
|
{
|
|
286
298
|
"name": "con todo",
|
|
287
299
|
"description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<button
|
|
6
6
|
onclick="closeDialog(this)"
|
|
7
7
|
id="header-offcanvas-button-close"
|
|
8
|
-
class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
|
|
8
|
+
class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
|
|
9
9
|
</div>
|
|
10
10
|
{% if caller %}
|
|
11
11
|
{{ caller() }} {#- if statement allows usage of `call` to be optional -#}
|
|
@@ -4,28 +4,27 @@
|
|
|
4
4
|
{% if params.items %}
|
|
5
5
|
<div class="hidden lg:flex items-center">
|
|
6
6
|
<div class="ml-3 py-2 relative border-r border-l border-neutral-base">
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
</h2>
|
|
7
|
+
<p class="sr-only">Aplicación actual: </p>
|
|
8
|
+
{% call componentDropdown({
|
|
9
|
+
"text": params.text,
|
|
10
|
+
"html": params.html,
|
|
11
|
+
"hiddenText": params.hiddenText,
|
|
12
|
+
"classesContainer": params.classesContainer,
|
|
13
|
+
"classesTooltip": params.classesTooltip,
|
|
14
|
+
"classes": params.classes,
|
|
15
|
+
"attributes": params.attributes
|
|
16
|
+
}) %}
|
|
17
|
+
{% if caller %}
|
|
18
|
+
{{ caller() }} {#- if statement allows usage of `call` to be optional -#}
|
|
19
|
+
{% elseif params.caller %}
|
|
20
|
+
{{ params.caller | safe }}
|
|
21
|
+
{% endif %}
|
|
22
|
+
{% endcall %}
|
|
24
23
|
</div>
|
|
25
24
|
</div>
|
|
26
25
|
{% else %}
|
|
27
26
|
<p class="hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white">
|
|
28
27
|
<span class="sr-only">Aplicación actual: </span>
|
|
29
|
-
{{ params.text }}
|
|
28
|
+
{{ params.html | safe if params.html else params.text }}
|
|
30
29
|
</p>
|
|
31
30
|
{% endif %}
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
}) | indent(12) }}
|
|
67
67
|
{% endif %}
|
|
68
68
|
</div>
|
|
69
|
-
{% if params.dropdown.items %}
|
|
69
|
+
{% if params.dropdown.items or params.dropdown.contentHtml %}
|
|
70
70
|
{% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
|
|
71
71
|
{% call componentHeaderDropdown({
|
|
72
72
|
"text": params.dropdown.text,
|
|
@@ -77,17 +77,21 @@
|
|
|
77
77
|
"classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
|
|
78
78
|
"attributes": params.dropdown.attributes
|
|
79
79
|
}) %}
|
|
80
|
-
{%
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
80
|
+
{% if params.dropdown.contentHtml %}
|
|
81
|
+
{{ params.dropdown.contentHtml | safe }}
|
|
82
|
+
{% else %}
|
|
83
|
+
{% from "../nav/_macro.nav.njk" import componentNav %}
|
|
84
|
+
{{ componentNav({
|
|
85
|
+
isMenu: true,
|
|
86
|
+
idPrefix: "header-dropdown-nav-item",
|
|
87
|
+
items: params.dropdown.items,
|
|
88
|
+
classes: "w-max max-w-64",
|
|
89
|
+
attributes: {
|
|
90
|
+
"id": "id-dropdown-nav",
|
|
91
|
+
"aria-label": "Menú de usuario"
|
|
92
|
+
}
|
|
93
|
+
}) }}
|
|
94
|
+
{% endif %}
|
|
91
95
|
{% endcall %}
|
|
92
96
|
{% endif %}
|
|
93
97
|
{% if params.offcanvas %}
|
|
@@ -129,7 +129,7 @@ params:
|
|
|
129
129
|
- name: items
|
|
130
130
|
type: array
|
|
131
131
|
required: true
|
|
132
|
-
description: An array of navigation item objects in subnav dropdown.
|
|
132
|
+
description: An array of navigation item objects in subnav dropdown. If `items` is provided, the `contentHtml` argument will be ignored.
|
|
133
133
|
params:
|
|
134
134
|
- name: href
|
|
135
135
|
type: string
|