desy-html 8.6.0 → 8.7.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.show-code-from-file.njk +3 -3
- package/docs/_macro.show-html-from-file.njk +3 -2
- package/docs/ds/_ds.example.layout-escritorio.njk +12 -12
- package/docs/ds/_ds.example.layout-movil.njk +4 -4
- package/docs/ds/_ds.example.layout-sidebar.njk +1 -1
- package/docs/ds/_ds.example.typography.njk +1 -1
- package/docs/ds/_ds.macro.code-snippet.njk +1 -1
- package/docs/ds/_ds.macro.section-title.njk +1 -1
- package/docs/ds/_ds.macro.subsection-title.njk +1 -1
- package/docs/ds/_ds.section.espaciado.njk +154 -16
- package/docs/ds/_ds.section.textos.njk +216 -142
- package/docs/index.html +6 -0
- package/package.json +1 -1
- package/src/js/aria/MenuHorizontal.js +58 -0
- package/src/js/aria/MenubarAction.js +210 -164
- package/src/js/aria/tabs.js +4 -4
- package/src/js/desy-html.js +12 -2
- package/src/js/index.js +2 -0
- package/src/templates/components/accordion/_template.accordion.njk +2 -1
- package/src/templates/components/accordion-history/_template.accordion-history.njk +2 -1
- package/src/templates/components/header/_template.header.header__offcanvas.njk +1 -0
- package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -0
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +5 -3
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
- package/src/templates/components/menubar/_examples.menubar.njk +156 -3
- package/src/templates/components/menubar/_template.menubar.njk +2 -2
- package/src/templates/components/modal/_template.modal.njk +1 -1
- package/src/templates/components/notification/_template.notification.njk +1 -1
- package/src/templates/components/pagination/_template.pagination.njk +12 -6
|
@@ -18,158 +18,232 @@
|
|
|
18
18
|
{{ DSSubsectionTitle({
|
|
19
19
|
title: "Estilos de base"
|
|
20
20
|
}) }}
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
21
|
+
<ul>
|
|
22
|
+
<li>
|
|
23
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
|
|
24
|
+
<dt>
|
|
25
|
+
<p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
|
|
26
|
+
</dt>
|
|
27
|
+
<dd class="lg:col-span-3">
|
|
28
|
+
<p class="text-neutral-dark text-sm"><code>span.font-bold</code> - <code>bold</code></p>
|
|
29
|
+
</dd>
|
|
30
|
+
</dl>
|
|
31
|
+
</li>
|
|
32
|
+
<li>
|
|
33
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
|
|
34
|
+
<dt>
|
|
35
|
+
<p>Esto es un <strong>strong</strong> en un texto.</p>
|
|
36
|
+
</dt>
|
|
37
|
+
<dd class="lg:col-span-3">
|
|
38
|
+
<p class="text-neutral-dark text-sm"><code>strong</code> - <code>semibold</code></p>
|
|
39
|
+
</dd>
|
|
40
|
+
</dl>
|
|
41
|
+
</li>
|
|
42
|
+
<li>
|
|
43
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
|
|
44
|
+
<dt>
|
|
45
|
+
<p>Esto es un <em>em</em> en un texto.</p>
|
|
46
|
+
</dt>
|
|
47
|
+
<dd class="lg:col-span-3">
|
|
48
|
+
<p class="text-neutral-dark text-sm"><code>em</code> - <code>normal</code> - <code>italic</code></p>
|
|
49
|
+
</dd>
|
|
50
|
+
</dl>
|
|
51
|
+
</li>
|
|
52
|
+
</ul>
|
|
41
53
|
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
42
54
|
{{ DSSubsectionTitle({
|
|
43
55
|
title: "Encabezados"
|
|
44
56
|
}) }}
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
57
|
+
<ul>
|
|
58
|
+
<li>
|
|
59
|
+
<dl class="flex flex-wrap items-center mb-8">
|
|
60
|
+
<dt class="lg:w-1/3 lg:mr-8">
|
|
61
|
+
<p class="c-h0">Encabezado 0 (h1)</p>
|
|
62
|
+
</dt>
|
|
63
|
+
<dd class="lg:flex-1">
|
|
64
|
+
<p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>50px</code> - margin-bottom: <code>.mb-8</code> - <code>2rem</code> - <code>32px</code></p>
|
|
65
|
+
</dd>
|
|
66
|
+
</dl>
|
|
67
|
+
</li>
|
|
68
|
+
<li>
|
|
69
|
+
<dl class="flex flex-wrap items-center mb-8">
|
|
70
|
+
<dt class="lg:w-1/3 lg:mr-8">
|
|
71
|
+
<p class="c-h1">Encabezado 1 (h1)</p>
|
|
72
|
+
</dt>
|
|
73
|
+
<dd class="lg:flex-1">
|
|
74
|
+
<p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>37.5px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
|
|
75
|
+
</dd>
|
|
76
|
+
</dl>
|
|
77
|
+
</li>
|
|
78
|
+
<li>
|
|
79
|
+
<dl class="flex flex-wrap items-center mb-8">
|
|
80
|
+
<dt class="lg:w-1/3 lg:mr-8">
|
|
81
|
+
<p class="c-h2">Encabezado 2 (h2)</p>
|
|
82
|
+
</dt>
|
|
83
|
+
<dd class="lg:flex-1">
|
|
84
|
+
<p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>30px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
|
|
85
|
+
</dd>
|
|
86
|
+
</dl>
|
|
87
|
+
</li>
|
|
88
|
+
<li>
|
|
89
|
+
<dl class="flex flex-wrap items-center mb-8">
|
|
90
|
+
<dt class="lg:w-1/3 lg:mr-8">
|
|
91
|
+
<p class="c-h3">Encabezado 3 (h3)</p>
|
|
92
|
+
</dt>
|
|
93
|
+
<dd class="lg:flex-1">
|
|
94
|
+
<p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>22.5px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5rem</code> - <code>8px</code></p>
|
|
95
|
+
</dd>
|
|
96
|
+
</dl>
|
|
97
|
+
</li>
|
|
98
|
+
<li>
|
|
99
|
+
<dl class="flex flex-wrap items-center mb-8">
|
|
100
|
+
<dt class="lg:w-1/3 lg:mr-8">
|
|
101
|
+
<p class="c-h4">Encabezado 4 (h4)</p>
|
|
102
|
+
</dt>
|
|
103
|
+
<dd class="lg:flex-1">
|
|
104
|
+
<p class="text-neutral-dark text-sm"><code>.c-h4</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
|
|
105
|
+
</dd>
|
|
106
|
+
</dl>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
85
109
|
{{ DSSubsectionTitle({
|
|
86
110
|
title: "Enlaces"
|
|
87
111
|
}) }}
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
112
|
+
<ul>
|
|
113
|
+
<li>
|
|
114
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
115
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
116
|
+
<p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
|
|
117
|
+
</dt>
|
|
118
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
119
|
+
<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>
|
|
120
|
+
</dd>
|
|
121
|
+
</dl>
|
|
122
|
+
</li>
|
|
123
|
+
<li>
|
|
124
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
125
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
126
|
+
<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 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
|
|
127
|
+
</dt>
|
|
128
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
129
|
+
<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>
|
|
130
|
+
</dd>
|
|
131
|
+
</dl>
|
|
132
|
+
</li>
|
|
133
|
+
<li>
|
|
134
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
135
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
136
|
+
<p>Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
|
|
137
|
+
</dt>
|
|
138
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
139
|
+
<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>
|
|
140
|
+
</dd>
|
|
141
|
+
</dl>
|
|
142
|
+
</li>
|
|
143
|
+
</ul>
|
|
108
144
|
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
109
145
|
{{ DSSubsectionTitle({
|
|
110
146
|
title: "Párrafos"
|
|
111
147
|
}) }}
|
|
112
|
-
<
|
|
113
|
-
<
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
</
|
|
143
|
-
<
|
|
144
|
-
<
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
</
|
|
153
|
-
<
|
|
154
|
-
<
|
|
155
|
-
<
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
</
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
148
|
+
<ul>
|
|
149
|
+
<li>
|
|
150
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
151
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
152
|
+
<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>
|
|
153
|
+
</dt>
|
|
154
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
155
|
+
<p class="text-neutral-dark text-sm">Párrafo destacados. <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>
|
|
156
|
+
</dd>
|
|
157
|
+
</dl>
|
|
158
|
+
</li>
|
|
159
|
+
<li>
|
|
160
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
161
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
162
|
+
<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>
|
|
163
|
+
</dt>
|
|
164
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
165
|
+
<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>
|
|
166
|
+
</dd>
|
|
167
|
+
</dl>
|
|
168
|
+
</li>
|
|
169
|
+
<li>
|
|
170
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
171
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
172
|
+
<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>
|
|
173
|
+
</dt>
|
|
174
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
175
|
+
<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>
|
|
176
|
+
</dd>
|
|
177
|
+
</dl>
|
|
178
|
+
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
181
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
182
|
+
<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>
|
|
183
|
+
</dt>
|
|
184
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
185
|
+
<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>
|
|
186
|
+
</dd>
|
|
187
|
+
</dl>
|
|
188
|
+
</li>
|
|
189
|
+
<li>
|
|
190
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
191
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
192
|
+
<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>
|
|
193
|
+
</dt>
|
|
194
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
195
|
+
<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>
|
|
196
|
+
</dd>
|
|
197
|
+
</dl>
|
|
198
|
+
</li>
|
|
199
|
+
</ul>
|
|
200
|
+
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
201
|
+
{{ DSSubsectionTitle({
|
|
202
|
+
title: "Listas"
|
|
203
|
+
}) }}
|
|
204
|
+
<ul>
|
|
205
|
+
<li>
|
|
206
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
207
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
208
|
+
<ul class="c-ul">
|
|
209
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
210
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
211
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
212
|
+
</ul>
|
|
213
|
+
</dt>
|
|
214
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
215
|
+
<p class="text-neutral-dark text-sm">Lista. <br><code>.c-ul</code></p>
|
|
216
|
+
</dd>
|
|
217
|
+
</dl>
|
|
218
|
+
</li>
|
|
219
|
+
<li>
|
|
220
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
221
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
222
|
+
<ul class="c-ul c-ul--no-bullets">
|
|
223
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
224
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
225
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
226
|
+
</ul>
|
|
227
|
+
</dt>
|
|
228
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
229
|
+
<p class="text-neutral-dark text-sm">Lista sin bolas. <br><code>.c-ul.c-ul--no-bullets</code></p>
|
|
230
|
+
</dd>
|
|
231
|
+
</dl>
|
|
232
|
+
</li>
|
|
233
|
+
<li>
|
|
234
|
+
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
235
|
+
<dt class="col-span-2 lg:col-span-2">
|
|
236
|
+
<ul class="c-ol">
|
|
237
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
238
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
239
|
+
<li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
|
|
240
|
+
</ul>
|
|
241
|
+
</dt>
|
|
242
|
+
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
243
|
+
<p class="text-neutral-dark text-sm">Lista ordenada. <br><code>.c-ol</code></p>
|
|
244
|
+
</dd>
|
|
245
|
+
</dl>
|
|
246
|
+
</li>
|
|
247
|
+
</ul>
|
|
174
248
|
{{ showHtmlFromFile("ds/_ds.example.textos.njk") }}
|
|
175
249
|
</div>
|
package/docs/index.html
CHANGED
|
@@ -38,6 +38,12 @@
|
|
|
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.8.7.0</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Added global function to select items and subitems in Menubar and Menu horizontal.</li>
|
|
44
|
+
<li>Now Tabs can have html inside their titles.</li>
|
|
45
|
+
<li>Improvements and better accesibility in docs.</li>
|
|
46
|
+
</ul>
|
|
41
47
|
<h3>v.8.6.0</h3>
|
|
42
48
|
<ul class="text-sm">
|
|
43
49
|
<li>Added global function to select items and subitems in Menu navigation.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.7.0",
|
|
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)",
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
export function MenuHorizontal(aria) {
|
|
2
|
+
(function () {
|
|
3
|
+
aria.MenuHorizontal = function (domNode) {
|
|
4
|
+
this.domNode = domNode;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
aria.MenuHorizontal.prototype.init = function () {
|
|
8
|
+
const menuItems = this.domNode.querySelectorAll('a');
|
|
9
|
+
const getItemsFromMenu = Array.from(menuItems);
|
|
10
|
+
|
|
11
|
+
getItemsFromMenu.forEach((button) => {
|
|
12
|
+
if(button.classList.contains('c-menu-horizontal__active')) {
|
|
13
|
+
this.activateElement(button.id);
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
aria.MenuHorizontal.prototype.activateElement = function (elementActive) {
|
|
19
|
+
this.domNode.querySelectorAll('a').forEach((element) => {
|
|
20
|
+
if (element.id === elementActive) {
|
|
21
|
+
this.wrapActiveElement(element);
|
|
22
|
+
} else {
|
|
23
|
+
this.deactivateElement(element);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
aria.MenuHorizontal.prototype.wrapActiveElement = function (elementActive) {
|
|
29
|
+
elementActive.setAttribute('aria-current', 'page');
|
|
30
|
+
elementActive.classList.add('c-menu-horizontal__active');
|
|
31
|
+
elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
aria.MenuHorizontal.prototype.deactivateElement = function (elementDeactivated) {
|
|
35
|
+
elementDeactivated.removeAttribute('aria-current');
|
|
36
|
+
elementDeactivated.classList.remove('c-menu-horizontal__active');
|
|
37
|
+
elementDeactivated.innerHTML = elementDeactivated.textContent;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
window.activateItemMenuHorizontal = function (menuId, activeItemId) {
|
|
41
|
+
const menu = document.getElementById(menuId);
|
|
42
|
+
if (menu) {
|
|
43
|
+
const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
|
|
44
|
+
if (activeItem) {
|
|
45
|
+
const menuInstance = new aria.MenuHorizontal(menu);
|
|
46
|
+
menuInstance.activateElement(activeItemId);
|
|
47
|
+
return [menu, activeItem];
|
|
48
|
+
} else {
|
|
49
|
+
console.log('There is no element with this id in the menu.');
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
} else {
|
|
53
|
+
console.log('There is no menu with this id in the document.');
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
}());
|
|
58
|
+
}
|