Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions apps/www/app/content/fundamentals/en/code/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
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`:

```json
{
"compilerOptions": {
"types": [
'<your-theme>/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
Expand Down
22 changes: 18 additions & 4 deletions apps/www/app/content/fundamentals/no/code/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 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`:

```json
{
"compilerOptions": {
"types": [
'<ditt-tema>/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.
Expand Down
Loading