open-index/open-npm huggingface dataset:
npm package: @sb1/ffe-form
Description: Form components for Felles Front End
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-form

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-form
```

## Usage

Full documentation on form usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/.

```less
@import 'path/to/node_modules/@sb1/ffe-form/less/form';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-form/css/form.css';
```

See also `@sb1/ffe-form-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

This package consists of several components, each with their own styling. If you choose to use only one component, e.g. `checkbox.less` in your app, make sure to also import `theme.less` in order to have access to the necessary CSS properties.

```css
@import '~@sb1/ffe-form/less/theme';
@import '~@sb1/ffe-form/less/checkbox';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-formatters
Description: JavaScript general use string formatters
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-formatters

JavaScript general use string formatters.

## Installation

Install this package via npm like so:

```bash
npm install --save @sb1/ffe-formatters
```

## Usage

Full documentation on formatter usage is available at https://design.sparebank1.no/Komponenter/Formatters.

Import the formatter(s) you need the following way:

```javascript
import formatNumber from '@sb1/ffe-formatters/lib/formatNumber';
import formatPercentage from '@sb1/ffe-formatters/lib/formatPercentage';
```

You'll find a full overview and documentation over all the available formatters [in src/](src).

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-grid-react
Description: Grid-system for responsive layouts (foreldet - bruk CSS Grid eller Flexbox i stedet).
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-grid-react

## Beskrivelse

Grid-system for responsive layouts (foreldet - bruk CSS Grid eller Flexbox i stedet).

- `Grid` - Ytterste container som definerer grid-gapet
- `GridRow` - Rad-container med støtte for bakgrunnsfarge, margin og padding
- `GridCol` - Kolonne-container med responsiv bredde (12-kolonners system)

## Installasjon

```bash
npm install --save @sb1/ffe-grid-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Importer CSS:

```css
@import url('@sb1/ffe-grid/css/ffe-grid.css');
```

## Eksempler

### Import

```tsx
import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
```

### Grunnleggende eksempel

```tsx
<Grid>
    <GridRow>
        <GridCol sm={6}>Venstre kolonne</GridCol>
        <GridCol sm={6}>Høyre kolonne</GridCol>
    </GridRow>
</Grid>
```

### Responsiv layout med breakpoints

```tsx
<Grid>
    <GridRow>
        <GridCol sm={12} md={6} lg={4}>
            Responsiv kolonne
        </GridCol>
    </GridRow>
</Grid>
```

### Offset (forskyvning av kolonner)

```tsx
<GridCol
    sm={{ cols: 10, offset: 1 }}
    md={{ cols: 8, offset: 2 }}
    lg={{ cols: 6, offset: 3 }}
>
    Sentert innhold
</GridCol>
```

### Grid med spacing

```tsx
<Grid gap="lg">
    <GridRow margin="md" padding="sm" bgColor="secondary">
        <GridCol sm={6}>Kolonne 1</GridCol>
        <GridCol sm={6}>Kolonne 2</GridCol>
    </GridRow>
</Grid>
```

### Responsiv spacing på GridRow

```tsx
<GridRow
    sm={{ margin: 'sm', padding: 'xs' }}
    md={{ margin: 'md', padding: 'sm' }}
    lg={{ margin: 'lg', padding: 'md' }}
>
    <GridCol sm={12}>Rad med responsiv spacing</GridCol>
</GridRow>
```

## DevTool: Grid overlay

```javascript
import showGrid from '@sb1/ffe-grid-react/lib/show-grid';
window.showGrid = showGrid; // Toggle funksjon for grid overlay
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Lokal Storybook på http://localhost:6006/
npm package: @sb1/ffe-header
Description: Felles header for SpareBank 1
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-header

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-header
```

## Usage

```less
@import 'path/to/node_modules/@sb1/ffe-header/less/ffe-header';
```

If you need a version without a dependency on `@sb1/ffe-core` and `@sb1/ffe-buttons` you can use
the `-nodeps` suffix in your import.

```less
@import 'path/to/node_modules/@sb1/ffe-header/less/ffe-header-nodeps';
```

This packages provides a transpiled version of `ffe-header-nodeps.less` in
`css/ffe-header.css'.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-icons
Description: Felles Front End Icons
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-icons

This package contains CSS-styling for the Icon-component in `@sb1/ffe-icons-react`-package, and SVG-files of all allowed variants of Material Symbols icons.

## Install

```bash
npm install --save @sb1/ffe-icons
```

## Usage

Full documentation on icon usage is available at https://design.sparebank1.no/komponenter/ikoner/.

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-icons/css/ffe-icons.css';
```

See also `@sb1/ffe-icons-react`.

## Updating available icons

Running `npm run build:icons` or the Github action: `update ffe-icons svgs` will run the `bin/build.js`-script.

The script will:

-   Set available variants, like size, weight and fill/no fill
-   Get the names of all icons available in Material Symbols
-   Compare available names with existing SVG-files. If an icon has been deleted since last update, it'll delete all SVG-files of the removed icon.
-   Download SVG-files for all missing variants/icons, and place it in the right folder.
npm package: @sb1/ffe-icons-react
Description: React-komponenter for ffe-icons
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-icons-react

## Beskrivelse

Ikonkomponenter som bruker CSS mask-image for SVG-ikoner som kan farges med CSS. Sett `ariaLabel` for meningsbærende ikoner, utelat den for dekorative ikoner (skjules automatisk).

## Installasjon

```bash
npm install --save @sb1/ffe-icons-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Importer CSS:

```css
@import url('@sb1/ffe-icons/css/ffe-icons.css');
```

## Eksempler

```tsx
import { Icon } from '@sb1/ffe-icons-react';

// Med tilgjengelighetstekst
<Icon fileUrl="./icons/open/300/md/house.svg" ariaLabel="Hjem" />

// Dekorativt ikon (skjules fra skjermleser)
<Icon fileUrl="./icons/open/300/md/arrow-right.svg" />

// Med størrelse og fargeklasse
<Icon
    fileUrl="./icons/open/300/sm/star.svg"
    size="sm"
    className="ffe-text-color--vann"
    ariaLabel="Favoritt"
/>
```

### Ikonsti-format

```
./icons/{variant}/{weight}/{size}/{icon-name}.svg
```

- **variant**: `open` eller `filled`
- **weight**: `300`, `400`, eller `500`
- **size**: `sm`, `md`, `lg`, eller `xl`

### Tilgjengelighet

- Sett `ariaLabel` for meningsbærende ikoner
- Utelat `ariaLabel` for dekorative ikoner (setter automatisk `aria-hidden="true"`)

## Utvikling

```bash
npm install && npm run build && npm start
```

Lokal Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-layout-legacy
Description: Deprecated layout system
Author: SpareBank 1
Latest version: 1.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @sb1/ffe-layout-legacy

# **DEPRECATED**

This module is kept around because several applications are heavily dependant on it but is not meant for future use. Please use `ffe-grid`/`ffe-grid-react` instead.

## Install

```bash
npm install --save @sb1/ffe-layout-legacy
```

## Usage

```less
@import '~@sb1/ffe-layout-legacy/less/ffe-layout-legacy';
```
npm package: @sb1/ffe-lists
Description: Lists in ffe
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-lists

## Install

```bash
npm install --save @sb1/ffe-lists
```

## Usage

Full documentation on lists usage is available at https://design.sparebank1.no/komponenter/lister/.

```less
@import 'path/to/node_modules/@sb1/ffe-lists/less/lists';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-lists/css/lists.css';
```

See also `@sb1/ffe-lists-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-message-box
Description: Meldingsboks
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-message-box

This package is deprecated, and will be removed from the designsystem repo.

Use the new packages for messages, please refer to [ffe-messages](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages) and/or [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).
npm package: @sb1/ffe-message-box-react
Description: Foreldet pakke. Bruk `@sb1/ffe-messages-react` i stedet.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-message-box-react

## Beskrivelse

Foreldet pakke. Bruk `@sb1/ffe-messages-react` i stedet.

Full dokumentasjon: https://sparebank1.github.io/designsystem/

## Foreldet pakke

Bruk de nye pakkene: [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).

### Migrasjonsguide

| Gammel komponent | Ny komponent                      |
| ---------------- | --------------------------------- |
| `SuccessMessage` | `MessageBox` med `type="success"` |
| `ErrorMessage`   | `MessageBox` med `type="error"`   |
| `InfoMessage`    | `MessageBox` med `type="info"`    |
| `TipsMessage`    | `MessageBox` med `type="tips"`    |

## Eksporterte komponenter

```typescript
export { SuccessMessage, ErrorMessage, InfoMessage, TipsMessage } from './';
export { InfoMessageList, InfoMessageListItem } from './InfoMessageList';
```

## Eksempler

### Grunnleggende bruk

```tsx
import { SuccessMessage, ErrorMessage, InfoMessage, TipsMessage } from '@sb1/ffe-message-box-react';

<SuccessMessage title="Handling fullfort">
    Endringene dine er lagret.
</SuccessMessage>

<ErrorMessage title="Noe gikk galt" alert={true}>
    Kunne ikke lagre endringene.
</ErrorMessage>

<InfoMessage title="Viktig informasjon">
    Husk a fullfor registreringen innen 7 dager.
</InfoMessage>

<TipsMessage title="Visste du?">
    Du kan spare tid ved a bruke hurtigtaster.
</TipsMessage>
```

### Med lister

```tsx
import {
    InfoMessage,
    InfoMessageList,
    InfoMessageListItem,
} from '@sb1/ffe-message-box-react';

<InfoMessage title="Relaterte artikler">
    <InfoMessageList>
        <InfoMessageListItem href="/artikkel/1">
            Slik endrer du passord
        </InfoMessageListItem>
        <InfoMessageListItem href="/artikkel/2">
            Sikkerhetstips
        </InfoMessageListItem>
    </InfoMessageList>
</InfoMessage>;
```

## Tilgjengelighet

- Innebygde `aria-label` basert pa `locale`
- `ErrorMessage` bruker `role="alert"` som standard (deaktiver med `alert={false}`)
- Bruk `titleElement` for riktig overskriftshierarki

## Avhengigheter

- `@sb1/ffe-icons-react` - Ikoner
- `@sb1/ffe-message-box` - CSS-styling

## CSS-import

```typescript
import '@sb1/ffe-message-box/less/message-box.less';
```
npm package: @sb1/ffe-messages
Description: Messages in ffe
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-lists

## Install

```bash
npm install --save @sb1/ffe-messages
```

## Usage

Full documentation on lists usage is available at https://design.sparebank1.no/komponenter/meldinger/.

```less
@import 'path/to/node_modules/@sb1/ffe-messages/less/messages';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-messages/css/messages.css';
```

See also `@sb1/ffe-messages-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-messages-react
Description: React-komponenter for meldinger som kommuniserer status, tips og varsler til brukeren.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-messages-react

## Beskrivelse

React-komponenter for meldinger som kommuniserer status, tips og varsler til brukeren.

### Komponentoversikt

| Komponent         | Bruksområde                                                                               |
| ----------------- | ----------------------------------------------------------------------------------------- |
| `SystemMessage`   | Globale statusmeldinger øverst på siden. Har alltid lukkeknapp.                           |
| `ContextMessage`  | Kontekstuell inline-melding i skjemaer eller seksjoner. Valgfri overskrift og lukkeknapp. |
| `MessageBox`      | Innrammet meldingsområde for varig informasjon. Ingen lukkeknapp.                         |
| `MessageHeader`   | Overskriftkomponent for bruk i meldinger.                                                 |
| `MessageList`     | Liste-container for flere meldingspunkter.                                                |
| `MessageListItem` | Enkelt listepunkt i en `MessageList`.                                                     |

### Type-verdier

**MessageType** (påkrevd): `'info'` | `'success'` | `'tips'` | `'warning'` | `'error'`

**Locale** (valgfri, standard `'nb'`): `'nb'` | `'nn'` | `'en'`

## Eksempler

### SystemMessage

```tsx
import { SystemMessage } from '@sb1/ffe-messages-react';

<SystemMessage type="success" onClose={() => console.log('Lukket')}>
    Kontoen ble oppdatert.
</SystemMessage>;
```

### ContextMessage

```tsx
import {
    ContextMessage,
    MessageList,
    MessageListItem,
} from '@sb1/ffe-messages-react';

<ContextMessage
    type="error"
    header="Feil i skjema"
    closeButton={true}
    compact={true}
    onClose={() => console.log('Lukket')}
>
    <MessageList>
        <MessageListItem>Personnummer mangler</MessageListItem>
        <MessageListItem>Adresse er ugyldig</MessageListItem>
    </MessageList>
</ContextMessage>;
```

### MessageBox

```tsx
import { MessageBox, MessageHeader } from '@sb1/ffe-messages-react';

<MessageBox type="info" header={<MessageHeader as="h3">Viktig</MessageHeader>}>
    Husk å lagre endringer før du går videre.
</MessageBox>;
```

### MessageHeader

```tsx
import { MessageHeader } from '@sb1/ffe-messages-react';

<MessageHeader as="h3">Overskrift</MessageHeader>;
```

### MessageList og MessageListItem

```tsx
import { MessageList, MessageListItem } from '@sb1/ffe-messages-react';

<MessageList>
    <MessageListItem>E-postadresse er ugyldig</MessageListItem>
    <MessageListItem>Telefonnummer må ha 8 siffer</MessageListItem>
</MessageList>;
```

## Installasjon

```bash
npm install --save @sb1/ffe-messages-react
```

Krever CSS fra `@sb1/ffe-messages`:

```css
@import '@sb1/ffe-messages/css/messages.css';
```

## Bruk

Dokumentasjon: https://sparebank1.github.io/designsystem/

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-modals
Description: Modals in ffe
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-lists

## Install

```bash
npm install --save @sb1/ffe-modals
```

## Usage

Full documentation on lists usage is available at https://design.sparebank1.no/komponenter/modaler/.

```less
@import 'path/to/node_modules/@sb1/ffe-modals/less/modal';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-modals/css/modal.css';
```

See also `@sb1/ffe-modals-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-pagination
Description: Pagination in ffe
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-pagination

## Install

```bash
npm install --save @sb1/ffe-pagination
```

## Usage

Full documentation on lists usage is available at https://design.sparebank1.no/komponenter/paginering/.

```less
@import 'path/to/node_modules/@sb1/ffe-pagination/less/pagination';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-pagination/css/pagination.css';
```

See also `@sb1/ffe-pagination-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-pagination-react
Description: Pagineringskomponent for navigering gjennom sider med innhold.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-pagination-react

## Beskrivelse

Pagineringskomponent for navigering gjennom sider med innhold.

## Installasjon

```bash
npm install --save @sb1/ffe-pagination-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Avhengig av `@sb1/ffe-buttons-react`, `@sb1/ffe-dropdown-react` og `@sb1/ffe-icons-react`.

```css
@import '@sb1/ffe-pagination/css/pagination.css';
```

### Eksporterte komponenter og hooks

```tsx
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
import type { PaginationProps } from '@sb1/ffe-pagination-react';
```

## Eksempler

### Grunnleggende bruk med usePagination hook

```tsx
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';

function MyComponent() {
    const paginationControls = usePagination(134, 10);

    return (
        <Pagination
            ariaLabel="Paginering av innhold"
            paginationControls={paginationControls}
            rowsPerPageOptions={[10, 20, 50, 100]}
        />
    );
}
```

### Bruk med tabell og datafiltrering

```tsx
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';

function TableWithPagination() {
    const data = [
        { id: 1, name: 'Anders' },
        { id: 2, name: 'Erik' },
    ];
    const paginationControls = usePagination(data.length, 10);

    const currentPageData = data.slice(
        paginationControls.pageStart,
        paginationControls.pageStart + paginationControls.currentPageSize,
    );

    return (
        <>
            <ul>
                {currentPageData.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
            <Pagination
                ariaLabel="Paginering av tabell"
                paginationControls={paginationControls}
                rowsPerPageOptions={[10, 20, 50]}
            />
        </>
    );
}
```
npm package: @sb1/ffe-progressbar
Description: ```bash npm install --save @sb1/ffe-progressbar ```
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-progressbar

## Install

```bash
npm install --save @sb1/ffe-progressbar
```

## Usage

Full documentation on tabs usage is available at https://design.sparebank1.no/komponenter/progressbar/.

```less
@import 'path/to/node_modules/@sb1/ffe-progressbar/less/progressbar';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-progressbar/css/progressbar.css';
```

See also `@sb1/ffe-progressbar-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-progressbar-react
Description: React implementation of ffe-progressbar component
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-progressbar-react

## Beskrivelse

Fremdriftsindikator som wrapper det native HTML `<progress>`-elementet med SpareBank 1-styling.

## Installasjon

```bash
npm install --save @sb1/ffe-progressbar-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

```css
@import '@sb1/ffe-progressbar/css/progressbar.css';
```

## Eksempler

### Grunnleggende bruk

```tsx
import { Progressbar } from '@sb1/ffe-progressbar-react';

function MyComponent() {
    return <Progressbar value={40} max={100} />;
}
```

### Med tilgjengelighet og suksess-tema

```tsx
import { Progressbar } from '@sb1/ffe-progressbar-react';

function LoanProgress() {
    return (
        <Progressbar
            value={5000}
            max={5000}
            aria-label="Nedbetaling av lån"
            success={true}
        />
    );
}
```

## Utvikling

```bash
npm install
npm run build
npm start
```

Storybook kjører på http://localhost:6006/
npm package: @sb1/ffe-radio-button-react
Description: The components from this package has moved to `ffe-form-react` and this should no longer be used.
Author: SpareBank 1
Latest version: 5.0.31
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @sb1/ffe-radio-button-react

The components from this package has moved to `ffe-form-react` and this should no longer be used.

## Install

```
npm install --save @sb1/ffe-form-react
```

_Make sure you have at least version_ `4.3.0`

## Usage

```javascript
import {
    RadioBlock,
    RadioButton,
    RadioButtonInputGroup,
    RadioSwitch,
} from '@sb1/ffe-form-react';
```
npm package: @sb1/ffe-shapes
Description: ```bash npm install --save @sb1/ffe-shapes ```
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-shapes

## Install

```bash
npm install --save @sb1/ffe-shapes
```

## Usage

Full documentation on shapes usage is available at https://design.sparebank1.no/

```less
@import 'path/to/node_modules/@sb1/ffe-shapes/less/wave';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-shapes/css/shapes.css';
```

See also `@sb1/ffe-shapes-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-shapes-react
Description: Dekorative form-komponenter. Inneholder `Wave` for bølgeformer som visuell overgang mellom seksjoner.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-shapes-react

## Beskrivelse

Dekorative form-komponenter. Inneholder `Wave` for bølgeformer som visuell overgang mellom seksjoner.

## Installasjon

```bash
npm install --save @sb1/ffe-shapes-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

## Eksempler

### Standard bølge med innhold

```tsx
import { Wave } from '@sb1/ffe-shapes-react';

function SectionWithWave() {
    return (
        <Wave bgColor="subtle">
            <p>Innhold inne i bølgeseksjonen</p>
        </Wave>
    );
}
```

### Rotert bølge (flip)

```tsx
import { Wave } from '@sb1/ffe-shapes-react';

function FlippedWaveExample() {
    return <Wave flip={true} position="100px" />;
}
```

## Utvikling

```bash
npm install
npm run build
npm start
```

Lokal Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-skeleton
Description: Skeleton loading in ffe
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-skeleton

## Install

```bash
npm install --save @sb1/ffe-skeleton
```

## Usage

Full documentation on skeleton usage is available at https://design.sparebank1.no/komponenter/skeleton/.

```less
@import 'path/to/node_modules/@sb1/ffe-skeleton/less/skeleton';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-skeleton/css/skeleton.css';
```

See also `@sb1/ffe-skeleton-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-skeleton-react
Description: React implementation of ffe-skeleton loading
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-skeleton-react

## Beskrivelse

Skjelett-komponenter for plassholdere mens innhold laster. Setter `aria-hidden={true}` automatisk. Bruk `aria-busy={true}` på foreldreelementet.

## Installasjon

```bash
npm install --save @sb1/ffe-skeleton-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Tilgjengelige komponenter

```tsx
import { Skeleton, SkeletonCircle } from '@sb1/ffe-skeleton-react';
```

## Eksempler

### Tekst-plassholder

```tsx
<div aria-busy={true}>
    <Skeleton width="60%" height="24px" />
    <Skeleton width="100%" height="16px" />
    <Skeleton width="80%" height="16px" />
</div>
```

### Sirkulær plassholder

```tsx
<div
    style={{ display: 'flex', alignItems: 'center', gap: '16px' }}
    aria-busy={true}
>
    <SkeletonCircle size="lg" />
    <Skeleton width="150px" height="20px" />
</div>
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-spinner
Description: ```bash npm install --save @sb1/ffe-spinner ```
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-spinner

## Install

```bash
npm install --save @sb1/ffe-spinner
```

## Usage

Full documentation on spinner usage is available at https://design.sparebank1.no/komponenter/spinners/.

```less
@import 'path/to/node_modules/@sb1/ffe-spinner/less/spinner';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-spinner/css/spinner.css';
```

See also `@sb1/ffe-spinner-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-spinner-react
Description: Lasteindikator for pågående prosesser.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-spinner-react

## Beskrivelse

Lasteindikator for pågående prosesser.

## Installasjon

```bash
npm install --save @sb1/ffe-spinner-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Importering

```tsx
import { Spinner } from '@sb1/ffe-spinner-react';
import type { SpinnerProps } from '@sb1/ffe-spinner-react';
```

## Eksempler

### Grunnleggende bruk

```tsx
<Spinner />
<Spinner large={true} />
<Spinner immediate={true} />
```

### Med tekst

```tsx
<Spinner loadingText="Laster inn data..." />
```

### Betinget visning basert på lasting

```tsx
function DataLoader() {
    const [isLoading, setIsLoading] = useState(true);

    if (isLoading) {
        return <Spinner loadingText="Henter data..." />;
    }

    return <div>{/* Vis data her */}</div>;
}
```

## Utvikling

```bash
npm install
npm run build
npm start
```

Lokal Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-symbols
Description: Styling for tilpasning av material symbols til Sb1
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-symbols

## Deprecated package

This package is deprecated, and will be removed from the designsystem repo.

To use the new set of icons, please refer to [ffe-icons](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-icons) and/or [ffe-icons-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-icons-react).
npm package: @sb1/ffe-symbols-react
Description: React-komponenter for Material Symbols tilpasset Sb1 sine behov
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-symbols-react

## Foreldet pakke

Denne pakken er foreldet. Bruk [ffe-icons-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-icons-react) i stedet.

---

## Oversikt

React-komponent for Material Symbols-ikoner (fontbasert).

## Installasjon

```bash
npm install @sb1/ffe-symbols-react
```

## Avhengigheter

```css
@import '@sb1/ffe-symbols/ffe-symbol.css';
```

## Grunnleggende bruk

```tsx
import { Symbol } from '@sb1/ffe-symbols-react';

<Symbol icon="home" />

<Symbol
    icon="account_balance"
    size="lg"
    weight={500}
    fill={true}
    ariaLabel="Konto"
/>
```

## Eksempler

### Størrelse

```tsx
<Symbol icon="star" size="sm" />  {/* 20px */}
<Symbol icon="star" size="xl" />  {/* 40px */}
```

### Vekt (tykkelse)

```tsx
<Symbol icon="home" weight={300} />  {/* Tynn */}
<Symbol icon="home" weight={500} />  {/* Tykk */}
```

### Fylt vs. ikke-fylt

```tsx
<Symbol icon="favorite" fill={false} />  {/* Omriss */}
<Symbol icon="favorite" fill={true} />   {/* Fylt */}
```

### Tilgjengelighet

```tsx
<Symbol icon="search" ariaLabel="Søk" />
<Symbol icon="chevron_right" />  {/* aria-hidden="true" */}
```

### Med styling

```tsx
<Symbol
    icon="warning"
    size="lg"
    className="custom-class"
    style={{ color: 'red' }}
/>
```

## Tilgjengelige ikonnavn

Vanlige eksempler: `home`, `menu`, `close`, `search`, `add`, `edit`, `delete`, `account_balance`, `credit_card`, `check_circle`, `error`, `warning`, `info`, `person`.

Komplett liste: Se `SymbolName`-typen eller [Google Material Symbols](https://fonts.google.com/icons?icon.style=Rounded).

## Genererte CSS-klasser

- `ffe-symbol` (alltid)
- `ffe-symbol--{weight}` eller `ffe-symbol--filled-{weight}`
- `ffe-symbol--{size}` (hvis angitt)
npm package: @sb1/ffe-system-message
Description: Systemmelding
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-system-message

This package is deprecated, and will be removed from the designsystem repo.

Use the new packages for messages, please refer to [ffe-messages](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages) and/or [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).
npm package: @sb1/ffe-system-message-react
Description: SpareBank 1 System Message komponent
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-system-message-react

> **Denne pakken er foreldet** - Bruk [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react) i stedet.

## Beskrivelse

Systemmelding-komponenter for feil, info, suksess og nyheter.

## Installasjon

```bash
npm install @sb1/ffe-system-message-react @sb1/ffe-system-message
```

## Eksporterte komponenter

| Komponent              | Formaal                               |
| ---------------------- | ------------------------------------- |
| `SystemErrorMessage`   | Vise feilmeldinger til brukeren       |
| `SystemInfoMessage`    | Vise informasjonsmeldinger            |
| `SystemSuccessMessage` | Bekrefte at en handling var vellykket |
| `SystemNewsMessage`    | Vise nyheter eller oppdateringer      |

## Grunnleggende bruk

```tsx
import { SystemErrorMessage, SystemInfoMessage } from '@sb1/ffe-system-message-react';

<SystemErrorMessage>Noe gikk galt.</SystemErrorMessage>
<SystemInfoMessage>Vi oppdaterer systemet klokken 22:00.</SystemInfoMessage>
```

## Avanserte eksempler

### Med onCloseRest callback

```tsx
const [showMessage, setShowMessage] = useState(true);

{
    showMessage && (
        <SystemSuccessMessage onCloseRest={() => setShowMessage(false)}>
            Operasjonen var vellykket!
        </SystemSuccessMessage>
    );
}
```

### Feilmelding uten umiddelbar opplesning

```tsx
<SystemErrorMessage alert={false}>Det oppstod en feil.</SystemErrorMessage>
```

## Avhengigheter

Krever CSS-stiler:

```tsx
import '@sb1/ffe-system-message/less/ffe-system-message.less';
```

## Tilgjengelighet

- `SystemErrorMessage` bruker `role="alert"` som standard
- Lukkeknappen har lokalisert `aria-label`

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjorer pa http://localhost:6006/
npm package: @sb1/ffe-tables
Description: ```bash npm install --save @sb1/ffe-tables ```
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-tables

## Install

```bash
npm install --save @sb1/ffe-tables
```

## Usage

Full documentation on table usage is available at https://design.sparebank1.no/komponenter/tabeller/.

```less
@import 'path/to/node_modules/@sb1/ffe-tables/less/tables';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-tables/css/tables.css';
```

See also `@sb1/ffe-tables-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-tabs
Description: ```bash npm install --save @sb1/ffe-tabs ```
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-tabs

## Install

```bash
npm install --save @sb1/ffe-tabs
```

## Usage

Full documentation on tabs usage is available at https://design.sparebank1.no/komponenter/faner/.

```less
@import 'path/to/node_modules/@sb1/ffe-tabs/less/tabs';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-tabs/css/tabs.css';
```

See also `@sb1/ffe-tabs-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-tabs-react
Description: Fanekomponenter for innhold i seksjoner. `TabGroup` styrer layout og tastaturnavigasjon, `Tab` representerer hver fane.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-tabs-react

## Beskrivelse

Fanekomponenter for innhold i seksjoner. `TabGroup` styrer layout og tastaturnavigasjon, `Tab` representerer hver fane.

## Installasjon

```bash
npm install --save @sb1/ffe-tabs-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

```css
@import '@sb1/ffe-tabs/less/tabs.less';
```

## Eksempler

### Grunnleggende bruk med tilstandshåndtering

```tsx
import React, { useState } from 'react';
import { TabGroup, Tab } from '@sb1/ffe-tabs-react';

export function TabsDemo() {
    const [activeTab, setActiveTab] = useState<string>('oversikt');

    return (
        <>
            <TabGroup>
                <Tab
                    selected={activeTab === 'oversikt'}
                    onClick={() => setActiveTab('oversikt')}
                    aria-controls="panel-oversikt"
                >
                    Oversikt
                </Tab>
                <Tab
                    selected={activeTab === 'detaljer'}
                    onClick={() => setActiveTab('detaljer')}
                    aria-controls="panel-detaljer"
                >
                    Detaljer
                </Tab>
            </TabGroup>

            {activeTab === 'oversikt' && (
                <div id="panel-oversikt" role="tabpanel">
                    Innhold for oversikt
                </div>
            )}
            {activeTab === 'detaljer' && (
                <div id="panel-detaljer" role="tabpanel">
                    Innhold for detaljer
                </div>
            )}
        </>
    );
}
```

### Tilgjengelighet (a11y)

- `TabGroup` rendres som `<div role="tablist">` med tastaturnavigasjon
- `Tab` har automatisk `aria-selected` og `tabindex` basert på `selected`
- Bruk `aria-controls` for å koble fane til panel med `role="tabpanel"`

## Utvikling

```bash
npm install && npm run build && npm start
```

Lokal Storybook kjorer pa http://localhost:6006/
npm package: @sb1/ffe-tags
Description: En tag er en liten, fleksibel komponent som brukes til å kategorisere, merke eller gi ekstra kontekst til innhold
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-tags

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-tags
```

## Usage

```less
@import 'path/to/node_modules/@sb1/ffe-tags/less/tag';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-tags/css/tag.css';
```

See also `@sb1/ffe-tags-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `ffe.less`:

```css
@import '~@sb1/ffe-core/less/ffe';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-tags-react
Description: React implementation of ffe-tags component
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-tags-react

## Beskrivelse

Tag-komponenten brukes for merking og kategorisering av innhold.

## Installasjon

```bash
npm install --save @sb1/ffe-tags-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Grunnleggende eksempel

```tsx
import { Tag } from '@sb1/ffe-tags-react';

<Tag variant="info">Info</Tag>
<Tag variant="success">Suksess</Tag>
<Tag variant="warning">Advarsel</Tag>
<Tag variant="critical">Kritisk</Tag>
<Tag variant="neutral">Nøytral</Tag>
<Tag variant="tip">Tips</Tag>
```

### Ulike typer

```tsx
<Tag type="emphasis" variant="info">Fremhevet</Tag>
<Tag type="subtle" variant="info">Subtil</Tag>
```

### Ulike størrelser

```tsx
<Tag size="sm">Liten</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Stor</Tag>
```

### Med ikon

```tsx
import { Tag } from '@sb1/ffe-tags-react';
import { Icon } from '@sb1/ffe-icons-react';

<Tag variant="critical">
    <Icon fileUrl={warningIconUrl} size="sm" />
    Ikke betalt
</Tag>;
```

### Importere CSS

```css
@import '@sb1/ffe-tags/css/tag.css';
```

### TypeScript

```tsx
import { Tag, type TagProps } from '@sb1/ffe-tags-react';
```

## Utvikling

Fra designsystem-rotmappen:

```bash
npm install && npm run build && npm start
```

Storybook kjører på http://localhost:6006/