From d8356d2a94942481d5186dc27b8d5cacef40af2e Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 11 Feb 2026 15:57:30 +0100 Subject: [PATCH 1/5] docs: add missing tsconfig in react get started --- .../content/fundamentals/en/code/react.mdx | 20 +++++++++++++---- .../content/fundamentals/no/code/react.mdx | 22 +++++++++++++++---- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/code/react.mdx b/apps/www/app/content/fundamentals/en/code/react.mdx index ec2b2521d9..10c69589df 100644 --- a/apps/www/app/content/fundamentals/en/code/react.mdx +++ b/apps/www/app/content/fundamentals/en/code/react.mdx @@ -22,10 +22,22 @@ You can easily create your own theme later. ### Typescript -If you are using Typescript, make sure you have typescript >= 3.8 and install `@digdir/designsystemet-types`: - -```sh -npm i typescript @digdir/designsystemet-types --save-dev +If you are using Typescript, make sure you have typescript >= 3.8. + +#### Types for data attributes in React +The design system provides type safety for `data-color` and `data-size` on React JSX elements. +We need to mutate React's built-in types to add these, and that is why it is optional. +To enable this, add the following to your `tsconfig.json`: + +```jsonc +{ + "compilerOptions": { + "types": [ + '/types.d.ts', // contains types for colors and sizes in your theme (the one you create with @digdir/designsystemet) + "@digdir/designsystemet-react/react-types", // adds types for data-color and data-size on React JSX elements + ] + }, +} ``` ## 2. Font diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index b82925c78f..da104452ba 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -24,12 +24,26 @@ Du kan lett lage ditt eget tema senere. ### Typescript -Dersom du bruker Typescript, sørg for at du har typescript >= 3.8 og installerer `@digdir/designsystemet-types`: - -```sh -npm i typescript @digdir/designsystemet-types --save-dev +Dersom du bruker Typescript, sørg for at du har typescript >= 3.8. + +#### Typer for data-attributer i React + +Designsystemet tilbyder typesikkerhet for `data-color` og `data-size` på React JSX elementer. +Vi må mutere Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. +For å aktivere dette, legg til følgende i din `tsconfig.json`: + +```jsonc +{ + "compilerOptions": { + "types": [ + '/types.d.ts', // inneholder typer for farger og størrelser i ditt tema (den du lager med @digdir/designsystemet) + "@digdir/designsystemet-react/react-types", // legger til typer på data-color og data-size på React JSX elementer + ] + }, +} ``` + ## 2. Font Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. From aa8e60dc407aaa828f1384abb4285fad208582d2 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 12 Feb 2026 09:49:38 +0100 Subject: [PATCH 2/5] use json instead of jsonc for code block --- apps/www/app/content/fundamentals/en/code/react.mdx | 2 +- apps/www/app/content/fundamentals/no/code/react.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/code/react.mdx b/apps/www/app/content/fundamentals/en/code/react.mdx index 10c69589df..c6c775ec3d 100644 --- a/apps/www/app/content/fundamentals/en/code/react.mdx +++ b/apps/www/app/content/fundamentals/en/code/react.mdx @@ -29,7 +29,7 @@ The design system provides type safety for `data-color` and `data-size` on React We need to mutate React's built-in types to add these, and that is why it is optional. To enable this, add the following to your `tsconfig.json`: -```jsonc +```json { "compilerOptions": { "types": [ diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index da104452ba..eb069c0d2a 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -32,7 +32,7 @@ Designsystemet tilbyder typesikkerhet for `data-color` og `data-size` på React Vi må mutere Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. For å aktivere dette, legg til følgende i din `tsconfig.json`: -```jsonc +```json { "compilerOptions": { "types": [ From 7aa62da7a5997e53a2776a00a2366b793b217126 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Feb 2026 08:31:11 +0100 Subject: [PATCH 3/5] Update apps/www/app/content/fundamentals/no/code/react.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index eb069c0d2a..1990dec3f1 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -29,7 +29,7 @@ Dersom du bruker Typescript, sørg for at du har typescript >= 3.8. #### Typer for data-attributer i React Designsystemet tilbyder typesikkerhet for `data-color` og `data-size` på React JSX elementer. -Vi må mutere Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. +Vi må endre på Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. For å aktivere dette, legg til følgende i din `tsconfig.json`: ```json From 0b60e7f9df97098fee6c4007f9e4fc8e34fa9016 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Feb 2026 08:32:35 +0100 Subject: [PATCH 4/5] Update apps/www/app/content/fundamentals/en/code/react.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/en/code/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/en/code/react.mdx b/apps/www/app/content/fundamentals/en/code/react.mdx index c6c775ec3d..1c1904eb24 100644 --- a/apps/www/app/content/fundamentals/en/code/react.mdx +++ b/apps/www/app/content/fundamentals/en/code/react.mdx @@ -26,7 +26,7 @@ If you are using Typescript, make sure you have typescript >= 3.8. #### Types for data attributes in React The design system provides type safety for `data-color` and `data-size` on React JSX elements. -We need to mutate React's built-in types to add these, and that is why it is optional. +We need to mutate React's built-in types to add these, and is why this is optional. To enable this, add the following to your `tsconfig.json`: ```json From 3d735b82409b34628c5385b7270804d494ec7854 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Feb 2026 08:35:24 +0100 Subject: [PATCH 5/5] fix some more wording --- apps/www/app/content/fundamentals/en/code/react.mdx | 2 +- apps/www/app/content/fundamentals/no/code/react.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/code/react.mdx b/apps/www/app/content/fundamentals/en/code/react.mdx index 1c1904eb24..5a221e8863 100644 --- a/apps/www/app/content/fundamentals/en/code/react.mdx +++ b/apps/www/app/content/fundamentals/en/code/react.mdx @@ -25,7 +25,7 @@ You can easily create your own theme later. If you are using Typescript, make sure you have typescript >= 3.8. #### Types for data attributes in React -The design system provides type safety for `data-color` and `data-size` on React JSX elements. +Designsystemet provides type safety for `data-color` and `data-size` on React JSX elements. We need to mutate React's built-in types to add these, and is why this is optional. To enable this, add the following to your `tsconfig.json`: diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index 1990dec3f1..d138728c1c 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -28,7 +28,7 @@ Dersom du bruker Typescript, sørg for at du har typescript >= 3.8. #### Typer for data-attributer i React -Designsystemet tilbyder typesikkerhet for `data-color` og `data-size` på React JSX elementer. +Designsystemet tilbyr typesikkerhet for `data-color` og `data-size` på React JSX elementer. Vi må endre på Reacts innebygde typer for å legge til disse, og det er derfor valgfritt. For å aktivere dette, legg til følgende i din `tsconfig.json`: