nve-designsystem 0.1.4 → 0.1.5
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/.storybook/main.ts +0 -4
- package/.storybook/preview.ts +2 -2
- package/build/css/varsom.css +74 -121
- package/index.html +22 -22
- package/package.json +1 -1
- package/src/components/index.ts +4 -4
- package/src/components/nve-icon/nve-icon.ts +14 -6
- package/src/main.ts +5 -2
- package/src/stories/examples/Button.stories.ts +49 -0
- package/src/stories/examples/Button.ts +43 -0
- package/src/stories/examples/Header.stories.ts +23 -0
- package/src/stories/examples/Header.ts +56 -0
- package/src/stories/examples/Page.stories.ts +26 -0
- package/src/stories/examples/Page.ts +72 -0
- package/src/stories/examples/button.css +30 -0
- package/src/stories/examples/header.css +32 -0
- package/src/stories/examples/page.css +69 -0
- package/src/styles/global.css +0 -3
- package/src/styles/imports.css +2 -0
- package/src/styles/testsite.css +54 -54
- package/vite.config +12 -0
- package/src/components/nve-alert/nve-alert-demo.ts +0 -96
- package/src/components/nve-alert/nve-alert.styles.ts +0 -183
- package/src/components/nve-alert/nve-alert.ts +0 -32
- package/src/stories/NveAlert.stories.ts +0 -43
- package/src/stories/NveAlert.ts +0 -58
- package/vite.config.ts +0 -8
package/.storybook/main.ts
CHANGED
|
@@ -23,10 +23,6 @@ const config: StorybookConfig = {
|
|
|
23
23
|
/>
|
|
24
24
|
<link rel="stylesheet" href="${varsomCSSPath}" />
|
|
25
25
|
<link rel="stylesheet" href="${globalCSSPath}" />
|
|
26
|
-
<link
|
|
27
|
-
rel="stylesheet"
|
|
28
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
|
29
|
-
/>
|
|
30
26
|
`,
|
|
31
27
|
docs: {
|
|
32
28
|
autodocs: 'tag',
|
package/.storybook/preview.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type { Preview } from
|
|
1
|
+
import type { Preview } from "@storybook/web-components";
|
|
2
2
|
import DocTemp from './../.storybook/DocTemp.mdx';
|
|
3
3
|
const preview: Preview = {
|
|
4
4
|
parameters: {
|
|
5
5
|
docs: {
|
|
6
6
|
//page: DocTemp, kan sette custom mdx-fil her.
|
|
7
7
|
},
|
|
8
|
-
actions: { argTypesRegex:
|
|
8
|
+
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
9
9
|
controls: {
|
|
10
10
|
matchers: {
|
|
11
11
|
color: /(background|color)$/i,
|
package/build/css/varsom.css
CHANGED
|
@@ -11,16 +11,16 @@
|
|
|
11
11
|
--varsom-blue-950: #002738;
|
|
12
12
|
--varsom-blue-900: #003147;
|
|
13
13
|
--varsom-blue-850: #00364e;
|
|
14
|
-
--varsom-blue-800: #
|
|
14
|
+
--varsom-blue-800: #00425F;
|
|
15
15
|
--varsom-blue-700: #005175;
|
|
16
16
|
--varsom-blue-600: #005c85;
|
|
17
17
|
--varsom-blue-500: #006b99;
|
|
18
|
-
--varsom-blue-400: #
|
|
18
|
+
--varsom-blue-400: #0E89BE;
|
|
19
19
|
--varsom-blue-300: #2c96c4;
|
|
20
20
|
--varsom-blue-200: #43a9d5;
|
|
21
21
|
--varsom-blue-150: #7ec4e2;
|
|
22
22
|
--varsom-blue-100: #a6d8ee;
|
|
23
|
-
--orange-050: #
|
|
23
|
+
--orange-050: #FFECD6;
|
|
24
24
|
--orange-000: #fff6f1;
|
|
25
25
|
--orange-999: #8b3200;
|
|
26
26
|
--orange-950: #973a06;
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
--orange-700: #d16325;
|
|
31
31
|
--orange-600: #e87332;
|
|
32
32
|
--orange-500: #ff833e;
|
|
33
|
-
--orange-400: #
|
|
33
|
+
--orange-400: #FF9A24;
|
|
34
34
|
--orange-300: #ffb186;
|
|
35
|
-
--orange-200: #
|
|
36
|
-
--orange-150: #
|
|
37
|
-
--orange-100: #
|
|
35
|
+
--orange-200: #FFC98A;
|
|
36
|
+
--orange-150: #FFDAAE;
|
|
37
|
+
--orange-100: #FFE3C2;
|
|
38
38
|
--varsom-brand-050: #fbc792;
|
|
39
39
|
--varsom-brand-000: #ffdfba;
|
|
40
40
|
--varsom-brand-999: #432301;
|
|
@@ -43,16 +43,16 @@
|
|
|
43
43
|
--varsom-brand-850: #763d02;
|
|
44
44
|
--varsom-brand-800: #874602;
|
|
45
45
|
--varsom-brand-700: #aa5803;
|
|
46
|
-
--varsom-brand-600: #
|
|
47
|
-
--varsom-brand-500: #
|
|
48
|
-
--varsom-brand-400: #
|
|
46
|
+
--varsom-brand-600: #F44900;
|
|
47
|
+
--varsom-brand-500: #FF5F1B;
|
|
48
|
+
--varsom-brand-400: #FF7B43;
|
|
49
49
|
--varsom-brand-300: #f49d43;
|
|
50
50
|
--varsom-brand-200: #f7ae63;
|
|
51
51
|
--varsom-brand-150: #f8b673;
|
|
52
52
|
--varsom-brand-100: #fabf82;
|
|
53
53
|
--green-050: #f0fef5;
|
|
54
54
|
--green-000: #f6fff9;
|
|
55
|
-
--green-999: #
|
|
55
|
+
--green-999: #00301C;
|
|
56
56
|
--green-950: #004126;
|
|
57
57
|
--green-900: #1a6533;
|
|
58
58
|
--green-850: #247740;
|
|
@@ -63,18 +63,18 @@
|
|
|
63
63
|
--green-400: #8af0a1;
|
|
64
64
|
--green-300: #97f2a8;
|
|
65
65
|
--green-200: #8af0a1;
|
|
66
|
-
--green-150: #
|
|
67
|
-
--green-100: #
|
|
66
|
+
--green-150: #CBF9CB;
|
|
67
|
+
--green-100: #E8FCE8;
|
|
68
68
|
--blue-050: #d5edff;
|
|
69
69
|
--blue-000: #e6f4ff;
|
|
70
|
-
--blue-999: #
|
|
71
|
-
--blue-950: #
|
|
70
|
+
--blue-999: #0B2951;
|
|
71
|
+
--blue-950: #0F3970;
|
|
72
72
|
--blue-900: #034272;
|
|
73
73
|
--blue-850: #044b81;
|
|
74
74
|
--blue-800: #0668b1;
|
|
75
|
-
--blue-700: #
|
|
76
|
-
--blue-600: #
|
|
77
|
-
--blue-500: #
|
|
75
|
+
--blue-700: #1E6FDC;
|
|
76
|
+
--blue-600: #0F81FA;
|
|
77
|
+
--blue-500: #008FFB;
|
|
78
78
|
--blue-400: #38a9ff;
|
|
79
79
|
--blue-300: #65bdff;
|
|
80
80
|
--blue-200: #91d0ff;
|
|
@@ -82,8 +82,8 @@
|
|
|
82
82
|
--blue-100: #ceeaff;
|
|
83
83
|
--yellow-050: #fff5d9;
|
|
84
84
|
--yellow-000: #fff9e9;
|
|
85
|
-
--yellow-999: #
|
|
86
|
-
--yellow-950: #
|
|
85
|
+
--yellow-999: #523D00;
|
|
86
|
+
--yellow-950: #795A00;
|
|
87
87
|
--yellow-900: #b58a0e;
|
|
88
88
|
--yellow-850: #be9315;
|
|
89
89
|
--yellow-800: #c79c1c;
|
|
@@ -94,11 +94,11 @@
|
|
|
94
94
|
--yellow-300: #ffe087;
|
|
95
95
|
--yellow-200: #ffe8a5;
|
|
96
96
|
--yellow-150: #ffedb8;
|
|
97
|
-
--yellow-100: #
|
|
97
|
+
--yellow-100: #FFF4D1;
|
|
98
98
|
--red-050: #ffd8de;
|
|
99
|
-
--red-000: #
|
|
99
|
+
--red-000: #FFEBEE;
|
|
100
100
|
--red-999: #540000;
|
|
101
|
-
--red-950: #
|
|
101
|
+
--red-950: #6B0000;
|
|
102
102
|
--red-900: #8f0a0a;
|
|
103
103
|
--red-850: #a80303;
|
|
104
104
|
--red-800: #bc0303;
|
|
@@ -140,10 +140,10 @@
|
|
|
140
140
|
--nve-brand-200: #f71439;
|
|
141
141
|
--nve-brand-150: #ff153b;
|
|
142
142
|
--nve-brand-100: #ff2b4e;
|
|
143
|
-
--header: 0px 4px 032px 0px rgba(0,
|
|
144
|
-
--hard: 0px 2px 10px 0px rgba(96,
|
|
145
|
-
--soft: 0px 2px 8px 0px rgba(96,
|
|
146
|
-
--none: 0px 0px 0px 0px rgba(0,
|
|
143
|
+
--header: 0px 4px 032px 0px rgba(0,0,0,0.02);
|
|
144
|
+
--hard: 0px 2px 10px 0px rgba(96,101,108,0.30);
|
|
145
|
+
--soft: 0px 2px 8px 0px rgba(96,101,108,0.15);
|
|
146
|
+
--none: 0px 0px 0px 0px rgba(0,0,0,0);
|
|
147
147
|
--border-width-strong: 2px;
|
|
148
148
|
--border-width-default: 1px;
|
|
149
149
|
--border-width-none: 0px;
|
|
@@ -216,100 +216,53 @@
|
|
|
216
216
|
--line-heights-1: 120%;
|
|
217
217
|
--line-heights-zero: 115%;
|
|
218
218
|
--font-families-source-sans-pro: 'Source Sans Pro';
|
|
219
|
-
--label-x-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-zero)
|
|
220
|
-
|
|
221
|
-
--label-
|
|
222
|
-
|
|
223
|
-
--label-
|
|
224
|
-
|
|
225
|
-
--label-
|
|
226
|
-
|
|
227
|
-
--
|
|
228
|
-
|
|
229
|
-
--
|
|
230
|
-
|
|
231
|
-
--
|
|
232
|
-
|
|
233
|
-
--
|
|
234
|
-
|
|
235
|
-
--
|
|
236
|
-
|
|
237
|
-
--
|
|
238
|
-
|
|
239
|
-
--
|
|
240
|
-
|
|
241
|
-
--body-
|
|
242
|
-
|
|
243
|
-
--body-
|
|
244
|
-
|
|
245
|
-
--body-
|
|
246
|
-
|
|
247
|
-
--
|
|
248
|
-
|
|
249
|
-
--
|
|
250
|
-
|
|
251
|
-
--
|
|
252
|
-
|
|
253
|
-
--
|
|
254
|
-
|
|
255
|
-
--
|
|
256
|
-
|
|
257
|
-
--
|
|
258
|
-
|
|
259
|
-
--
|
|
260
|
-
|
|
261
|
-
--
|
|
262
|
-
|
|
263
|
-
--
|
|
264
|
-
|
|
265
|
-
--
|
|
266
|
-
var(--font-families-source-sans-pro);
|
|
267
|
-
--body-medium-default: var(--font-weights-source-sans-pro-1) var(--font-size-2) / var(--line-heights-5)
|
|
268
|
-
var(--font-families-source-sans-pro);
|
|
269
|
-
--body-large-underline: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-5)
|
|
270
|
-
var(--font-families-source-sans-pro);
|
|
271
|
-
--body-large: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-5)
|
|
272
|
-
var(--font-families-source-sans-pro);
|
|
273
|
-
--ingress-xsmall-semibold: var(--font-weights-source-sans-pro-2) var(--font-size-1) / var(--line-heights-5)
|
|
274
|
-
var(--font-families-source-sans-pro);
|
|
275
|
-
--ingress-xsmall-regular: var(--font-weights-source-sans-pro-1) var(--font-size-1) / var(--line-heights-5)
|
|
276
|
-
var(--font-families-source-sans-pro);
|
|
277
|
-
--ingress-medium-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-3) / var(--line-heights-5)
|
|
278
|
-
var(--font-families-source-sans-pro);
|
|
279
|
-
--ingress-medium-regular: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-5)
|
|
280
|
-
var(--font-families-source-sans-pro);
|
|
281
|
-
--ingress-small-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-2) / var(--line-heights-5)
|
|
282
|
-
var(--font-families-source-sans-pro);
|
|
283
|
-
--ingress-small-regular: var(--font-weights-source-sans-pro-1) var(--font-size-2) / var(--line-heights-5)
|
|
284
|
-
var(--font-families-source-sans-pro);
|
|
285
|
-
--ingress-large-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-4) / var(--line-heights-4)
|
|
286
|
-
var(--font-families-source-sans-pro);
|
|
287
|
-
--ingress-large-regular-default: var(--font-weights-source-sans-pro-1) var(--font-size-4) / var(--line-heights-4)
|
|
288
|
-
var(--font-families-source-sans-pro);
|
|
289
|
-
--subheading-x-small: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-4)
|
|
290
|
-
var(--font-families-source-sans-pro);
|
|
291
|
-
--subheading-medium: var(--font-weights-source-sans-pro-1) var(--font-size-5) / var(--line-heights-2)
|
|
292
|
-
var(--font-families-source-sans-pro);
|
|
293
|
-
--subheading-2x-large: var(--font-weights-source-sans-pro-1) var(--font-size-8) / var(--line-heights-zero)
|
|
294
|
-
var(--font-families-source-sans-pro);
|
|
295
|
-
--subheading-small: var(--font-weights-source-sans-pro-1) var(--font-size-4) / var(--line-heights-3)
|
|
296
|
-
var(--font-families-source-sans-pro);
|
|
297
|
-
--subheading-large: var(--font-weights-source-sans-pro-1) var(--font-size-6) / var(--line-heights-1)
|
|
298
|
-
var(--font-families-source-sans-pro);
|
|
299
|
-
--subheading-x-large: var(--font-weights-source-sans-pro-1) var(--font-size-7) / var(--line-heights-zero)
|
|
300
|
-
var(--font-families-source-sans-pro);
|
|
301
|
-
--header-x-small: var(--font-weights-source-sans-pro-zero) var(--font-size-3) / var(--line-heights-4)
|
|
302
|
-
var(--font-families-source-sans-pro);
|
|
303
|
-
--header-small: var(--font-weights-source-sans-pro-zero) var(--font-size-4) / var(--line-heights-3)
|
|
304
|
-
var(--font-families-source-sans-pro);
|
|
305
|
-
--header-medium: var(--font-weights-source-sans-pro-zero) var(--font-size-5) / var(--line-heights-2)
|
|
306
|
-
var(--font-families-source-sans-pro);
|
|
307
|
-
--header-large-default: var(--font-weights-source-sans-pro-zero) var(--font-size-6) / var(--line-heights-1)
|
|
308
|
-
var(--font-families-source-sans-pro);
|
|
309
|
-
--header-x-large: var(--font-weights-source-sans-pro-zero) var(--font-size-7) / var(--line-heights-zero)
|
|
310
|
-
var(--font-families-source-sans-pro);
|
|
311
|
-
--header-2x-large: var(--font-weights-source-sans-pro-zero) var(--font-size-8) / var(--line-heights-zero)
|
|
312
|
-
var(--font-families-source-sans-pro);
|
|
219
|
+
--label-x-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
220
|
+
--label-x-small: var(--font-weights-source-sans-pro-zero) var(--font-size-zero)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
221
|
+
--label-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
222
|
+
--label-small: var(--font-weights-source-sans-pro-zero) var(--font-size-1)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
223
|
+
--label-medium-light: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
224
|
+
--label-medium: var(--font-weights-source-sans-pro-zero) var(--font-size-2)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
225
|
+
--label-large-light: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
226
|
+
--label-large: var(--font-weights-source-sans-pro-zero) var(--font-size-3)/var(--line-heights-6) var(--font-families-source-sans-pro);
|
|
227
|
+
--detailtext-caps-small: var(--font-weights-source-sans-pro-zero) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
228
|
+
--detailtext-caps-large: var(--font-weights-source-sans-pro-zero) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
229
|
+
--detailtext-caption: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
230
|
+
--body-compact-xsmall-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
231
|
+
--body-compact-xsmall-compact: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
232
|
+
--body-compact-small-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
233
|
+
--body-compact-small-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
234
|
+
--body-compact-medium-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
235
|
+
--body-compact-medium-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
236
|
+
--body-compact-large-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
237
|
+
--body-compact-large-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
238
|
+
--body-xsmall-underline: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
239
|
+
--body-xsmall: var(--font-weights-source-sans-pro-1) var(--font-size-zero)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
240
|
+
--body-small-underline: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
241
|
+
--body-small: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
242
|
+
--body-medium-underline: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
243
|
+
--body-medium-default: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
244
|
+
--body-large-underline: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
245
|
+
--body-large: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
246
|
+
--ingress-xsmall-semibold: var(--font-weights-source-sans-pro-2) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
247
|
+
--ingress-xsmall-regular: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
248
|
+
--ingress-medium-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
249
|
+
--ingress-medium-regular: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
250
|
+
--ingress-small-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
251
|
+
--ingress-small-regular: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
|
|
252
|
+
--ingress-large-semibold: var(--font-weights-source-sans-pro-zero) var(--font-size-4)/var(--line-heights-4) var(--font-families-source-sans-pro);
|
|
253
|
+
--ingress-large-regular-default: var(--font-weights-source-sans-pro-1) var(--font-size-4)/var(--line-heights-4) var(--font-families-source-sans-pro);
|
|
254
|
+
--subheading-x-small: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-4) var(--font-families-source-sans-pro);
|
|
255
|
+
--subheading-medium: var(--font-weights-source-sans-pro-1) var(--font-size-5)/var(--line-heights-2) var(--font-families-source-sans-pro);
|
|
256
|
+
--subheading-2x-large: var(--font-weights-source-sans-pro-1) var(--font-size-8)/var(--line-heights-zero) var(--font-families-source-sans-pro);
|
|
257
|
+
--subheading-small: var(--font-weights-source-sans-pro-1) var(--font-size-4)/var(--line-heights-3) var(--font-families-source-sans-pro);
|
|
258
|
+
--subheading-large: var(--font-weights-source-sans-pro-1) var(--font-size-6)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
259
|
+
--subheading-x-large: var(--font-weights-source-sans-pro-1) var(--font-size-7)/var(--line-heights-zero) var(--font-families-source-sans-pro);
|
|
260
|
+
--header-x-small: var(--font-weights-source-sans-pro-zero) var(--font-size-3)/var(--line-heights-4) var(--font-families-source-sans-pro);
|
|
261
|
+
--header-small: var(--font-weights-source-sans-pro-zero) var(--font-size-4)/var(--line-heights-3) var(--font-families-source-sans-pro);
|
|
262
|
+
--header-medium: var(--font-weights-source-sans-pro-zero) var(--font-size-5)/var(--line-heights-2) var(--font-families-source-sans-pro);
|
|
263
|
+
--header-large-default: var(--font-weights-source-sans-pro-zero) var(--font-size-6)/var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
264
|
+
--header-x-large: var(--font-weights-source-sans-pro-zero) var(--font-size-7)/var(--line-heights-zero) var(--font-families-source-sans-pro);
|
|
265
|
+
--header-2x-large: var(--font-weights-source-sans-pro-zero) var(--font-size-8)/var(--line-heights-zero) var(--font-families-source-sans-pro);
|
|
313
266
|
--dangerlevel-foreground-subtle-level5: var(--varsom-blue-999);
|
|
314
267
|
--dangerlevel-foreground-subtle-level4: var(--varsom-blue-999);
|
|
315
268
|
--dangerlevel-foreground-subtle-level3: var(--varsom-blue-999);
|
package/index.html
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Vite + Lit + TS</title>
|
|
8
|
-
<link
|
|
9
|
-
rel="stylesheet"
|
|
10
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
|
11
|
-
/>
|
|
12
|
-
<link rel="stylesheet" href="./build/css/varsom.css" />
|
|
13
|
-
<!-- Legg til / endre til modulene du vil teste her -->
|
|
14
|
-
<script type="module" src="/src/components/index.ts"></script>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<div id="app"></div>
|
|
18
|
-
<!-- This div serves as a container for your Lit app -->
|
|
19
|
-
<!-- Import your Vite-generated JS entry point -->
|
|
20
|
-
<script type="module" src="/src/main.ts"></script>
|
|
21
|
-
</body>
|
|
22
|
-
</html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + Lit + TS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="stylesheet"
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
|
11
|
+
/>
|
|
12
|
+
<link rel="stylesheet" href="./build/css/varsom.css" />
|
|
13
|
+
<!-- Legg til / endre til modulene du vil teste her -->
|
|
14
|
+
<script type="module" src="/src/components/index.ts"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<div id="app"></div>
|
|
18
|
+
<!-- This div serves as a container for your Lit app -->
|
|
19
|
+
<!-- Import your Vite-generated JS entry point -->
|
|
20
|
+
<script type="module" src="/src/main.ts"></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
|
|
2
|
-
export * from './nve-alert/nve-alert';
|
|
3
2
|
export * from './nve-button/nve-button';
|
|
4
3
|
export * from './nve-label/nve-label';
|
|
5
4
|
export * from './nve-icon/nve-icon';
|
|
6
5
|
export * from './nve-input/nve-input';
|
|
7
|
-
export * from './nve-radio/nve-radio.component'
|
|
8
|
-
export * from './nve-radio-button/nve-radio-button.component'
|
|
9
|
-
export * from './nve-radio-group/nve-radio-group.component'
|
|
6
|
+
export * from './nve-radio/nve-radio.component'
|
|
7
|
+
export * from './nve-radio-button/nve-radio-button.component'
|
|
8
|
+
export * from './nve-radio-group/nve-radio-group.component'
|
|
10
9
|
export * from './nve-spinner/nve-spinner';
|
|
11
10
|
export * from './nve-tooltip/nve-tooltip';
|
|
11
|
+
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
2
1
|
import { css, html, LitElement } from 'lit';
|
|
3
2
|
|
|
4
3
|
/**
|
|
@@ -6,29 +5,38 @@ import { css, html, LitElement } from 'lit';
|
|
|
6
5
|
* Vi bruker ikoner fra Material Symbols.
|
|
7
6
|
* @see https://fonts.google.com/icons
|
|
8
7
|
*/
|
|
9
|
-
@customElement('nve-icon')
|
|
10
8
|
export class NveIcon extends LitElement {
|
|
9
|
+
|
|
10
|
+
declare name: string;
|
|
11
|
+
static properties = {
|
|
12
|
+
name: { type: String }
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
this.name = '';
|
|
18
|
+
}
|
|
19
|
+
|
|
11
20
|
/**
|
|
12
21
|
* Navnet på ikonet i Material Symbols-biblioteket
|
|
13
22
|
*/
|
|
14
|
-
@property() name = '';
|
|
15
23
|
static styles = css`
|
|
16
24
|
:host {
|
|
17
25
|
/* Apply Material Icons font-family to the Shadow DOM */
|
|
18
26
|
font-family: 'Material Symbols Outlined';
|
|
19
27
|
}
|
|
20
|
-
|
|
28
|
+
|
|
21
29
|
/* we need it to center the icon */
|
|
22
30
|
:is(span) {
|
|
23
31
|
display: inline-flex;
|
|
24
|
-
line-height: 24px;
|
|
25
|
-
font-weight: var(--font-weight-regular);
|
|
26
32
|
}
|
|
27
33
|
`;
|
|
28
34
|
render() {
|
|
29
35
|
return html`<span class="material-symbols-outlined">${this.name}</span>`;
|
|
30
36
|
}
|
|
31
37
|
}
|
|
38
|
+
|
|
39
|
+
customElements.define('nve-icon', NveIcon);
|
|
32
40
|
declare global {
|
|
33
41
|
interface HTMLElementTagNameMap {
|
|
34
42
|
'nve-icon': NveIcon;
|
package/src/main.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
// test-applikasjon for komponentbiblioteket
|
|
2
2
|
import { render } from 'lit';
|
|
3
|
+
import './styles/imports.css';
|
|
3
4
|
import '../build/css/varsom.css';
|
|
4
|
-
import './styles/testsite.css';
|
|
5
5
|
import './styles/global.css';
|
|
6
|
+
import './styles/testsite.css';
|
|
7
|
+
import './styles/imports.css';
|
|
6
8
|
|
|
7
9
|
/* Importer demo-side for hver komponent du vil vise her og sett det i render-funksjonen */
|
|
8
10
|
import buttonDemo from './components/nve-button/nve-button-demo';
|
|
9
11
|
import tooltipDemo from './components/nve-tooltip/nve-tooltip-demo';
|
|
10
12
|
import labelDemo from './components/nve-label/nve-label-demo';
|
|
11
13
|
import inputDemo from './components/nve-input/nve-input-demo';
|
|
14
|
+
import radioDemo from './components/nve-radio/nve-radio-demo';
|
|
12
15
|
|
|
13
|
-
render([buttonDemo, tooltipDemo, labelDemo, inputDemo], document.getElementById('app')!); // Render the Lit app in the specified container
|
|
16
|
+
render([buttonDemo, radioDemo, tooltipDemo, labelDemo, inputDemo], document.getElementById('app')!); // Render the Lit app in the specified container
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { ButtonProps } from './Button';
|
|
3
|
+
import { Button } from './Button';
|
|
4
|
+
|
|
5
|
+
// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'Example/Button',
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
render: (args) => Button(args),
|
|
10
|
+
argTypes: {
|
|
11
|
+
backgroundColor: { control: 'color' },
|
|
12
|
+
onClick: { action: 'onClick' },
|
|
13
|
+
size: {
|
|
14
|
+
control: { type: 'select' },
|
|
15
|
+
options: ['small', 'medium', 'large'],
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
} satisfies Meta<ButtonProps>;
|
|
19
|
+
|
|
20
|
+
export default meta;
|
|
21
|
+
type Story = StoryObj<ButtonProps>;
|
|
22
|
+
|
|
23
|
+
// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
|
|
24
|
+
export const Primary: Story = {
|
|
25
|
+
args: {
|
|
26
|
+
primary: true,
|
|
27
|
+
label: 'Button',
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const Secondary: Story = {
|
|
32
|
+
args: {
|
|
33
|
+
label: 'Button',
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export const Large: Story = {
|
|
38
|
+
args: {
|
|
39
|
+
size: 'large',
|
|
40
|
+
label: 'Button',
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export const Small: Story = {
|
|
45
|
+
args: {
|
|
46
|
+
size: 'small',
|
|
47
|
+
label: 'Button',
|
|
48
|
+
},
|
|
49
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
3
|
+
import './button.css';
|
|
4
|
+
|
|
5
|
+
export interface ButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* Is this the principal call to action on the page?
|
|
8
|
+
*/
|
|
9
|
+
primary?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* What background color to use
|
|
12
|
+
*/
|
|
13
|
+
backgroundColor?: string;
|
|
14
|
+
/**
|
|
15
|
+
* How large should the button be?
|
|
16
|
+
*/
|
|
17
|
+
size?: 'small' | 'medium' | 'large';
|
|
18
|
+
/**
|
|
19
|
+
* Button contents
|
|
20
|
+
*/
|
|
21
|
+
label: string;
|
|
22
|
+
/**
|
|
23
|
+
* Optional click handler
|
|
24
|
+
*/
|
|
25
|
+
onClick?: () => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Primary UI component for user interaction
|
|
29
|
+
*/
|
|
30
|
+
export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
|
|
31
|
+
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
32
|
+
|
|
33
|
+
return html`
|
|
34
|
+
<button
|
|
35
|
+
type="button"
|
|
36
|
+
class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
|
|
37
|
+
style=${styleMap({ backgroundColor })}
|
|
38
|
+
@click=${onClick}
|
|
39
|
+
>
|
|
40
|
+
${label}
|
|
41
|
+
</button>
|
|
42
|
+
`;
|
|
43
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { HeaderProps } from './Header';
|
|
3
|
+
import { Header } from './Header';
|
|
4
|
+
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Example/Header',
|
|
7
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/web-components/writing-docs/autodocs
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
render: (args: HeaderProps) => Header(args),
|
|
10
|
+
} satisfies Meta<HeaderProps>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<HeaderProps>;
|
|
14
|
+
|
|
15
|
+
export const LoggedIn: Story = {
|
|
16
|
+
args: {
|
|
17
|
+
user: {
|
|
18
|
+
name: 'Jane Doe',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const LoggedOut: Story = {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
|
|
3
|
+
import { Button } from './Button';
|
|
4
|
+
import './header.css';
|
|
5
|
+
|
|
6
|
+
type User = {
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export interface HeaderProps {
|
|
11
|
+
user?: User;
|
|
12
|
+
onLogin: () => void;
|
|
13
|
+
onLogout: () => void;
|
|
14
|
+
onCreateAccount: () => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
|
|
18
|
+
<header>
|
|
19
|
+
<div class="storybook-header">
|
|
20
|
+
<div>
|
|
21
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
|
22
|
+
<g fill="none" fillRule="evenodd">
|
|
23
|
+
<path
|
|
24
|
+
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
|
25
|
+
fill="#FFF"
|
|
26
|
+
/>
|
|
27
|
+
<path
|
|
28
|
+
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
|
29
|
+
fill="#555AB9"
|
|
30
|
+
/>
|
|
31
|
+
<path
|
|
32
|
+
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
|
33
|
+
fill="#91BAF8"
|
|
34
|
+
/>
|
|
35
|
+
</g>
|
|
36
|
+
</svg>
|
|
37
|
+
<h1>Acme</h1>
|
|
38
|
+
</div>
|
|
39
|
+
<div>
|
|
40
|
+
${user
|
|
41
|
+
? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
|
|
42
|
+
: html`${Button({
|
|
43
|
+
size: 'small',
|
|
44
|
+
onClick: onLogin,
|
|
45
|
+
label: 'Log in',
|
|
46
|
+
})}
|
|
47
|
+
${Button({
|
|
48
|
+
primary: true,
|
|
49
|
+
size: 'small',
|
|
50
|
+
onClick: onCreateAccount,
|
|
51
|
+
label: 'Sign up',
|
|
52
|
+
})}`}
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</header>
|
|
56
|
+
`;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
|
|
3
|
+
import type { PageProps } from './Page';
|
|
4
|
+
import { Page } from './Page';
|
|
5
|
+
import * as HeaderStories from './Header.stories';
|
|
6
|
+
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Example/Page',
|
|
9
|
+
render: (args: PageProps) => Page(args),
|
|
10
|
+
} satisfies Meta<PageProps>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<PageProps>;
|
|
14
|
+
|
|
15
|
+
export const LoggedIn: Story = {
|
|
16
|
+
args: {
|
|
17
|
+
// More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
|
|
18
|
+
...HeaderStories.LoggedIn.args,
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const LoggedOut: Story = {
|
|
23
|
+
args: {
|
|
24
|
+
...HeaderStories.LoggedOut.args,
|
|
25
|
+
},
|
|
26
|
+
};
|