Stepper | Punkt | Origo

Om komponenten

Stepper-komponenten er designet for å veilede brukere gjennom en sekvens av trinn eller oppgaver, og tilbyr en visuell fremstilling av progresjonen gjennom disse trinnene. Den støtter både vertikal og horisontal orientering, noe som gir fleksibilitet i ulike bruksscenarioer.

Stepper-komponenten består av to hovedelementer: <Stepper> og <Step>. Stepper-elementet er kontaineren for alle Step-elementene, og Step-elementene representerer de ulike trinnene i sekvensen.

Stepper-elementet har en prop hideNonActiveStepsContent som skjuler beskrivelsene til trinn som ikke er aktive. I React, har <Stepper> også en prop activeStep som bistår med å gjemme disse beskrivelsene. Hvert Step-element har en tittel og en status som indikerer om trinnet er fullført, aktivt eller ikke fullført.

      
    Title
Content

    Title
Content

    Title
Content

// React
<PktStepper activeStep={0} >
  <PktStep  title="Title" status="completed">
    Content
  </PktStep>
  <PktStep  title="Title" status="current">
    Content
  </PktStep>
  <PktStep  title="Step 3" status="incomplete">
    Content
  </PktStep>
</PktStepper>

Varianter

Komponenten finnes i to ulike varianter: vertikal stepper og horisontal stepper. Som standard, vil komponenten vises som en vertikal stepper. For å bruke horisontal stepper i React eller Vue, sett prop-en orientation til horizontal. Komponenten kan brukes i ren html ved å legge til klassen pkt-stepper--horizontal på pkt-stepper-elementet.

Vertikal

(standard)

Step 1
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 2
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 3
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 4
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 5
Bruk dette tekstfeltet til å beskrive hva steget handler om.

Vertikal

(vis alle steg beskrivelser)

Step 1
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 2
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 3
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 4
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 5
Bruk dette tekstfeltet til å beskrive hva steget handler om.

Horisontal

Step 1
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 2
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 3
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 4
Bruk dette tekstfeltet til å beskrive hva steget handler om.
Step 5
Bruk dette tekstfeltet til å beskrive hva steget handler om.

CSS oversikt

I Punkt brukes BEM-styling. Under er Stepper sin CSS-struktur.

Block:

.pkt-stepper
.pkt-step

Elements:

.pkt-step__indicator
.pkt-step__line
.pkt-step__line--1
.pkt-step__line--2
.pkt-step__line--3
.pkt-step__wrapper
.pkt-step__title
.pkt-step__content

Modifiers:

.pkt-stepper--vertical
.pkt-stepper--horizontal

.pkt-step--completed
.pkt-step--current
.pkt-step--incomplete
.pkt-step--hidden

Props, slots og events

I React, brukes activeStep i kombinasjon med hideNonActiveStepContent i <Stepper> til å gjemme stegbeskrivelser som ikke er aktive. I Vue, bruker man hideNonActiveStepsContent fra <Stepper> og status inni <Step> til å gjøre det samme. Dette har noe med hvordan props, datadeling og slots fungerer i de to rammeverkene og er et bevisst valg vi har tatt slik at måten komponentene brukes på er like på tvers av rammeverkene til tross for at Vue versjonen da ikke vil ha prop-en activeStep.

Utenom activeStep-propen i React, er disse propsene ellers like på tvers av React og Vue komponentene.

`<Stepper/>`

Props	Type	Validation	Default	Description
children / slot	`<Step/>` og/eller en liste av `<Step>`	Påkrevd
activeStep (react)	`number`	Påkrevd	0	I React, er denne med på å bestemme hvilke steg beskrivelser som skal gjemmes
orientation	`vertical`, `horizontal`	-	`vertical`	Bestemmer retningen til stepper-komponenten
hideNonActiveSteps	`boolean`	-	`false`	Skjuler alle steg sin beskrivelse som ikke er aktivt

`<Step/>`

Props	Type	Validation	Default	Description
children / slot	`ReactNode`, `VNode`	-		Innhold i stedet
title	`string`	Påkrevd		Tittel/Tekst for steget
status	`completed`, `current` eller `incomplete`	Påkrevd	`incomplete`	Statusen til steget. Denne bestemmer hvilken styling steget får