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, og en prop hideNonActiveSteps som skjuler tittelen og beskrivelsen til ikke-aktive steg. 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="Title" 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.

<ol class="pkt-stepper pkt-stepper--vertical">
  <li class="pkt-step pkt-step--completed pkt-step--hideContent" data-step-index={0}>
    <span class="pkt-step__line pkt-step__line--1" aria-hidden></span>
    <span class="pkt-step__line pkt-step__line--2" aria-hidden></span>
    <span class="pkt-step__indicator">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
      >
        <path fill="#2A2859" d="M3 3h18v18H3z"></path>
        <path
          d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z"
          fill="#F1FDFF"></path>
      </svg>
    </span>
    <span class="pkt-step__line pkt-step__line--3" aria-hidden></span>
    <div class="pkt-step__wrapper">
      <div class="pkt-step__title">Title</div>
      <div class="pkt-step__content">Content</div>
    </div>
  </li>
  <li class="pkt-step pkt-step--current" data-step-index={1}>
    <span class="pkt-step__line pkt-step__line--1" aria-hidden></span>
    <span class="pkt-step__line pkt-step__line--2" aria-hidden></span>
    <span class="pkt-step__indicator">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
      >
        <circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859"
        ></circle><circle cx="12" cy="12" r="6" fill="#2A2859"></circle>
      </svg>
    </span>
    <span class="pkt-step__line pkt-step__line--3" aria-hidden></span>
    <div class="pkt-step__wrapper">
      <div class="pkt-step__title">Title</div>
      <div class="pkt-step__content">Content</div>
    </div>
  </li>
  <li class="pkt-step pkt-step--incomplete pkt-step--hideContent" data-step-index={2}>
    <span class="pkt-step__line pkt-step__line--1" aria-hidden></span>
    <span class="pkt-step__line pkt-step__line--2" aria-hidden></span>
    <span class="pkt-step__indicator">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
        ><circle cx="12" cy="12" r="7" fill="#CCCCCC"></circle>
      </svg>
    </span>
    <span class="pkt-step__line pkt-step__line--3" aria-hidden></span>
    <div class="pkt-step__wrapper">
      <div class="pkt-step__title">Title</div>
      <div class="pkt-step__content">Content</div>
    </div>
  </li>
</ol>

<PktStepper>
  <PktStep v-for="(step, index) in steps" :key="index" :title="step.title" :status="step.status">
    <div v-html="step.content"></div>
  </PktStep>
</PktStepper>

<PktStepper activeStep={3}>
  {steps.map((step, index) => (
    <PktStep key={index} title={step.title} status={step.status}>
      {step.children}
    </PktStep>
  ))}
</PktStepper>

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
.pkt-step__nav-wrapper

Modifiers:

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

.pkt-step--completed
.pkt-step--current
.pkt-step--incomplete
.pkt-step--hideContent
.pkt-step--hideStep

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
hideNonActiveStepsContent	`boolean`	-	`false`	Skjuler alle steg sin beskrivelse som ikke er aktivt
hideNonActiveSteps	`boolean`	-	`false`	Skjuler alle ikke-aktive steg sin tittel og beskrivelse

`<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