docs: update alert documentation (#1881)

Co-authored-by: Tobias Barsnes <[email protected]>

packages/react/src/components/Alert/Alert.mdx

@@ -7,13 +7,7 @@ import * as AlertStories from './Alert.stories';
 <Meta of={AlertStories} />
 
 # Alert
-
-Bruk `Alert` til budskap det er ekstra viktig at brukerne ser og forstår. Den er designet for å fange brukernes oppmerksomhet. Vær sikker på at budskapet er så tydelig at det gir mening selv om teksten er svært kort.
-
-**Vær oppmerksom på:**
-
-- Bruk komponenten varsomt. Brukere kan forveksle varsler med reklame, og dermed overse dem. Hvis vi bruker varsler ofte, kan vi forverre dette problemet.
-- Du skal _ikke_ bruke `Alert` som feilmelding til et enkelt skjemaelement. Alle komponenter har egen feilmelding til dette formålet.
+Vi bruker `Alert` til å gi brukeren informasjon som det er ekstra viktig at de ser og forstår. Alert er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig.
 
 <Primary />
 <Controls />
@@ -78,7 +72,18 @@ Kan brukes når alerten skal fremheves mer fra bakgrunnen, for eksempel dersom d
 
 <Canvas of={AlertStories.MedShadow} />
 
-## Retningslinjer
+## Retningslinjer for alert
+Alert har flere varianter, som brukes til fire ulike budskap: Informasjon, advarsler, suksess og feilmelding. Bruk komponenten varsomt. Brukere kan forveksle varsler med reklame, og dermed overse dem. Hvis vi bruker varsler for ofte, kan vi forverre dette problemet.
+
+Pass på at alert har samme utseende og formspråk i alle tjenester og produkter. Denne komponenten skal være mulig å kjenne igjen over alt, så vi skal ikke justere den
+
+Passer til å
+- gi korte og informative varsler
+
+Passer ikke til å
+- gi varsler om systemfeil eller lignende
+- validere enkelte skjemaelement, bruk heller komponentens egen feilmelding
+
 
 ### Størrelser
 
@@ -113,14 +118,17 @@ Det er viktig at Alerts har samme utseende og formspråk på tvers av produktene
 <br />
 
 ## Tekst i komponenten
+Det er ikke alltid lett å forstå forskjellen på varslene, selv om de har ulike ikoner og farger. Derfor er det viktig at teksten vi skriver i varselet er tydelig og lett å forstå. 
 
-Det er ikke alle som intuitivt forstår forskjellen på varslene selv om de har ulike ikoner og farger. Derfor er det viktig at ordene du bruker gjør det klart for brukerne hvordan de skal forholde seg til informasjonen i varselet.
+Vi kan velge om vi vil ha med en overskrift i alert. Hvis meldingen er lengre enn en setning, kan det være lurt å ha med en overskrift som fremhever det viktigste. 
 
 Det må være tydelig hvem som gjør hva. Tenk på teksten som en samtale med brukeren, bruk ord som «vi» og «du».
 
-Hvis meldingen er knyttet til en bestemt handling, for eksempel svar på et spørsmål, bør teksten gjenta nøkkelord fra label.
+Hvis meldingen er knyttet til en bestemt handling, for eksempel svar på et spørsmål, bør teksten gjenta nøkkelord fra ledeteksten.
+
+Det er spesielt viktig at teksten i varsler forteller om det er noe brukene må eller kan gjøre for å komme videre med oppgaven sin. 
 
-Det er spesielt viktig at teksten i feilmeldingene forteller om det er noe brukerne må eller kan gjøre for å komme videre med oppgaven sin. Her er en liste med hvilken type informasjon en feilmelding bør inneholde:
+Her er en liste med hvilken type informasjon en varsel bør inneholde:
 
 - Fortell hva som har skjedd
   - Eksempel: "Kunne ikke koble til konto."
@@ -133,7 +141,7 @@ Det er spesielt viktig at teksten i feilmeldingene forteller om det er noe bruke
 - Hjelp dem å fikse problemet selv
   - Eksempel: "Vennligst prøv igjen."
     <br />
-
+<br />
 ## Tilgjengelighet
 
 ### Alternativtekst
@@ -146,7 +154,7 @@ Alert-komponenten kommer ikke med en `role="alert"` som default, den blir presen
 
 #### Ikke gjør dette
 
-Ikke bruk `role=alert` om alert er synlig når siden lastes inn.
+Ikke bruk `role=alert` om `Alert` er synlig når siden lastes inn.
 
 <Canvas of={AlertStories.UtenAria} />