Merge branch 'next' into docs/systemvarsler

digdir · Oct 2, 2024 · 99d2182 · 99d2182
2 parents bd3b2dc + 09e1444
commit 99d2182
Show file tree

Hide file tree

Showing 44 changed files with 1,833 additions and 1,952 deletions.
diff --git a/.changeset/metal-tomatoes-compete.md b/.changeset/metal-tomatoes-compete.md
@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Card:
+- Allow `Card` with content placed directly inside
+- Replace `Card.Header`, `Card.Content` and `Card.Footer` with `Card.Block`
+- Replace `isLink` with anchor-in-heading + `click` handler for better accessibility
diff --git a/.changeset/six-carrots-guess.md b/.changeset/six-carrots-guess.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+SkipLink: Remove ds-sr-only class
diff --git a/.changeset/strong-flowers-ring.md b/.changeset/strong-flowers-ring.md
@@ -0,0 +1,10 @@
+---
+'@digdir/designsystemet': minor
+---
+
+Fix crash when running CLI command `tokens build`:
+- add --verbose option to `tokens build` for easier debugging
+- `tokens build` crashed when run on result of `tokens create`
+
+Update tokens template used by CLI command `tokens create`
+- removes `ingress`, renames `paragraph` to `body`, and adds `xl` size
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -36,6 +36,8 @@ jobs:
           check_name: Unit Test Report
           check_annotations: true
           check_title_template: '{{FILE_NAME}} / {{TEST_NAME}}'
+      - name: Test CLI (create tokens, then build the theme)
+        run: yarn test:cli
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build storybook

diff --git a/apps/storefront/app/bloggen/2024/altinn-studio/page.mdx b/apps/storefront/app/bloggen/2024/altinn-studio/page.mdx
@@ -32,12 +32,10 @@ For at Team Altinn Studio skal nå sine mål om å skape et godt verktøy — m
 _"Det er viktig at det er mulig å utvide komponentene til det mer komplekse, fordi alle produkter skal løse et unikt behov i markedet, og ofte vil det forekomme situasjoner hvor mer spesialiserte komponenter er nødvendig. Hvis vi kan utvide eksisterende komponenter fra designsystemet, så vil vi kunne ivareta mye av tilgjengelighetskravene og visuell likhet med de grunnleggende komponentene uten å måtte legge inn for mye innsats."_
 
 <Card color='brand2'>
-  <CardContent>
-    David Øvrelid, Tech Lead i Altinn Studio, forklarer hvordan Altinn Studio
-    bruker Designsystemet. Artikkelen ble først publisert på Medium. [Les den
-    opprinnelige
-    artikkelen](https://davidovrelid.com/hvordan-vi-kan-ta-i-bruk-designsystemet-no-p%C3%A5-en-forusigbar-m%C3%A5te-3988980884a2)
-  </CardContent>
+  David Øvrelid, Tech Lead i Altinn Studio, forklarer hvordan Altinn Studio
+  bruker Designsystemet. Artikkelen ble først publisert på Medium. [Les den
+  opprinnelige
+  artikkelen](https://davidovrelid.com/hvordan-vi-kan-ta-i-bruk-designsystemet-no-p%C3%A5-en-forusigbar-m%C3%A5te-3988980884a2)
 </Card>
 <br />
 <br />

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -1,33 +1,19 @@
 .image {
-  margin: 0;
   aspect-ratio: 16/9;
 }
 
 @media screen and (min-width: 1024px) {
-  .card[data-featured='true'] .media {
-    padding-bottom: 0;
-  }
-
   .card[data-featured='true'] {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 
-  .card[data-featured='true'] .wrapper {
+  .card[data-featured='true'] > :last-child {
     display: flex;
-    flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
     padding: var(--ds-spacing-8) var(--ds-spacing-10);
   }
-
-  .card[data-featured='true'] .heading {
-    padding-top: 0;
-  }
-
-  .card[data-featured='true'] .footer {
-    padding-bottom: 0;
-  }
 }
 
 .tag {

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx b/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx
@@ -1,9 +1,6 @@
 import {
   Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardMedia,
+  CardBlock,
   Heading,
   Paragraph,
   Tag,
@@ -42,49 +39,38 @@ export const BlogCard = ({
 }: BlogCardProps) => {
   return (
     <Card
-      asChild
-      isLink
       data-featured={featured}
       className={cl(classes.card, className)}
       {...props}
     >
-      <Link href={href}>
-        <CardMedia className={classes.media}>
-          <img src={image} alt='' className={classes.image} />
-        </CardMedia>
-        <div className={classes.wrapper}>
-          <CardHeader className={classes.heading}>
-            {tagText && (
-              <Tag className={classes.tag} color={tagColor} size='sm'>
-                {tagText}
-              </Tag>
-            )}
-            <Heading level={level} size={featured ? 'lg' : 'sm'}>
-              {title}
-            </Heading>
-          </CardHeader>
-          <CardContent>
-            <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
-          </CardContent>
+      <CardBlock>
+        <img src={image} alt='' className={classes.image} />
+      </CardBlock>
+      <CardBlock>
+        {tagText && (
+          <Tag className={classes.tag} color={tagColor} size='sm'>
+            {tagText}
+          </Tag>
+        )}
+        <Heading level={level} size={featured ? 'lg' : 'sm'}>
+          <Link href={href}>{title}</Link>
+        </Heading>
+        <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
+        <Paragraph size={featured ? 'md' : 'xs'} className={classes.meta}>
           {author ||
             (date && (
-              <CardFooter className={classes.footer}>
-                <Paragraph
-                  size={featured ? 'md' : 'xs'}
-                  className={classes.meta}
-                >
-                  <span>{date}</span>
-                  {author && (
-                    <>
-                      <span aria-hidden className={classes.metaSquare} />
-                      <span>{author}</span>
-                    </>
-                  )}
-                </Paragraph>
-              </CardFooter>
+              <>
+                <span>{date}</span>
+                {author && (
+                  <>
+                    <span aria-hidden className={classes.metaSquare} />
+                    <span>{author}</span>
+                  </>
+                )}
+              </>
             ))}
-        </div>
-      </Link>
+        </Paragraph>
+      </CardBlock>
     </Card>
   );
 };

diff --git a/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx
@@ -37,64 +37,60 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn
 Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet.
 
 <Card color='brand3'>
-  <CardContent>
-    <Heading
-      level={3}
-      size='xs'
-    >
-      Gjeldende regelverk, WCAG 2.1
-    </Heading>
-    <ListUnordered>
-      <ListItem>
-        **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom
-        teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG
-        2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum)
-      </ListItem>
-      <ListItem>
-        **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle
-        presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot
-        farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig
-        innhold, WCAG 2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast)
-      </ListItem>
-    </ListUnordered>
-  </CardContent>
+  <Heading
+    level={3}
+    size='xs'
+  >
+    Gjeldende regelverk, WCAG 2.1
+  </Heading>
+  <ListUnordered>
+    <ListItem>
+      **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom
+      teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG
+      2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum)
+    </ListItem>
+    <ListItem>
+      **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle
+      presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot
+      farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig
+      innhold, WCAG 2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast)
+    </ListItem>
+  </ListUnordered>
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <CardContent>
-    <Heading
-      level={3}
-      size='xs'
-    >
-      Fremtidig eller strengere:
-    </Heading>
-    <ListUnordered>
-      <ListItem>
-        **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen
-        av tekst og bilder av tekst har et kontrastforhold på minst 7:1,
-        unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller
-        14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1
-        (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced)
-      </ListItem>
-      <ListItem>
-        **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til
-        fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1
-        mellom samme piksler i fokusert og ikke-fokusert tilstand.
-        [Understanding Success Criterion 2.4.13: Focus Appearance | WAI |
-        W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
-      </ListItem>
-      <ListItem>
-        **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst
-        (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og
-        bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA,
-        for å regne ut kontrasten.
-      </ListItem>
-    </ListUnordered>
-  </CardContent>
+  <Heading
+    level={3}
+    size='xs'
+  >
+    Fremtidig eller strengere:
+  </Heading>
+  <ListUnordered>
+    <ListItem>
+      **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen
+      av tekst og bilder av tekst har et kontrastforhold på minst 7:1,
+      unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller
+      14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1
+      (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced)
+    </ListItem>
+    <ListItem>
+      **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til
+      fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1
+      mellom samme piksler i fokusert og ikke-fokusert tilstand.
+      [Understanding Success Criterion 2.4.13: Focus Appearance | WAI |
+      W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
+    </ListItem>
+    <ListItem>
+      **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst
+      (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og
+      bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA,
+      for å regne ut kontrasten.
+    </ListItem>
+  </ListUnordered>
 </Card>
 
 ## Mer presis metode
@@ -132,31 +128,27 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u
 Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden.
 
 <Card color='brand3'>
-  <CardContent>
-    **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
-    _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
-    mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
-    eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
-    oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL
-    verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn
-    eller bakgrunn har ingen betydning.
-  </CardContent>
+  **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
+  _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
+  mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
+  eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
+  oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL
+  verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn
+  eller bakgrunn har ingen betydning.
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <CardContent>
-    **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
-    visuell-kontrast algoritme som kalles for APCA, det er fremdeles
-    fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
-    tekst, grafikk, forgrunn eller bakgrunn, i tillegg har også valg av font,
-    font-vekt og størrelse en innvirkning på hvilke kontrastverdier som er
-    godkjent. Forskjellige farger som i WCAG 2 ville oppnådd like
-    kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad
-    kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske
-    fargeverdien.
-  </CardContent>
+  **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
+  visuell-kontrast algoritme som kalles for APCA, det er fremdeles
+  fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
+  tekst, grafikk, forgrunn eller bakgrunn, i tillegg har også valg av font,
+  font-vekt og størrelse en innvirkning på hvilke kontrastverdier som er
+  godkjent. Forskjellige farger som i WCAG 2 ville oppnådd like
+  kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad
+  kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske
+  fargeverdien.
 </Card>
 
 ## Verktøy for å teste kontrastverdier
@@ -188,11 +180,9 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
 <br />
 <br />
 <Card color='brand1'>
-  <CardContent>
-    **Bidra til artikkelen?** <br />
-    Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
-    e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).
-  </CardContent>
+  **Bidra til artikkelen?** <br />
+  Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
+  e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).
 </Card>
 
 <Contributors

diff --git a/apps/storefront/app/monstre/feilmeldinger/page.mdx b/apps/storefront/app/monstre/feilmeldinger/page.mdx
@@ -155,10 +155,7 @@ Vi viser feilmeldingen under feltet med feil. Dette er det vanligste mønsteret,
 <Card
   color='brand1'
 >
-  <CardContent>
   Merk: Vi ønsker å holde oss oppdatert om andre anbefalinger om plassering, og har [pågående diskusjon om dette på Git](https://github.com/digdir/designsystemet/discussions/1684#discussioncomment-9339006).
-
-  </CardContent>
 </Card>
 
 ### Når skal vi vise en feilmelding?
@@ -244,12 +241,8 @@ Vi kan bruke disse aria-attributtene og rollene:
 - Vi setter `aria-invalid="true"` på felt med feil, for å si fra om at det er en feil der.
 - Vi bruker `aria-describedby` for å koble feilmelding til feltet.
 
-<Card
-  color='brand1'
->
-  <CardContent>
+<Card color='brand1'>
   Vi unngår inntill videre å bruke `aria-errormessage` da den ikke har full støtte av hjelpemidler per nå. Men vi kommer til å oppdatere retningslinjene om støtten blir bedre i fremtiden. [Se diskusjon på github](https://github.com/digdir/designsystemet/discussions/1684)
-  </CardContent>
 </Card>
 
 ### Gi automatiske beskjeder
@@ -274,12 +267,8 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 <br />
 
-<Card
-  color='brand3'
->
-  <CardContent>
-    Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-  </CardContent>
+<Card color='brand3'>
+  Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
 </Card>
 
 <Contributors