docs: guidelines for accordion

digdir · Sep 19, 2023 · d3172bc · d3172bc
1 parent eea59af
commit d3172bc
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 27 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/packages/react/src/components/Accordion/Accordion.mdx
@@ -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
+- 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.
 
-<ArgTypes of={Accordion.Item} />
-
-### Accordion.Header
+<br />
 
-<ArgTypes of={Accordion.Header} />
-
-### Accordion.Content
-
-<ArgTypes of={Accordion.Content} />
+<Primary />
+<Controls />
 
 ## Bruk
 
@@ -55,8 +46,85 @@ import { Accordion } from '@digdir/design-system-react';
 </Accordion>;
 ```
 
-## Varianter
+## Eksempler
+
+<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} />
+
+<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
 
-### Kontrollert
+### 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 tekst som er maks. to avsnitt lang 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 nysgjerrig 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} />
+
+#### Kontrollert
 
 <Canvas of={AccordionStories.Controlled} />
+
+### Accordion.Header
+
+<ArgTypes of={Accordion.Header} />
+
+### Accordion.Content
+
+<ArgTypes of={Accordion.Content} />
diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -33,6 +33,48 @@ export const Preview: StoryFn<typeof Accordion> = (args) => (
   </Accordion>
 );
 
+export const AccordionBorder: StoryFn<typeof Accordion> = (args) => (
+  <Accordion
+    border
+    color='subtle'
+  >
+    <Accordion.Item>
+      <Accordion.Header level={3}>Hva er Lorem Ipsum?</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.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
+export const AccordionColor: StoryFn<typeof Accordion> = (args) => (
+  <Accordion
+    border
+    color='secondary'
+  >
+    <Accordion.Item>
+      <Accordion.Header level={3}>Hva er Lorem Ipsum?</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.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header level={3}>Hvor kommer det fra?</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.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
 // Default values are selected in Controls
 Preview.args = {
   border: false,

diff --git a/packages/react/src/components/Alert/Alert.mdx b/packages/react/src/components/Alert/Alert.mdx
@@ -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 />
 
@@ -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.