nve-designsystem 0.1.5 → 0.1.7
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 +4 -0
- package/.storybook/preview.ts +2 -2
- package/build/css/varsom.css +121 -74
- package/index.html +22 -22
- package/package.json +1 -1
- package/src/components/index.ts +4 -4
- package/src/components/nve-alert/nve-alert-demo.ts +96 -0
- package/src/components/nve-alert/nve-alert.styles.ts +183 -0
- package/src/components/nve-alert/nve-alert.ts +32 -0
- package/src/components/nve-icon/nve-icon.ts +7 -14
- package/src/main.ts +2 -5
- package/src/stories/NveAlert.stories.ts +43 -0
- package/src/stories/NveAlert.ts +58 -0
- package/src/styles/global.css +3 -0
- package/src/styles/testsite.css +54 -54
- package/vite.config.ts +8 -0
- package/src/stories/examples/Button.stories.ts +0 -49
- package/src/stories/examples/Button.ts +0 -43
- package/src/stories/examples/Header.stories.ts +0 -23
- package/src/stories/examples/Header.ts +0 -56
- package/src/stories/examples/Page.stories.ts +0 -26
- package/src/stories/examples/Page.ts +0 -72
- package/src/stories/examples/button.css +0 -30
- package/src/stories/examples/header.css +0 -32
- package/src/stories/examples/page.css +0 -69
- package/src/styles/imports.css +0 -2
- package/vite.config +0 -12
package/.storybook/main.ts
CHANGED
|
@@ -23,6 +23,10 @@ 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
|
+
/>
|
|
26
30
|
`,
|
|
27
31
|
docs: {
|
|
28
32
|
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,0,0,0.02);
|
|
144
|
-
--hard: 0px 2px 10px 0px rgba(96,101,108,0.
|
|
145
|
-
--soft: 0px 2px 8px 0px rgba(96,101,108,0.15);
|
|
146
|
-
--none: 0px 0px 0px 0px rgba(0,0,0,0);
|
|
143
|
+
--header: 0px 4px 032px 0px rgba(0, 0, 0, 0.02);
|
|
144
|
+
--hard: 0px 2px 10px 0px rgba(96, 101, 108, 0.3);
|
|
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,53 +216,100 @@
|
|
|
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)/var(--line-heights-6)
|
|
220
|
-
|
|
221
|
-
--label-small
|
|
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
|
-
--
|
|
219
|
+
--label-x-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-zero) / var(--line-heights-6)
|
|
220
|
+
var(--font-families-source-sans-pro);
|
|
221
|
+
--label-x-small: var(--font-weights-source-sans-pro-zero) var(--font-size-zero) / var(--line-heights-6)
|
|
222
|
+
var(--font-families-source-sans-pro);
|
|
223
|
+
--label-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-1) / var(--line-heights-6)
|
|
224
|
+
var(--font-families-source-sans-pro);
|
|
225
|
+
--label-small: var(--font-weights-source-sans-pro-zero) var(--font-size-1) / var(--line-heights-6)
|
|
226
|
+
var(--font-families-source-sans-pro);
|
|
227
|
+
--label-medium-light: var(--font-weights-source-sans-pro-1) var(--font-size-2) / var(--line-heights-6)
|
|
228
|
+
var(--font-families-source-sans-pro);
|
|
229
|
+
--label-medium: var(--font-weights-source-sans-pro-zero) var(--font-size-2) / var(--line-heights-6)
|
|
230
|
+
var(--font-families-source-sans-pro);
|
|
231
|
+
--label-large-light: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-6)
|
|
232
|
+
var(--font-families-source-sans-pro);
|
|
233
|
+
--label-large: var(--font-weights-source-sans-pro-zero) var(--font-size-3) / var(--line-heights-6)
|
|
234
|
+
var(--font-families-source-sans-pro);
|
|
235
|
+
--detailtext-caps-small: var(--font-weights-source-sans-pro-zero) var(--font-size-1) / var(--line-heights-5)
|
|
236
|
+
var(--font-families-source-sans-pro);
|
|
237
|
+
--detailtext-caps-large: var(--font-weights-source-sans-pro-zero) var(--font-size-3) / var(--line-heights-5)
|
|
238
|
+
var(--font-families-source-sans-pro);
|
|
239
|
+
--detailtext-caption: var(--font-weights-source-sans-pro-1) var(--font-size-zero) / var(--line-heights-5)
|
|
240
|
+
var(--font-families-source-sans-pro);
|
|
241
|
+
--body-compact-xsmall-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-zero) /
|
|
242
|
+
var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
243
|
+
--body-compact-xsmall-compact: var(--font-weights-source-sans-pro-1) var(--font-size-zero) / var(--line-heights-1)
|
|
244
|
+
var(--font-families-source-sans-pro);
|
|
245
|
+
--body-compact-small-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1) /
|
|
246
|
+
var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
247
|
+
--body-compact-small-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1) / var(--line-heights-1)
|
|
248
|
+
var(--font-families-source-sans-pro);
|
|
249
|
+
--body-compact-medium-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2) /
|
|
250
|
+
var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
251
|
+
--body-compact-medium-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2) / var(--line-heights-1)
|
|
252
|
+
var(--font-families-source-sans-pro);
|
|
253
|
+
--body-compact-large-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3) /
|
|
254
|
+
var(--line-heights-1) var(--font-families-source-sans-pro);
|
|
255
|
+
--body-compact-large-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3) / var(--line-heights-1)
|
|
256
|
+
var(--font-families-source-sans-pro);
|
|
257
|
+
--body-xsmall-underline: var(--font-weights-source-sans-pro-1) var(--font-size-zero) / var(--line-heights-5)
|
|
258
|
+
var(--font-families-source-sans-pro);
|
|
259
|
+
--body-xsmall: var(--font-weights-source-sans-pro-1) var(--font-size-zero) / var(--line-heights-5)
|
|
260
|
+
var(--font-families-source-sans-pro);
|
|
261
|
+
--body-small-underline: var(--font-weights-source-sans-pro-1) var(--font-size-1) / var(--line-heights-5)
|
|
262
|
+
var(--font-families-source-sans-pro);
|
|
263
|
+
--body-small: var(--font-weights-source-sans-pro-1) var(--font-size-1) / var(--line-heights-5)
|
|
264
|
+
var(--font-families-source-sans-pro);
|
|
265
|
+
--body-medium-underline: var(--font-weights-source-sans-pro-1) var(--font-size-2) / var(--line-heights-5)
|
|
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);
|
|
266
313
|
--dangerlevel-foreground-subtle-level5: var(--varsom-blue-999);
|
|
267
314
|
--dangerlevel-foreground-subtle-level4: var(--varsom-blue-999);
|
|
268
315
|
--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';
|
|
2
3
|
export * from './nve-button/nve-button';
|
|
3
4
|
export * from './nve-label/nve-label';
|
|
4
5
|
export * from './nve-icon/nve-icon';
|
|
5
6
|
export * from './nve-input/nve-input';
|
|
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'
|
|
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';
|
|
9
10
|
export * from './nve-spinner/nve-spinner';
|
|
10
11
|
export * from './nve-tooltip/nve-tooltip';
|
|
11
|
-
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Demonstrasjon av nve-alert
|
|
5
|
+
*/
|
|
6
|
+
const table = html`
|
|
7
|
+
<hr />
|
|
8
|
+
<h3 id="nve-alert">nve-alert</h3>
|
|
9
|
+
<table class="demo">
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th></th>
|
|
13
|
+
<th>Default</th>
|
|
14
|
+
<th>Left stroke</th>
|
|
15
|
+
</tr>
|
|
16
|
+
</thead>
|
|
17
|
+
<tbody>
|
|
18
|
+
<tr>
|
|
19
|
+
<td>Standard</td>
|
|
20
|
+
<td>
|
|
21
|
+
<nve-alert title="Info tittel" text="some text" variant="primary" open closable>
|
|
22
|
+
<nve-icon slot="icon" name="info"></nve-icon>
|
|
23
|
+
</nve-alert>
|
|
24
|
+
<nve-alert title="Info tittel" text="some text" variant="danger" open closable>
|
|
25
|
+
<nve-icon slot="icon" name="error"></nve-icon>
|
|
26
|
+
</nve-alert>
|
|
27
|
+
<nve-alert title="Info tittel" text="some text" variant="neutral" open closable>
|
|
28
|
+
<nve-icon slot="icon" name="help"></nve-icon>
|
|
29
|
+
</nve-alert>
|
|
30
|
+
<nve-alert title="Info tittel" text="some text" variant="success" open closable>
|
|
31
|
+
<nve-icon slot="icon" name="check_circle"></nve-icon>
|
|
32
|
+
</nve-alert>
|
|
33
|
+
<nve-alert title="Info tittel" text="some text" variant="warning" open closable>
|
|
34
|
+
<nve-icon slot="icon" name="warning"></nve-icon>
|
|
35
|
+
</nve-alert>
|
|
36
|
+
</td>
|
|
37
|
+
<td>
|
|
38
|
+
<nve-alert leftStroke title="Info tittel" text="some text" variant="primary" open closable>
|
|
39
|
+
<nve-icon slot="icon" name="info"></nve-icon>
|
|
40
|
+
</nve-alert>
|
|
41
|
+
<nve-alert leftStroke title="Info tittel" text="some text" variant="danger" open closable>
|
|
42
|
+
<nve-icon slot="icon" name="error"></nve-icon>
|
|
43
|
+
</nve-alert>
|
|
44
|
+
<nve-alert leftStroke title="Info tittel" text="some text" variant="neutral" open closable>
|
|
45
|
+
<nve-icon slot="icon" name="help"></nve-icon>
|
|
46
|
+
</nve-alert>
|
|
47
|
+
<nve-alert leftStroke title="Info tittel" text="some text" variant="success" open closable>
|
|
48
|
+
<nve-icon slot="icon" name="check_circle"></nve-icon>
|
|
49
|
+
</nve-alert>
|
|
50
|
+
<nve-alert leftStroke title="Info tittel" text="some text" variant="warning" open closable>
|
|
51
|
+
<nve-icon slot="icon" name="warning"></nve-icon>
|
|
52
|
+
</nve-alert>
|
|
53
|
+
</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td>Emphasized</td>
|
|
57
|
+
<td>
|
|
58
|
+
<nve-alert emphasized title="Info tittel" text="some text" variant="primary" open closable>
|
|
59
|
+
<nve-icon slot="icon" name="info"></nve-icon>
|
|
60
|
+
</nve-alert>
|
|
61
|
+
<nve-alert emphasized title="Info tittel" text="some text" variant="danger" open closable>
|
|
62
|
+
<nve-icon slot="icon" name="error"></nve-icon>
|
|
63
|
+
</nve-alert>
|
|
64
|
+
<nve-alert emphasized title="Info tittel" text="some text" variant="neutral" open closable>
|
|
65
|
+
<nve-icon slot="icon" name="help"></nve-icon>
|
|
66
|
+
</nve-alert>
|
|
67
|
+
<nve-alert emphasized title="Info tittel" text="some text" variant="success" open closable>
|
|
68
|
+
<nve-icon slot="icon" name="check_circle"></nve-icon>
|
|
69
|
+
</nve-alert>
|
|
70
|
+
<nve-alert emphasized title="Info tittel" text="some text" variant="warning" open closable>
|
|
71
|
+
<nve-icon slot="icon" name="warning"></nve-icon>
|
|
72
|
+
</nve-alert>
|
|
73
|
+
</td>
|
|
74
|
+
<td>
|
|
75
|
+
<nve-alert emphasized leftStroke title="Info tittel" text="some text" variant="primary" open closable>
|
|
76
|
+
<nve-icon slot="icon" name="info"></nve-icon>
|
|
77
|
+
</nve-alert>
|
|
78
|
+
<nve-alert emphasized leftStroke title="Info tittel" text="some text" variant="danger" open closable>
|
|
79
|
+
<nve-icon slot="icon" name="error"></nve-icon>
|
|
80
|
+
</nve-alert>
|
|
81
|
+
<nve-alert emphasized leftStroke title="Info tittel" text="some text" variant="neutral" open closable>
|
|
82
|
+
<nve-icon slot="icon" name="help"></nve-icon>
|
|
83
|
+
</nve-alert>
|
|
84
|
+
<nve-alert emphasized leftStroke title="Info tittel" text="some text" variant="success" open closable>
|
|
85
|
+
<nve-icon slot="icon" name="check_circle"></nve-icon>
|
|
86
|
+
</nve-alert>
|
|
87
|
+
<nve-alert emphasized leftStroke title="Info tittel" text="some text" variant="warning" open closable>
|
|
88
|
+
<nve-icon slot="icon" name="warning"></nve-icon>
|
|
89
|
+
</nve-alert>
|
|
90
|
+
</td>
|
|
91
|
+
</tr>
|
|
92
|
+
</tbody>
|
|
93
|
+
</table>
|
|
94
|
+
`;
|
|
95
|
+
|
|
96
|
+
export default table;
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
|
|
3
|
+
export default css`
|
|
4
|
+
/* have to use class cause icon button also has base part that got impacted */
|
|
5
|
+
.alert {
|
|
6
|
+
display: flex;
|
|
7
|
+
padding: var(--spacing-medium, 1rem) var(--spacing-large, 1.5rem);
|
|
8
|
+
align-items: center;
|
|
9
|
+
border: none;
|
|
10
|
+
border-radius: var(--border-radius-small, 0.25rem);
|
|
11
|
+
color: var(--neutrals-foreground-primary);
|
|
12
|
+
}
|
|
13
|
+
:host::part(message) {
|
|
14
|
+
flex-grow: 1;
|
|
15
|
+
display: flex;
|
|
16
|
+
padding: 0;
|
|
17
|
+
align-items: center;
|
|
18
|
+
margin-left: var(--spacing-x-small, 0.5rem);
|
|
19
|
+
gap: var(--spacing-medium, 1rem);
|
|
20
|
+
}
|
|
21
|
+
:host::part(--sl-input-icon-color-hover) {
|
|
22
|
+
font-size: 24px;
|
|
23
|
+
font-weight: 300;
|
|
24
|
+
padding-inline-start: unset;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--spacing-medium, 1rem);
|
|
28
|
+
color: var(--neutrals-foreground-primary);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:host::part(icon) {
|
|
32
|
+
font: var(--header-small);
|
|
33
|
+
color: var(--neutrals-foreground-primary) !important;
|
|
34
|
+
padding-inline-start: unset;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host::part(close-button) {
|
|
38
|
+
padding-inline-end: unset;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
sl-icon-button::part(base) {
|
|
42
|
+
margin-left: var(--spacing-medium, 1rem);
|
|
43
|
+
padding: var(--spacing-xx-small);
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
stroke: var(--neutrals-foreground-primary);
|
|
46
|
+
transition: background-color 0.3s ease;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host::part(message)::after {
|
|
50
|
+
content: var(--nve-alert-text);
|
|
51
|
+
font: var(--body-medium-default);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host::part(message)::before {
|
|
55
|
+
content: var(--nve-alert-title);
|
|
56
|
+
font: var(--header-small);
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/*variants */
|
|
61
|
+
.alert--primary {
|
|
62
|
+
background-color: var(--feedback-background-default-info);
|
|
63
|
+
& sl-icon-button::part(base):hover {
|
|
64
|
+
background: var(--feedback-background-subtle-info);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
.alert--danger {
|
|
68
|
+
background-color: var(--feedback-background-default-error);
|
|
69
|
+
& sl-icon-button::part(base):hover {
|
|
70
|
+
background: var(--feedback-background-subtle-error);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.alert--success {
|
|
74
|
+
background-color: var(--feedback-background-default-success);
|
|
75
|
+
& sl-icon-button::part(base):hover {
|
|
76
|
+
background: var(--feedback-background-subtle-success);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.alert--neutral {
|
|
81
|
+
background-color: var(--neutrals-foreground-subtle);
|
|
82
|
+
color: var(--interactive-primary-foreground-default);
|
|
83
|
+
& sl-icon-button::part(base):hover {
|
|
84
|
+
background: var(--varsom-blue-200);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
.alert--warning {
|
|
88
|
+
background-color: var(--feedback-background-default-warning);
|
|
89
|
+
& sl-icon-button::part(base):hover {
|
|
90
|
+
background: var(--feedback-background-subtle-warning);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* emphasized */
|
|
95
|
+
:host([variant='neutral']) .alert,
|
|
96
|
+
:host([emphasized]) .alert {
|
|
97
|
+
color: var(--interactive-primary-foreground-default);
|
|
98
|
+
.alert__icon {
|
|
99
|
+
color: var(--interactive-primary-foreground-default) !important;
|
|
100
|
+
}
|
|
101
|
+
& sl-icon-button::part(base) {
|
|
102
|
+
stroke: var(--interactive-primary-foreground-default) !important;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
:host([emphasized][variant='warning']) .alert {
|
|
106
|
+
color: var(--feedback-foreground-default-warning);
|
|
107
|
+
.alert__icon {
|
|
108
|
+
color: var(--feedback-foreground-default-warning) !important;
|
|
109
|
+
}
|
|
110
|
+
& sl-icon-button::part(base) {
|
|
111
|
+
stroke: var(--feedback-foreground-default-warning) !important;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
:host([emphasized]) .alert--primary {
|
|
115
|
+
background-color: var(--feedback-background-emphasized-info);
|
|
116
|
+
& sl-icon-button::part(base):hover {
|
|
117
|
+
background: var(--feedback-background-subtle-info);
|
|
118
|
+
stroke: var(--feedback-background-emphasized-info) !important;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
:host([emphasized]) .alert--danger {
|
|
122
|
+
background-color: var(--feedback-background-emphasized-error);
|
|
123
|
+
& sl-icon-button::part(base):hover {
|
|
124
|
+
background: var(--feedback-background-subtle-error);
|
|
125
|
+
stroke: var(--feedback-background-emphasized-error) !important;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
:host([emphasized]) .alert--success {
|
|
129
|
+
background-color: var(--feedback-background-emphasized-success);
|
|
130
|
+
& sl-icon-button::part(base):hover {
|
|
131
|
+
background: var(--feedback-background-subtle-success);
|
|
132
|
+
stroke: var(--feedback-background-emphasized-success) !important;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
:host([emphasized]) .alert--neutral {
|
|
136
|
+
background-color: var(--neutrals-foreground-primary);
|
|
137
|
+
& sl-icon-button::part(base):hover {
|
|
138
|
+
background: var(--feedback-background-subtle-neutral, #f7f7f8);
|
|
139
|
+
stroke: var(--neutrals-foreground-primary) !important;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
:host([emphasized]) .alert--warning {
|
|
143
|
+
background-color: var(--feedback-background-emphasized-warning);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* leftStroke */
|
|
147
|
+
:host([leftStroke][emphasized]) .alert,
|
|
148
|
+
:host([leftStroke]) .alert {
|
|
149
|
+
border-left: 6px solid;
|
|
150
|
+
}
|
|
151
|
+
:host([leftStroke]) .alert--primary {
|
|
152
|
+
border-color: var(--feedback-background-emphasized-info);
|
|
153
|
+
}
|
|
154
|
+
:host([leftStroke]) .alert--danger {
|
|
155
|
+
border-color: var(--feedback-background-emphasized-error);
|
|
156
|
+
}
|
|
157
|
+
:host([leftStroke]) .alert--success {
|
|
158
|
+
border-color: var(--feedback-background-emphasized-success);
|
|
159
|
+
}
|
|
160
|
+
:host([leftStroke]) .alert--neutral {
|
|
161
|
+
border-color: var(--neutrals-foreground-primary);
|
|
162
|
+
}
|
|
163
|
+
:host([leftStroke]) .alert--warning {
|
|
164
|
+
border-color: var(--feedback-background-emphasized-warning);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* leftStroke and emphasized */
|
|
168
|
+
:host([leftStroke][emphasized]) .alert--primary {
|
|
169
|
+
border-color: var(--feedback-background-default-info);
|
|
170
|
+
}
|
|
171
|
+
:host([leftStroke][emphasized]) .alert--danger {
|
|
172
|
+
border-color: var(--feedback-background-default-error);
|
|
173
|
+
}
|
|
174
|
+
:host([leftStroke][emphasized]) .alert--success {
|
|
175
|
+
border-color: var(--feedback-background-subtle-success);
|
|
176
|
+
}
|
|
177
|
+
:host([leftStroke][emphasized]) .alert--neutral {
|
|
178
|
+
border-color: var(--neutrals-foreground-subtle);
|
|
179
|
+
}
|
|
180
|
+
:host([leftStroke][emphasized]) .alert--warning {
|
|
181
|
+
border-color: var(--feedback-background-default-warning);
|
|
182
|
+
}
|
|
183
|
+
`;
|