From 998469897fb030f73bc96aa01f33469a8aba17ef Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 18 Jun 2024 13:02:18 +0200
Subject: [PATCH] update react bruk

---
 .../CodeSnippet/CodeSnippet.module.css        |  7 ++--
 .../stories/{react-usage.mdx => bruk.mdx}     | 38 ++++++++++++++++---
 2 files changed, 36 insertions(+), 9 deletions(-)
 rename packages/react/stories/{react-usage.mdx => bruk.mdx} (62%)

diff --git a/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
index cc3cd7131f..c14a0acd12 100644
--- a/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
+++ b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
@@ -4,6 +4,7 @@
   overflow-x: auto;
   width: 100%;
   border-radius: var(--ds-border-radius-md);
+  height: fit-content;
 }
 
 .copyContainer {
@@ -19,8 +20,6 @@
 
 .icon {
   position: absolute;
-  top: 24px;
-  right: 24px;
-  height: 40px;
-  width: 40px;
+  top: var(--ds-spacing-4);
+  right: var(--ds-spacing-4);
 }
diff --git a/packages/react/stories/react-usage.mdx b/packages/react/stories/bruk.mdx
similarity index 62%
rename from packages/react/stories/react-usage.mdx
rename to packages/react/stories/bruk.mdx
index ea50cbbb96..72fc1769a4 100644
--- a/packages/react/stories/react-usage.mdx
+++ b/packages/react/stories/bruk.mdx
@@ -2,13 +2,15 @@ import { Meta } from '@storybook/blocks';
 
 import { CodeSnippet } from '@doc-components';
 
-<Meta title='Bruk React' />
+<Meta title='Bruk' />
 
 # Bruk
 
 Introduksjon til bruk, regler og gotchas.
 
-## Installasjon
+## React
+
+### Installasjon
 
 For å bruke Designsystemet i React, så må du installere `@digdir/designsystemet-react`.
 
@@ -30,7 +32,7 @@ import { Button } from '@digdir/designsystemet-react';
 
 Alle komponentene som er tilgjengelige i Designsystemet er uten styling. Legg til styling ved å importere vår css pakke, `@digdir/designsystemet-css`.
 
-## SSR
+### SSR
 
 Alle våre komponenter er klient komponenter, og bruker `"use client"`.
 
@@ -38,7 +40,7 @@ Dersom du ønsker å bruke våre komponenter i dine server komponenter, så kan
 Dette betyr at du ikke kan skrive `<Accordion.Item>`, men må skrive `<AccordionItem>`. Grunnen for dette er at serveren ikke kan få tak i noe
 som ligger i en klient komponent, som `Accordion` er.
 
-### I en server komponent:
+#### I en server komponent:
 
 <CodeSnippet language='ts'>
 {`
@@ -53,7 +55,7 @@ import { AccordionRoot, AccordionHeader, AccordionItem, AccordionContent } from
 `}
 </CodeSnippet>
 
-### I en klient komponent:
+#### I en klient komponent:
 
 <CodeSnippet language='ts'>
 {`
@@ -67,3 +69,29 @@ import { Accordion } from '@digdir/designsystemet-react';
 </Accordion.Root>
 `}
 </CodeSnippet>
+
+<br />
+<br />
+<br />
+
+## CSS
+
+For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css`.
+
+### Layers
+
+Vi bruker [css layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for å få lavest mulig spesifisitet i våre css klasser.
+Dette betyr at du lett kan overstye med dine egne klasser.
+
+Alle våre layers ligger under root layeren `ds`.
+Under har vi lagt sub-layers for hver komponent, som `ds.btn`.
+
+Vi har bare sortert det slik at det som senere skal bli overstyrt kommer først i listen:
+
+<CodeSnippet language='css'>
+  {`@layer ds.reset, ds.typography, ds.utils, ds.box, ds.btn;`}
+</CodeSnippet>
+
+Har du en css reset, så må du sortere denne først. Dette gjør du ved å først legge reseten din i en layer, og så sortere denne layeren først:
+
+<CodeSnippet language='css'>{`@layer my-reset, ds;`}</CodeSnippet>