From f87066bfb547ece7ea61896efdd716a6b97d70e8 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Wed, 24 Jun 2026 13:47:58 +0200 Subject: [PATCH 1/2] Legg til accordion --- .changeset/accordion-component.md | 14 + docs/internal/dev-warnings-react.md | 136 ++++++++++ indeks-css/css/components/accordion.css | 158 +++++++++++ indeks-css/css/components/index.css | 1 + .../komponenter/accessibility/accordion.json | 88 ++++++ indeks-docs/docs/komponenter/accordion.mdx | 256 ++++++++++++++++++ indeks-docs/docs/komponenter/button.mdx | 36 +-- .../docs/komponenter/skjema/checkbox.mdx | 72 ++--- .../docs/komponenter/skjema/textfield.mdx | 4 +- indeks-docs/docs/komponenter/spinner.mdx | 10 +- indeks-docs/docs/komponenter/typografi.mdx | 24 +- indeks-docs/sidebars.ts | 1 + .../src/theme/ReactLiveScope/index.tsx | 2 + .../components/accordion/Accordion.test.tsx | 112 ++++++++ .../lib/ui/components/accordion/Accordion.tsx | 56 ++++ .../components/accordion/AccordionContent.tsx | 26 ++ .../components/accordion/AccordionHeader.tsx | 26 ++ .../ui/components/accordion/AccordionItem.tsx | 39 +++ indeks-react/lib/ui/components/index.ts | 7 + .../accordion/Accordion.stories.tsx | 123 +++++++++ indeks-storybook/tests/scanAll.dtest.ts | 1 + ...s-Accordion-HTML-1-mobile-webkit-linux.png | Bin 0 -> 26094 bytes ...d-prefiks-ikon-1-mobile-chromium-linux.png | Bin 0 -> 14249 bytes ...-Rikt-innhold-1-desktop-chromium-linux.png | Bin 0 -> 42761 bytes ...cordion-Standard-1-mobile-webkit-linux.png | Bin 0 -> 48230 bytes ...ckbox-Avkrysset-1-desktop-webkit-linux.png | Bin 14939 -> 14931 bytes ...vert-Avkrysset-1-mobile-chromium-linux.png | Bin 7498 -> 7052 bytes ...ox-Indeterminate-1-mobile-webkit-linux.png | Bin 7821 -> 7822 bytes ...Med-Beskrivelse-1-desktop-webkit-linux.png | Bin 24832 -> 0 bytes ...x-Med-Tooltip-1-desktop-chromium-linux.png | Bin 11366 -> 11370 bytes ...ioGroup-Error-1-desktop-chromium-linux.png | Bin 29408 -> 29403 bytes ...roup-Read-Only-1-mobile-chromium-linux.png | Bin 15090 -> 15086 bytes 32 files changed, 1119 insertions(+), 73 deletions(-) create mode 100644 .changeset/accordion-component.md create mode 100644 docs/internal/dev-warnings-react.md create mode 100644 indeks-css/css/components/accordion.css create mode 100644 indeks-docs/docs/komponenter/accessibility/accordion.json create mode 100644 indeks-docs/docs/komponenter/accordion.mdx create mode 100644 indeks-react/lib/ui/components/accordion/Accordion.test.tsx create mode 100644 indeks-react/lib/ui/components/accordion/Accordion.tsx create mode 100644 indeks-react/lib/ui/components/accordion/AccordionContent.tsx create mode 100644 indeks-react/lib/ui/components/accordion/AccordionHeader.tsx create mode 100644 indeks-react/lib/ui/components/accordion/AccordionItem.tsx create mode 100644 indeks-storybook/stories/components/accordion/Accordion.stories.tsx create mode 100644 indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-HTML-1-mobile-webkit-linux.png create mode 100644 indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Med-prefiks-ikon-1-mobile-chromium-linux.png create mode 100644 indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Rikt-innhold-1-desktop-chromium-linux.png create mode 100644 indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Accordion-Standard-1-mobile-webkit-linux.png delete mode 100644 indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-desktop-webkit-linux.png diff --git a/.changeset/accordion-component.md b/.changeset/accordion-component.md new file mode 100644 index 0000000..671d1a9 --- /dev/null +++ b/.changeset/accordion-component.md @@ -0,0 +1,14 @@ +--- +'@sb1/indeks-css': minor +'@sb1/indeks-react': minor +--- + +Ny komponent: Accordion + +Accordion viser og skjuler innhold i seksjoner. Den bygger på native `
`/``, så tastatur (Tab, Enter/Space) og skjermleser-semantikk (disclosure med åpen/lukket-tilstand) fungerer uten ekstra ARIA — og uten JavaScript. + +- Ren CSS: ingen web-komponent. Seksjonene er uavhengige (flere kan stå åpne samtidig). Den myke åpne/lukke-animasjonen er en progressiv CSS-enhancement (`interpolate-size` + `::details-content`); nettlesere uten støtte hopper bare åpent/lukket, fortsatt fullt funksjonelt. +- React-laget er et tynt, compound-API: `Accordion` (en `
`) med `Accordion.Item` (→ `
`), `Accordion.Header` (→ ``) og `Accordion.Content`. `defaultOpen` på `Accordion.Item` speiler native `
`. +- Fullt brukbar uten React via klassene `.ix-accordion`, `.ix-accordion__item`, `.ix-accordion__header` og `.ix-accordion__content` på native `
`/``. +- Visuelle states (default, hover, active, focus, expanded) er definert; en chevron roterer for å vise tilstand, og animasjonen respekterer `prefers-reduced-motion`. Fokusring kun på header. +- Bevisst avvik fra akseptansekriteriene: header er `` framfor `