Merge branch 'digdir:next' into next

.changeset/clean-insects-move.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+SkipLink: Add css variables

.changeset/eight-dancers-deliver.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+ValidationMessage: fix icon abandoning the component when scrolling

.changeset/empty-pears-hide.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Accordion: Add css variable for chevron

.changeset/four-schools-wait.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Breadcrumbs: Add css variable for chevron

.changeset/friendly-cups-kiss.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Input: Sufficient color contrast for readonly

.changeset/hip-brooms-brush.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Alert: fix icon abandoning the component when scrolling

.changeset/hot-crews-perform.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Popover: Make sure arrow does not leave the popover

.changeset/kind-eyes-cheat.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Modal: Fix `onClose` not being called

.changeset/olive-tools-cry.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+
+---
+
+Tooltip: Add more variables

.changeset/plenty-singers-matter.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Field: Adds `<Field>` component wrapping and connecting internal form elements for better accessibility

.changeset/seven-tips-rest.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Avatar: Fix `aria-hidden` being wrongly added to a fragment

.changeset/strange-jars-compete.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Pagination: Add css variable for chevron

.changeset/three-moles-attack.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet": minor
+"@digdir/designsystemet-css": minor
+---
+
+Implemented a more flexible system of semantic border-radius tokens.

.changeset/twelve-onions-laugh.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions.

README.md

@@ -9,8 +9,6 @@
 
 <div align="center">
 
----
-
 </div>
 
 ## 📖 About Designsystemet
@@ -19,8 +17,6 @@ Designsystemet is a collection of important design elements, components and patt
 
 Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.
 
----
-
 ## 🔗 Links
 
 [Storybook](https://storybook.designsystemet.no/) - Preview for React components.
@@ -29,8 +25,6 @@ Our goal is to create consistent and user-friendly experiences in digital soluti
 
 [Theme](https://theme.designsystemet.no/) - Theme builder.
 
----
-
 ## 📦 Packages
 
 [`@digdir/designsystemet`](https://www.npmjs.com/package/@digdir/designsystemet) - CLI for Designsystemet.
@@ -47,8 +41,6 @@ Our goal is to create consistent and user-friendly experiences in digital soluti
 
 [`@digdir/design-system-tokens`](https://www.npmjs.com/package/@digdir/design-system-tokens) – Renamed to [`@digdir/designsystemet-theme`](https://www.npmjs.com/package/@digdir/designsystemet-theme)
 
----
-
 ## 🚀 Get started
 
 Follow these steps to get started with the React components.
@@ -112,14 +104,10 @@ import { Button } from '@digdir/designsystemet-react';
 
 `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` only needs to be imported once.
 
----
-
 ## 🫶 Contributing
 
 Learn how you can contribute to this project by reading our [Code of Conduct](./CODE_OF_CONDUCT.md) and [Contributing Guide](./CONTRIBUTING.md).
 
----
-
 ## 💪 Contributors
 
 We are lucky to have a great group of people who help with the design system.
@@ -128,8 +116,9 @@ We are lucky to have a great group of people who help with the design system.
   <img src="https://contrib.rocks/image?repo=digdir/designsystem" />
 </a>
 
----
+<br />
+<br />
 
-## 📃 License
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
 
-Designsystemet is [MIT licensed](./LICENSE).
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

apps/_components/src/ColorModal/ColorModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, Paragraph } from '@digdir/designsystemet-react';
+import { Heading, Modal, Paragraph } from '@digdir/designsystemet-react';
 import type { ColorNumber } from '@digdir/designsystemet/color';
 import {
   getColorNameFromNumber,
@@ -58,9 +58,12 @@ export const ColorModal = ({
         style={{
           maxWidth: '1050px',
         }}
+        backdropClose
       >
         <Modal.Block>
-          {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
+          <Heading size='xs'>
+            {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
+          </Heading>
         </Modal.Block>
         <Modal.Block className={classes.modalContent}>
           <div className={classes.description}>
@@ -88,13 +91,13 @@ export const ColorModal = ({
                 value={getCssVariable(namespace, weight)}
                 copyBtn
               />
-              {!namespace.includes('Base') && (
+
+              {weight !== 9 && weight !== 10 && weight !== 11 && (
                 <Field
                   label='Brukes mot:'
                   value={getColorCombinations(weight)}
                 />
               )}
-              <Field label='' value='Mer informasjon om fargen kommer.' />
             </div>
             <div
               className={classes.right}

apps/_components/src/ColorModal/colorModalUtils.ts

@@ -22,24 +22,28 @@ export const getColorDescription = ({
     description += ' er en bakgrunnsfarge som har et hint av farge i seg.';
   } else if (weight === 3) {
     description +=
-      ' brukes på flater som ligger oppå bakgrunnsfargene i en nøytral state. Fargen brukes i Card komponenten.';
+      ' brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.';
   } else if (weight === 4) {
     description +=
-      ' brukes på interaktive elementer som ligger oppå bakgrunnsfargene i en hover state.';
+      ' brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.';
   } else if (weight === 5) {
     description +=
-      ' brukes på interaktive elementer som ligger oppå bakgrunnsfargene i en active state.';
+      ' brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.';
   } else if (weight === 6) {
     description +=
-      ' er den lyseste border-fargen og brukes for å skille elementer fra hverandre. Fargen brukessom border-farge i Divider komponenten og i Tabeller.';
+      ' er den lyseste border-fargen og brukes for å skille elementer fra hverandre.';
   } else if (weight === 7) {
     description +=
-      ' er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene. Fargen brukes som border-farge i TextField komponenten.';
+      ' er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.';
   } else if (weight === 8) {
     description +=
-      ' er den mørkeste border-fargen som brukes når man ønsker god kontrast.';
+      ' er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.';
   } else if (weight === 9) {
-    description += ` er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.`;
+    description += ` fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.`;
+  } else if (weight === 10) {
+    description += `  kan brukes som hover farge på elementer som bruker Base Default fargen. `;
+  } else if (weight === 11) {
+    description += ` kan brukes som active farge på elementer som bruker Base Default fargen`;
   } else if (weight === 12) {
     description +=
       ' er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.';

apps/storefront/components/Footer/Footer.module.css → apps/_components/src/Footer/Footer.module.css

@@ -64,7 +64,7 @@
   }
 }
 
-.footer .logos img {
+.footer .logos svg {
   height: 26px;
   width: auto;
   margin-right: var(--ds-spacing-2);

apps/_components/src/Footer/Footer.tsx

@@ -0,0 +1,98 @@
+import { Button, Heading, Link, Paragraph } from '@digdir/designsystemet-react';
+import cl from 'clsx/lite';
+import Image from 'next/image';
+import NextLink from 'next/link';
+import { type ReactNode, forwardRef } from 'react';
+import { Container } from '../';
+
+import { Bronnoysund } from '../logos/Bronnoysund';
+import { Digdir } from '../logos/Digdir';
+import { Mattilsynet } from '../logos/Mattilsynet';
+import { Udir } from '../logos/Udir';
+import classes from './Footer.module.css';
+
+type LinkListItemProps = {
+  text: string;
+  url: string;
+  prefix?: ReactNode;
+};
+
+const getCurrentYear = () => {
+  const date = new Date();
+  return date.getFullYear();
+};
+
+const LinkList = (links: LinkListItemProps[]) => {
+  return (
+    <ul className={classes.links}>
+      {links.map((item, index) => (
+        <li key={index}>
+          <Link href={item.url} color='neutral' className={classes.link}>
+            {item.prefix}
+            {item.text}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+type FooterProps = {
+  centerLinks: LinkListItemProps[];
+  rightLinks: LinkListItemProps[];
+} & React.HTMLAttributes<HTMLElement>;
+
+export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
+  { centerLinks, rightLinks, className, ...rest },
+  ref,
+) {
+  return (
+    <footer
+      ref={ref}
+      className={cl(classes.footer, className)}
+      data-ds-color-mode='dark'
+      {...rest}
+    >
+      <div className={classes.top}>
+        <Container className={classes.container}>
+          <div>
+            <Heading size='xs' level={2} className={classes.title}>
+              Lages på tvers av offentlige etater:
+            </Heading>
+            <div className={classes.logos}>
+              <Digdir />
+              <Bronnoysund />
+              <Mattilsynet />
+              <Udir className={classes.udir} />
+            </div>
+            <Button asChild variant='secondary' color='neutral' size='sm'>
+              <NextLink
+                href='mailto:[email protected]'
+                className={classes.button}
+              >
+                Din etat? Ta kontakt!
+              </NextLink>
+            </Button>
+          </div>
+          <div>
+            <Heading size='xs' level={2} className={classes.title}>
+              Om nettstedet
+            </Heading>
+            {LinkList(centerLinks)}
+          </div>
+          <div>
+            <Heading size='xs' level={2} className={classes.title}>
+              Kom i kontakt med oss
+            </Heading>
+            {LinkList(rightLinks)}
+          </div>
+        </Container>
+      </div>
+      <div className={classes.bottom}>
+        <Container>
+          <Paragraph size='sm'>© {getCurrentYear()} Designsystemet</Paragraph>
+        </Container>
+      </div>
+    </footer>
+  );
+});

apps/_components/src/index.ts

@@ -6,3 +6,4 @@ export { Header } from './Header/Header';
 export { Figma } from './logos/Figma';
 export { Github } from './logos/Github';
 export { Slack } from './logos/Slack';
+export { Footer } from './Footer/Footer';