@sb1/ffe-buttons-react 100.8.3 → 100.9.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.
Files changed (2) hide show
  1. package/README.md +147 -13
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,28 +1,162 @@
1
1
  # @sb1/ffe-buttons-react
2
2
 
3
- ## Install
3
+ ## Beskrivelse
4
+
5
+ Knapp-komponenter for handlinger med visuell hierarki og tilgjengelighet. Bruk for prioritet (Action > Primary > Secondary > Tertiary), navigasjon (BackButton), utvidelse (Expand/InlineExpand), gruppering og snarveier.
6
+
7
+ Bruk lenker (`LinkText` fra `ffe-core-react`) for navigasjon som ser ut som lenker.
8
+
9
+ ## Installasjon
4
10
 
5
11
  ```bash
6
12
  npm install --save @sb1/ffe-buttons-react
7
13
  ```
8
14
 
9
- ## Usage
15
+ ## Bruk
10
16
 
11
- Full documentation on button usage is available at https://design.sparebank1.no/komponenter/knapper/.
17
+ Full dokumentasjon: https://sparebank1.github.io/designsystem/
12
18
 
13
- This package depends on `@sb1/ffe-icons-react`.
14
- Make sure you import the less-files.
19
+ Avhengig av `@sb1/ffe-icons-react`. Importer styling:
15
20
 
16
- ## Development
21
+ ```css
22
+ @import '@sb1/ffe-buttons/css/buttons.css';
23
+ ```
17
24
 
18
- To start a local development server, run the following from the designsystem root folder:
25
+ ## Eksempler
19
26
 
20
- ```bash
21
- npm install
22
- npm run build
23
- npm start
27
+ ### Importering
28
+
29
+ ```tsx
30
+ import {
31
+ ActionButton,
32
+ PrimaryButton,
33
+ SecondaryButton,
34
+ TertiaryButton,
35
+ BackButton,
36
+ ExpandButton,
37
+ InlineExpandButton,
38
+ ShortcutButton,
39
+ TaskButton,
40
+ ButtonGroup,
41
+ } from '@sb1/ffe-buttons-react';
42
+ import { Icon } from '@sb1/ffe-icons-react';
43
+ ```
44
+
45
+ ### Grunnleggende knapper (ActionButton, PrimaryButton, SecondaryButton)
46
+
47
+ ActionButton: viktigste handling (maks en per side). PrimaryButton: hovedhandlinger. SecondaryButton: sekundære handlinger.
48
+
49
+ ```tsx
50
+ <ActionButton onClick={() => handleSubmit()}>Send soknad</ActionButton>
51
+ <PrimaryButton onClick={() => handleSave()}>Lagre</PrimaryButton>
52
+ <SecondaryButton onClick={() => handleCancel()}>Avbryt</SecondaryButton>
53
+ ```
54
+
55
+ ### Storrelse og lasting
56
+
57
+ ```tsx
58
+ <ActionButton size="lg">Stor</ActionButton>
59
+ <PrimaryButton isLoading={isSubmitting} ariaLoadingMessage="Sender...">Send</PrimaryButton>
60
+ ```
61
+
62
+ ### Knapper med ikoner
63
+
64
+ ```tsx
65
+ <PrimaryButton leftIcon={<Icon fileUrl={addIcon} size="md" />}>Legg til</PrimaryButton>
66
+ <ActionButton iconOnly aria-label="Legg til bruker"><Icon fileUrl={addIcon} size="md" /></ActionButton>
67
+ ```
68
+
69
+ ### TertiaryButton
70
+
71
+ Inline-knapp for mindre fremtredende handlinger. Stotter ikke lasting.
72
+
73
+ ```tsx
74
+ <TertiaryButton leftIcon={<Icon fileUrl={infoIcon} size="md" />}>
75
+ Mer info
76
+ </TertiaryButton>
77
+ ```
78
+
79
+ ### BackButton
80
+
81
+ Navigasjonsknapp med innebygd venstre-pil.
82
+
83
+ ```tsx
84
+ <BackButton onClick={() => navigate(-1)}>Tilbake</BackButton>
85
+ <BackButton as={Link} to="/previous">Tilbake til oversikt</BackButton>
86
+ ```
87
+
88
+ ### ExpandButton
89
+
90
+ Sirkulaer knapp for vis/skjul innhold. Viser tekst nar lukket, X-ikon nar apen.
91
+
92
+ ```tsx
93
+ <ExpandButton
94
+ isExpanded={isExpanded}
95
+ onClick={() => setIsExpanded(!isExpanded)}
96
+ aria-controls={collapseId}
97
+ closeLabel="Lukk detaljer"
98
+ >
99
+ Vis mer
100
+ </ExpandButton>
101
+ ```
102
+
103
+ ### InlineExpandButton
104
+
105
+ Inline-knapp med ned-pil som roterer.
106
+
107
+ ```tsx
108
+ <InlineExpandButton
109
+ isExpanded={isExpanded}
110
+ onClick={() => setIsExpanded(!isExpanded)}
111
+ aria-controls={collapseId}
112
+ >
113
+ {isExpanded ? 'Vis mindre' : 'Vis mer'}
114
+ </InlineExpandButton>
24
115
  ```
25
116
 
26
- A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
117
+ ### ShortcutButton
118
+
119
+ Snarveisknapp med innebygd hoyre-pil.
120
+
121
+ ```tsx
122
+ <ShortcutButton leftIcon={<Icon fileUrl={settingsIcon} size="md" />}>
123
+ Innstillinger
124
+ </ShortcutButton>
125
+ ```
126
+
127
+ ### TaskButton
128
+
129
+ Oppgaveknapp med pakrevd ikon.
130
+
131
+ ```tsx
132
+ <TaskButton icon={<Icon fileUrl={addIcon} size="md" />}>
133
+ Legg til bruker
134
+ </TaskButton>
135
+ ```
136
+
137
+ ### ButtonGroup
138
+
139
+ Grupperer knapper med riktig mellomrom.
140
+
141
+ ```tsx
142
+ <ButtonGroup>
143
+ <SecondaryButton>Avbryt</SecondaryButton>
144
+ <PrimaryButton>Bekreft</PrimaryButton>
145
+ </ButtonGroup>
146
+ <ButtonGroup thin inline ariaLabel="Handlinger">...</ButtonGroup>
147
+ ```
148
+
149
+ ### Polymorfisk as-prop
150
+
151
+ ```tsx
152
+ <PrimaryButton as="a" href="/link">Lenke</PrimaryButton>
153
+ <ActionButton as={Link} to="/route">React Router</ActionButton>
154
+ ```
155
+
156
+ ## Utvikling
157
+
158
+ ```bash
159
+ npm install && npm run build && npm start
160
+ ```
27
161
 
28
- Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
162
+ Lokal Storybook: http://localhost:6006/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons-react",
3
- "version": "100.8.3",
3
+ "version": "100.9.0",
4
4
  "description": "React implementation of ffe-buttons",
5
5
  "keywords": [
6
6
  "ffe"
@@ -28,12 +28,12 @@
28
28
  "test:watch": "ffe-buildtool jest --watch"
29
29
  },
30
30
  "dependencies": {
31
- "@sb1/ffe-buttons": "^100.8.3",
32
- "@sb1/ffe-icons-react": "^100.8.3",
31
+ "@sb1/ffe-buttons": "^100.9.0",
32
+ "@sb1/ffe-icons-react": "^100.9.0",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@sb1/ffe-buildtool": "^100.8.3",
36
+ "@sb1/ffe-buildtool": "^100.9.0",
37
37
  "eslint": "^9.22.0",
38
38
  "react": "^18.2.0",
39
39
  "react-dom": "^18.2.0"
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "f33cf64a467cb430540d1320e763a4f223a8012c"
47
+ "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
48
48
  }