@sb1/ffe-core-react

@sb1/ffe-core-react

Beskrivelse

React-komponenter for typografi og grunnleggende tekstmønstre. Bruk for overskrifter, avsnitt, lenker og tekstinnhold med riktig stil og semantikk.

Merk: Wave er deprecated, bruk varianten i @sb1/ffe-shapes-react.

Installasjon

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

Bruk

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

Importere CSS

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

Eksempler

Tilgjengelige komponenter

import {
    Heading1,
    Heading2,
    Heading3,
    Heading4,
    Heading5,
    Heading6,
    Paragraph,
    BodyText,
    SmallText,
    MicroText,
    EmphasizedText,
    StrongText,
    PreformattedText,
    LinkText,
    LinkIcon,
    DividerLine,
} from '@sb1/ffe-core-react';

Overskrifter (Heading1-Heading6)

<Heading1>Sidetittel</Heading1>
<Heading2 lookLike={1}>Semantisk h2 som ser ut som h1</Heading2>
<Heading3 withBorder noMargin>Med understrek, uten margin</Heading3>

Paragraph

<Paragraph lead>Ledende avsnitt med større skrift.</Paragraph>
<Paragraph>Standard brødtekst.</Paragraph>

BodyText

Brødtekst med polymorfisk as-prop. Standard: div.

<BodyText>Brødtekst i en div.</BodyText>
<BodyText as="span">Brødtekst som span.</BodyText>

SmallText

Liten tekst. Standard element: span.

<SmallText>Liten hjelpetekst</SmallText>

MicroText

Ekstra liten tekst. Standard element: span. Støtter strong-prop.

<MicroText>Veldig liten tekst</MicroText>
<MicroText strong>Veldig liten, fet tekst</MicroText>

Tekstformatering

<EmphasizedText>Betont tekst (kursiv, rendrer em)</EmphasizedText>
<StrongText>Viktig tekst (fet, rendrer strong)</StrongText>
<PreformattedText>{`kode her`}</PreformattedText>

LinkText

Tekstlenke med valgfri understreking. Standard element: a.

<LinkText href="https://sparebank1.no">Gå til SpareBank 1</LinkText>
<LinkText as={Link} to="/dashboard">Med React Router</LinkText>

LinkIcon

Lenke med pilikon. Standard element: a. Støtter as-prop.

<LinkIcon href="/produkter">Se alle produkter</LinkIcon>

DividerLine

Visuell skillelinje. Rendrer <hr> med aria-hidden="true".

<DividerLine />

Utvikling

npm install
npm run build
npm start

Lokal Storybook på http://localhost:6006/.