diff --git a/apps/www/app/_utils/redirects.server.ts b/apps/www/app/_utils/redirects.server.ts index c8d0d9275c..010da7711f 100644 --- a/apps/www/app/_utils/redirects.server.ts +++ b/apps/www/app/_utils/redirects.server.ts @@ -14,7 +14,12 @@ export const designsystemetRedirects = (pathname: string) => { return null; }; -const redirects = [ +type Redirect = { + from: string; + to: string; +}; + +const redirects: Redirect[] = [ { from: '/komponenter', to: '/no/components', @@ -202,4 +207,20 @@ const redirects = [ from: '/no/fundamentals/figma/get-started', to: '/no/fundamentals/start-here/preparations#figma', }, + { + from: '/no/fundamentals/code/react', + to: '/no/fundamentals/code/setup', + }, + { + from: '/no/fundamentals/code/other-frameworks', + to: '/no/fundamentals/code/setup', + }, + { + from: '/en/fundamentals/code/react', + to: '/en/fundamentals/code/setup', + }, + { + from: '/en/fundamentals/code/other-frameworks', + to: '/en/fundamentals/code/setup', + }, ]; diff --git a/apps/www/app/content/fundamentals/en/code/setup.mdx b/apps/www/app/content/fundamentals/en/code/setup.mdx new file mode 100644 index 0000000000..37fc92e188 --- /dev/null +++ b/apps/www/app/content/fundamentals/en/code/setup.mdx @@ -0,0 +1,246 @@ +--- +title: Setup +description: Get started with the Designsystemet in code +date: 2026-02-27 +category: Code +color: blue +icon: CodeIcon +published: true +order: 0 +search_terms: setup, oppsett, installasjon, installation, getting started, komme i gang +--- + + +Follow these steps to get started with using Designsystemet in code for the first time. + +## 1. Install the packages + +Designsystemet consists of several code packages that you can freely choose from, depending on your needs and preferences. + +We recommend starting with `@digdir/designsystemet-web` and `@digdir/designsystemet-css` which are the most basic packages to get started. + + + + + HTML + React + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-web +``` + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-react +``` + + + + +## 2. Import Javascript + + + + HTML + React + + +Import `@digdir/designsystemet-web` in your main JavaScript file. +
+This will register all web components and observers globally, so you only need to do this once. + +```jsx +import '@digdir/designsystemet-web'; +``` + + +Import `@digdir/designsystemet-react` when using components. + +```js +import { Button } from '@digdir/designsystemet-react'; +``` + + + + +## 3. Import CSS + +Import `@digdir/designsystemet-css`. + +Read more about [CSS](/no/fundamentals/code/css). + + + + CSS + JavaScript + + + ```css + @import '@digdir/designsystemet-css/index.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + ``` + + + + + +

Note: `background` and `color` are set on ``

+

+`background` and `color` are automatically defined on the `body` element and where `data-color-scheme` is set. +This is to ensure [universal design (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) and consistent font and color across the application. +This can be easily overridden in your own theme or in your global CSS file. +

+ + + +## 4. Import the theme + +The Designsystemet is designed to be themable, so it is important to import your theme after importing `@digdir/designsystemet-css`. + +[Build your own theme](/no/fundamentals/start-here/own-theme) or use the default theme; `@digdir/designsystemet-css/theme`. + + + + + Custom theme + Default theme + + + ```css + @import '@digdir/designsystemet-css/index.css'; + @import 'design-tokens-build/.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + import '@digdir/designsystemet-css/theme'; + ``` + + + + +## 5. Usage + +You are now ready to use the Designsystemet in code! + + +All components have their own page in the [component documentation](/no/components), we recommend that you read through these to see how you can use the components. + +It is also recommended that you read through the accessibility page. + +- Use `data-color-scheme="light | dark | auto"` to set dark/light mode. +- Use `data-size="sm | md | lg"` to set the size of the components. +- Use `data-color` to set the color of the components. + + + + + HTML + React + + +```html + + + + + +``` + + + ```js +; + + + + + ``` + + + +## Typescript + +Designsystemet provides type safety for its data attributes. + +Install the type package and add the type files to `tsconfig.json` to access them. + +```sh +npm i -D @digdir/designsystemet-types +``` + + + + HTML + React + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-web", + "@digdir/designsystemet-types", + "@digdir/designsystemet-css/theme" /* or your theme type file, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-react/react-types", /** imports @digdir/designsystemet-types for you */ + "@digdir/designsystemet-css/theme" /* or your theme type file, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + + + + +## Font + +The components are designed and developed with the [Inter font (github.com)](https://github.com/rsms/inter), so variations may occur if you use a different font. +If you choose to install the font in a way other than altinncdn.no, remember to include the font weights `400`, `500`, and `600`. + +### Add the Inter font (optional) + +Add the `` tag below in the ``, and set `font-family` to `Inter` in your global CSS file. + +You can use this code to add the font in ``: + +```html + +``` +### Font configuration + +We strongly recommend adding the following to your global CSS file. +`font-feature-settings` adds a tail to lowercase `l`s. + +```css +body { + font-family: var(--ds-font-family), sans-serif; + font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ +} +``` + + +## Polyfill + +The design system uses [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) in some components. This api is classified as [Baseline: Newly available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) as of April 2024, when Firefox was the last browser to add it. In some cases, you may find that users are locked to older browser versions for various reasons, and then it may be appropriate to add a polyfill to ensure that `popover` works for everyone. +* [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) diff --git a/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx b/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx index 7d20228019..172c7891c7 100644 --- a/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx +++ b/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx @@ -5,7 +5,7 @@ date: 2026-01-08 category: Kode color: blue icon: CodeIcon -published: true +published: false order: 30 search_terms: webkomponenter, webkomponentar, vanilla, webcomponents, vue, angular, svelte --- diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index d138728c1c..829ea5ccf3 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -5,7 +5,7 @@ date: 2026-01-08 category: Kode color: blue icon: CodeIcon -published: true +published: false order: 20 --- diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx new file mode 100644 index 0000000000..3b8e6e1d03 --- /dev/null +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -0,0 +1,245 @@ +--- +title: Oppsett +description: Kom i gang med Designsystemet i kode +date: 2026-02-27 +category: Kode +color: blue +icon: CodeIcon +published: true +order: 0 +search_terms: setup, oppsett, installasjon, installation, getting started, komme i gang +--- + + +Følg disse stegene for å komme i gang med bruk av Designsystemet i kode første gang. + +## 1. Installer pakkene + +Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser. + +Vi anbefaler at du starter med `@digdir/designsystemet-web` og `@digdir/designsystemet-css`, som er de mest grunnleggende pakkene for å komme i gang. + + + + + HTML + React + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-web +``` + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-react +``` + + + + +## 2. Importer Javascript + + + + HTML + React + + +Importer `@digdir/designsystemet-web` i din hoved JavaScript fil. +
+Dette vil registrere alle web-komponenter og observers globalt, så du trenger bare å gjøre dette en gang. + +```jsx +import '@digdir/designsystemet-web'; +``` + + +Importer `@digdir/designsystemet-react` ved bruk av komponenter. + +```js +import { Button } from '@digdir/designsystemet-react'; +``` + + + + +## 3. Importer CSS + +Importer `@digdir/designsystemet-css`. + +Les mer om [CSS](/no/fundamentals/code/css). + + + + CSS + JavaScript + + + ```css + @import '@digdir/designsystemet-css/index.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + ``` + + + + + +

Merk: `background` og `color` blir satt på ``

+

+`background` og `color` blir automatisk definert på `body`-elementet og ellers der `data-color-scheme` blir satt, slik at vi ivaretar [universell utforming (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. +Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil. +

+ + + +## 4. Importer temaet + +Designsystemet er laget for å være tematiserbart, og det er derfor viktig at du importerer ditt tema etter at du har importert `@digdir/designsystemet-css`. + +[Bygg ditt eget tema](/no/fundamentals/start-here/own-theme) eller bruke standardtemaet; `@digdir/designsystemet-css/theme`. + + + + + Eget tema + Standardtema + + + ```css + @import '@digdir/designsystemet-css/index.css'; + @import 'design-tokens-build/.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + import '@digdir/designsystemet-css/theme'; + ``` + + + + +## 5. Bruk + +Nå er du klar til å bruke Designsystemet i kode! + + +Alle komponenter har egen side i [komponent-dokumentasjonen](/no/components), vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene. + +Det er også anbefalt at du leser gjennom tilgjengelighets-sida. + +- Bruk `data-color-scheme="light | dark | auto"` for å sette dark/light mode. +- Bruk `data-size="sm | md | lg"` for å sette størrelse på komponentene. +- Bruk `data-color` for å sette farge på komponentene som du har definert for ditt tema. + + + + + HTML + React + + +```html + + + + + +``` + + + ```js +; + + + + + ``` + + + +## Typescript + +Designsystemet tilbyr typesikkerhet for flere data-attributter. + +Installer type pakken og legg til typefilene i `tsconfig.json` for å få tilgang til disse. + +```sh +npm i -D @digdir/designsystemet-types +``` + + + + HTML + React + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-web", + "@digdir/designsystemet-types", + "@digdir/designsystemet-css/theme" /* eller din tema typefil, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-react/react-types", /** importerer @digdir/designsystemet-types for deg */ + "@digdir/designsystemet-css/theme" /* eller din tema typefil, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + + + + +## Font + +Komponentene er designet og utviklet med [Inter fonten (github.com)](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. +Dersom du velger å installere fonten på en annen måte enn altinncdn.no, husk å inkludere fontvektene `400`, `500` og `600`. + +### Legg til Inter fonten (valgfritt) + +Legg til `` taggen under i ``, og sett `font-family` til `Inter` i din globale css fil. + +Du kan bruke denne koden for å legge til fonten i ``: + +```html + +``` +### Konfigurasjon av fonten + +Vi anbefaler sterkt at du legger til følgende i din globale CSS fil. +`font-feature-settings` legger til en hale på små `L`'er. + +```css +body { + font-family: var(--ds-font-family), sans-serif; + font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ +} +``` + + +## Polyfill + +Designsystemet bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. +* [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill)