From ccf874e8a2e3f0ee11b5cc86ff31610cab28d357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marianne=20R=C3=B8svik?= Date: Mon, 12 Aug 2024 14:08:28 +0200 Subject: [PATCH] docs(chip): update guidelines (#2218) Co-authored-by: Tobias Barsnes --- packages/react/src/components/Chip/Chip.mdx | 81 +++++++++++++------ .../components/Chip/Group/Group.stories.tsx | 23 ++++++ 2 files changed, 79 insertions(+), 25 deletions(-) diff --git a/packages/react/src/components/Chip/Chip.mdx b/packages/react/src/components/Chip/Chip.mdx index 08d97f3b74..2cdd662e49 100644 --- a/packages/react/src/components/Chip/Chip.mdx +++ b/packages/react/src/components/Chip/Chip.mdx @@ -9,20 +9,16 @@ 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. -## Bruk +## Slik bruker du `Chip` ```tsx import { Chip } from '@digdir/designsystemet-react'; @@ -30,32 +26,67 @@ import { Chip } from '@digdir/designsystemet-react'; You are using the Chip component!; ``` -Chip-komponenten består av flere komponenter. Disse er: +
+ +## Eksempler + +
+### `Chip.Toggle` +`Chip.Toggle` kan brukes som et alternativ til `Button`. Den brukes når handlingen(e) er direkte relatert til hovedinnholdet. + +
-- `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 + + -Denne kodeblokken representerer en enkel Chip med teksten "Nynorsk". +
- - +### `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 + -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"`. +
- +### `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}"`. + + +
-### 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. - - +
+ +## 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)) + +
+ +## Tekst i komponenten +Chips bør ha så få ord som mulig, helst bare ett eller to. + +
+ +## 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. \ No newline at end of file diff --git a/packages/react/src/components/Chip/Group/Group.stories.tsx b/packages/react/src/components/Chip/Group/Group.stories.tsx index b926b6469e..d5f70b14aa 100644 --- 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) => ( + + + Utsikt + + Heis + + Strandlinje + + Vaskemaskin + Dyrevennlig + +); + +export const RemoveGroup: Story = (args) => ( + + Norge + Danmark + Sverige + Finland + +);