nve-designsystem 0.1.8 → 0.1.9
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/package.json
CHANGED
|
@@ -6,38 +6,35 @@ import { css } from 'lit';
|
|
|
6
6
|
export const styles = css`
|
|
7
7
|
:host {
|
|
8
8
|
color: var(--neutrals-foreground-primary);
|
|
9
|
+
font: var(--label-small);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
/* skriftstørrelser */
|
|
13
|
+
:host([size='x-small']) {
|
|
14
|
+
font: var(--label-x-small);
|
|
15
|
+
}
|
|
16
|
+
:host([size='medium']) {
|
|
17
|
+
font: var(--label-medium);
|
|
18
|
+
}
|
|
19
|
+
:host([size='large']) {
|
|
20
|
+
font: var(--label-large);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
/* light-variant i standard størrelse */
|
|
25
|
+
:host([light]) {
|
|
18
26
|
font: var(--label-small-light);
|
|
19
27
|
}
|
|
20
|
-
:host([light]),
|
|
21
|
-
:host([size='medium']) {
|
|
22
|
-
font: var(--label-medium-light);
|
|
23
|
-
}
|
|
24
|
-
:host([light]),
|
|
25
|
-
:host([size='large']) {
|
|
26
|
-
font: var(--label-large-light);
|
|
27
|
-
}
|
|
28
28
|
|
|
29
|
-
/*
|
|
30
|
-
:host([size='x-small']) {
|
|
31
|
-
font: var(--label-x-small);
|
|
32
|
-
}
|
|
33
|
-
:host([size='small']) {
|
|
34
|
-
font: var(--label-small);
|
|
29
|
+
/* light-varianter for de andre størrelsene */
|
|
30
|
+
:host([light][size='x-small']) {
|
|
31
|
+
font: var(--label-x-small-light);
|
|
35
32
|
}
|
|
36
|
-
:host([size='medium']) {
|
|
37
|
-
font: var(--label-medium);
|
|
33
|
+
:host([light][size='medium']) {
|
|
34
|
+
font: var(--label-medium-light);
|
|
38
35
|
}
|
|
39
|
-
:host([size='large']) {
|
|
40
|
-
font: var(--label-large);
|
|
36
|
+
:host([light][size='large']) {
|
|
37
|
+
font: var(--label-large-light);
|
|
41
38
|
}
|
|
42
39
|
|
|
43
40
|
.nve-info-icon {
|
|
@@ -12,6 +12,7 @@ import '../nve-tooltip/nve-tooltip';
|
|
|
12
12
|
* @slot tooltip - innhold i denne blir vist som en tooltip hvis man svever over info-ikonet
|
|
13
13
|
*
|
|
14
14
|
* TODO: Skal være litt mer plass mellom tekst og info-ikon
|
|
15
|
+
* TODO: Hvis du angir både value og innhold i slot, er det value som vises. Det bør være motsatt.
|
|
15
16
|
*/
|
|
16
17
|
@customElement('nve-label')
|
|
17
18
|
export class NveLabel extends LitElement {
|
|
@@ -56,28 +57,25 @@ export class NveLabel extends LitElement {
|
|
|
56
57
|
|
|
57
58
|
private renderValueProperty() {
|
|
58
59
|
if (this.value.length) {
|
|
60
|
+
// Vis value-property
|
|
61
|
+
// For å vise label i slot INNI tooltip-slot, må label-slot ha et navn
|
|
59
62
|
return html`
|
|
60
63
|
<label part="form-control-label" class="form-control__label" aria-hidden="false">
|
|
61
64
|
<slot name="label">${this.value}</slot>
|
|
62
65
|
</label>`
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
private renderSlottedContent() {
|
|
68
|
-
if (!this.value.length) {
|
|
66
|
+
} else {
|
|
67
|
+
// Vis evt. slot-innhold i stedet
|
|
69
68
|
return html`
|
|
70
69
|
<label part="form-control-label" class="form-control__label" aria-hidden="false">
|
|
71
|
-
<slot
|
|
70
|
+
<slot></slot>
|
|
72
71
|
</label>`
|
|
73
72
|
}
|
|
74
|
-
return html``; // det er ikke innhold i slot, så vi viser ikke denne delen
|
|
75
73
|
}
|
|
76
74
|
|
|
75
|
+
|
|
77
76
|
render() {
|
|
78
77
|
return html`
|
|
79
78
|
${this.renderValueProperty()}
|
|
80
|
-
${this.renderSlottedContent()}
|
|
81
79
|
${this.renderInfoIconWithTooltip()}
|
|
82
80
|
`;
|
|
83
81
|
}
|