Skip to content

Commit

Permalink
docs: guidelines for accordion (#835)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michael Marszalek <[email protected]>
Co-authored-by: Tomas Engebretsen <[email protected]>
  • Loading branch information
@mrosvik @mimarz @TomasEng
3 people authored Sep 28, 2023
1 parent cf8343a commit 86e79e6
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 51 deletions.
106 changes: 88 additions & 18 deletions packages/react/src/components/Accordion/Accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,17 @@ import { Accordion } from '.';

# Accordion

Accordion er en vertikalt stablet gruppe interaktive overskrifter som hver inneholder en tittel, en kort tekst eller et miniatyrbilde som representerer
en seksjon av innholdet. Overskriftene fungerer som kontroller som lar brukere vise eller skjule de tilknyttede seksjonene med innhold.
Accordion brukes ofte for å redusere behovet for å skrolle ned når man presenterer flere seksjoner med innhold på en enkelt side.
Med `Accordion` kan du presentere mye innhold på liten plass i en eller flere rader. Hele raden er klikkbar og lar brukere åpne eller lukke visningen av innholdet under.

## Props
**Vær oppmerksom på:**

<Primary />
<Controls />

### Accordion.Item

<ArgTypes of={Accordion.Item} />

### Accordion.Header

<ArgTypes of={Accordion.Header} />
- Ved å legge innhold i `Accordion` risikerer du at det ikke blir sett av brukerne. Innhold som er viktig bør _ikke_ skjules.
- Ikke legg en `Accordion` inni en annen.

### Accordion.Content
<br />

<ArgTypes of={Accordion.Content} />
<Primary />
<Controls />

## Bruk

Expand All @@ -55,8 +46,87 @@ import { Accordion } from '@digdir/design-system-react';
</Accordion>;
```

## Varianter
## Eksempler

### Kontrollert
<br />
### Med ramme

`Accordion` kan vises med ramme. Dette kan passe i tilfeller der accordions ikke fyller hele siden, eller når det kun er en rad.

<Canvas of={AccordionStories.AccordionBorder} />

### Med farger

`Accordion` kan vises i farger fra ditt brand.

<Canvas of={AccordionStories.AccordionColor} />

#### Kontrollert

`Accordion` holder selv orden på når den er lukket/åpen, men kan kontrolleres utenfra.

<Canvas of={AccordionStories.Controlled} />

<br />

## Retningslinjer

Tester viser at brukerne sjeldnere ser på skjult innhold, enn det som er synlig direkte på siden. Ikke bruk `Accordion` til å skjule innhold for å gjøre siden "ryddigere". Finn ut om du faktisk må skjule innhold og vær klar over hvorfor du gjør det. Tenk over om det er lurt å vise det viktigste innholdet i åpen status når brukeren kommer inn på siden.

Hvis innholdet er for langt eller komplisert, bør du heller omformulere teksten og/eller eventuelt fordele den på flere sider.

### Egnet til

- samle innhold som er litt lengre
- gjøre det frivillig å se innhold som er litt mindre viktig enn alltid synlig innhold
- vise ofte stilte spørsmål
- vise tilleggsinformasjon som kan være til hjelp for brukerne

### Ikke egnet til

- vise små mengder innhold
- vise informasjon hvis det bare er ett element
- vise viktig innhold som alle bør se når de kommer til siden (for eksempel feilmeldinger)
- gi mer informasjon om et spørsmål i et skjema – det innholdet bør brukeren se med en gang
- velge mellom ulike alternativer
- skjule innhold fra søkeresultater eller oversikter/tabeller
- dele opp en logisk flyt eller en rekke med handlinger, da bør du heller bruke en trinnvis liste

### Unngå

- Ikke legg en `Accordion` inni en annen, det vi kaller nøstede lister.

<br />

## Tekst i komponenten

Accordion skal brukes til maksimalt to avsnitt innenfor hvert nedtrekk. Sørg for at overskriften gir en god beskrivelse av hva innholdet i accordion er. En tydelig og beskrivende overskrift skal gjøre brukerne nysgjerrige på innholdet. Overskriftene til accordion kan ha stor betydning for om brukerne finner det de trenger, om innholdet blir lest og om det kan regnes som tilgjengelig for alle brukere. «Vis mer» eller «Les mer her» er ikke gode nok titler. Har du en accordion med mange nedtrekk, kan du ha en hovedoverskrift eller temaoverskrift over hele listen.

<br />

## Tilgjengelighet

[`Chevron`](https://aksel.nav.no/ikoner/ChevronDown)-ikonet er bevisst plassert til venstre for teksten, av hensyn til brukeren med nedsatt synsfelt. Der er det lettere for brukeren å se det (fordi vi leser fra venstre). Mange brukere tror at de må peke på og velge ikonet for å åpne.

Ikke plasser andre interaktive elementer inn i `Accordion`-header, da hele raden skal være klikkbar. Ikonet og teksten skal _ikke_ lenke til ulike handlinger (for eksempel at teksten går videre til en side, mens ikonet åpner listen). Brukerne forventer ikke at ikon og tekst skal gi ulikt resultat når de velger dem.

`Tab` : Flytter fokus til neste element som kan ha fokus \
`Shift` + `Tab` : Flytter fokus til forrige element som kan ha fokus \
`Space` : Aktiverer knapp \
`Enter` : Aktiverer knapp

<br />

## Andre props

### Accordion.Item

<ArgTypes of={Accordion.Item} />

### Accordion.Header

<ArgTypes of={Accordion.Header} />

### Accordion.Content

<ArgTypes of={Accordion.Content} />
118 changes: 94 additions & 24 deletions packages/react/src/components/Accordion/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState } from 'react';
import type { Meta, StoryFn } from '@storybook/react';

import { Button, Link } from '../';

import { Accordion } from '.';

export default {
Expand All @@ -14,20 +16,62 @@ export default {
export const Preview: StoryFn<typeof Accordion> = (args) => (
<Accordion {...args}>
<Accordion.Item>
<Accordion.Header level={3}>Hva er Lorem Ipsum?</Accordion.Header>
<Accordion.Header level={3}>
Hvem kan registrere seg i Frivillighetsregisteret?
</Accordion.Header>
<Accordion.Content>
For å kunne bli registrert i Frivillighetsregisteret, må organisasjonen
drive frivillig virksomhet. Det er bare foreninger, stiftelser og
aksjeselskap som kan registreres. Virksomheten kan ikke dele ut midler
til fysiske personer. Virksomheten må ha et styre.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header level={3}>
Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
</Accordion.Header>
<Accordion.Content>
Virksomheten må være registrert i Enhetsregisteret før den kan bli
registrert i Frivillighetsregisteret. Du kan registrere i begge
registrene samtidig i Samordnet registermelding.
</Accordion.Content>
</Accordion.Item>
</Accordion>
);

export const AccordionBorder: StoryFn<typeof Accordion> = () => (
<Accordion
border
color='subtle'
>
<Accordion.Item>
<Accordion.Header level={3}>Vedlegg</Accordion.Header>
<Accordion.Content>Vedlegg 1, vedlegg 2, vedlegg 3</Accordion.Content>
</Accordion.Item>
</Accordion>
);

export const AccordionColor: StoryFn<typeof Accordion> = () => (
<Accordion
border
color='secondary'
>
<Accordion.Item>
<Accordion.Header level={3}>
Hvordan får jeg tildelt et jegernummer?
</Accordion.Header>
<Accordion.Content>
Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien.
Lorem Ipsum har vært bransjens standard for dummytekst helt siden
1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å
lage et prøveeksemplar av en bok.
Du vil automatisk få tildelt jegernummer og bli registrert i
Jegerregisteret når du har bestått jegerprøven.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header level={3}>Hvor kommer det fra?</Accordion.Header>
<Accordion.Header level={3}>
Jeg har glemt jegernummeret mitt. Hvor finner jeg dette?
</Accordion.Header>
<Accordion.Content>
I motsetning til hva mange tror, er ikke Lorem Ipsum bare tilfeldig
tekst. Dets røtter springer helt tilbake til et stykke klassisk latinsk
litteratur fra 45 år f.kr., hvilket gjør det over 2000 år gammelt.
Du kan finne dette ved å logge inn på{' '}
<Link href='https://minjegerside.brreg.no/'>Min jegerside</Link>
</Accordion.Content>
</Accordion.Item>
</Accordion>
Expand All @@ -41,22 +85,48 @@ Preview.args = {

export const Controlled: StoryFn<typeof Accordion> = () => {
const [open, setOpen] = useState(false);
const [open2, setOpen2] = useState(false);

return (
<Accordion>
<Accordion.Item open={open}>
<Accordion.Header onHeaderClick={() => setOpen(!open)}>
Accordion header text
</Accordion.Header>
<Accordion.Content>Accordion content</Accordion.Content>
</Accordion.Item>
<Accordion.Item open={open2}>
<Accordion.Header onHeaderClick={() => setOpen2(!open2)}>
Accordion header text
</Accordion.Header>
<Accordion.Content>Accordion content</Accordion.Content>
</Accordion.Item>
</Accordion>
<>
<Button onClick={() => setOpen(!open)}>Toggle Accordions</Button>
<br />
<Accordion>
<Accordion.Item open={open}>
<Accordion.Header onHeaderClick={() => setOpen(!open)}>
Enkeltpersonforetak
</Accordion.Header>
<Accordion.Content>
Skal du starte for deg selv? Enkeltpersonforetak er ofte den
enkleste måten å etablere bedrift på. Denne organisasjonsformen har
både fordeler og ulemper. Det gir deg stor grad av frihet, men kan
også gi betydelig risiko fordi du har personlig ansvar for
økonomien.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item open={open}>
<Accordion.Header onHeaderClick={() => setOpen(!open)}>
Aksjeselskap (AS)
</Accordion.Header>
<Accordion.Content>
Planlegger du å starte næringsvirksomhet alene eller sammen med
andre? Innebærer næringsvirksomheten en økonomisk risiko? Vil du ha
rettigheter som arbeidstaker og muligheten til at andre kan
investere i selskapet ditt? Da kan aksjeselskap være en
hensiktsmessig organisasjonsform.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item open={open}>
<Accordion.Header onHeaderClick={() => setOpen(!open)}>
Ansvarlig selskap (ANS/DA)
</Accordion.Header>
<Accordion.Content>
Er dere minst to personer som skal starte opp egen virksomhet?
Samarbeider du godt med den/de som du skal starte opp sammen med?
Krever virksomheten få investeringer og tar du liten økonomisk
risiko? Da kan du vurdere å etablere et ansvarlig selskap.
</Accordion.Content>
</Accordion.Item>
</Accordion>
</>
);
};
12 changes: 3 additions & 9 deletions packages/react/src/components/Alert/Alert.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ import { Alert } from '@digdir/design-system-react';
<Alert>You are using the Alert component!</Alert>;
```

## Varianter med eksempler
## Eksempler

`Alert` har flere varianter fordi den kan brukes til fire ulike budskap: Informasjon, advarsler, suksess og feilmelding.
`Alert` kan brukes til fire ulike budskap: Informasjon, advarsler, suksess og feilmelding. Den kan også brukes sammen med andre komponenter og stiler. Her er noen eksempler.

<br />

Expand Down Expand Up @@ -57,13 +57,7 @@ Bruk `danger` for å informere om noe som er kritisk eller som hindrer brukeren

<Canvas of={AlertStories.VariantDanger} />

## Andre eksempler

`Alert` kan brukes sammen med andre komponenter og stiler. Her er noen eksempler.

<br />

### Med overskrift
### Med og uten overskrift

Hvis meldingen er lenger enn en setning kan det være nyttig å bruke en overskrift til å fremheve det viktigste. Dette kan gjøres ved bruk av [Typografi](/docs/felles-typography--docs)-komponentene. Husk å velge riktig overskriftsnivå ut fra plassen alert har i innholdsstrukturen på siden.

Expand Down

0 comments on commit 86e79e6

Please sign in to comment.