@sb1/ffe-message-box-react 100.8.3 → 100.10.0
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 +85 -3
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,89 @@
|
|
|
1
1
|
# @sb1/ffe-message-box-react
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Beskrivelse
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Foreldet pakke. Bruk `@sb1/ffe-messages-react` i stedet.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Full dokumentasjon: https://sparebank1.github.io/designsystem/
|
|
8
|
+
|
|
9
|
+
## Foreldet pakke
|
|
10
|
+
|
|
11
|
+
Bruk de nye pakkene: [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).
|
|
12
|
+
|
|
13
|
+
### Migrasjonsguide
|
|
14
|
+
|
|
15
|
+
| Gammel komponent | Ny komponent |
|
|
16
|
+
| ---------------- | --------------------------------- |
|
|
17
|
+
| `SuccessMessage` | `MessageBox` med `type="success"` |
|
|
18
|
+
| `ErrorMessage` | `MessageBox` med `type="error"` |
|
|
19
|
+
| `InfoMessage` | `MessageBox` med `type="info"` |
|
|
20
|
+
| `TipsMessage` | `MessageBox` med `type="tips"` |
|
|
21
|
+
|
|
22
|
+
## Eksporterte komponenter
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
export { SuccessMessage, ErrorMessage, InfoMessage, TipsMessage } from './';
|
|
26
|
+
export { InfoMessageList, InfoMessageListItem } from './InfoMessageList';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Eksempler
|
|
30
|
+
|
|
31
|
+
### Grunnleggende bruk
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { SuccessMessage, ErrorMessage, InfoMessage, TipsMessage } from '@sb1/ffe-message-box-react';
|
|
35
|
+
|
|
36
|
+
<SuccessMessage title="Handling fullfort">
|
|
37
|
+
Endringene dine er lagret.
|
|
38
|
+
</SuccessMessage>
|
|
39
|
+
|
|
40
|
+
<ErrorMessage title="Noe gikk galt" alert={true}>
|
|
41
|
+
Kunne ikke lagre endringene.
|
|
42
|
+
</ErrorMessage>
|
|
43
|
+
|
|
44
|
+
<InfoMessage title="Viktig informasjon">
|
|
45
|
+
Husk a fullfor registreringen innen 7 dager.
|
|
46
|
+
</InfoMessage>
|
|
47
|
+
|
|
48
|
+
<TipsMessage title="Visste du?">
|
|
49
|
+
Du kan spare tid ved a bruke hurtigtaster.
|
|
50
|
+
</TipsMessage>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Med lister
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import {
|
|
57
|
+
InfoMessage,
|
|
58
|
+
InfoMessageList,
|
|
59
|
+
InfoMessageListItem,
|
|
60
|
+
} from '@sb1/ffe-message-box-react';
|
|
61
|
+
|
|
62
|
+
<InfoMessage title="Relaterte artikler">
|
|
63
|
+
<InfoMessageList>
|
|
64
|
+
<InfoMessageListItem href="/artikkel/1">
|
|
65
|
+
Slik endrer du passord
|
|
66
|
+
</InfoMessageListItem>
|
|
67
|
+
<InfoMessageListItem href="/artikkel/2">
|
|
68
|
+
Sikkerhetstips
|
|
69
|
+
</InfoMessageListItem>
|
|
70
|
+
</InfoMessageList>
|
|
71
|
+
</InfoMessage>;
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Tilgjengelighet
|
|
75
|
+
|
|
76
|
+
- Innebygde `aria-label` basert pa `locale`
|
|
77
|
+
- `ErrorMessage` bruker `role="alert"` som standard (deaktiver med `alert={false}`)
|
|
78
|
+
- Bruk `titleElement` for riktig overskriftshierarki
|
|
79
|
+
|
|
80
|
+
## Avhengigheter
|
|
81
|
+
|
|
82
|
+
- `@sb1/ffe-icons-react` - Ikoner
|
|
83
|
+
- `@sb1/ffe-message-box` - CSS-styling
|
|
84
|
+
|
|
85
|
+
## CSS-import
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import '@sb1/ffe-message-box/less/message-box.less';
|
|
89
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-message-box-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.10.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank 1",
|
|
6
6
|
"files": [
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
"test:watch": "ffe-buildtool jest --watch"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@sb1/ffe-icons-react": "^100.
|
|
28
|
-
"@sb1/ffe-message-box": "^100.
|
|
27
|
+
"@sb1/ffe-icons-react": "^100.10.0",
|
|
28
|
+
"@sb1/ffe-message-box": "^100.10.0",
|
|
29
29
|
"classnames": "^2.3.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@sb1/ffe-buildtool": "^100.
|
|
32
|
+
"@sb1/ffe-buildtool": "^100.10.0",
|
|
33
33
|
"eslint": "^9.22.0",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-dom": "^18.2.0"
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "efdd3866d59d794436a97a8dd6760f4c76466a71"
|
|
44
44
|
}
|