@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
package/dist/index.html
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
<html lang="en">
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<title>Warp Elements</title>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width" />
|
|
7
|
+
|
|
8
|
+
<link href="https://assets.finn.no/pkg/@warp-ds/tokens/v1/finn-no.css" rel="stylesheet" />
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
.tabledoc {
|
|
12
|
+
border-collapse: collapse;
|
|
13
|
+
font-size: 14px;
|
|
14
|
+
margin-top: 2rem;
|
|
15
|
+
margin-bottom: 56px;
|
|
16
|
+
width: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.tabledoc tr {
|
|
20
|
+
border-bottom: 1px solid #ddd;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.tabledoc th {
|
|
24
|
+
text-transform: uppercase;
|
|
25
|
+
font-size: 11px;
|
|
26
|
+
text-align: left;
|
|
27
|
+
color: #767676;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.tabledoc th,
|
|
31
|
+
.tabledoc td {
|
|
32
|
+
padding: 10px 16px;
|
|
33
|
+
vertical-align: top;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.doc-advanced {
|
|
37
|
+
border-collapse: collapse;
|
|
38
|
+
font-size: 14px;
|
|
39
|
+
margin-top: 2rem;
|
|
40
|
+
margin-bottom: 56px;
|
|
41
|
+
width: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.doc-advanced tr {
|
|
45
|
+
border-bottom: 1px solid #ddd;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.doc-advanced thead th {
|
|
49
|
+
font-size: 20px;
|
|
50
|
+
text-align: left;
|
|
51
|
+
padding: 24px 16px;
|
|
52
|
+
font-weight: normal;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.doc-advanced tbody th {
|
|
56
|
+
text-transform: uppercase;
|
|
57
|
+
font-size: 11px;
|
|
58
|
+
text-align: left;
|
|
59
|
+
color: #767676;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.doc-advanced tbody th,
|
|
63
|
+
.doc-advanced tbody td {
|
|
64
|
+
padding: 10px 16px;
|
|
65
|
+
vertical-align: top;
|
|
66
|
+
}
|
|
67
|
+
.example {
|
|
68
|
+
padding: 30px;
|
|
69
|
+
border: 3px solid rgb(246, 248, 250);
|
|
70
|
+
margin-bottom: 16px;
|
|
71
|
+
margin-top: -20px;
|
|
72
|
+
}
|
|
73
|
+
.grid-example {
|
|
74
|
+
padding: 16px;
|
|
75
|
+
border: 1px solid rgb(246, 248, 250);
|
|
76
|
+
margin-bottom: 16px;
|
|
77
|
+
background-color: #fafafa;
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
gap: 8px;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
align-items: center;
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<script
|
|
88
|
+
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
|
|
89
|
+
integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg=="
|
|
90
|
+
crossorigin="anonymous"
|
|
91
|
+
></script>
|
|
92
|
+
<script type="module" crossorigin src="/scripts.bd8d8c7c.js"></script>
|
|
93
|
+
</head>
|
|
94
|
+
<body>
|
|
95
|
+
<script data-for="sidebar" type="application/json">
|
|
96
|
+
{
|
|
97
|
+
"category": "Elements",
|
|
98
|
+
"items": [
|
|
99
|
+
{
|
|
100
|
+
"title": "Action",
|
|
101
|
+
"open": true,
|
|
102
|
+
"items": [
|
|
103
|
+
{
|
|
104
|
+
"title": "Button",
|
|
105
|
+
"href": "/pages/components/button.html"
|
|
106
|
+
}
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"title": "Feedback Indicators",
|
|
111
|
+
"open": true,
|
|
112
|
+
"items": [
|
|
113
|
+
{
|
|
114
|
+
"title": "Alert",
|
|
115
|
+
"href": "/pages/components/alert.html"
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"title": "Forms",
|
|
121
|
+
"open": true,
|
|
122
|
+
"items": [
|
|
123
|
+
{
|
|
124
|
+
"title": "Select",
|
|
125
|
+
"href": "/pages/components/select.html"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"title": "Textfield",
|
|
129
|
+
"href": "/pages/components/textfield.html"
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"title": "Layout",
|
|
135
|
+
"open": true,
|
|
136
|
+
"items": [
|
|
137
|
+
{
|
|
138
|
+
"title": "Broadcast",
|
|
139
|
+
"href": "/pages/components/broadcast.html"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"title": "Box",
|
|
143
|
+
"href": "/pages/components/box.html"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"title": "Card",
|
|
147
|
+
"href": "/pages/components/card.html"
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"title": "Expandable",
|
|
151
|
+
"href": "/pages/components/expandable.html"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"title": "Toast",
|
|
155
|
+
"href": "/pages/components/toast.html"
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"title": "Navigation",
|
|
161
|
+
"open": true,
|
|
162
|
+
"items": [
|
|
163
|
+
{
|
|
164
|
+
"title": "Breadcrumbs",
|
|
165
|
+
"href": "/pages/components/breadcrumbs.html"
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"title": "Overlays",
|
|
171
|
+
"open": true,
|
|
172
|
+
"items": [
|
|
173
|
+
{
|
|
174
|
+
"title": "Attention",
|
|
175
|
+
"href": "/pages/components/attention.html"
|
|
176
|
+
}
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
</script>
|
|
182
|
+
|
|
183
|
+
<div slot="banner" class="mx-auto p-32" style="max-width: 1024">
|
|
184
|
+
<div class="md:grid md:grid-cols-3">
|
|
185
|
+
<div class="md:col-span-2">
|
|
186
|
+
<h1 style="font-size: 48px; line-height: 56px" class="text-white mb-16">
|
|
187
|
+
Warp Elements
|
|
188
|
+
</h1>
|
|
189
|
+
<p style="font-size: 22px; line-height: 28px" class="text-white">
|
|
190
|
+
The home of the web component, or custom elements, implementation of Warp.
|
|
191
|
+
</p>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<main slot="content">
|
|
197
|
+
<div class="grid lg:grid-cols-3 gap-16">
|
|
198
|
+
<div class="lg:col-span-2">
|
|
199
|
+
<h2 class="mb-16">Installation</h2>
|
|
200
|
+
|
|
201
|
+
<p>
|
|
202
|
+
All the Warp Elements code is provided as a single package and each component can be
|
|
203
|
+
imported from this package.
|
|
204
|
+
</p>
|
|
205
|
+
|
|
206
|
+
<h3 class="mt-24 mb-16">Install from NPM</h3>
|
|
207
|
+
|
|
208
|
+
<p>The Warp Elements package can be installed from NPM.</p>
|
|
209
|
+
|
|
210
|
+
<syntax-highlight>npm install @warp-ds/elements</syntax-highlight>
|
|
211
|
+
|
|
212
|
+
<h3 class="mt-24 mb-16">Install from Eik</h3>
|
|
213
|
+
|
|
214
|
+
<p>The same package is also available via our Eik CDN server</p>
|
|
215
|
+
|
|
216
|
+
<syntax-highlight
|
|
217
|
+
>https://assets.finn.no/pkg/@warp-ds/elements/v1/index.js</syntax-highlight
|
|
218
|
+
>
|
|
219
|
+
|
|
220
|
+
<h2 class="mt-32 mb-16">Using Components</h2>
|
|
221
|
+
|
|
222
|
+
<p>Once installed, components can be used in your HTML markup.</p>
|
|
223
|
+
<syntax-highlight>
|
|
224
|
+
<w-breadcrumbs class="mt-10">
|
|
225
|
+
<a href="#/url/1">Eiendom</a>
|
|
226
|
+
<a href="#/url/2">Bolig til salgs</a>
|
|
227
|
+
<a href="#/url/3" aria-current="page"> Oslo </a>
|
|
228
|
+
</w-breadcrumbs>
|
|
229
|
+
</syntax-highlight>
|
|
230
|
+
|
|
231
|
+
<w-breadcrumbs class="mt-10">
|
|
232
|
+
<a href="#/url/1">Eiendom</a>
|
|
233
|
+
<a href="#/url/2">Bolig til salgs</a>
|
|
234
|
+
<a href="#/url/3" aria-current="page"> Oslo </a>
|
|
235
|
+
</w-breadcrumbs>
|
|
236
|
+
|
|
237
|
+
<br />
|
|
238
|
+
|
|
239
|
+
<h4 class="mt-24 mb-16">Importing from the NPM package</h4>
|
|
240
|
+
|
|
241
|
+
👉
|
|
242
|
+
<strong><i>This is the most common method and should be used in most cases</i></strong>
|
|
243
|
+
|
|
244
|
+
When importing from NPM you will need to ensure you have build tooling in place. If you
|
|
245
|
+
are working with Podium podlets or layouts which is the most common use case at Finn,
|
|
246
|
+
you likely already have Eik in place with Rollup or Esbuild in which case no further
|
|
247
|
+
action should be needed.
|
|
248
|
+
|
|
249
|
+
<i>Example</i>
|
|
250
|
+
<syntax-highlight>import '@warp-ds/elements';</syntax-highlight>
|
|
251
|
+
|
|
252
|
+
<h4 class="mt-24 mb-16">Importing directly from Eik</h4>
|
|
253
|
+
|
|
254
|
+
👉
|
|
255
|
+
<strong><i>This is great for prototyping (can also be used in production)</i></strong>
|
|
256
|
+
|
|
257
|
+
<p>
|
|
258
|
+
It is also possible to import components directly from the URL on our Eik server.
|
|
259
|
+
While not common, it should be possible to write Elements code without the need for a
|
|
260
|
+
build setup. You might find this useful for rapid prototyping something on a hack day
|
|
261
|
+
for example!
|
|
262
|
+
</p>
|
|
263
|
+
|
|
264
|
+
<i>Example</i>
|
|
265
|
+
<syntax-highlight>
|
|
266
|
+
import 'https://assets.finn.no/pkg/@warp-ds/elements/v1/index.js';
|
|
267
|
+
</syntax-highlight>
|
|
268
|
+
</div>
|
|
269
|
+
<div>
|
|
270
|
+
<w-docs-highlight-box></w-docs-highlight-box>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</main>
|
|
274
|
+
<script data-for="footer" type="application/json">
|
|
275
|
+
{
|
|
276
|
+
"github": {
|
|
277
|
+
"name": "Github",
|
|
278
|
+
"href": "https://github.com/warp-ds/elements"
|
|
279
|
+
},
|
|
280
|
+
"slack": {
|
|
281
|
+
"name": "#npm-warp",
|
|
282
|
+
"href": "https://sch-chat.slack.com/archives/C04P0GYTHPV"
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
</script>
|
|
286
|
+
|
|
287
|
+
</body>
|
|
288
|
+
</html>
|