nve-designsystem 0.1.7 → 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.
Files changed (28) hide show
  1. package/.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml +4 -1
  2. package/doc/components.md +2 -0
  3. package/doc/nve-checkbox-group.md +13 -0
  4. package/doc/nve-checkbox.md +78 -0
  5. package/doc/nve-radio-button.md +50 -0
  6. package/package.json +1 -1
  7. package/src/components/index.ts +3 -1
  8. package/src/components/nve-button/nve-button-demo.ts +177 -86
  9. package/src/components/nve-button/nve-button.styles.ts +50 -4
  10. package/src/components/nve-button/nve-button.ts +6 -2
  11. package/src/components/nve-checkbox/nve-checkbox-demo.ts +54 -0
  12. package/src/components/nve-checkbox/nve-checkbox.styles.ts +66 -0
  13. package/src/components/nve-checkbox/nve-checkbox.ts +26 -0
  14. package/src/components/nve-checkbox-group/nve-checkbox-group-demo.ts +126 -0
  15. package/src/components/nve-checkbox-group/nve-checkbox-group.styles.ts +35 -0
  16. package/src/components/nve-checkbox-group/nve-checkbox-group.ts +95 -0
  17. package/src/components/nve-icon/nve-icon.ts +2 -3
  18. package/src/components/nve-label/nve-label.styles.ts +22 -25
  19. package/src/components/nve-label/nve-label.ts +8 -10
  20. package/src/components/nve-tooltip/nve-tooltip.ts +2 -1
  21. package/src/main.ts +9 -3
  22. package/src/stories/NveCheckbox.stories.ts +29 -0
  23. package/src/stories/NveCheckbox.ts +20 -0
  24. package/src/stories/NveCheckboxGroup.stories.ts +38 -0
  25. package/src/stories/NveCheckboxGroup.ts +27 -0
  26. package/src/stories/nve-button/NveButton.ts +6 -25
  27. package/src/styles/testsite.css +1 -1
  28. package/tokens/public/device/base.json +4 -0
package/.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml CHANGED
@@ -6,10 +6,13 @@ on:
6
6
  - main
7
7
  paths:
8
8
  - 'src/**'
9
+ - 'stories/**'
9
10
  pull_request:
10
11
  types: [opened, synchronize, reopened, closed]
11
12
  branches:
12
13
  - main
14
+ paths:
15
+ - 'src/**'
13
16
 
14
17
  jobs:
15
18
  # Run when a pull request is created or updated
@@ -37,7 +40,7 @@ jobs:
37
40
  close_pull_request_job:
38
41
 
39
42
  close_pull_request_job:
40
- if: github.event_name == 'pull_request' && github.event.action == 'closed'
43
+ if: (github.event_name == 'pull_request' && github.event.action == 'closed') || (github.event.pull_request.merged == false && github.event.pull_request.merged_by == null)
41
44
  runs-on: ubuntu-latest
42
45
  name: Close Pull Request Job
43
46
  steps:
package/doc/components.md CHANGED
@@ -3,6 +3,8 @@
3
3
  Komponenter i alfabetisk rekkefølge:
4
4
 
5
5
  - [nve-button](./nve-button.md)
6
+ - [nve-checkbox](./nve-checkbox.md)
7
+ - [nve-checkbox-group](./nve-checkbox-group.md)
6
8
  - [nve-icon](./nve-icon.md)
7
9
  - [nve-input](./nve-input.md)
8
10
  - [nve-label](./nve-label.md)
package/doc/nve-checkbox-group.md ADDED
@@ -0,0 +1,13 @@
1
+ # nve-checkbox-group
2
+
3
+ ## Properties
4
+
5
+ | Property | Attribute | Type | Default | Description |
6
+ |----------------|----------------|------------------------------|------------|--------------------------------------------------|
7
+ | `disabled` | `disabled` | `boolean` | false | Disable eller enable gruppa |
8
+ | `errorMessage` | `errorMessage` | `string \| undefined` | | Viser feil melding under gruppen |
9
+ | `isValid` | `isValid` | `boolean \| undefined` | | Bestemmer om sjekkboksgruppe er valid. Hvis ikke alle sjekkbokser i gruppe blir markert som feil |
10
+ | `label` | `label` | `string \| undefined` | | Viser label til en gruppe |
11
+ | `orientation` | `orientation` | `"horizontal" \| "vertical"` | "vertical" | Om gruppen skal rendres horisontalt eller vertikalt |
12
+ | `slot` | | | | |
13
+ | `tooltip` | `tooltip` | `string \| undefined` | | Viser i ikone og tooltip tekst ved siden av label. Skal ikke fungere uten label |
package/doc/nve-checkbox.md ADDED
@@ -0,0 +1,78 @@
1
+ # nve-checkbox
2
+
3
+ foreløpig finnes ikke noe hove
4
+
5
+ ## Properties
6
+
7
+ | Property | Attribute | Modifiers | Type | Default | Description |
8
+ |---------------------|-----------|-----------|-----------------------------------------|---------|--------------------------------------------------|
9
+ | `checkValidity` | | | `() => boolean` | | |
10
+ | `checked` | | | `boolean` | | Draws the checkbox in a checked state. |
11
+ | `defaultChecked` | | | `boolean` | | The default value of the form control. Primarily used for resetting the form control. |
12
+ | `defaultValue` | | | `unknown` | | |
13
+ | `dir` | | | `string` | | |
14
+ | `disabled` | | | `boolean` | | Disables the checkbox. |
15
+ | `form` | | | `string` | | By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you<br />to place the form control outside of a form and associate it with the form that has this `id`. The form must be in<br />the same document or shadow root for this to work. |
16
+ | `getForm` | | | `() => HTMLFormElement \| null` | | |
17
+ | `indeterminate` | | | `boolean` | | Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select<br />all/none" behavior when associated checkboxes have a mix of checked and unchecked states. |
18
+ | `input` | | | `HTMLInputElement` | | |
19
+ | `isValid` | `isValid` | | `boolean` | true | Checks if input is valid |
20
+ | `lang` | | | `string` | | |
21
+ | `max` | | | `string \| number \| Date \| undefined` | | |
22
+ | `maxlength` | | | `number \| undefined` | | |
23
+ | `min` | | | `string \| number \| Date \| undefined` | | |
24
+ | `minlength` | | | `number \| undefined` | | |
25
+ | `name` | | | `string` | | The name of the checkbox, submitted as a name/value pair with form data. |
26
+ | `pattern` | | | `string \| undefined` | | |
27
+ | `reportValidity` | | | `() => boolean` | | |
28
+ | `required` | | | `boolean` | | Makes the checkbox a required field. |
29
+ | `setCustomValidity` | | | `(message: string) => void` | | |
30
+ | `size` | | | `"small" \| "medium" \| "large"` | | The checkbox's size. |
31
+ | `step` | | | `number \| "any" \| undefined` | | |
32
+ | `title` | | | `string` | | |
33
+ | `validationMessage` | | readonly | `string` | | Gets the validation message |
34
+ | `validity` | | readonly | `ValidityState` | | Gets the validity state object |
35
+ | `value` | | | `string` | | The current value of the checkbox, submitted as a name/value pair with form data. |
36
+
37
+ ## Methods
38
+
39
+ | Method | Type | Description |
40
+ |------------------------|--------------------------------------------------|--------------------------------------------------|
41
+ | `blur` | `(): void` | Removes focus from the checkbox. |
42
+ | `checkValidity` | `(): boolean` | Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. |
43
+ | `click` | `(): void` | Simulates a click on the checkbox. |
44
+ | `emit` | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
45
+ | `focus` | `(options?: FocusOptions \| undefined): void` | Sets focus on the checkbox. |
46
+ | `getForm` | `(): HTMLFormElement \| null` | Gets the associated form, if one exists. |
47
+ | `handleDisabledChange` | `(): void` | |
48
+ | `handleStateChange` | `(): void` | |
49
+ | `reportValidity` | `(): boolean` | Checks for validity and shows the browser's validation message if the control is invalid. |
50
+ | `setCustomValidity` | `(message: string): void` | Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear<br />the custom validation message, call this method with an empty string. |
51
+
52
+ ## Events
53
+
54
+ | Event | Description |
55
+ |--------------|--------------------------------------------------|
56
+ | `sl-blur` | Emitted when the checkbox loses focus. |
57
+ | `sl-change` | Emitted when the checked state changes. |
58
+ | `sl-focus` | Emitted when the checkbox gains focus. |
59
+ | `sl-input` | Emitted when the checkbox receives input. |
60
+ | `sl-invalid` | Emitted when the form control has been checked for validity and its constraints aren't satisfied. |
61
+
62
+ ## Slots
63
+
64
+ | Name | Description |
65
+ |------|-----------------------|
66
+ | | The checkbox's label. |
67
+
68
+ ## CSS Shadow Parts
69
+
70
+ | Part | Description |
71
+ |--------------------------|--------------------------------------------------|
72
+ | `base` | The component's base wrapper. |
73
+ | `checked-icon` | The checked icon, an `<sl-icon>` element. |
74
+ | `control` | The square container that wraps the checkbox's checked state. |
75
+ | `control--checked` | Matches the control part when the checkbox is checked. |
76
+ | `control--indeterminate` | Matches the control part when the checkbox is indeterminate. |
77
+ | `indeterminate-icon` | The indeterminate icon, an `<sl-icon>` element. |
78
+ | `label` | The container that wraps the checkbox's label. |
package/doc/nve-radio-button.md ADDED
@@ -0,0 +1,50 @@
1
+ # nve-radio-button
2
+
3
+ ## Properties
4
+
5
+ | Property | Type | Description |
6
+ |---------------|----------------------------------|--------------------------------------------------|
7
+ | `checked` | `boolean` | |
8
+ | `dir` | `string` | |
9
+ | `disabled` | `boolean` | Disables the radio button. |
10
+ | `hiddenInput` | `HTMLInputElement` | |
11
+ | `input` | `HTMLInputElement` | |
12
+ | `lang` | `string` | |
13
+ | `pill` | `boolean` | Draws a pill-style radio button with rounded edges. |
14
+ | `size` | `"small" \| "medium" \| "large"` | The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so<br />this attribute can typically be omitted. |
15
+ | `value` | `string` | The radio's value. When selected, the radio group will receive this value. |
16
+
17
+ ## Methods
18
+
19
+ | Method | Type | Description |
20
+ |------------------------|--------------------------------------------------|--------------------------------------------------|
21
+ | `blur` | `(): void` | Removes focus from the radio button. |
22
+ | `emit` | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
23
+ | `focus` | `(options?: FocusOptions \| undefined): void` | Sets focus on the radio button. |
24
+ | `handleDisabledChange` | `(): void` | |
25
+
26
+ ## Events
27
+
28
+ | Event | Description |
29
+ |------------|--------------------------------------|
30
+ | `sl-blur` | Emitted when the button loses focus. |
31
+ | `sl-focus` | Emitted when the button gains focus. |
32
+
33
+ ## Slots
34
+
35
+ | Name | Description |
36
+ |----------|--------------------------------------------------|
37
+ | | The radio button's label. |
38
+ | `prefix` | A presentational prefix icon or similar element. |
39
+ | `suffix` | A presentational suffix icon or similar element. |
40
+
41
+ ## CSS Shadow Parts
42
+
43
+ | Part | Description |
44
+ |-------------------|--------------------------------------------------|
45
+ | `base` | The component's base wrapper. |
46
+ | `button` | The internal `<button>` element. |
47
+ | `button--checked` | The internal button element when the radio button is checked. |
48
+ | `label` | The container that wraps the radio button's label. |
49
+ | `prefix` | The container that wraps the prefix. |
50
+ | `suffix` | The container that wraps the suffix. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nve-designsystem",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
package/src/components/index.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
2
2
  export * from './nve-alert/nve-alert';
3
3
  export * from './nve-button/nve-button';
4
- export * from './nve-label/nve-label';
4
+ export * from './nve-checkbox-group/nve-checkbox-group';
5
+ export * from './nve-checkbox/nve-checkbox';
5
6
  export * from './nve-icon/nve-icon';
6
7
  export * from './nve-input/nve-input';
8
+ export * from './nve-label/nve-label';
7
9
  export * from './nve-radio/nve-radio.component';
8
10
  export * from './nve-radio-button/nve-radio-button.component';
9
11
  export * from './nve-radio-group/nve-radio-group.component';
package/src/components/nve-button/nve-button-demo.ts CHANGED
@@ -1,89 +1,180 @@
1
1
  import { html } from 'lit';
2
2
 
3
- /**
4
- * Demonstrasjon av nve-input
5
- */
6
- const table = html`
7
- <hr/>
8
- <h3 id="nve-button">nve-button</h3>
9
- <table class="demo">
3
+ export default html`
4
+ <hr />
5
+ <h3 id="nve-button">nve-button</h3>
6
+ <table class="demo">
10
7
  <thead>
11
- <th>Variant</th>
12
- <th>Primary</th>
13
- <th>Secondary</th>
14
- <th>Outlined</th>
15
- <th>Ghost</th>
16
- </thead>
17
- <tr>
18
- <td>medium</td>
19
- <td>
20
- <nve-button size="medium" variant="primary" disabled="">I'm a NVE-butotn</nve-button>
21
- </td>
22
- <td>
23
- <nve-button size="medium" variant="default">I'm a NVE-butotn</nve-button>
24
- </td>
25
- <td>
26
- <nve-button size="medium" variant="neutral" outline>I'm a NVE-butotn</nve-button>
27
- </td>
28
- <td>
29
- <nve-button size="medium" variant="neutral">I'm a NVE-butotn</nve-button>
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>large</td>
34
- <td>
35
- <nve-button size="large" variant="primary">I'm a NVE-butotn</nve-button>
36
- </td>
37
- <td>
38
- <nve-button size="large" variant="default">I'm a NVE-butotn</nve-button>
39
- </td>
40
- <td>
41
- <nve-button size="large" variant="neutral" outline>I'm a NVE-butotn</nve-button>
42
- </td>
43
- <td>
44
- <nve-button size="large" variant="neutral">I'm a NVE-butotn</nve-button>
45
- </td>
46
- </tr>
47
- <tr>
48
- <td>small</td>
49
- <td>
50
- <nve-button size="small" variant="primary">I'm a NVE-butotn</nve-button>
51
- </td>
52
- <td>
53
- <nve-button size="small" variant="default">I'm a NVE-butotn</nve-button>
54
- </td>
55
- <td>
56
- <nve-button size="small" variant="neutral" outline>I'm a NVE-butotn</nve-button>
57
- </td>
58
- <td>
59
- <nve-button size="small" variant="neutral">I'm a NVE-butotn</nve-button>
60
- </td>
61
- </tr>
62
- <tr>
63
- <td>neutral</td>
64
- <td colspan="4"><nve-button variant="neutral" outline> im a butotn</nve-button></td>
65
- </tr>
66
- <tr>
67
- <td>loading</td>
68
- <td colspan="4">
69
- <nve-button colspan="4" variant="neutral" outline loading> im a butotn</nve-button>
70
- </td>
71
- </tr>
72
- <tr>
73
- <td>loading with slot</td>
74
- <td colspan="4">
75
- <nve-button variant="neutral" outline>
76
- im a butotn
77
- <!-- Hvis vi vil ha både label og spinner kan vi ikke bruke loading property på knappen og span med suffix må renders kondisjonelt -->
78
- <span slot="suffix"><nve-spinner></nve-spinner></span>
79
- </nve-button>
80
- <nve-button variant="neutral" outline>
81
- im a butotn
82
- <span slot="prefix"> <nve-icon name="search"></nve-icon></span>
83
- <span slot="suffix"><nve-spinner></nve-spinner></span>
84
- </nve-button>
85
- </td>
86
- </tr>
87
- </table> `;
88
-
89
- export default table;
8
+ <tr>
9
+ <th></th>
10
+ <th>Default</th>
11
+ <th>Disabled</th>
12
+ <th>Loading</th>
13
+ </tr>
14
+ </thead>
15
+ <tbody>
16
+ <tr>
17
+ <td>Primary Medium</td>
18
+ <td>
19
+ <nve-button size="medium" variant="primary">I'm an NVE-button</nve-button>
20
+ </td>
21
+ <td>
22
+ <nve-button disabled size="medium" variant="primary">I'm an NVE-button</nve-button>
23
+ </td>
24
+ <td>
25
+ <nve-button loading size="medium" variant="primary">I'm an NVE-button</nve-button>
26
+ </td>
27
+ </tr>
28
+ <tr>
29
+ <td>Primary Small</td>
30
+ <td>
31
+ <nve-button size="small" variant="primary">I'm an NVE-button</nve-button>
32
+ </td>
33
+ <td>
34
+ <nve-button disabled size="small" variant="primary">I'm an NVE-button</nve-button>
35
+ </td>
36
+ <td>
37
+ <nve-button loading size="small" variant="primary">I'm an NVE-button</nve-button>
38
+ </td>
39
+ </tr>
40
+ <tr>
41
+ <td>Primary Large</td>
42
+ <td>
43
+ <nve-button size="large" variant="primary">I'm an NVE-button</nve-button>
44
+ </td>
45
+ <td>
46
+ <nve-button disabled size="large" variant="primary">I'm an NVE-button</nve-button>
47
+ </td>
48
+ <td>
49
+ <nve-button loading size="large" variant="primary">I'm an NVE-button</nve-button>
50
+ </td>
51
+ </tr>
52
+ <tr>
53
+ <td>Secondary Medium</td>
54
+ <td>
55
+ <nve-button size="medium" variant="default">I'm an NVE-button</nve-button>
56
+ </td>
57
+ <td>
58
+ <nve-button disabled size="medium" variant="default">I'm an NVE-button</nve-button>
59
+ </td>
60
+ <td>
61
+ <nve-button loading size="medium" variant="default">I'm an NVE-button</nve-button>
62
+ </td>
63
+ </tr>
64
+ <tr>
65
+ <td>Secondary Small</td>
66
+ <td>
67
+ <nve-button size="small" variant="default">I'm an NVE-button</nve-button>
68
+ </td>
69
+ <td>
70
+ <nve-button disabled size="small" variant="default">I'm an NVE-button</nve-button>
71
+ </td>
72
+ <td>
73
+ <nve-button loading size="small" variant="default">I'm an NVE-button</nve-button>
74
+ </td>
75
+ </tr>
76
+ <tr>
77
+ <td>Secondary Large</td>
78
+ <td>
79
+ <nve-button size="large" variant="default">I'm an NVE-button</nve-button>
80
+ </td>
81
+ <td>
82
+ <nve-button disabled size="large" variant="default">I'm an NVE-button</nve-button>
83
+ </td>
84
+ <td>
85
+ <nve-button loading size="large" variant="default">I'm an NVE-button</nve-button>
86
+ </td>
87
+ </tr>
88
+ <tr>
89
+ <td>Outlined Medium</td>
90
+ <td>
91
+ <nve-button size="medium" variant="neutral" outline>I'm an NVE-button</nve-button>
92
+ </td>
93
+ <td>
94
+ <nve-button disabled size="medium" variant="neutral" outline>I'm an NVE-button</nve-button>
95
+ </td>
96
+ <td>
97
+ <nve-button loading size="medium" variant="neutral" outline>I'm an NVE-button</nve-button>
98
+ </td>
99
+ </tr>
100
+ <tr>
101
+ <td>Outlined Small</td>
102
+ <td>
103
+ <nve-button size="small" variant="neutral" outline>I'm an NVE-button</nve-button>
104
+ </td>
105
+ <td>
106
+ <nve-button disabled size="small" variant="neutral" outline>I'm an NVE-button</nve-button>
107
+ </td>
108
+ <td>
109
+ <nve-button loading size="small" variant="neutral" outline>I'm an NVE-button</nve-button>
110
+ </td>
111
+ </tr>
112
+ <tr>
113
+ <td>Outlined Large</td>
114
+ <td>
115
+ <nve-button size="large" variant="neutral" outline>I'm an NVE-button</nve-button>
116
+ </td>
117
+ <td>
118
+ <nve-button disabled size="large" variant="neutral" outline>I'm an NVE-button</nve-button>
119
+ </td>
120
+ <td>
121
+ <nve-button loading size="large" variant="neutral" outline>I'm an NVE-button</nve-button>
122
+ </td>
123
+ </tr>
124
+ <tr>
125
+ <td>Ghost Medium</td>
126
+ <td>
127
+ <nve-button size="medium" variant="neutral">I'm an NVE-button</nve-button>
128
+ </td>
129
+ <td>
130
+ <nve-button disabled size="medium" variant="neutral">I'm an NVE-button</nve-button>
131
+ </td>
132
+ <td>
133
+ <nve-button loading size="medium" variant="neutral">I'm an NVE-button</nve-button>
134
+ </td>
135
+ </tr>
136
+ <tr>
137
+ <td>Ghost Small</td>
138
+ <td>
139
+ <nve-button size="small" variant="neutral">I'm an NVE-button</nve-button>
140
+ </td>
141
+ <td>
142
+ <nve-button disabled size="small" variant="neutral">I'm an NVE-button</nve-button>
143
+ </td>
144
+ <td>
145
+ <nve-button loading size="small" variant="neutral">I'm an NVE-button</nve-button>
146
+ </td>
147
+ </tr>
148
+ <tr>
149
+ <td>Ghost Large</td>
150
+ <td>
151
+ <nve-button size="large" variant="neutral">I'm an NVE-button</nve-button>
152
+ </td>
153
+ <td>
154
+ <nve-button disabled size="large" variant="neutral">I'm an NVE-button</nve-button>
155
+ </td>
156
+ <td>
157
+ <nve-button loading size="large" variant="neutral">I'm an NVE-button</nve-button>
158
+ </td>
159
+ </tr>
160
+ <tr>
161
+ <td>Button with prefix icon</td>
162
+ <td>
163
+ <nve-button size="large" variant="primary"
164
+ >I'm an NVE-button
165
+ <nve-icon name="warning" slot="prefix"></nve-icon>
166
+ </nve-button>
167
+ </td>
168
+ </tr>
169
+ <tr>
170
+ <td>Button with suffix icon</td>
171
+ <td>
172
+ <nve-button loading size="small" variant="primary"
173
+ >I'm an NVE-button
174
+ <nve-icon name="warning" slot="suffix"></nve-icon>
175
+ </nve-button>
176
+ </td>
177
+ </tr>
178
+ </tbody>
179
+ </table>
180
+ `;
package/src/components/nve-button/nve-button.styles.ts CHANGED
@@ -1,13 +1,52 @@
1
1
  import { css } from 'lit';
2
2
 
3
3
  export default css`
4
+ /* kan ikke bruke gap fordi den lager rom mellom slots selv om de er tomme */
5
+ /* derfor setter margin på ::part(label) og substraherer margin verdi i horizontal padding i selve .button klassen */
4
6
  .button {
5
- font: var(--label-medium);
6
7
  width: fit-content;
7
- }
8
- .button__label {
9
- display: flex;
10
8
  align-items: center;
9
+ padding: var(--spacing-medium, 1rem) calc(var(--spacing-large, 1.5rem) - var(--spacing-x-small, 0.5rem));
10
+ }
11
+ :host::part(spinner) {
12
+ --track-color: none;
13
+ position: relative;
14
+ top: 0;
15
+ left: 0;
16
+ margin-left: var(--spacing-x-small, 0.5rem);
17
+ }
18
+
19
+ :host::part(label) {
20
+ margin: 0 var(--spacing-x-small, 0.5rem);
21
+ font: var(--label-medium);
22
+ }
23
+
24
+ .button--has-label.button--large .button__label,
25
+ .button--has-label.button--small .button__label,
26
+ .button--has-label.button--medium .button__label {
27
+ padding: unset;
28
+ }
29
+
30
+ .button--has-prefix.button--small,
31
+ .button--has-prefix.button--medium,
32
+ .button--has-prefix.button--large {
33
+ padding-inline-start: var(--spacing-large);
34
+ }
35
+
36
+ .button--has-suffix.button--small,
37
+ .button--has-suffix.button--medium,
38
+ .button--has-suffix.button--large {
39
+ padding-inline-end: var(--spacing-large);
40
+ }
41
+
42
+ .button--small {
43
+ height: var(--sl-input-height-small);
44
+ }
45
+ .button--large {
46
+ height: var(--sl-input-height-large);
47
+ }
48
+ .button--medium {
49
+ height: var(--sl-input-height-medium);
11
50
  }
12
51
 
13
52
  /* PRIMARY */
@@ -62,4 +101,11 @@ export default css`
62
101
  color: var(--interactive-outlined-foreground-default);
63
102
  background-color: transparent;
64
103
  }
104
+
105
+ .button--loading .button__prefix,
106
+ .button--loading .button__label,
107
+ .button--loading .button__suffix,
108
+ .button--loading .button__caret {
109
+ visibility: unset;
110
+ }
65
111
  `;
package/src/components/nve-button/nve-button.ts CHANGED
@@ -6,14 +6,18 @@ import styles from './nve-button.styles';
6
6
  * En Shoelace-knapp i NVE-forkledning.
7
7
  * Se https://shoelace.style/components/button
8
8
  *
9
- * TODO: Beskriv hvilke properties / attributter og varianter vi ikke skal bruke
9
+ * For å lage en lenke knapp legg til href på nve-button og den skal automatisk bli gjort om til <a>
10
+ *
11
+ * Vi skal ikke bruke properties:
12
+ * - circle
13
+ * - caret
14
+ * - pill
10
15
  */
11
16
  @customElement('nve-button')
12
17
  export class NveButton extends SlButton {
13
18
  constructor() {
14
19
  super();
15
20
  }
16
-
17
21
  static styles = [SlButton.styles, styles];
18
22
  }
19
23
 
package/src/components/nve-checkbox/nve-checkbox-demo.ts ADDED
@@ -0,0 +1,54 @@
1
+ import { html } from 'lit';
2
+
3
+ export default html`
4
+ <hr />
5
+ <h3>nve-checkbox</h3>
6
+ <table class="demo">
7
+ <thead>
8
+ <tr>
9
+ <th></th>
10
+ <th>Unchecked</th>
11
+ <th>Checked</th>
12
+ <th>Indeterminate</th>
13
+ </tr>
14
+ </thead>
15
+ <tbody>
16
+ <tr>
17
+ <td>Default</td>
18
+ <td>
19
+ <nve-checkbox>Value</nve-checkbox>
20
+ </td>
21
+ <td>
22
+ <nve-checkbox checked>Value</nve-checkbox>
23
+ </td>
24
+ <td>
25
+ <nve-checkbox indeterminate>Value</nve-checkbox>
26
+ </td>
27
+ </tr>
28
+ <tr>
29
+ <td>Disabled</td>
30
+ <td>
31
+ <nve-checkbox disabled>Value</nve-checkbox>
32
+ </td>
33
+ <td>
34
+ <nve-checkbox disabled checked>Value</nve-checkbox>
35
+ </td>
36
+ <td>
37
+ <nve-checkbox disabled indeterminate>Value</nve-checkbox>
38
+ </td>
39
+ </tr>
40
+ <tr>
41
+ <td>Error</td>
42
+ <td>
43
+ <nve-checkbox invalid>Value</nve-checkbox>
44
+ </td>
45
+ <td>
46
+ <nve-checkbox invalid checked>Value</nve-checkbox>
47
+ </td>
48
+ <td>
49
+ <nve-checkbox invalid indeterminate>Value</nve-checkbox>
50
+ </td>
51
+ </tr>
52
+ </tbody>
53
+ </table>
54
+ `;