@sb1/ffe-buttons-react

Beskrivelse

Knapp-komponenter for handlinger med visuell hierarki og tilgjengelighet. Bruk for prioritet (Action > Primary > Secondary > Tertiary), navigasjon (BackButton), utvidelse (Expand/InlineExpand), gruppering og snarveier.

Bruk lenker (LinkText fra ffe-core-react) for navigasjon som ser ut som lenker.

Installasjon

npm install --save @sb1/ffe-buttons-react

Bruk

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

Avhengig av @sb1/ffe-icons-react. Importer styling:

@import '@sb1/ffe-buttons/css/buttons.css';

Eksempler

Importering

import {
    ActionButton,
    PrimaryButton,
    SecondaryButton,
    TertiaryButton,
    BackButton,
    ExpandButton,
    InlineExpandButton,
    ShortcutButton,
    TaskButton,
    ButtonGroup,
} from '@sb1/ffe-buttons-react';
import { Icon } from '@sb1/ffe-icons-react';

Grunnleggende knapper (ActionButton, PrimaryButton, SecondaryButton)

ActionButton: viktigste handling (maks en per side). PrimaryButton: hovedhandlinger. SecondaryButton: sekundære handlinger.

<ActionButton onClick={() => handleSubmit()}>Send soknad</ActionButton>
<PrimaryButton onClick={() => handleSave()}>Lagre</PrimaryButton>
<SecondaryButton onClick={() => handleCancel()}>Avbryt</SecondaryButton>

Storrelse og lasting

<ActionButton size="lg">Stor</ActionButton>
<PrimaryButton isLoading={isSubmitting} ariaLoadingMessage="Sender...">Send</PrimaryButton>

Knapper med ikoner

<PrimaryButton leftIcon={<Icon fileUrl={addIcon} size="md" />}>Legg til</PrimaryButton>
<ActionButton iconOnly aria-label="Legg til bruker"><Icon fileUrl={addIcon} size="md" /></ActionButton>

TertiaryButton

Inline-knapp for mindre fremtredende handlinger. Stotter ikke lasting.

<TertiaryButton leftIcon={<Icon fileUrl={infoIcon} size="md" />}>
    Mer info
</TertiaryButton>

BackButton

Navigasjonsknapp med innebygd venstre-pil.

<BackButton onClick={() => navigate(-1)}>Tilbake</BackButton>
<BackButton as={Link} to="/previous">Tilbake til oversikt</BackButton>

ExpandButton

Sirkulaer knapp for vis/skjul innhold. Viser tekst nar lukket, X-ikon nar apen.

<ExpandButton
    isExpanded={isExpanded}
    onClick={() => setIsExpanded(!isExpanded)}
    aria-controls={collapseId}
    closeLabel="Lukk detaljer"
>
    Vis mer
</ExpandButton>

InlineExpandButton

Inline-knapp med ned-pil som roterer.

<InlineExpandButton
    isExpanded={isExpanded}
    onClick={() => setIsExpanded(!isExpanded)}
    aria-controls={collapseId}
>
    {isExpanded ? 'Vis mindre' : 'Vis mer'}
</InlineExpandButton>

ShortcutButton

Snarveisknapp med innebygd hoyre-pil.

<ShortcutButton leftIcon={<Icon fileUrl={settingsIcon} size="md" />}>
    Innstillinger
</ShortcutButton>

TaskButton

Oppgaveknapp med pakrevd ikon.

<TaskButton icon={<Icon fileUrl={addIcon} size="md" />}>
    Legg til bruker
</TaskButton>

ButtonGroup

Grupperer knapper med riktig mellomrom.

<ButtonGroup>
    <SecondaryButton>Avbryt</SecondaryButton>
    <PrimaryButton>Bekreft</PrimaryButton>
</ButtonGroup>
<ButtonGroup thin inline ariaLabel="Handlinger">...</ButtonGroup>

Polymorfisk as-prop

<PrimaryButton as="a" href="/link">Lenke</PrimaryButton>
<ActionButton as={Link} to="/route">React Router</ActionButton>

Utvikling

npm install && npm run build && npm start

Lokal Storybook: http://localhost:6006/