docs(chip): update guidelines (#2218)

Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Aug 12, 2024 · ccf874e · ccf874e
1 parent 6445a77
commit ccf874e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 25 deletions.
diff --git a/packages/react/src/components/Chip/Chip.mdx b/packages/react/src/components/Chip/Chip.mdx
@@ -9,53 +9,84 @@ import * as GroupChipStories from './Group/Group.stories';
 
 # Chip
 
-`Chips` er små avrundede knapper som kan brukes til å filtrere og navigere gjennom innhold eller data. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat, samt vise hvilke filter som er aktive. Ikke bruk Chip til statisk metadata for å tagge innholdselementer. Bruk heller [Tag](https://storybook.designsystemet.no/?path=/docs/komponenter-tag--docs) -komponenten dersom informasjonen ikke er klikkbar.
+`Chip` er små, interaktive komponenter som lar brukerne styre hvordan de vil se innhold. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat og vise hvilke filter som er aktive. 
 
-Chip eksisterer i ulike varianter:
+- Ikke bruk `Chip` til å merke innhold med kategori/emne som ikke er interaktivt. Bruk heller [`Tag`](/docs/komponenter-tag--docs)-komponenten dersom kategori/emne ikke er klikkbart.
 
-- `Chip.Toggle` er et alternativ til `Button`. Den brukes når handlingen(e) er direkte relatert til hovedinnholdet og når handlingen ikke krever like mye oppmerksomhet som vanlige knapper. Det kan for eksempel være å klikke på en Chip for så å bli sendt til en søkeresultatside med filtrering på denne kategorien.
-- `Chip.Toggle` med `selected=true` er alternativer til vanlige radiobuttons og checkboxer. Brukes til filtrering av innhold og data, når det skal tilbys et valg mellom flere ulike opsjoner. Innholdet endres til å vise kun det som er valgt.
-- `Chip.Removable` er valgte verdier som brukeren kan fjerne. For eksempel filter som har blitt aktivert i et søk som kan fjernes igjen, eller som har blitt valgt i en `Multiselect`.
-
-## Props
+- Ikke bruk `Chip` som varsler for antall eller status. Bruk heller [`Badge`](/docs/komponenter-badge--docs)-komponenten.
 
 <Primary />
 <Controls />
 
-## Bruk
+## Slik  bruker du `Chip`
 
 ```tsx
 import { Chip } from '@digdir/designsystemet-react';
 
 <Chip.Toggle>You are using the Chip component!</Chip.Toggle>;
 ```
 
-Chip-komponenten består av flere komponenter. Disse er:
+<br/>
+
+## Eksempler
+
+<br/>
+### `Chip.Toggle` 
+`Chip.Toggle` kan brukes som et alternativ til `Button`. Den brukes når handlingen(e) er direkte relatert til hovedinnholdet. 
+<Canvas of={ChipStories.Preview} />
+<br/>
 
-- `Chip.Toggle`
-- `Chip.Removable`
-- `Chip.Group`
+### `Chip.Group`
 
-Hvordan komponentene som nevnes over brukes kan du se i eksemplene under.
+Denne kodeblokken viser hvordan du grupperer `Chip` ved hjelp av `Chip.Group`. 
 
-### Chip.Toggle
+<Canvas of={GroupChipStories.Preview} />
+<Controls of={GroupChipStories.Preview} />
 
-Denne kodeblokken representerer en enkel Chip med teksten "Nynorsk".
+<br/>
 
-<Canvas of={ToggleChipStories.Preview} />
-<Controls of={ToggleChipStories.Preview} />
+### `Chip.Toggle` med `selected=true` 
+Vi bruker `Chip` med hake som alternativer til vanlige radiobuttons og checkboxer. Brukes til filtrering av innhold og data. Innholdet tilpasser seg kategoriene som blir valgt. 
 
-### Chip.Removable
+<Canvas of={GroupChipStories.CheckGroup} />
 
-Denne kodeblokken representerer en fjernbar Chip med teksten "Nynorsk". Denne komponenten viser også et kryss som indikerer at den kan fjernes. Det er viktig å merke seg at `aria-label` må legges til dersom innholdet
-i Chip ikke forklarer at den kan fjernes. I dette eksempelet er det lagt til `aria-label="Slett nynorsk"`.
+<br/>
 
-<Canvas of={RemovableChipStories.Preview} />
+### `Chip.Removable`
+Vi bruker `Chip` med kryss når vi vil at brukerne skal kunne fjerne valgte verdier. Det kan for eksempel være filter som er satt, eller verdier som brukerne selv har skrevet inn i et tekstfelt.
+
+Denne komponenten inneholder et kryss som indikerer at filteret kan fjernes. Det er viktig å merke seg at `aria-label` må legges til dersom innholdet
+i Chip ikke forklarer at den kan fjernes. I dette eksempelet er det lagt til `aria-label="Slett {land}"`.
+
+<Canvas of={GroupChipStories.RemoveGroup} />
 <Controls of={RemovableChipStories.Preview} />
+<br/>
 
-### Chip.Group
 
-Denne kodeblokken viser hvordan du grupperer Chips ved hjelp av Chip.Group-komponenten. Eksempelet under inneholder to fjernbare brikker med tekstene "Nynorsk" og "Bokmål", men her kan du bruke Chips varianten som passer deg best.
 
-<Canvas of={GroupChipStories.Preview} />
-<Controls of={GroupChipStories.Preview} />
+<br/>
+
+## Retningslinjer for `Chip`
+
+`Chip` lar brukerne styre hvordan de vil vise innhold. `Chip` kan vises på en eller flere rekker, de tilpasser seg den plassen de får.
+
+Unngå å plassere `Chip` vertikalt. Velg heller [`Checkbox`](/docs/komponenter-checkbox--docs) eller [`Radio`](/docs/komponenter-radio--docs) hvis du vil ha alternativer under hverandre.
+
+Passer til å
+- filtrere informasjon, for eksempel i lister eller tabeller
+- vise hvilke filtre som er valgt
+
+Passer ikke til
+- menyer, som sidemenyer eller hovedmenyer
+- ikke klikkbare kategorier/emner (bruk heller [`Tag`](/docs/komponenter-tag--docs))
+- varsler for antall eller status (bruk heller [`Badge`](/docs/komponenter-badge--docs))
+
+<br/>
+
+## Tekst i komponenten
+Chips bør ha så få ord som mulig, helst bare ett eller to.
+
+<br/>
+
+## Tilgjengelighet
+Hvis deler av en side blir oppdatert samtidig som brukerne gjør noe på siden, må vi passe på at brukere med skjermleser får beskjed om det. Vi kan bruke en `ARIA live region` til det, som kan vise antall treff eller andre endringer.
diff --git a/packages/react/src/components/Chip/Group/Group.stories.tsx b/packages/react/src/components/Chip/Group/Group.stories.tsx
@@ -29,3 +29,26 @@ export const Preview: Story = (args) => (
 Preview.args = {
   size: 'sm',
 };
+
+export const CheckGroup: Story = (args) => (
+  <Chip.Group {...args}>
+    <Chip.Toggle selected checkmark>
+      Utsikt
+    </Chip.Toggle>
+    <Chip.Toggle>Heis</Chip.Toggle>
+    <Chip.Toggle selected checkmark>
+      Strandlinje
+    </Chip.Toggle>
+    <Chip.Toggle>Vaskemaskin</Chip.Toggle>
+    <Chip.Toggle>Dyrevennlig</Chip.Toggle>
+  </Chip.Group>
+);
+
+export const RemoveGroup: Story = (args) => (
+  <Chip.Group {...args}>
+    <Chip.Removable aria-label='Slett Norge'>Norge</Chip.Removable>
+    <Chip.Removable aria-label='Slett Danmark'>Danmark</Chip.Removable>
+    <Chip.Removable aria-label='Slett Sverige'>Sverige</Chip.Removable>
+    <Chip.Removable aria-label='Slett Finland'>Finland</Chip.Removable>
+  </Chip.Group>
+);