From 9962828cc632b1da5b469bc06cbaaa93dd6036d6 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Tue, 28 Jul 2026 14:45:52 +0200 Subject: [PATCH 1/2] Legg til tag --- .changeset/tag-data-status.md | 6 + indeks-css/css/components/tag.css | 116 ++++---- .../docs/komponenter/accessibility/tag.json | 92 +++++++ indeks-docs/docs/komponenter/tag.mdx | 250 ++++++++++++++++++ indeks-docs/sidebars.ts | 1 + .../lib/ui/components/tag/Tag.test.ts | 5 - .../lib/ui/components/tag/Tag.test.tsx | 87 ++++++ indeks-react/lib/ui/components/tag/Tag.tsx | 73 +++-- .../stories/components/tag/Tag.mdx | 30 --- .../stories/components/tag/Tag.stories.tsx | 95 ++++++- indeks-storybook/tests/scanAll.dtest.ts | 1 + 11 files changed, 619 insertions(+), 137 deletions(-) create mode 100644 .changeset/tag-data-status.md create mode 100644 indeks-docs/docs/komponenter/accessibility/tag.json create mode 100644 indeks-docs/docs/komponenter/tag.mdx delete mode 100644 indeks-react/lib/ui/components/tag/Tag.test.ts create mode 100644 indeks-react/lib/ui/components/tag/Tag.test.tsx delete mode 100644 indeks-storybook/stories/components/tag/Tag.mdx diff --git a/.changeset/tag-data-status.md b/.changeset/tag-data-status.md new file mode 100644 index 00000000..71d1ae64 --- /dev/null +++ b/.changeset/tag-data-status.md @@ -0,0 +1,6 @@ +--- +"@sb1/indeks-css": minor +"@sb1/indeks-react": minor +--- + +Tag er redesignet til å bruke `data-status`-farge-kaskaden (samme mønster som Message, ProgressBar m.fl.) i stedet for BEM-modifikatorer. Farge velges nå med `data-status` (`neutral | info | success | warning | danger`), visuell profil med `data-variant` (`emphasis | subtle`) og størrelse med `data-size` (`sm | lg`). I React er dette henholdsvis `variant`-, `type`- og `size`-props. Emphasis bruker invers tekst på mettet flate; subtle bruker mørk tekst på pastell-flate med farget border — begge profiler verifisert mot WCAG 1.4.3 (4.5:1). Tag er nå polymorf via `as`-prop (Aksel `OverridableComponent`-mønster) slik at den kan rendres som f.eks. `` eller `