desy-html 10.1.0 → 10.2.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 (25) hide show
  1. package/config/tailwind.config.js +2 -2
  2. package/docs/ds/_ds.section.layout.njk +2 -2
  3. package/docs/index.html +13 -0
  4. package/package.json +1 -1
  5. package/src/templates/components/card/_examples.card.njk +8 -0
  6. package/src/templates/components/collapsible/_examples.collapsible.njk +19 -0
  7. package/src/templates/components/collapsible/_template.collapsible.njk +4 -4
  8. package/src/templates/components/collapsible/params.collapsible.yaml +16 -0
  9. package/src/templates/components/footer/_examples.footer.njk +49 -32
  10. package/src/templates/components/footer/_template.footer.njk +1 -1
  11. package/src/templates/components/footer/params.footer.yaml +1 -1
  12. package/src/templates/components/header-advanced/_template.header-advanced.njk +2 -2
  13. package/src/templates/components/header-advanced/params.header-advanced.yaml +8 -0
  14. package/src/templates/components/header-mini/_examples.header-mini.njk +283 -8
  15. package/src/templates/components/header-mini/_template.header-mini.njk +26 -0
  16. package/src/templates/components/header-mini/params.header-mini.yaml +56 -0
  17. package/src/templates/components/links-list/_examples.links-list.njk +97 -4
  18. package/src/templates/components/links-list/_template.links-list.njk +37 -3
  19. package/src/templates/components/links-list/params.links-list.yaml +21 -1
  20. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +187 -12
  21. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +72 -5
  22. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +3 -3
  23. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +1 -1
  24. package/src/templates/components/table/_examples.table.njk +118 -118
  25. package/src/templates/components/table/_template.table.njk +10 -6
package/src/templates/components/header-mini/_template.header-mini.njk CHANGED
@@ -1,5 +1,18 @@
1
1
  <!-- header-mini -->
2
2
  <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
3
+ {% if params.super %}
4
+ {% if params.super.customHtml %}
5
+ {{ params.super.customHtml | safe }}
6
+ {% else %}
7
+ <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" {%- if params.super.backgroundFullColor or params.super.backgroundFullUrl %} style="{% if params.super.backgroundFullColor %}background-color: {{ params.super.backgroundFullColor }};{% endif %} {%- if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"{% endif %}>
8
+ <div class="container h-full mx-auto px-base">
9
+ <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
10
+ {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
11
+ </div>
12
+ </div>
13
+ </div>
14
+ {% endif %}
15
+ {% endif %}
3
16
  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
4
17
  <div class="bg-white border-b border-neutral-base">
5
18
  <div class="flex items-center px-base {% if params.hasContainer != false %}container mx-auto{% endif %}">
@@ -10,5 +23,18 @@
10
23
  </div>
11
24
  </div>
12
25
  </div>
26
+ {% if params.sub %}
27
+ {% if params.sub.customHtml %}
28
+ {{ params.sub.customHtml | safe }}
29
+ {% else %}
30
+ <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" {%- if params.sub.backgroundFullColor or params.sub.backgroundFullUrl %} style="{% if params.sub.backgroundFullColor %}background-color: {{ params.sub.backgroundFullColor }};{% endif %} {%- if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"{% endif %}>
31
+ <div class="container h-full mx-auto px-base">
32
+ <div class="relative h-full bg-cover bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
33
+ {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
34
+ </div>
35
+ </div>
36
+ </div>
37
+ {% endif %}
38
+ {% endif %}
13
39
  </div>
14
40
  <!-- /header-mini -->
package/src/templates/components/header-mini/params.header-mini.yaml CHANGED
@@ -15,6 +15,62 @@ params:
15
15
  type: string
16
16
  required: false
17
17
  description: Classes for the container, useful if you want to make the header fixed width.
18
+ - name: super
19
+ type: object
20
+ required: false
21
+ description: This is an area over the container
22
+ - name: customNavigationHtml
23
+ type: string
24
+ required: false
25
+ description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
26
+ - name: backgroundFullColor
27
+ type: string
28
+ required: true
29
+ description: The css color used in the background image that fills all the super area.
30
+ - name: backgroundFullUrl
31
+ type: string
32
+ required: false
33
+ description: Url used in the background image that fills all the super area.
34
+ - name: backgroundContainerUrl
35
+ type: string
36
+ required: false
37
+ description: Url used in the background image in the container of the super area and over the backgroundFull.
38
+ - name: customHtml
39
+ type: string
40
+ required: false
41
+ description: If provided, the default super content will be replaced with this.
42
+ - name: classes
43
+ type: string
44
+ required: false
45
+ description: Classes to add to the super.
46
+ - name: sub
47
+ type: object
48
+ required: false
49
+ description: This is an area under the container
50
+ - name: customNavigationHtml
51
+ type: string
52
+ required: false
53
+ description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation under the logo area.
54
+ - name: backgroundFullColor
55
+ type: string
56
+ required: true
57
+ description: The css color used in the background image that fills all the sub area.
58
+ - name: backgroundFullUrl
59
+ type: string
60
+ required: false
61
+ description: Url used in the background image that fills all the sub area.
62
+ - name: backgroundContainerUrl
63
+ type: string
64
+ required: false
65
+ description: Url used in the background image in the container of the sub area and over the backgroundFull.
66
+ - name: customHtml
67
+ type: string
68
+ required: false
69
+ description: If provided, the default sub content will be replaced with this.
70
+ - name: classes
71
+ type: string
72
+ required: false
73
+ description: Classes to add to the sub.
18
74
  - name: classes
19
75
  type: string
20
76
  required: false
package/src/templates/components/links-list/_examples.links-list.njk CHANGED
@@ -32,6 +32,65 @@
32
32
  }
33
33
  }
34
34
  },
35
+ {
36
+ "name": "Con varios tipos de icono a la derecha",
37
+ "description": "Utiliza el parámetro `iconRight` y sus parámetro: `type`, `html` y `containerClasses` para cambiar el tipo de icono de la derecha.",
38
+ "data": {
39
+ "idPrefix": "iconright",
40
+ "items": [
41
+ {
42
+ "href": "#",
43
+ "text": "Sin iconRight (arrow por defecto)"
44
+ },
45
+ {
46
+ "href": "#",
47
+ "text": "iconRight.type: arrow",
48
+ "iconRight": {
49
+ "type": "arrow"
50
+ }
51
+ },
52
+ {
53
+ "href": "#",
54
+ "text": "iconRight.type: chevron",
55
+ "iconRight": {
56
+ "type": "chevron"
57
+ }
58
+ },
59
+ {
60
+ "href": "#",
61
+ "text": "iconRight.type: none",
62
+ "iconRight": {
63
+ "type": "none"
64
+ }
65
+ },
66
+ {
67
+ "href": "#",
68
+ "text": "Con icono pesonalizado usando iconRight.html",
69
+ "iconRight": {
70
+ "html": '<svg class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
71
+ <g>
72
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z" fill="currentColor"></path>
73
+ </g></svg>'
74
+ }
75
+ },
76
+ {
77
+ "href": "#",
78
+ "text": "iconRight.containerClasses para posicionar el icono",
79
+ "sub": {
80
+ "html": "<p>También se puede usar item.containerClasses para quitar el padding lateral del item.</p><p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Esse consequuntur rem, unde doloribus eaque accusantium? Distinctio recusandae laudantium tenetur explicabo, vero, repellat, earum debitis voluptatem maxime perspiciatis doloribus adipisci qui?</p>"
81
+ },
82
+ "iconRight": {
83
+ "type": "arrow",
84
+ "containerClasses": "absolute right-0 top-[50%] -mt-[0.5em]"
85
+ },
86
+ "containerClasses": "relative border-y border-neutral-base -my-px"
87
+ }
88
+ ],
89
+ "attributes": {
90
+ "aria-label": "Menu destacado"
91
+ }
92
+ }
93
+ },
35
94
  {
36
95
  "name": "con icono",
37
96
  "data": {
@@ -100,14 +159,48 @@
100
159
  }
101
160
  },
102
161
  {
103
- "name": "con containerClasses aplicado",
162
+ "name": "con listClasses aplicado: con líneas horizontales arriba y abajo",
163
+ "data": {
164
+ "idPrefix": "with-listclasses",
165
+ "listClasses": "divide-y divide-neutral-base border-t border-b border-neutral-base",
166
+ "items": [
167
+ {
168
+ "href": "#",
169
+ "text": "Item 1",
170
+ "icon": {
171
+ "html": iconSimple | trim
172
+ }
173
+ },
174
+ {
175
+ "href": "#",
176
+ "text": "Item 2",
177
+ "icon": {
178
+ "html": iconSimple | trim
179
+ }
180
+ },
181
+ {
182
+ "href": "#",
183
+ "text": "Item 3",
184
+ "icon": {
185
+ "html": iconSimple | trim
186
+ }
187
+ }
188
+ ],
189
+ "attributes": {
190
+ "aria-label": "Menu destacado"
191
+ }
192
+ }
193
+ },
194
+ {
195
+ "name": "con containerClasses aplicado: con aspecto de cards",
104
196
  "data": {
105
197
  "idPrefix": "with-containerclasses",
198
+ "listClasses": "border border-transparent",
106
199
  "items": [
107
200
  {
108
201
  "href": "#",
109
202
  "text": "Item 1",
110
- "containerClasses": "px-base border border-neutral-base my-sm",
203
+ "containerClasses": "my-sm px-base border border-neutral-base rounded",
111
204
  "icon": {
112
205
  "html": iconSimple | trim
113
206
  }
@@ -115,7 +208,7 @@
115
208
  {
116
209
  "href": "#",
117
210
  "text": "Item 2",
118
- "containerClasses": "my-base px-base border border-neutral-base rounded",
211
+ "containerClasses": "my-sm px-base border border-neutral-base rounded",
119
212
  "icon": {
120
213
  "html": iconSimple | trim
121
214
  }
@@ -123,7 +216,7 @@
123
216
  {
124
217
  "href": "#",
125
218
  "text": "Item 3",
126
- "containerClasses": "px-base border border-neutral-base my-sm",
219
+ "containerClasses": "px-base border border-neutral-base rounded",
127
220
  "icon": {
128
221
  "html": iconSimple | trim
129
222
  }
package/src/templates/components/links-list/_template.links-list.njk CHANGED
@@ -6,9 +6,13 @@
6
6
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
7
7
  {% endset %}
8
8
 
9
+ {% set chevron %}
10
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
11
+ {% endset %}
12
+
9
13
 
10
14
  {% set innerHtml %}
11
- <ul>
15
+ <ul class="{% if params.listClasses %}{{ params.listClasses }}{% else %}divide-y divide-neutral-base{% endif %}">
12
16
  {% for item in params.items %}
13
17
  {% if item %}
14
18
  {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -18,7 +22,7 @@
18
22
  {%- set id = idPrefix + "-" + loop.index -%}
19
23
  {%- endif -%}
20
24
  {% set subId = "sub-" + id %}
21
- <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}px-base border-y border-neutral-base -my-px{% endif %}">
25
+ <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}relative px-base{% endif %}">
22
26
  {% if item.href %}
23
27
  <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
24
28
  <div class="flex gap-base justify-between items-center flex-1">
@@ -37,7 +41,37 @@
37
41
  {% endif %}
38
42
  </div>
39
43
  </div>
40
- {{ arrow | safe | trim }}
44
+ {% if item.iconRight %}
45
+ {% if item.iconRight.type != 'none' %}
46
+ {% if item.iconRight.type == 'arrow' %}
47
+ <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
48
+ {% if item.iconRight.html %}
49
+ {{ item.iconRight.html | safe }}
50
+ {% else %}
51
+ {{ arrow | safe | trim }}
52
+ {% endif %}
53
+ </div>
54
+ {% elseif item.iconRight.type == 'chevron' %}
55
+ <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
56
+ {% if item.iconRight.html %}
57
+ {{ item.iconRight.html | safe }}
58
+ {% else %}
59
+ {{ chevron | safe | trim }}
60
+ {% endif %}
61
+ </div>
62
+ {% else %}
63
+ <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
64
+ {% if item.iconRight.html %}
65
+ {{ item.iconRight.html | safe }}
66
+ {% endif %}
67
+ </div>
68
+ {% endif %}
69
+ {% endif %}
70
+ {% else %}
71
+ <div class="self-center h-full">
72
+ {{ arrow | safe | trim }}
73
+ </div>
74
+ {% endif %}
41
75
  </a>
42
76
  {% else %}
43
77
  <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
package/src/templates/components/links-list/params.links-list.yaml CHANGED
@@ -48,6 +48,22 @@ params:
48
48
  type: string
49
49
  required: false
50
50
  description: Classes to add to the sub container.
51
+ - name: iconRight
52
+ type: object
53
+ required: false
54
+ description: This is the optional icon at right. If this is not set, the icon at right will be a default right arrow.
55
+ - name: html
56
+ type: string
57
+ required: false
58
+ description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
59
+ - name: type
60
+ type: string
61
+ required: false
62
+ description: Predefined icon types are `arrow`, `chevron`, `none`.
63
+ - name: containerClasses
64
+ type: string
65
+ required: false
66
+ description: Classes applied to the parent div of icon. Useful to vertical align the icon.
51
67
  - name: icon
52
68
  type: object
53
69
  required: false
@@ -63,7 +79,7 @@ params:
63
79
  - name: containerClasses
64
80
  type: string
65
81
  required: false
66
- description: Classes to add to the parent `<li> of the item.
82
+ description: Classes to add to the parent `<li>` of the item.
67
83
  - name: classes
68
84
  type: string
69
85
  required: false
@@ -72,6 +88,10 @@ params:
72
88
  type: object
73
89
  required: false
74
90
  description: HTML attributes (for example data attributes) to add to the item.
91
+ - name: listClasses
92
+ type: string
93
+ required: false
94
+ description: Classes to add to the `<ul>` that holds the items.
75
95
  - name: classes
76
96
  type: string
77
97
  required: false
package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk CHANGED
@@ -130,10 +130,33 @@
130
130
  }
131
131
  },
132
132
  {
133
- "name": "con clases de css aplicadas",
134
- "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--tabs</code>',
133
+ "name": "con iconos en items",
135
134
  "data": {
136
- "classes": "c-menu-horizontal--tabs",
135
+ "items": [
136
+ {
137
+ "href": "#",
138
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
139
+ },
140
+ {
141
+ "href": "#",
142
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
143
+ },
144
+ {
145
+ "href": "#",
146
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
147
+ }
148
+ ],
149
+ "attributes": {
150
+ "id": "mi-menu-icons",
151
+ "aria-label": "Menu horizontal"
152
+ }
153
+ }
154
+ },
155
+ {
156
+ "name": "con clases de css aplicadas: tipo enlaces",
157
+ "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>',
158
+ "data": {
159
+ "classes": "c-menu-horizontal--links",
137
160
  "items": [
138
161
  {
139
162
  "href": "http://www.google.com",
@@ -159,36 +182,187 @@
159
182
  }
160
183
  ],
161
184
  "attributes": {
185
+ "id": "mi-menu-links",
162
186
  "aria-label": "Menu horizontal"
163
187
  }
164
188
  }
165
189
  },
166
190
  {
167
- "name": "con iconos en items",
191
+ "name": "con clases de css aplicadas: con separadores y texto pequeño",
192
+ "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--links</code>. Clases aplicadas a cada item para cambiar el padding y añadir un borde lateral.',
168
193
  "data": {
194
+ "classes": "c-menu-horizontal--links",
169
195
  "items": [
170
196
  {
171
- "href": "#",
172
- "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
197
+ "href": "http://www.google.com",
198
+ "text": "Opción 1",
199
+ "classes": "lg:!py-0 text-sm border-r border-r-neutral-base"
173
200
  },
174
201
  {
175
- "href": "#",
176
- "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
202
+ "href": "http://www.google.com",
203
+ "text": "Opción 2",
204
+ "classes": "lg:!py-0 text-sm border-r border-r-neutral-base",
205
+ "active": true
177
206
  },
178
207
  {
179
- "href": "#",
180
- "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
208
+ "href": "http://www.google.com",
209
+ "text": "Opción 3",
210
+ "classes": "lg:!py-0 text-sm border-r border-r-neutral-base"
211
+ },
212
+ {
213
+ "href": "http://www.google.com",
214
+ "text": "Opción 4",
215
+ "classes": "lg:!py-0 text-sm border-r border-r-neutral-base",
216
+ "disabled": true
217
+ },
218
+ {
219
+ "href": "http://www.google.com",
220
+ "text": "Opción 5",
221
+ "classes": "lg:!py-0 text-sm"
181
222
  }
182
223
  ],
183
224
  "attributes": {
184
- "id": "mi-menu-icons",
225
+ "id": "mi-menu-links-divider",
226
+ "aria-label": "Menu horizontal"
227
+ }
228
+ }
229
+ },
230
+ {
231
+ "name": "con clases de css aplicadas: navigation bar",
232
+ "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--navigation-bar</code>',
233
+ "data": {
234
+ "classes": "c-menu-horizontal--navigation-bar",
235
+ "items": [
236
+ {
237
+ "href": "http://www.google.com",
238
+ "text": "Opción 1"
239
+ },
240
+ {
241
+ "href": "http://www.google.com",
242
+ "text": "Opción 2",
243
+ "active": true
244
+ },
245
+ {
246
+ "href": "http://www.google.com",
247
+ "text": "Opción 3"
248
+ },
249
+ {
250
+ "href": "http://www.google.com",
251
+ "text": "Opción 4",
252
+ "disabled": true
253
+ },
254
+ {
255
+ "href": "http://www.google.com",
256
+ "text": "Opción 5"
257
+ }
258
+ ],
259
+ "attributes": {
260
+ "id": "mi-menu-navigation-bar",
261
+ "aria-label": "Menu horizontal"
262
+ }
263
+ }
264
+ },
265
+ {
266
+ "name": "con clases de css aplicadas: navigation bar con scroll horizontal",
267
+ "description": 'Clases modificadora aplicadas: <code>.c-menu-horizontal--navigation-bar</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales o bien usa el ejemplo anterior.',
268
+ "data": {
269
+ "classes": "c-menu-horizontal--navigation-bar c-menu-horizontal--scroll",
270
+ "items": [
271
+ {
272
+ "href": "http://www.google.com",
273
+ "text": "Opción 1"
274
+ },
275
+ {
276
+ "href": "http://www.google.com",
277
+ "text": "Opción 2",
278
+ "active": true
279
+ },
280
+ {
281
+ "href": "http://www.google.com",
282
+ "text": "Opción 3"
283
+ },
284
+ {
285
+ "href": "http://www.google.com",
286
+ "text": "Opción 4",
287
+ "disabled": true
288
+ },
289
+ {
290
+ "href": "http://www.google.com",
291
+ "text": "Opción 5"
292
+ },
293
+ {
294
+ "href": "http://www.google.com",
295
+ "text": "Opción 6"
296
+ },
297
+ {
298
+ "href": "http://www.google.com",
299
+ "text": "Opción 7"
300
+ },
301
+ {
302
+ "href": "http://www.google.com",
303
+ "text": "Opción 8"
304
+ },
305
+ {
306
+ "href": "http://www.google.com",
307
+ "text": "Opción 9"
308
+ },
309
+ {
310
+ "href": "http://www.google.com",
311
+ "text": "Opción 10"
312
+ },
313
+ {
314
+ "href": "http://www.google.com",
315
+ "text": "Opción 11"
316
+ },
317
+ {
318
+ "href": "http://www.google.com",
319
+ "text": "Opción 12"
320
+ }
321
+ ],
322
+ "attributes": {
323
+ "id": "mi-menu-navigation-bar",
324
+ "aria-label": "Menu horizontal"
325
+ }
326
+ }
327
+ },
328
+ {
329
+ "name": "con clases de css aplicadas: tabs en escritorio",
330
+ "description": 'Clase modificadora aplicada: <code>.c-menu-horizontal--tabs</code>',
331
+ "data": {
332
+ "classes": "c-menu-horizontal--tabs",
333
+ "items": [
334
+ {
335
+ "href": "http://www.google.com",
336
+ "text": "Opción 1"
337
+ },
338
+ {
339
+ "href": "http://www.google.com",
340
+ "text": "Opción 2",
341
+ "active": true
342
+ },
343
+ {
344
+ "href": "http://www.google.com",
345
+ "text": "Opción 3"
346
+ },
347
+ {
348
+ "href": "http://www.google.com",
349
+ "text": "Opción 4",
350
+ "disabled": true
351
+ },
352
+ {
353
+ "href": "http://www.google.com",
354
+ "text": "Opción 5"
355
+ }
356
+ ],
357
+ "attributes": {
358
+ "id": "mi-menu-tabs-en-escritorio",
185
359
  "aria-label": "Menu horizontal"
186
360
  }
187
361
  }
188
362
  },
189
363
  {
190
364
  "name": "con clases aplicadas: tabs en móvil",
191
- "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',
365
+ "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales.',
192
366
  "data": {
193
367
  "classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
194
368
  "items": [
@@ -207,6 +381,7 @@
207
381
  }
208
382
  ],
209
383
  "attributes": {
384
+ "id": "mi-menu-tabs-en-movil",
210
385
  "aria-label": "Menu horizontal"
211
386
  }
212
387
  }