@sb1/ffe-dropdown-react 100.8.3 → 100.10.1
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/README.md +80 -12
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,23 +1,93 @@
|
|
|
1
1
|
# @sb1/ffe-dropdown-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Beskrivelse
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Nedtrekksliste for valg av ett alternativ fra en liste. Wrapper rundt HTML `<select>` som videresender alle standard attributter.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Installasjon
|
|
8
|
+
|
|
9
|
+
```bash
|
|
8
10
|
npm install --save @sb1/ffe-dropdown-react
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Bruk
|
|
14
|
+
|
|
15
|
+
Full dokumentasjon: https://sparebank1.github.io/designsystem/
|
|
16
|
+
|
|
17
|
+
### Importere CSS
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import '@sb1/ffe-form/css/form.css';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Eksempler
|
|
12
24
|
|
|
13
|
-
|
|
25
|
+
### Grunnleggende bruk med InputGroup (anbefalt)
|
|
14
26
|
|
|
15
|
-
|
|
16
|
-
|
|
27
|
+
```tsx
|
|
28
|
+
import { Dropdown } from '@sb1/ffe-dropdown-react';
|
|
29
|
+
import { InputGroup } from '@sb1/ffe-form-react';
|
|
17
30
|
|
|
18
|
-
|
|
31
|
+
function DropdownMedLabel() {
|
|
32
|
+
const [value, setValue] = React.useState('jan');
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<InputGroup label="Velg måned">
|
|
36
|
+
<Dropdown value={value} onChange={e => setValue(e.target.value)}>
|
|
37
|
+
<option value="jan">Januar</option>
|
|
38
|
+
<option value="feb">Februar</option>
|
|
39
|
+
<option value="mar">Mars</option>
|
|
40
|
+
</Dropdown>
|
|
41
|
+
</InputGroup>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
19
45
|
|
|
20
|
-
|
|
46
|
+
### Inline-modus
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<InputGroup label="Antall">
|
|
50
|
+
<Dropdown inline={true} defaultValue="1">
|
|
51
|
+
<option value="1">1</option>
|
|
52
|
+
<option value="2">2</option>
|
|
53
|
+
<option value="3">3</option>
|
|
54
|
+
</Dropdown>
|
|
55
|
+
</InputGroup>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Validering med feilmelding
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import { Dropdown } from '@sb1/ffe-dropdown-react';
|
|
62
|
+
import { InputGroup } from '@sb1/ffe-form-react';
|
|
63
|
+
|
|
64
|
+
function DropdownMedFeil() {
|
|
65
|
+
const [value, setValue] = React.useState('');
|
|
66
|
+
const hasError = value === '';
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<InputGroup
|
|
70
|
+
label="Velg måned"
|
|
71
|
+
fieldMessage={hasError ? 'Du må velge en måned' : undefined}
|
|
72
|
+
>
|
|
73
|
+
{inputProps => (
|
|
74
|
+
<Dropdown
|
|
75
|
+
{...inputProps}
|
|
76
|
+
value={value}
|
|
77
|
+
onChange={e => setValue(e.target.value)}
|
|
78
|
+
aria-invalid={hasError ? 'true' : undefined}
|
|
79
|
+
>
|
|
80
|
+
<option value="">Velg ...</option>
|
|
81
|
+
<option value="jan">Januar</option>
|
|
82
|
+
<option value="feb">Februar</option>
|
|
83
|
+
</Dropdown>
|
|
84
|
+
)}
|
|
85
|
+
</InputGroup>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Utvikling
|
|
21
91
|
|
|
22
92
|
```bash
|
|
23
93
|
npm install
|
|
@@ -25,6 +95,4 @@ npm run build
|
|
|
25
95
|
npm start
|
|
26
96
|
```
|
|
27
97
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
|
|
98
|
+
Lokal Storybook kjører på http://localhost:6006/.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-dropdown-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.10.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank 1",
|
|
6
6
|
"files": [
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
"test:watch": "ffe-buildtool jest --watch"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@sb1/ffe-form": "^100.
|
|
27
|
+
"@sb1/ffe-form": "^100.10.1",
|
|
28
28
|
"classnames": "^2.3.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@sb1/ffe-buildtool": "^100.
|
|
31
|
+
"@sb1/ffe-buildtool": "^100.10.1",
|
|
32
32
|
"eslint": "^9.22.0",
|
|
33
33
|
"react": "^18.2.0",
|
|
34
34
|
"react-dom": "^18.2.0"
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"publishConfig": {
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "a07d2274928d56dc447a3dbca8f44d1f96996d8c"
|
|
43
43
|
}
|