docs(www): more components

apps/www/app/_components/live-component/live-component.module.css

@@ -63,6 +63,8 @@
   background-color: var(--ds-color-neutral-background-tinted);
   display: grid;
   grid-template-columns: 1fr auto auto auto;
+  margin-block-end: var(--ds-size-4);
+
   &[hidden] {
     display: none;
   }

apps/www/app/_components/live-component/live-components.tsx

@@ -28,6 +28,7 @@ const scopes = {
   useState,
   useEffect,
   useRef,
+  useId,
 };
 
 export type LiveComponentProps = {

apps/www/app/content/components/alert/alert.stories.tsx

@@ -121,7 +121,7 @@ export const MedLenke = () => (
     </Heading>
     <Paragraph>
       Fristen for å søke opptak til utdanning er 15. april.{' '}
-      <Link href='https://designsystemet.no/'>Søk nå</Link>
+      <Link href='#'>Søk nå</Link>
     </Paragraph>
   </Alert>
 );

apps/www/app/content/components/alert/no/code.mdx

@@ -1,8 +1,7 @@
-## Bruk
 <Story story="Preview" />
-
 <ReactComponentDocs />
 
+## Bruk
 ```tsx
 import { Alert } from '@digdir/designsystemet-react';
 

apps/www/app/content/components/alert/no/overview.mdx

@@ -42,8 +42,8 @@ Bruk `danger` for å informere om noe som er kritisk eller som hindrer brukeren
 ### Med og uten overskrift
 
 Hvis meldingen er lenger enn en setning kan det være nyttig å bruke en overskrift til å fremheve det viktigste. 
-Dette kan gjøres ved bruk av [Heading](/no/components/heading/overview)-komponentene. 
-Husk å velge riktig overskriftsnivå ut fra plassen alert har i innholdsstrukturen på siden.
+Dette kan gjøres med [`Heading`](/no/components/heading/overview). 
+Husk å velge riktig overskriftsnivå ut fra plassen `Alert` har i innholdsstrukturen på siden.
 
 <Story story="WithHeading" />
 

apps/www/app/content/components/avatar/avatar.stories.tsx

@@ -56,16 +56,21 @@ export const ShapeVariants = () => (
   </>
 );
 
-export const WithImage = () => (
-  <Avatar aria-label='Ola Nordman'>
-    <img src='/img/component-docs/cats/cat1.webp' alt='' />
-  </Avatar>
+export const WithImageAndIcon = () => (
+  <>
+    <Avatar aria-label='Ola Nordman'>
+      <img src='/img/component-docs/cats/cat1.webp' alt='' />
+    </Avatar>
+    <Avatar aria-label='Ola Nordman'>
+      <BriefcaseIcon />
+    </Avatar>
+  </>
 );
 
 export const InDropdown = () => (
   <Dropdown.TriggerContext>
     <Dropdown.Trigger variant='tertiary'>
-      <Avatar aria-label='Ola Nordmann' data-size='sm'>
+      <Avatar aria-hidden='true' data-size='sm'>
         ON
       </Avatar>
       Velg Profil
@@ -76,7 +81,7 @@ export const InDropdown = () => (
           <Dropdown.Button>
             <Badge.Position overlap='circle'>
               <Badge data-color='danger' data-size='sm'></Badge>
-              <Avatar aria-hidden={true} data-size='xs'>
+              <Avatar aria-hidden='true' data-size='xs'>
                 ON
               </Avatar>
             </Badge.Position>
@@ -85,7 +90,7 @@ export const InDropdown = () => (
         </Dropdown.Item>
         <Dropdown.Item>
           <Dropdown.Button>
-            <Avatar aria-hidden data-size='xs'>
+            <Avatar aria-hidden='true' data-size='xs'>
               <BriefcaseIcon />
             </Avatar>
             Sogndal kommune
@@ -95,15 +100,3 @@ export const InDropdown = () => (
     </Dropdown>
   </Dropdown.TriggerContext>
 );
-InDropdown.parameters = {
-  layout: 'fullscreen',
-  customStyles: {
-    height: '320px',
-  },
-};
-
-export const AsLink = () => (
-  <a href='#'>
-    <Avatar aria-label='Ola Nordmann' />
-  </a>
-);

apps/www/app/content/components/avatar/en/code.mdx

@@ -28,7 +28,7 @@ import { Avatar } from '@digdir/designsystemet-react';
 </>
 ```
 
-## Kodeeksempler
+## Eksempel
 
 ### Standard Ikon
 

apps/www/app/content/components/avatar/no/accessibility.mdx

@@ -0,0 +1,3 @@
+`Avatar` må enten ha en `aria-label` som forklarer hvem eller hva avataren representerer, eller ha `aria-hidden` og synlig tekst som formidler den samme informasjonen. Ikke spesifiser i `aria-label` at det er et bilde, skjermleseren formidler dette automatisk. Det holder å bruke navnet, som for eksempel `aria-label="Ola Nordmann"`.
+
+Bilder, og andre `children`, får automatisk `aria-hidden="true"` for å unngå dobbel informasjon.

apps/www/app/content/components/avatar/no/code.mdx

@@ -1,67 +1,99 @@
 <Story story="Preview" />
 
-## Props
 <ReactComponentDocs />
 
 ## Bruk
 
 ```tsx
 import { Avatar } from '@digdir/designsystemet-react';
-<>
-/* Med standard brukerikon */
-<Avatar aria-label="Ola Nordmann" />
 
-/* Med initialer */
-<Avatar aria-label="Ola Nordmann">ON</Avatar>
+<>
+  {/* Med standard brukerikon */}
+  <Avatar aria-label="Ola Nordmann" />
 
-/* Med bilde */
-<Avatar aria-label="Ola Nordmann">
-  <img src="..." />
-</Avatar>
+  {/* Med initialer */}
+  <Avatar aria-label="Ola Nordmann">ON</Avatar>
+  {/* eller */}
+  <Avatar aria-label="Ola Nordmann" data-initials="ON" />
 
-/* Sammen med synlig tekst */
+  {/* Med bilde */}
+  <Avatar aria-label="Ola Nordmann">
+    <img src="..." />
+  </Avatar>
 
+  {/* Sammen med synlig tekst */}
   <Avatar aria-hidden>ON</Avatar>
   <span>Ola Nordmann</span>
 </>
 ```
 
-## Kodeeksempler
+## Eksempel
 
 ### Standard Ikon
 
+Dersom du ikke sender inn noen `children`, vil `Avatar` vise et standard brukerikon.
+
+Dette kan overstyres i css med variabelen `--dsc-avatar-icon-url`. Se liste over CSS variabler nederst på siden.
+
 <Story story="NoName" />
 
 ### Størrelser
 
+Komponenten styres med `data-size`, og vil arve størrelse fra nærmeste forelder med `data-size` satt.
+
 <Story story="Sizes" />
 
 ### Farger
 
+Alle farger i ditt tema er gyldige, og komponenten vil arve nærmeste `data-color`.
+
 <Story story="ColorVariants" />
 
 ### Varianter
 
+`variant` prop kan settes til `square` eller `circle`. `circle` er standard.
+
 <Story story="ShapeVariants" />
 
-### Med bilde
+### Med bilde eller ikon
 
-<Story story="WithImage" />
+Dersom du legger bilder eller ikon som barn vil disse få `aria-hidden="true"` automatisk for å unngå dobbel informasjon.
+Du må selv sette `aria-label` på `Avatar` for å forklare hvem eller hva avataren representerer.
 
-### I `Dropdown`
+<Story story="WithImageAndIcon" />
+
+### Komponering
+
+Komponenten skal kunne komponeres inn i andre komponenter.
+Her er et eksempel på bruk av `Avatar` inne i en `Dropdown`-komponent.
 
 <Story story="InDropdown" />
 
-### Som lenke
+## HTML
 
-<Story story="AsLink" />
+Avatar bruker klassenavnet `ds-avatar` på en `<span>` med `role="img"`.
 
-## CSS
+```html
+<!-- Med standard brukerikon -->
+<span class="ds-avatar" role="img" aria-label="Ola Nordmann"></span>
 
-### Variabler
+<!-- Med initialer -->
+<span class="ds-avatar" role="img" aria-label="Ola Nordmann">ON</span>
+<!-- eller -->
+<span class="ds-avatar" role="img" aria-label="Ola Nordmann" data-initials="ON"></span>
 
-<CssVariables />
+<!-- Med bilde -->
+<span class="ds-avatar" role="img" aria-label="Ola Nordmann">
+  <img src="..." aria-hidden="true" />
+</span>
 
-### Attributter
+<!-- Sammen med synlig tekst -->
+<span class="ds-avatar" aria-hidden="true">ON</span>
+<span>Ola Nordmann</span>
+```
+
+## CSS variabler og data-attributter
+
+<CssVariables />
 
 <CssAttributes />

apps/www/app/content/components/avatar/no/overview.mdx

@@ -1,23 +1,29 @@
 <Story story="Preview" />
 
+**Bruk `Avatar` når:**
+- en person eller enhet skal representeres.
+
+**Unngå `Avatar` når:**
+- noe annet enn en person eller enhet skal representeres, for eksempel et dokument. Bruk heller ikoner eller andre visuelle symboler.
+- det brukes rent visuelt, uten funksjon eller mening.
+
+## Eksempel
+
+### Farger
+
+<Story story="ColorVariants" />
+
+### Varianter
+
+<Story story="ShapeVariants" />
+
 ## Retningslinjer 
 `Avatar` skal bidra til å gjøre brukergrensesnittet mer gjenkjennelig og lett å navigere i, uten å forstyrre eller ta for mye plass. 
 
 - Bruk samme form på avataren på en konsekvent måte i hele løsningen.
 - Avataren bør som regel kombineres med tekst, med mindre det er helt åpenbart hvem eller hva avataren representerer. 
 - Bruk avatar kun når det faktisk gir verdi for brukeropplevelsen, for eksempel å vise hvem som har skrevet noe, eller hvem som er ansvarlig.
 
-**Passer til:**
-- Å representere en person eller enhet. 
-
-**Passer ikke til:**
-- Å representere noe annet enn en person eller enhet, for eksempel et dokument. Bruk heller ikoner eller andre visuelle symboler.
-- Å brukes rent visuelt, uten funksjon eller mening.
 
 ## Tekst
 `Avatar` skal som hovedregel ikke inneholde tekst i selve komponenten, med unntak av når initialer brukes. Annen tekst, for eksempel fullt navn, rolle eller organisasjon, bør vises utenfor avataren for å sikre god lesbarhet. 
-
-## Tilgjengelighet
-`Avatar` må enten ha en `aria-label` som forklarer hvem eller hva avataren representerer, eller ha `aria-hidden` og synlig tekst som formidler den samme informasjonen. Ikke spesifiser i `aria-label` at det er et bilde, skjermleseren formidler dette automatisk. Det holder å bruke navnet, som for eksempel `aria-label="Ola Nordmann"`.
-
-Bilder, og andre `children`, får automatisk `aria-hidden="true"` for å unngå dobbel informasjon.

apps/www/app/content/components/badge/badge.stories.tsx

@@ -2,9 +2,7 @@ import { Badge, Button, Tabs } from '@digdir/designsystemet-react';
 import {
   ChatIcon,
   EnvelopeClosedFillIcon,
-  HeartFillIcon,
   InboxIcon,
-  PencilIcon,
   VideoFillIcon,
   VideoIcon,
 } from '@navikt/aksel-icons';
@@ -20,59 +18,15 @@ export const Floating = () => (
       <Badge data-color='accent'></Badge>
       <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge.Position>
-    <Badge.Position placement='top-left'>
-      <Badge data-color='accent'></Badge>
-      <EnvelopeClosedFillIcon title='Meldinger' />
-    </Badge.Position>
-    <Badge.Position placement='bottom-right'>
-      <Badge data-color='accent'></Badge>
-      <EnvelopeClosedFillIcon title='Meldinger' />
-    </Badge.Position>
-    <Badge.Position placement='bottom-left'>
-      <Badge data-color='accent'></Badge>
-      <EnvelopeClosedFillIcon title='Meldinger' />
-    </Badge.Position>
-    <Badge.Position placement='top-right' overlap='circle'>
-      <Badge data-color='accent'></Badge>
-      <div
-        style={{
-          width: '2rem',
-          height: '2rem',
-          borderRadius: '50%',
-          backgroundColor: 'var(--ds-color-brand2-base-default)',
-        }}
-      />
-    </Badge.Position>
-    <Badge.Position placement='top-left' overlap='circle'>
-      <Badge data-color='accent'></Badge>
-      <div
-        style={{
-          width: '2rem',
-          height: '2rem',
-          borderRadius: '50%',
-          backgroundColor: 'var(--ds-color-brand2-base-default)',
-        }}
-      />
-    </Badge.Position>
+
     <Badge.Position placement='bottom-right' overlap='circle'>
       <Badge data-color='accent'></Badge>
       <div
         style={{
-          width: '2rem',
-          height: '2rem',
-          borderRadius: '50%',
-          backgroundColor: 'var(--ds-color-brand2-base-default)',
-        }}
-      />
-    </Badge.Position>
-    <Badge.Position placement='bottom-left' overlap='circle'>
-      <Badge data-color='accent'></Badge>
-      <div
-        style={{
-          width: '2rem',
-          height: '2rem',
+          width: '1.5rem',
+          height: '1.5rem',
           borderRadius: '50%',
-          backgroundColor: 'var(--ds-color-brand2-base-default)',
+          backgroundColor: 'var(--ds-color-brand1-base-default)',
         }}
       />
     </Badge.Position>
@@ -117,13 +71,11 @@ export const InTabs = () => (
   <Tabs defaultValue='value1'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
-        <HeartFillIcon aria-hidden />
         Favoritter
         <Badge count={64} maxCount={10} data-color='neutral' />
       </Tabs.Tab>
-      <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+      <Tabs.Tab value='value2'>Arkiv</Tabs.Tab>
       <Tabs.Tab value='value3'>
-        <PencilIcon aria-hidden />
         Nylige
         <Badge count={2} data-color='neutral' />
       </Tabs.Tab>

apps/www/app/content/components/badge/metadata.json

@@ -1,11 +1,11 @@
 {
   "no": {
     "title": "Badge",
-    "subtitle": "Badge er ein ikkje-interaktiv komponent som viser status med eller utan tal. Bruk [Tag](/docs/komponenter-tag--docs) dersom du skal ha tekst i staden for tal."
+    "subtitle": "Badge er ein ikkje-interaktiv komponent som viser status med eller utan tal. Bruk [`Tag`](/no/components/tag/overview) dersom du skal ha tekst i staden for tal."
   },
   "en": {
     "title": "Badge",
-    "subtitle": "Badge is a non-interactive component that displays status with or without a number. Use [Tag](/docs/komponenter-tag--docs) if you want text instead of a number."
+    "subtitle": "Badge is a non-interactive component that displays status with or without a number. Use [`Tag`](/en/components/tag/overview) if you want text instead of a number."
   },
   "image": "Badge.svg",
   "cssFile": "badge.css"

apps/www/app/content/components/badge/no/accessibility.mdx

@@ -0,0 +1 @@
+Sørg for at informasjonen også er tilgjengeleg for skjermlesarar. [Meir informasjon kjem. (github.com)](https://github.com/digdir/designsystemet/issues/3560)