@dta-au/civictheme-twig 1.13.6 → 1.14.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/components/01-atoms/summary-list/summary-list.scss +6 -0
- package/components/01-atoms/summary-list/summary-list.stories.js +37 -0
- package/components/01-atoms/summary-list/summary-list.twig +9 -1
- package/components/02-molecules/tabs/__snapshots__/tabs.test.js.snap +454 -15
- package/components/02-molecules/tabs/tabs.js +43 -0
- package/components/02-molecules/tabs/tabs.scss +86 -1
- package/components/02-molecules/tabs/tabs.stories.js +39 -0
- package/components/02-molecules/tabs/tabs.test.js +69 -0
- package/components/02-molecules/tabs/tabs.twig +38 -8
- package/components/03-organisms/filterable-table/filterable-table.js +59 -27
- package/components/03-organisms/filterable-table/filterable-table.stories.data.js +56 -0
- package/components/03-organisms/filterable-table/filterable-table.stories.js +22 -1
- package/components/03-organisms/filterable-table/filterable-table.twig +4 -1
- package/dist/civictheme.css +83 -2
- package/dist/civictheme.storybook.css +83 -2
- package/dist/civictheme.storybook.js +102 -27
- package/package.json +1 -1
|
@@ -19,6 +19,9 @@ const meta = {
|
|
|
19
19
|
no_border: {
|
|
20
20
|
control: { type: 'boolean' },
|
|
21
21
|
},
|
|
22
|
+
id: {
|
|
23
|
+
control: { type: 'text' },
|
|
24
|
+
},
|
|
22
25
|
items: {
|
|
23
26
|
control: { type: 'object' },
|
|
24
27
|
},
|
|
@@ -87,3 +90,37 @@ export const WithActions = {
|
|
|
87
90
|
],
|
|
88
91
|
},
|
|
89
92
|
};
|
|
93
|
+
|
|
94
|
+
// Rows carry id + per-row filter_values, the contract the filterable-table
|
|
95
|
+
// behaviour (target_type: list) reads via data-filter-col-N. Glossary example
|
|
96
|
+
// (term -> definition) — the canonical <dl> use case; Category is a filter
|
|
97
|
+
// dimension not shown in the row. See the "Filterable Definition List" story
|
|
98
|
+
// under Content/Tables/Filterable table for the controls wired up. The <dl>
|
|
99
|
+
// alone is fully usable without JS.
|
|
100
|
+
export const Filterable = {
|
|
101
|
+
name: 'With filter attributes',
|
|
102
|
+
args: {
|
|
103
|
+
theme: 'light',
|
|
104
|
+
no_border: false,
|
|
105
|
+
modifier_class: '',
|
|
106
|
+
attributes: null,
|
|
107
|
+
id: 'digital-glossary',
|
|
108
|
+
items: [
|
|
109
|
+
{
|
|
110
|
+
key: 'Accessibility',
|
|
111
|
+
value: 'Designing services so everyone, including people with disability, can use them.',
|
|
112
|
+
filter_values: ['Accessibility', 'Inclusion'],
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
key: 'Design system',
|
|
116
|
+
value: 'A library of reusable components and standards for building consistent services.',
|
|
117
|
+
filter_values: ['Design system', 'Design'],
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
key: 'Open data',
|
|
121
|
+
value: 'Data published in a reusable, openly licensed, machine-readable format.',
|
|
122
|
+
filter_values: ['Open data', 'Data'],
|
|
123
|
+
},
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
};
|
|
@@ -6,12 +6,16 @@
|
|
|
6
6
|
* Props:
|
|
7
7
|
* - theme: [string]
|
|
8
8
|
* - no_border: [boolean]
|
|
9
|
+
* - id: [string] Optional id on the <dl>, e.g. so a filterable-table control set can target it.
|
|
9
10
|
* - items: [array] :
|
|
10
11
|
* Each item contains:
|
|
11
12
|
* - key: [string]
|
|
12
13
|
* - value: [string]
|
|
13
14
|
* - action_url: [string]
|
|
14
15
|
* - action_text: [string]
|
|
16
|
+
* - filter_values: [array] Optional per-column filterable values (order matches the filterable-table columns). When set, the row carries data-filter-row plus data-filter-col-N attributes.
|
|
17
|
+
* Each item contains:
|
|
18
|
+
* - items [string]
|
|
15
19
|
* - modifier_class: [string]
|
|
16
20
|
* - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
|
|
17
21
|
*/
|
|
@@ -26,11 +30,15 @@
|
|
|
26
30
|
<dl
|
|
27
31
|
class="ct-summary-list {{ modifier_class|trim }}"
|
|
28
32
|
data-component-name="ct-summary-list"
|
|
33
|
+
{%- if id is not empty %} id="{{ id }}"{% endif %}
|
|
29
34
|
{%- if attributes is defined and attributes is not null %} {{- attributes -}}{% endif %}
|
|
30
35
|
>
|
|
31
36
|
{% for item in items %}
|
|
32
37
|
{% if item.key is not empty and item.value is not empty %}
|
|
33
|
-
<div
|
|
38
|
+
<div
|
|
39
|
+
class="ct-summary-list__row"
|
|
40
|
+
{%- if item.filter_values is not empty %} data-filter-row{% for filter_value in item.filter_values %} data-filter-col-{{ loop.index0 }}="{{ filter_value }}"{% endfor %}{% endif %}
|
|
41
|
+
>
|
|
34
42
|
<dt class="ct-summary-list__key">{{ item.key }}</dt>
|
|
35
43
|
<dd class="ct-summary-list__value">{{ item.value }}</dd>
|
|
36
44
|
{% if item.action_url is not empty %}
|
|
@@ -1,30 +1,386 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`Tabs Component
|
|
3
|
+
exports[`Tabs Component collapse_mobile summary falls back to collapse_label when no link is active 1`] = `
|
|
4
4
|
<div>
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
class="ct-tabs ct-theme-light ct-tabs--collapse-mobile "
|
|
15
|
+
data-tabs-panel=""
|
|
16
|
+
>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
<details
|
|
22
|
+
class="ct-tabs__disclosure"
|
|
23
|
+
data-tabs-disclosure=""
|
|
24
|
+
open=""
|
|
25
|
+
>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
<summary
|
|
29
|
+
class="ct-tabs__disclosure__summary"
|
|
30
|
+
>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<span
|
|
34
|
+
aria-hidden="true"
|
|
35
|
+
class="ct-tabs__disclosure__icon"
|
|
36
|
+
>
|
|
37
|
+
<svg
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
class="ct-icon"
|
|
40
|
+
fill="currentColor"
|
|
41
|
+
height="24"
|
|
42
|
+
viewBox="0 -960 960 960"
|
|
43
|
+
width="24"
|
|
44
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
>
|
|
46
|
+
<path
|
|
47
|
+
d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"
|
|
48
|
+
/>
|
|
49
|
+
</svg>
|
|
50
|
+
</span>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
<span
|
|
54
|
+
class="ct-tabs__disclosure__label"
|
|
55
|
+
>
|
|
56
|
+
Filters
|
|
57
|
+
</span>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
<span
|
|
61
|
+
aria-hidden="true"
|
|
62
|
+
class="ct-tabs__disclosure__chevron"
|
|
63
|
+
>
|
|
64
|
+
<svg
|
|
65
|
+
aria-hidden="true"
|
|
66
|
+
class="ct-icon"
|
|
67
|
+
fill="currentColor"
|
|
68
|
+
height="24"
|
|
69
|
+
viewBox="0 0 24 24"
|
|
70
|
+
width="24"
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
+
>
|
|
73
|
+
<path
|
|
74
|
+
d="M18.6072 8.38619C18.3583 8.13884 18.0217 8 17.6709 8C17.32 8 16.9834 8.13884 16.7346 8.38619L11.9668 13.0876L7.26542 8.38619C7.01659 8.13884 6.67999 8 6.32913 8C5.97827 8 5.64167 8.13884 5.39284 8.38619C5.26836 8.50965 5.16956 8.65654 5.10214 8.81838C5.03471 8.98022 5 9.1538 5 9.32912C5 9.50445 5.03471 9.67803 5.10214 9.83987C5.16956 10.0017 5.26836 10.1486 5.39284 10.2721L11.0239 15.9031C11.1473 16.0276 11.2942 16.1264 11.4561 16.1938C11.6179 16.2612 11.7915 16.2959 11.9668 16.2959C12.1421 16.2959 12.3157 16.2612 12.4775 16.1938C12.6394 16.1264 12.7863 16.0276 12.9097 15.9031L18.6072 10.2721C18.7316 10.1486 18.8304 10.0017 18.8979 9.83987C18.9653 9.67803 19 9.50445 19 9.32912C19 9.1538 18.9653 8.98022 18.8979 8.81838C18.8304 8.65654 18.7316 8.50965 18.6072 8.38619Z"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
</span>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
</summary>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
<ul
|
|
86
|
+
class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap ct-tabs__links"
|
|
87
|
+
>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<li
|
|
91
|
+
class="ct-item-list__item"
|
|
92
|
+
>
|
|
93
|
+
|
|
94
|
+
<a
|
|
95
|
+
class="ct-link ct-theme-light"
|
|
96
|
+
data-tabs-tab=""
|
|
97
|
+
href="#all"
|
|
98
|
+
>
|
|
99
|
+
<span
|
|
100
|
+
class="ct-text-icon__text"
|
|
101
|
+
>
|
|
102
|
+
All
|
|
103
|
+
</span>
|
|
104
|
+
</a>
|
|
105
|
+
|
|
106
|
+
</li>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
<li
|
|
110
|
+
class="ct-item-list__item"
|
|
111
|
+
>
|
|
112
|
+
|
|
113
|
+
<a
|
|
114
|
+
class="ct-link ct-theme-light"
|
|
115
|
+
data-tabs-tab=""
|
|
116
|
+
href="#platform"
|
|
117
|
+
>
|
|
118
|
+
<span
|
|
119
|
+
class="ct-text-icon__text"
|
|
120
|
+
>
|
|
121
|
+
Platform
|
|
122
|
+
</span>
|
|
123
|
+
</a>
|
|
124
|
+
|
|
125
|
+
</li>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
</ul>
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
</details>
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
</div>
|
|
137
|
+
|
|
10
138
|
|
|
11
139
|
</div>
|
|
12
140
|
`;
|
|
13
141
|
|
|
14
|
-
exports[`Tabs Component
|
|
142
|
+
exports[`Tabs Component collapse_mobile wraps links in a Details disclosure with the active label 1`] = `
|
|
15
143
|
<div>
|
|
16
144
|
|
|
17
145
|
|
|
18
146
|
|
|
19
147
|
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
<div
|
|
153
|
+
class="ct-tabs ct-theme-light ct-tabs--collapse-mobile "
|
|
154
|
+
data-tabs-panel=""
|
|
155
|
+
>
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
<details
|
|
161
|
+
class="ct-tabs__disclosure"
|
|
162
|
+
data-tabs-disclosure=""
|
|
163
|
+
open=""
|
|
164
|
+
>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<summary
|
|
168
|
+
class="ct-tabs__disclosure__summary"
|
|
169
|
+
>
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
<span
|
|
173
|
+
aria-hidden="true"
|
|
174
|
+
class="ct-tabs__disclosure__icon"
|
|
175
|
+
>
|
|
176
|
+
<svg
|
|
177
|
+
aria-hidden="true"
|
|
178
|
+
class="ct-icon"
|
|
179
|
+
fill="currentColor"
|
|
180
|
+
height="24"
|
|
181
|
+
viewBox="0 -960 960 960"
|
|
182
|
+
width="24"
|
|
183
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
184
|
+
>
|
|
185
|
+
<path
|
|
186
|
+
d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"
|
|
187
|
+
/>
|
|
188
|
+
</svg>
|
|
189
|
+
</span>
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
<span
|
|
193
|
+
class="ct-tabs__disclosure__label"
|
|
194
|
+
>
|
|
195
|
+
All
|
|
196
|
+
</span>
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
<span
|
|
200
|
+
aria-hidden="true"
|
|
201
|
+
class="ct-tabs__disclosure__chevron"
|
|
202
|
+
>
|
|
203
|
+
<svg
|
|
204
|
+
aria-hidden="true"
|
|
205
|
+
class="ct-icon"
|
|
206
|
+
fill="currentColor"
|
|
207
|
+
height="24"
|
|
208
|
+
viewBox="0 0 24 24"
|
|
209
|
+
width="24"
|
|
210
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
211
|
+
>
|
|
212
|
+
<path
|
|
213
|
+
d="M18.6072 8.38619C18.3583 8.13884 18.0217 8 17.6709 8C17.32 8 16.9834 8.13884 16.7346 8.38619L11.9668 13.0876L7.26542 8.38619C7.01659 8.13884 6.67999 8 6.32913 8C5.97827 8 5.64167 8.13884 5.39284 8.38619C5.26836 8.50965 5.16956 8.65654 5.10214 8.81838C5.03471 8.98022 5 9.1538 5 9.32912C5 9.50445 5.03471 9.67803 5.10214 9.83987C5.16956 10.0017 5.26836 10.1486 5.39284 10.2721L11.0239 15.9031C11.1473 16.0276 11.2942 16.1264 11.4561 16.1938C11.6179 16.2612 11.7915 16.2959 11.9668 16.2959C12.1421 16.2959 12.3157 16.2612 12.4775 16.1938C12.6394 16.1264 12.7863 16.0276 12.9097 15.9031L18.6072 10.2721C18.7316 10.1486 18.8304 10.0017 18.8979 9.83987C18.9653 9.67803 19 9.50445 19 9.32912C19 9.1538 18.9653 8.98022 18.8979 8.81838C18.8304 8.65654 18.7316 8.50965 18.6072 8.38619Z"
|
|
214
|
+
/>
|
|
215
|
+
</svg>
|
|
216
|
+
</span>
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
</summary>
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
<ul
|
|
225
|
+
class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap ct-tabs__links"
|
|
226
|
+
>
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
<li
|
|
230
|
+
class="ct-item-list__item"
|
|
231
|
+
>
|
|
232
|
+
|
|
233
|
+
<a
|
|
234
|
+
aria-current="true"
|
|
235
|
+
class="ct-link ct-theme-light ct-tabs__tab--selected"
|
|
236
|
+
data-tabs-tab=""
|
|
237
|
+
href="#all"
|
|
238
|
+
>
|
|
239
|
+
<span
|
|
240
|
+
class="ct-text-icon__text"
|
|
241
|
+
>
|
|
242
|
+
All
|
|
243
|
+
</span>
|
|
244
|
+
</a>
|
|
245
|
+
|
|
246
|
+
</li>
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
<li
|
|
250
|
+
class="ct-item-list__item"
|
|
251
|
+
>
|
|
252
|
+
|
|
253
|
+
<a
|
|
254
|
+
class="ct-link ct-theme-light"
|
|
255
|
+
data-tabs-tab=""
|
|
256
|
+
href="#platform"
|
|
257
|
+
>
|
|
258
|
+
<span
|
|
259
|
+
class="ct-text-icon__text"
|
|
260
|
+
>
|
|
261
|
+
Platform
|
|
262
|
+
</span>
|
|
263
|
+
</a>
|
|
264
|
+
|
|
265
|
+
</li>
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
</ul>
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
</details>
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
</div>
|
|
280
|
+
`;
|
|
281
|
+
|
|
282
|
+
exports[`Tabs Component does not render the disclosure without collapse_mobile 1`] = `
|
|
283
|
+
<div>
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
<div
|
|
293
|
+
class="ct-tabs ct-theme-light "
|
|
294
|
+
data-tabs-panel=""
|
|
295
|
+
>
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
<ul
|
|
302
|
+
class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap ct-tabs__links"
|
|
303
|
+
>
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
<li
|
|
307
|
+
class="ct-item-list__item"
|
|
308
|
+
>
|
|
309
|
+
|
|
310
|
+
<a
|
|
311
|
+
aria-current="true"
|
|
312
|
+
class="ct-link ct-theme-light ct-tabs__tab--selected"
|
|
313
|
+
data-tabs-tab=""
|
|
314
|
+
href="#all"
|
|
315
|
+
>
|
|
316
|
+
<span
|
|
317
|
+
class="ct-text-icon__text"
|
|
318
|
+
>
|
|
319
|
+
All
|
|
320
|
+
</span>
|
|
321
|
+
</a>
|
|
322
|
+
|
|
323
|
+
</li>
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
<li
|
|
327
|
+
class="ct-item-list__item"
|
|
328
|
+
>
|
|
20
329
|
|
|
330
|
+
<a
|
|
331
|
+
class="ct-link ct-theme-light"
|
|
332
|
+
data-tabs-tab=""
|
|
333
|
+
href="#platform"
|
|
334
|
+
>
|
|
335
|
+
<span
|
|
336
|
+
class="ct-text-icon__text"
|
|
337
|
+
>
|
|
338
|
+
Platform
|
|
339
|
+
</span>
|
|
340
|
+
</a>
|
|
341
|
+
|
|
342
|
+
</li>
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
</ul>
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
</div>
|
|
354
|
+
`;
|
|
355
|
+
|
|
356
|
+
exports[`Tabs Component does not render when panels are empty 1`] = `
|
|
357
|
+
<div>
|
|
21
358
|
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
</div>
|
|
365
|
+
`;
|
|
366
|
+
|
|
367
|
+
exports[`Tabs Component marks the active link via is_active (links-only) 1`] = `
|
|
368
|
+
<div>
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
|
|
22
377
|
<div
|
|
23
|
-
class="ct-tabs ct-theme-light
|
|
378
|
+
class="ct-tabs ct-theme-light "
|
|
24
379
|
data-tabs-panel=""
|
|
25
380
|
>
|
|
26
381
|
|
|
27
382
|
|
|
383
|
+
|
|
28
384
|
|
|
29
385
|
|
|
30
386
|
<ul
|
|
@@ -35,7 +391,81 @@ exports[`Tabs Component renders with generated links from panels 1`] = `
|
|
|
35
391
|
<li
|
|
36
392
|
class="ct-item-list__item"
|
|
37
393
|
>
|
|
394
|
+
|
|
395
|
+
<a
|
|
396
|
+
aria-current="true"
|
|
397
|
+
class="ct-link ct-theme-light ct-tabs__tab--selected"
|
|
398
|
+
data-tabs-tab=""
|
|
399
|
+
href="#all"
|
|
400
|
+
>
|
|
401
|
+
<span
|
|
402
|
+
class="ct-text-icon__text"
|
|
403
|
+
>
|
|
404
|
+
All
|
|
405
|
+
</span>
|
|
406
|
+
</a>
|
|
407
|
+
|
|
408
|
+
</li>
|
|
409
|
+
|
|
410
|
+
|
|
411
|
+
<li
|
|
412
|
+
class="ct-item-list__item"
|
|
413
|
+
>
|
|
414
|
+
|
|
415
|
+
<a
|
|
416
|
+
class="ct-link ct-theme-light"
|
|
417
|
+
data-tabs-tab=""
|
|
418
|
+
href="#platform"
|
|
419
|
+
>
|
|
420
|
+
<span
|
|
421
|
+
class="ct-text-icon__text"
|
|
422
|
+
>
|
|
423
|
+
Platform
|
|
424
|
+
</span>
|
|
425
|
+
</a>
|
|
426
|
+
|
|
427
|
+
</li>
|
|
428
|
+
|
|
429
|
+
|
|
430
|
+
</ul>
|
|
431
|
+
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
|
|
438
|
+
</div>
|
|
439
|
+
`;
|
|
440
|
+
|
|
441
|
+
exports[`Tabs Component renders with generated links from panels 1`] = `
|
|
442
|
+
<div>
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
|
|
451
|
+
<div
|
|
452
|
+
class="ct-tabs ct-theme-light "
|
|
453
|
+
data-tabs-panel=""
|
|
454
|
+
>
|
|
455
|
+
|
|
456
|
+
|
|
38
457
|
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
<ul
|
|
461
|
+
class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap ct-tabs__links"
|
|
462
|
+
>
|
|
463
|
+
|
|
464
|
+
|
|
465
|
+
<li
|
|
466
|
+
class="ct-item-list__item"
|
|
467
|
+
>
|
|
468
|
+
|
|
39
469
|
<a
|
|
40
470
|
_keys="role id aria-controls"
|
|
41
471
|
aria-controls="tab1"
|
|
@@ -58,7 +488,7 @@ exports[`Tabs Component renders with generated links from panels 1`] = `
|
|
|
58
488
|
<li
|
|
59
489
|
class="ct-item-list__item"
|
|
60
490
|
>
|
|
61
|
-
|
|
491
|
+
|
|
62
492
|
<a
|
|
63
493
|
_keys="role id aria-controls"
|
|
64
494
|
aria-controls="tab2"
|
|
@@ -80,7 +510,8 @@ exports[`Tabs Component renders with generated links from panels 1`] = `
|
|
|
80
510
|
|
|
81
511
|
</ul>
|
|
82
512
|
|
|
83
|
-
|
|
513
|
+
|
|
514
|
+
|
|
84
515
|
|
|
85
516
|
<div
|
|
86
517
|
class="ct-tabs__panels"
|
|
@@ -129,14 +560,17 @@ exports[`Tabs Component renders with optional attributes 1`] = `
|
|
|
129
560
|
|
|
130
561
|
|
|
131
562
|
|
|
132
|
-
|
|
563
|
+
|
|
564
|
+
|
|
565
|
+
|
|
133
566
|
<div
|
|
134
|
-
class="ct-tabs ct-theme-dark ct-vertical-spacing--both
|
|
567
|
+
class="ct-tabs ct-theme-dark ct-vertical-spacing--both custom-class"
|
|
135
568
|
data-tabs-panel=""
|
|
136
569
|
data-test="true"
|
|
137
570
|
>
|
|
138
571
|
|
|
139
572
|
|
|
573
|
+
|
|
140
574
|
|
|
141
575
|
|
|
142
576
|
<ul
|
|
@@ -147,7 +581,7 @@ exports[`Tabs Component renders with optional attributes 1`] = `
|
|
|
147
581
|
<li
|
|
148
582
|
class="ct-item-list__item"
|
|
149
583
|
>
|
|
150
|
-
|
|
584
|
+
|
|
151
585
|
<a
|
|
152
586
|
_keys="role id aria-controls"
|
|
153
587
|
aria-controls="tab1"
|
|
@@ -170,7 +604,7 @@ exports[`Tabs Component renders with optional attributes 1`] = `
|
|
|
170
604
|
<li
|
|
171
605
|
class="ct-item-list__item"
|
|
172
606
|
>
|
|
173
|
-
|
|
607
|
+
|
|
174
608
|
<a
|
|
175
609
|
_keys="role id aria-controls"
|
|
176
610
|
aria-controls="tab2"
|
|
@@ -192,7 +626,8 @@ exports[`Tabs Component renders with optional attributes 1`] = `
|
|
|
192
626
|
|
|
193
627
|
</ul>
|
|
194
628
|
|
|
195
|
-
|
|
629
|
+
|
|
630
|
+
|
|
196
631
|
|
|
197
632
|
<div
|
|
198
633
|
class="ct-tabs__panels"
|
|
@@ -241,13 +676,16 @@ exports[`Tabs Component renders with required attributes 1`] = `
|
|
|
241
676
|
|
|
242
677
|
|
|
243
678
|
|
|
244
|
-
|
|
679
|
+
|
|
680
|
+
|
|
681
|
+
|
|
245
682
|
<div
|
|
246
|
-
class="ct-tabs ct-theme-light
|
|
683
|
+
class="ct-tabs ct-theme-light "
|
|
247
684
|
data-tabs-panel=""
|
|
248
685
|
>
|
|
249
686
|
|
|
250
687
|
|
|
688
|
+
|
|
251
689
|
|
|
252
690
|
|
|
253
691
|
<ul
|
|
@@ -258,7 +696,7 @@ exports[`Tabs Component renders with required attributes 1`] = `
|
|
|
258
696
|
<li
|
|
259
697
|
class="ct-item-list__item"
|
|
260
698
|
>
|
|
261
|
-
|
|
699
|
+
|
|
262
700
|
<a
|
|
263
701
|
_keys="role id aria-controls"
|
|
264
702
|
aria-controls="tab1"
|
|
@@ -281,7 +719,7 @@ exports[`Tabs Component renders with required attributes 1`] = `
|
|
|
281
719
|
<li
|
|
282
720
|
class="ct-item-list__item"
|
|
283
721
|
>
|
|
284
|
-
|
|
722
|
+
|
|
285
723
|
<a
|
|
286
724
|
_keys="role id aria-controls"
|
|
287
725
|
aria-controls="tab2"
|
|
@@ -303,7 +741,8 @@ exports[`Tabs Component renders with required attributes 1`] = `
|
|
|
303
741
|
|
|
304
742
|
</ul>
|
|
305
743
|
|
|
306
|
-
|
|
744
|
+
|
|
745
|
+
|
|
307
746
|
|
|
308
747
|
<div
|
|
309
748
|
class="ct-tabs__panels"
|