docs: guidelines for accordion

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
-
-<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
 
@@ -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} />

packages/react/src/components/Accordion/Accordion.stories.tsx

@@ -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 {
@@ -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>
@@ -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>
+    </>
   );
 };

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.