docs(www): more components (#4227)

Author: Barsnes

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.