@warp-ds/elements 1.0.0-alpha.4 → 1.0.0-alpha.6
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/dist/expandable.html +428 -0
- package/dist/index.html +288 -0
- package/dist/packages/button/index.d.ts +1 -1
- package/dist/scripts.bd8d8c7c.js +11980 -0
- package/dist/scripts.bd8d8c7c.js.map +1 -0
- package/package.json +2 -2
- package/dist/api.js +0 -29
- package/dist/api.js.map +0 -7
- package/dist/index.js +0 -559
- package/dist/index.js.map +0 -7
|
@@ -0,0 +1,428 @@
|
|
|
1
|
+
<html lang="en">
|
|
2
|
+
<head>
|
|
3
|
+
<title>Warp Elements</title>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width" />
|
|
6
|
+
|
|
7
|
+
<link href="https://assets.finn.no/pkg/@warp-ds/tokens/v1/finn-no.css" rel="stylesheet" />
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
.tabledoc {
|
|
11
|
+
border-collapse: collapse;
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
margin-top: 2rem;
|
|
14
|
+
margin-bottom: 56px;
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.tabledoc tr {
|
|
19
|
+
border-bottom: 1px solid #ddd;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.tabledoc th {
|
|
23
|
+
text-transform: uppercase;
|
|
24
|
+
font-size: 11px;
|
|
25
|
+
text-align: left;
|
|
26
|
+
color: #767676;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tabledoc th,
|
|
30
|
+
.tabledoc td {
|
|
31
|
+
padding: 10px 16px;
|
|
32
|
+
vertical-align: top;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.doc-advanced {
|
|
36
|
+
border-collapse: collapse;
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
margin-top: 2rem;
|
|
39
|
+
margin-bottom: 56px;
|
|
40
|
+
width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.doc-advanced tr {
|
|
44
|
+
border-bottom: 1px solid #ddd;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.doc-advanced thead th {
|
|
48
|
+
font-size: 20px;
|
|
49
|
+
text-align: left;
|
|
50
|
+
padding: 24px 16px;
|
|
51
|
+
font-weight: normal;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.doc-advanced tbody th {
|
|
55
|
+
text-transform: uppercase;
|
|
56
|
+
font-size: 11px;
|
|
57
|
+
text-align: left;
|
|
58
|
+
color: #767676;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.doc-advanced tbody th,
|
|
62
|
+
.doc-advanced tbody td {
|
|
63
|
+
padding: 10px 16px;
|
|
64
|
+
vertical-align: top;
|
|
65
|
+
}
|
|
66
|
+
.example {
|
|
67
|
+
padding: 30px;
|
|
68
|
+
border: 3px solid rgb(246, 248, 250);
|
|
69
|
+
margin-bottom: 16px;
|
|
70
|
+
margin-top: -20px;
|
|
71
|
+
}
|
|
72
|
+
.grid-example {
|
|
73
|
+
padding: 16px;
|
|
74
|
+
border: 1px solid rgb(246, 248, 250);
|
|
75
|
+
margin-bottom: 16px;
|
|
76
|
+
background-color: #fafafa;
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: 8px;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
align-items: center;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
<script
|
|
87
|
+
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
|
|
88
|
+
integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg=="
|
|
89
|
+
crossorigin="anonymous"
|
|
90
|
+
></script>
|
|
91
|
+
<script type="module" crossorigin src="/scripts.bd8d8c7c.js"></script>
|
|
92
|
+
</head>
|
|
93
|
+
<body>
|
|
94
|
+
<script data-for="sidebar" type="application/json">
|
|
95
|
+
{
|
|
96
|
+
"category": "Elements",
|
|
97
|
+
"items": [
|
|
98
|
+
{
|
|
99
|
+
"title": "Action",
|
|
100
|
+
"open": true,
|
|
101
|
+
"items": [
|
|
102
|
+
{
|
|
103
|
+
"title": "Button",
|
|
104
|
+
"href": "/pages/components/button.html"
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"title": "Feedback Indicators",
|
|
110
|
+
"open": true,
|
|
111
|
+
"items": [
|
|
112
|
+
{
|
|
113
|
+
"title": "Alert",
|
|
114
|
+
"href": "/pages/components/alert.html"
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"title": "Forms",
|
|
120
|
+
"open": true,
|
|
121
|
+
"items": [
|
|
122
|
+
{
|
|
123
|
+
"title": "Select",
|
|
124
|
+
"href": "/pages/components/select.html"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"title": "Textfield",
|
|
128
|
+
"href": "/pages/components/textfield.html"
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"title": "Layout",
|
|
134
|
+
"open": true,
|
|
135
|
+
"items": [
|
|
136
|
+
{
|
|
137
|
+
"title": "Broadcast",
|
|
138
|
+
"href": "/pages/components/broadcast.html"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"title": "Box",
|
|
142
|
+
"href": "/pages/components/box.html"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"title": "Card",
|
|
146
|
+
"href": "/pages/components/card.html"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"title": "Expandable",
|
|
150
|
+
"href": "/pages/components/expandable.html"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"title": "Toast",
|
|
154
|
+
"href": "/pages/components/toast.html"
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"title": "Navigation",
|
|
160
|
+
"open": true,
|
|
161
|
+
"items": [
|
|
162
|
+
{
|
|
163
|
+
"title": "Breadcrumbs",
|
|
164
|
+
"href": "/pages/components/breadcrumbs.html"
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"title": "Overlays",
|
|
170
|
+
"open": true,
|
|
171
|
+
"items": [
|
|
172
|
+
{
|
|
173
|
+
"title": "Attention",
|
|
174
|
+
"href": "/pages/components/attention.html"
|
|
175
|
+
}
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
</script>
|
|
181
|
+
<main slot="content">
|
|
182
|
+
<h1 class="mb-16">Expandable</h1>
|
|
183
|
+
<p>Expandable is a layout component used for creating expandable content areas on a page.</p>
|
|
184
|
+
|
|
185
|
+
<h2 class="mt-24 mb-16">Props</h2>
|
|
186
|
+
<table class="w-full docs-table">
|
|
187
|
+
<thead>
|
|
188
|
+
<tr class="text-left text-gray-400 uppercase">
|
|
189
|
+
<th>prop</th>
|
|
190
|
+
<th>type</th>
|
|
191
|
+
<th>default</th>
|
|
192
|
+
</tr>
|
|
193
|
+
</thead>
|
|
194
|
+
<tbody class="align-top">
|
|
195
|
+
<tr>
|
|
196
|
+
<td>expanded</td>
|
|
197
|
+
<td>
|
|
198
|
+
<div>boolean</div>
|
|
199
|
+
<div class="annotation">Controls component's expanded state</div>
|
|
200
|
+
</td>
|
|
201
|
+
<td>false</td>
|
|
202
|
+
</tr>
|
|
203
|
+
<tr>
|
|
204
|
+
<td>bleed</td>
|
|
205
|
+
<td>
|
|
206
|
+
<div>boolean</div>
|
|
207
|
+
<div class="annotation">Makes the box full-width on mobile</div>
|
|
208
|
+
</td>
|
|
209
|
+
<td>false</td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td>info</td>
|
|
213
|
+
<td>
|
|
214
|
+
<div>boolean</div>
|
|
215
|
+
<div class="annotation">Styles the box with light blue color</div>
|
|
216
|
+
</td>
|
|
217
|
+
<td>false</td>
|
|
218
|
+
</tr>
|
|
219
|
+
<tr>
|
|
220
|
+
<td>box</td>
|
|
221
|
+
<td>
|
|
222
|
+
<div>boolean</div>
|
|
223
|
+
<div class="annotation">Whether to display the component as a padded box or not</div>
|
|
224
|
+
<td>false</td>
|
|
225
|
+
</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<td>animated</td>
|
|
229
|
+
<td>
|
|
230
|
+
<div>boolean</div>
|
|
231
|
+
<div class="annotation">Animate open and close</div>
|
|
232
|
+
<td>false</td>
|
|
233
|
+
</td>
|
|
234
|
+
</tr>
|
|
235
|
+
<tr>
|
|
236
|
+
<td>no-chevron</td>
|
|
237
|
+
<td>
|
|
238
|
+
<div>boolean</div>
|
|
239
|
+
<div class="annotation">Whether to hide the chevron on the button part of the component</div>
|
|
240
|
+
<td>false</td>
|
|
241
|
+
</td>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr>
|
|
244
|
+
<td>title</td>
|
|
245
|
+
<td>
|
|
246
|
+
<div>string</div>
|
|
247
|
+
<div class="annotation">
|
|
248
|
+
Component title. Used to display the title value which is always present
|
|
249
|
+
regardless of whether the component is open or closed.
|
|
250
|
+
</div>
|
|
251
|
+
<td></td>
|
|
252
|
+
</td>
|
|
253
|
+
</tr>
|
|
254
|
+
<tr>
|
|
255
|
+
<td>heading-level</td>
|
|
256
|
+
<td>
|
|
257
|
+
<div>number</div>
|
|
258
|
+
<div class="annotation">
|
|
259
|
+
Wrap the toggle button in a heading element with the specified level. If
|
|
260
|
+
headingLevel is not specified, the button will not be wrapped by a heading element
|
|
261
|
+
</div>
|
|
262
|
+
<td></td>
|
|
263
|
+
</td>
|
|
264
|
+
</tr>
|
|
265
|
+
<tr>
|
|
266
|
+
<td>button-class</td>
|
|
267
|
+
<td>
|
|
268
|
+
<div>string</div>
|
|
269
|
+
<div class="annotation">
|
|
270
|
+
Additional CSS classes to include on the button part of the component
|
|
271
|
+
</div>
|
|
272
|
+
</td>
|
|
273
|
+
<td></td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td>content-class</td>
|
|
277
|
+
<td>
|
|
278
|
+
<div>string</div>
|
|
279
|
+
<div class="annotation">
|
|
280
|
+
Additional CSS classes to include on the content part of the component
|
|
281
|
+
</div>
|
|
282
|
+
</td>
|
|
283
|
+
<td></td>
|
|
284
|
+
</tr>
|
|
285
|
+
</tbody>
|
|
286
|
+
</table>
|
|
287
|
+
|
|
288
|
+
<h2 class="mt-24 mb-16">Visual Options</h2>
|
|
289
|
+
|
|
290
|
+
<h3>With style modifiers</h3>
|
|
291
|
+
|
|
292
|
+
<syntax-highlight>
|
|
293
|
+
<div class="flex gap-8 flex-wrap mt-16">
|
|
294
|
+
<button class="button button--small">box</button>
|
|
295
|
+
<button class="button button--small">bleed</button>
|
|
296
|
+
<button class="button button--small">info</button>
|
|
297
|
+
<button class="button button--small">animated</button>
|
|
298
|
+
</div>
|
|
299
|
+
<w-expandable title="I'm expandable">
|
|
300
|
+
<p>with expanded content</p>
|
|
301
|
+
</w-expandable>
|
|
302
|
+
</syntax-highlight>
|
|
303
|
+
<div class="example">
|
|
304
|
+
<div id="expandableControllers" class="flex gap-8 flex-wrap mb-16" aria-controls="expandable">
|
|
305
|
+
<w-button name="box" small aria-pressed="false">box</w-button>
|
|
306
|
+
<w-button name="bleed" small aria-pressed="false">bleed</w-button>
|
|
307
|
+
<w-button name="info" small aria-pressed="false">info</w-button>
|
|
308
|
+
<w-button name="animated" small aria-pressed="false">animated</w-button>
|
|
309
|
+
</div>
|
|
310
|
+
<w-expandable id="expandable" title="I'm expandable">
|
|
311
|
+
<p>with expanded content</p>
|
|
312
|
+
</w-expandable>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<h3>With a heading wrapping the toggle button</h3>
|
|
316
|
+
<p>This can be used to wrap the toggle button in a heading for navigational and structural purposes. It's a feature that is needed typically in scenarios where multiple consecutive Expandable components are used.</p>
|
|
317
|
+
|
|
318
|
+
<syntax-highlight>
|
|
319
|
+
<w-expandable box info title="I'm expanded with h2 wrapper" heading-level="2">
|
|
320
|
+
<p>with expanded content</p>
|
|
321
|
+
</w-expandable>
|
|
322
|
+
</syntax-highlight>
|
|
323
|
+
<div class="example">
|
|
324
|
+
<w-expandable box info title="I'm expanded with h2 wrapper" heading-level="2">
|
|
325
|
+
<p>with expanded content</p>
|
|
326
|
+
</w-expandable>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<h3>With custom title</h3>
|
|
330
|
+
<p>This can be used if more control over styling is needed than the <code>title</code> prop allows</p>
|
|
331
|
+
|
|
332
|
+
<syntax-highlight>
|
|
333
|
+
<w-expandable box info>
|
|
334
|
+
<div slot="title" class="flex flex-row items-center">
|
|
335
|
+
<w-icon-bag16></w-icon-bag16>
|
|
336
|
+
<p class="ml-8 mb-0">This is a title with an icon</p>
|
|
337
|
+
</div>
|
|
338
|
+
<p>with expanded content</p>
|
|
339
|
+
</w-expandable>
|
|
340
|
+
</syntax-highlight>
|
|
341
|
+
<div class="example">
|
|
342
|
+
<w-expandable box info>
|
|
343
|
+
<div slot="title" class="flex flex-row items-center">
|
|
344
|
+
<w-icon-bag16></w-icon-bag16>
|
|
345
|
+
<p class="ml-8 mb-0">This is a title with an icon</p>
|
|
346
|
+
</div>
|
|
347
|
+
<p>with expanded content</p>
|
|
348
|
+
</w-expandable>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
<h3>Without title</h3>
|
|
353
|
+
|
|
354
|
+
<syntax-highlight>
|
|
355
|
+
<w-button variant="primary" aria-label="Toggle expandable content without title" aria-controls="expandableWithoutTitle">Toggle</w-button>
|
|
356
|
+
<w-expandable box info expanded animated id="expandableWithoutTitle">
|
|
357
|
+
<p>with expanded content</p>
|
|
358
|
+
</w-expandable>
|
|
359
|
+
</syntax-highlight>
|
|
360
|
+
<div class="example noTitle">
|
|
361
|
+
<w-button variant="primary" aria-label="Toggle expandable content without title" aria-controls="expandableWithoutTitle">Toggle</w-button>
|
|
362
|
+
<w-expandable box info expanded animated class="mt-16" id="expandableWithoutTitle">
|
|
363
|
+
<p>Expandable content</p>
|
|
364
|
+
</w-expandable>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
<h3>With expanded prop</h3>
|
|
369
|
+
|
|
370
|
+
<syntax-highlight>
|
|
371
|
+
<w-expandable box info title="I'm expanded by default" expanded>
|
|
372
|
+
<p>content should be visible</p>
|
|
373
|
+
</w-expandable>
|
|
374
|
+
</syntax-highlight>
|
|
375
|
+
<div class="example">
|
|
376
|
+
<w-expandable box info title="I'm expanded by default" expanded>
|
|
377
|
+
<p>content should be visible</p>
|
|
378
|
+
</w-expandable>
|
|
379
|
+
</div>
|
|
380
|
+
</main>
|
|
381
|
+
<script data-for="footer" type="application/json">
|
|
382
|
+
{
|
|
383
|
+
"github": {
|
|
384
|
+
"name": "Github",
|
|
385
|
+
"href": "https://github.com/warp-ds/elements"
|
|
386
|
+
},
|
|
387
|
+
"slack": {
|
|
388
|
+
"name": "#npm-warp",
|
|
389
|
+
"href": "https://sch-chat.slack.com/archives/C04P0GYTHPV"
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
</script>
|
|
393
|
+
|
|
394
|
+
<script>
|
|
395
|
+
function addEventListenersToExpandableControllers(expandableId) {
|
|
396
|
+
const expandableElement = document.getElementById(expandableId);
|
|
397
|
+
const controllersWrapperId = `#${expandableId}Controllers`;
|
|
398
|
+
|
|
399
|
+
document.querySelectorAll(`${controllersWrapperId} w-button`).forEach((el) => {
|
|
400
|
+
el.addEventListener('click', (event) => {
|
|
401
|
+
const name = event.target.getAttribute('name') || 'info';
|
|
402
|
+
expandableElement[name] = !expandableElement[name];
|
|
403
|
+
|
|
404
|
+
if (expandableElement[name]) {
|
|
405
|
+
el.buttonClass = 'bg-gray-200 hover:bg-gray-300 active:bg-gray-400';
|
|
406
|
+
el.ariaPressed = true;
|
|
407
|
+
expandableElement.title = expandableElement.title + ` ${name}`;
|
|
408
|
+
} else {
|
|
409
|
+
el.buttonClass = undefined;
|
|
410
|
+
el.ariaPressed = false;
|
|
411
|
+
expandableElement.title = expandableElement.title.replace(` ${name}`, '');
|
|
412
|
+
}
|
|
413
|
+
});
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
document.querySelectorAll('.example w-expandable').forEach((el) => {
|
|
418
|
+
const expandableId = el.getAttribute('id');
|
|
419
|
+
addEventListenersToExpandableControllers(expandableId);
|
|
420
|
+
});
|
|
421
|
+
|
|
422
|
+
document.querySelector('.noTitle w-button').addEventListener('click', (event) => {
|
|
423
|
+
const expandable = document.querySelector('.noTitle w-expandable');
|
|
424
|
+
expandable.expanded = !expandable.expanded;
|
|
425
|
+
});
|
|
426
|
+
</script>
|
|
427
|
+
</body>
|
|
428
|
+
</html>
|