@sb1/ffe-form-react 100.8.2 → 100.9.0

package/README.md

@@ -1,30 +1,259 @@
 # @sb1/ffe-form-react
 
-React module for using and creating FFE form elements.
+## Beskrivelse
 
-## Install
+Skjemaelementer for input, valg og meldinger. Bygger tilgjengelige skjemaer med etiketter, hjelpetekster og validering.
 
-```
+## Installasjon
+
+```bash
 npm install --save @sb1/ffe-form-react
 ```
 
-## Usage
+## Bruk
+
+Full dokumentasjon: https://sparebank1.github.io/designsystem/
 
-Full documentation on form usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/.
+Avhengigheter: `@sb1/ffe-icons-react`, `@sb1/ffe-collapse-react`. Importer CSS:
 
-This package depends on `@sb1/ffe-icons-react`, `@sb1/ffe-collapse-react` and `@sb1/ffe-form-react`.
-Make sure you import the less-files.
+```css
+@import url('@sb1/ffe-form/css/ffe-form.css');
+@import url('@sb1/ffe-icons/css/ffe-icons.css');
+@import url('@sb1/ffe-collapse/css/ffe-collapse.css');
+```
 
-## Development
+### Eksporterte komponenter
 
-To start a local development server, run the following from the designsystem root folder:
+| Komponent               | Beskrivelse                                                                 |
+| ----------------------- | --------------------------------------------------------------------------- |
+| `Input`                 | Enkel input-felt for tekst. Brukes inne i InputGroup.                       |
+| `TextField`             | Input-felt med prefix og suffix. Brukes inne i InputGroup.                  |
+| `TextArea`              | Flerlinjet tekstfelt. Brukes inne i InputGroup.                             |
+| `InputGroup`            | Wrapper som kombinerer label, input, tooltip, beskrivelse og feilmeldinger. |
+| `InputTextLike`         | Input-felt som ser ut som vanlig tekst (uten synlig ramme).                 |
+| `Label`                 | Skjemaetikett for input-elementer.                                          |
+| `Checkbox`              | Avkrysningsboks. Label angis som children.                                  |
+| `RadioButton`           | Enkeltstående radioknapp. Brukes inne i RadioButtonInputGroup.              |
+| `RadioButtonInputGroup` | Wrapper for en gruppe med radioknapper med felles label og validering.      |
+| `RadioSwitch`           | To radioknapper side om side (venstre/høyre valg).                          |
+| `RadioBlock`            | Radioknapp som stor blokk med plass til ekstra innhold.                     |
+| `PhoneNumber`           | Kombinert felt for landskode og telefonnummer.                              |
+| `ToggleSwitch`          | Av/på-bryter med label.                                                     |
+| `Tooltip`               | Hjelpetekst-ikon som kan utvides ved klikk.                                 |
+| `ErrorFieldMessage`     | Viser feilmelding med ikon.                                                 |
+| `InfoFieldMessage`      | Viser informasjonsmelding med ikon.                                         |
+| `SuccessFieldMessage`   | Viser suksessmelding med ikon.                                              |
 
-```bash
-npm install
-npm run build
-npm start
+## Eksempler
+
+### Input med InputGroup (anbefalt mønster)
+
+```tsx
+import { InputGroup, Input } from '@sb1/ffe-form-react';
+
+function InputExample() {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState<string | null>(null);
+
+    return (
+        <InputGroup
+            label="Fullt navn"
+            description="Skriv inn for- og etternavn"
+            fieldMessage={error}
+        >
+            <Input
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                onBlur={() => setError(!value ? 'Obligatorisk' : null)}
+            />
+        </InputGroup>
+    );
+}
+```
+
+### TextField med prefix og suffix
+
+```tsx
+import { InputGroup, TextField } from '@sb1/ffe-form-react';
+
+<InputGroup label="Beløp">
+    <TextField
+        value={amount}
+        onChange={e => setAmount(e.target.value)}
+        suffix="kr"
+        textRightAlign={true}
+    />
+</InputGroup>;
 ```
 
-A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
+### TextArea
+
+```tsx
+import { InputGroup, TextArea } from '@sb1/ffe-form-react';
+
+<InputGroup label="Beskrivelse">
+    <TextArea value={text} onChange={e => setText(e.target.value)} rows={4} />
+</InputGroup>;
+```
+
+### Checkbox
+
+```tsx
+import { Checkbox } from '@sb1/ffe-form-react';
+
+<Checkbox checked={accepted} onChange={e => setAccepted(e.target.checked)}>
+    Jeg godtar vilkårene
+</Checkbox>;
+```
+
+### RadioButtonInputGroup med RadioButton
+
+```tsx
+import { RadioButtonInputGroup, RadioButton } from '@sb1/ffe-form-react';
+
+<RadioButtonInputGroup
+    label="Velg alternativ"
+    name="my-group"
+    selectedValue={selected}
+    onChange={e => setSelected(e.target.value)}
+>
+    {inputProps => (
+        <>
+            <RadioButton {...inputProps} value="a">
+                Alternativ A
+            </RadioButton>
+            <RadioButton {...inputProps} value="b">
+                Alternativ B
+            </RadioButton>
+        </>
+    )}
+</RadioButtonInputGroup>;
+```
+
+### RadioSwitch
+
+```tsx
+import { RadioButtonInputGroup, RadioSwitch } from '@sb1/ffe-form-react';
+
+<RadioButtonInputGroup
+    label="Er du over 18?"
+    name="age"
+    selectedValue={val}
+    onChange={e => setVal(e.target.value)}
+>
+    {inputProps => (
+        <RadioSwitch
+            {...inputProps}
+            leftLabel="Ja"
+            leftValue="yes"
+            rightLabel="Nei"
+            rightValue="no"
+        />
+    )}
+</RadioButtonInputGroup>;
+```
+
+### RadioBlock
+
+```tsx
+import { RadioButtonInputGroup, RadioBlock } from '@sb1/ffe-form-react';
+
+<RadioButtonInputGroup
+    label="Velg abonnement"
+    name="sub"
+    selectedValue={sel}
+    onChange={e => setSel(e.target.value)}
+>
+    {inputProps => (
+        <>
+            <RadioBlock {...inputProps} label="Standard" value="standard">
+                <p>Grunnleggende funksjoner</p>
+            </RadioBlock>
+            <RadioBlock
+                {...inputProps}
+                label="Premium"
+                value="premium"
+                showChildren={true}
+            >
+                <p>Alle funksjoner</p>
+            </RadioBlock>
+        </>
+    )}
+</RadioButtonInputGroup>;
+```
+
+### PhoneNumber
+
+```tsx
+import { PhoneNumber } from '@sb1/ffe-form-react';
+
+<PhoneNumber
+    countryCodeInputProps={{
+        value: code,
+        onChange: e => setCode(e.target.value),
+    }}
+    numberInputProps={{ value: num, onChange: e => setNum(e.target.value) }}
+    numberFieldMessage={error}
+    locale="nb"
+/>;
+```
+
+### ToggleSwitch
+
+```tsx
+import { ToggleSwitch } from '@sb1/ffe-form-react';
+
+<ToggleSwitch checked={enabled} onChange={e => setEnabled(e.target.checked)}>
+    Aktiver varsler
+</ToggleSwitch>;
+```
+
+### Tooltip
+
+```tsx
+import { Label, Tooltip, Input } from '@sb1/ffe-form-react';
+
+<Label htmlFor="account">
+    Kontonummer
+    <Tooltip>Kontonummeret finner du på kontoutskriften</Tooltip>
+</Label>
+<Input id="account" />
+```
+
+### Feilmeldinger (FieldMessage-komponenter)
+
+```tsx
+import { ErrorFieldMessage, InfoFieldMessage, SuccessFieldMessage } from '@sb1/ffe-form-react';
+
+<ErrorFieldMessage>Dette feltet er obligatorisk</ErrorFieldMessage>
+<InfoFieldMessage>Vi lagrer ikke sensitiv informasjon</InfoFieldMessage>
+<SuccessFieldMessage>Endringene er lagret</SuccessFieldMessage>
+```
+
+### InputTextLike
+
+```tsx
+import { InputTextLike } from '@sb1/ffe-form-react';
+
+<InputTextLike
+    ariaLabel="Rediger tittel"
+    defaultValue="Klikk for å redigere"
+/>;
+```
+
+### Label (frittstående)
+
+```tsx
+import { Label, Input } from '@sb1/ffe-form-react';
+
+<Label htmlFor="my-input">Feltetikett</Label>
+<Input id="my-input" />
+```
+
+## Utvikling
+
+```bash
+npm install && npm run build && npm start
+```
 
-Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
+Lokal Storybook kjører på http://localhost:6006/.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-form-react",
-    "version": "100.8.2",
+    "version": "100.9.0",
     "description": "React component for form elements in ffe",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -25,13 +25,13 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-collapse-react": "^100.8.2",
-        "@sb1/ffe-form": "^100.8.2",
-        "@sb1/ffe-icons-react": "^100.8.2",
+        "@sb1/ffe-collapse-react": "^100.9.0",
+        "@sb1/ffe-form": "^100.9.0",
+        "@sb1/ffe-icons-react": "^100.9.0",
         "classnames": "^2.3.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.8.2",
+        "@sb1/ffe-buildtool": "^100.9.0",
         "eslint": "^9.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -42,5 +42,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "50fbbbdb2023a60add7158e8c5bd6443c4f9c95e"
+    "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
 }