@sb1/ffe-cards-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 +187 -10
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,21 +1,200 @@
|
|
|
1
1
|
# @sb1/ffe-cards-react
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Beskrivelse
|
|
4
|
+
|
|
5
|
+
Kort-komponenter for presentasjon av innhold. Alle bruker render prop-monster der innholdskomponenter (`Title`, `Text`, `Subtext`, `CardName`, `CardAction`) gis som funksjonargumenter.
|
|
6
|
+
|
|
7
|
+
## Installasjon
|
|
4
8
|
|
|
5
9
|
```bash
|
|
6
10
|
npm install --save @sb1/ffe-cards-react
|
|
7
11
|
```
|
|
8
12
|
|
|
9
|
-
##
|
|
13
|
+
## Bruk
|
|
14
|
+
|
|
15
|
+
Full dokumentasjon: https://sparebank1.github.io/designsystem/
|
|
16
|
+
|
|
17
|
+
Avhengig av `@sb1/ffe-icons-react`. Importer styling:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import '@sb1/ffe-cards/css/cards.css';
|
|
21
|
+
```
|
|
10
22
|
|
|
11
|
-
|
|
23
|
+
## Eksporterte komponenter
|
|
24
|
+
|
|
25
|
+
- `CardBase` - Grunnleggende kortkomponent
|
|
26
|
+
- `TextCard` - Tekstkort uten visuelt element
|
|
27
|
+
- `IconCard` - Kort med ikon til venstre
|
|
28
|
+
- `ImageCard` - Kort med bilde
|
|
29
|
+
- `IllustrationCard` - Kort med illustrasjon
|
|
30
|
+
- `StippledCard` - Kort med stiplet kant
|
|
31
|
+
- `GroupCard`, `GroupCardTitle`, `GroupCardElement`, `GroupCardFooter` - Grupperte kort
|
|
32
|
+
|
|
33
|
+
## Eksempler
|
|
34
|
+
|
|
35
|
+
### Import
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import {
|
|
39
|
+
TextCard,
|
|
40
|
+
IconCard,
|
|
41
|
+
ImageCard,
|
|
42
|
+
IllustrationCard,
|
|
43
|
+
StippledCard,
|
|
44
|
+
GroupCard,
|
|
45
|
+
GroupCardTitle,
|
|
46
|
+
GroupCardElement,
|
|
47
|
+
GroupCardFooter,
|
|
48
|
+
} from '@sb1/ffe-cards-react';
|
|
49
|
+
import { Icon } from '@sb1/ffe-icons-react';
|
|
50
|
+
```
|
|
12
51
|
|
|
13
|
-
|
|
14
|
-
Make sure you import the less-files.
|
|
52
|
+
### TextCard
|
|
15
53
|
|
|
16
|
-
|
|
54
|
+
```tsx
|
|
55
|
+
<TextCard>
|
|
56
|
+
{({ CardName, Title, Subtext, Text }) => (
|
|
57
|
+
<>
|
|
58
|
+
<CardName>Kortnavn</CardName>
|
|
59
|
+
<Title>Tittel</Title>
|
|
60
|
+
<Subtext>En liten undertekst</Subtext>
|
|
61
|
+
<Text>Beskrivende tekst her.</Text>
|
|
62
|
+
</>
|
|
63
|
+
)}
|
|
64
|
+
</TextCard>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### IconCard
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<IconCard icon={<Icon fileUrl="./icons/open/300/xl/savings.svg" size="xl" />}>
|
|
71
|
+
{({ CardName, Title, Subtext, Text }) => (
|
|
72
|
+
<>
|
|
73
|
+
<CardName>Sparekonto</CardName>
|
|
74
|
+
<Title>BSU</Title>
|
|
75
|
+
<Subtext>Boligsparing for ungdom</Subtext>
|
|
76
|
+
<Text>Spar til bolig med skattefradrag.</Text>
|
|
77
|
+
</>
|
|
78
|
+
)}
|
|
79
|
+
</IconCard>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### ImageCard
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<ImageCard imageSrc="https://example.com/bilde.jpg" imageAltText="Beskrivelse">
|
|
86
|
+
{({ Title, Text }) => (
|
|
87
|
+
<>
|
|
88
|
+
<Title>Forsikring</Title>
|
|
89
|
+
<Text>Les mer om vare forsikringsprodukter.</Text>
|
|
90
|
+
</>
|
|
91
|
+
)}
|
|
92
|
+
</ImageCard>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### IllustrationCard
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
<IllustrationCard img={<img src={illustrasjon} alt="" />}>
|
|
99
|
+
{({ Title, Text }) => (
|
|
100
|
+
<>
|
|
101
|
+
<Title>Finansieringsbevis</Title>
|
|
102
|
+
<Text>For deg som skal kjope ny bolig.</Text>
|
|
103
|
+
</>
|
|
104
|
+
)}
|
|
105
|
+
</IllustrationCard>
|
|
106
|
+
```
|
|
17
107
|
|
|
18
|
-
|
|
108
|
+
### StippledCard
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
<StippledCard
|
|
112
|
+
img={{
|
|
113
|
+
type: 'icon',
|
|
114
|
+
element: (
|
|
115
|
+
<Icon fileUrl="./icons/open/300/xl/monitoring.svg" size="xl" />
|
|
116
|
+
),
|
|
117
|
+
}}
|
|
118
|
+
>
|
|
119
|
+
{({ Title, Subtext, Text }) => (
|
|
120
|
+
<>
|
|
121
|
+
<Title>Sparekonto</Title>
|
|
122
|
+
<Subtext>7 004,00 kr</Subtext>
|
|
123
|
+
<Text>Din saldo.</Text>
|
|
124
|
+
</>
|
|
125
|
+
)}
|
|
126
|
+
</StippledCard>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### GroupCard
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<GroupCard>
|
|
133
|
+
<GroupCardTitle>
|
|
134
|
+
<Heading2 lookLike={5}>Tjenester</Heading2>
|
|
135
|
+
</GroupCardTitle>
|
|
136
|
+
<GroupCardElement>
|
|
137
|
+
{({ Title, Text }) => (
|
|
138
|
+
<>
|
|
139
|
+
<Title>Betaling</Title>
|
|
140
|
+
<Text>Betal regninger enkelt.</Text>
|
|
141
|
+
</>
|
|
142
|
+
)}
|
|
143
|
+
</GroupCardElement>
|
|
144
|
+
<GroupCardFooter>
|
|
145
|
+
{({ CardAction }) => (
|
|
146
|
+
<CardAction href="/tjenester">Se alle tjenester</CardAction>
|
|
147
|
+
)}
|
|
148
|
+
</GroupCardFooter>
|
|
149
|
+
</GroupCard>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### CardBase
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
<CardBase bgColor="secondary" noMargin>
|
|
156
|
+
Tilpasset innhold her.
|
|
157
|
+
</CardBase>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Gjore kort klikkbare med CardAction
|
|
161
|
+
|
|
162
|
+
Bruk `CardAction` fra render props for a gjore hele kortet klikkbart:
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
<TextCard>
|
|
166
|
+
{({ Title, Text, CardAction }) => (
|
|
167
|
+
<>
|
|
168
|
+
<Title>
|
|
169
|
+
<CardAction href="/destinasjon">Klikkbar tittel</CardAction>
|
|
170
|
+
</Title>
|
|
171
|
+
<Text>Hele kortet blir klikkbart.</Text>
|
|
172
|
+
</>
|
|
173
|
+
)}
|
|
174
|
+
</TextCard>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Render Props-komponentene
|
|
178
|
+
|
|
179
|
+
| Komponent | Beskrivelse |
|
|
180
|
+
| ------------ | ------------------------- |
|
|
181
|
+
| `CardName` | Liten tekst over tittelen |
|
|
182
|
+
| `Title` | Hovedtittel |
|
|
183
|
+
| `Text` | Beskrivende tekst |
|
|
184
|
+
| `Subtext` | Sekundar tekst (gra) |
|
|
185
|
+
| `CardAction` | Gjor kortet klikkbart |
|
|
186
|
+
|
|
187
|
+
Alle stotter `as`-prop: `<Title as="h2">Tittel</Title>`
|
|
188
|
+
|
|
189
|
+
### Polymorfisme med as-prop
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
<GroupCard as="ul">
|
|
193
|
+
<GroupCardElement as="li">Element 1</GroupCardElement>
|
|
194
|
+
</GroupCard>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## Utvikling
|
|
19
198
|
|
|
20
199
|
```bash
|
|
21
200
|
npm install
|
|
@@ -23,6 +202,4 @@ npm run build
|
|
|
23
202
|
npm start
|
|
24
203
|
```
|
|
25
204
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
|
|
205
|
+
Lokal Storybook kjorer pa http://localhost:6006/.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-cards-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.10.0",
|
|
4
4
|
"description": "React implementation of ffe-react",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"test:watch": "ffe-buildtool jest --watch"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@sb1/ffe-cards": "^100.
|
|
29
|
-
"@sb1/ffe-icons-react": "^100.
|
|
28
|
+
"@sb1/ffe-cards": "^100.10.0",
|
|
29
|
+
"@sb1/ffe-icons-react": "^100.10.0",
|
|
30
30
|
"classnames": "^2.3.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@sb1/ffe-buildtool": "^100.
|
|
33
|
+
"@sb1/ffe-buildtool": "^100.10.0",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-dom": "^18.2.0"
|
|
36
36
|
},
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "efdd3866d59d794436a97a8dd6760f4c76466a71"
|
|
44
44
|
}
|