@sb1/ffe-context-message-react

@sb1/ffe-context-message-react

UTDATERT/DEPRECATED: Bruk ffe-messages-react i stedet.

Beskrivelse

React-komponenter for kontekstuelle meldinger (info, tips, suksess, feil).

Installasjon

npm install @sb1/ffe-context-message-react @sb1/ffe-context-message

Bruk

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

Importere CSS

import '@sb1/ffe-context-message/less/context-message.less';

Eksporterte komponenter

Komponent	Bruksomrade	ARIA role
ContextInfoMessage	Generell informasjon til brukeren	group
ContextTipsMessage	Tips og anbefalinger	group
ContextSuccessMessage	Bekreftelse pa vellykket handling	group
ContextErrorMessage	Feilmeldinger og advarsler	alert (standard) eller group

Grunnleggende bruk

import {
    ContextInfoMessage,
    ContextTipsMessage,
    ContextSuccessMessage,
    ContextErrorMessage,
} from '@sb1/ffe-context-message-react';

<ContextInfoMessage>
    <p>Informasjonsmelding.</p>
</ContextInfoMessage>

<ContextErrorMessage headerText="Noe gikk galt">
    <p>Vennligst prov igjen senere.</p>
</ContextErrorMessage>

Eksempler

Med overskrift og lukkeknapp

<ContextInfoMessage
    headerText="Viktig informasjon"
    showCloseButton={true}
    onCloseRest={() => console.log('Lukket')}
>
    <p>Denne meldingen kan lukkes.</p>
</ContextInfoMessage>

Kompakt visning

<ContextTipsMessage compact={true}>
    <p>Et kort tips i kompakt format.</p>
</ContextTipsMessage>

TypeScript

Eksporterer typer: ContextInfoMessageProps, ContextTipsMessageProps, ContextSuccessMessageProps, ContextErrorMessageProps.

Tilgjengelighet

• ContextErrorMessage bruker role="alert" som standard
• Lukkeknappen har aria-label basert pa valgt sprak
• Overskrifter rendres som semantiske heading-elementer

Relaterte pakker

• @sb1/ffe-context-message - CSS-stiler
• @sb1/ffe-messages-react - Nyere meldingskomponenter (anbefalt)