@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Label/styles.module.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as *;
 
 .label-wrapper {
-  margin-bottom: getSpacer(2xs);
-  line-height: $lineheight-size-xs;
+  margin-bottom: spacers.getSpacer(2xs);
+  line-height: font-settings.$lineheight-size-xs;
 
   @media (min-width: map.get($grid-breakpoints, sm)) {
-    line-height: $lineheight-size-sm;
+    line-height: font-settings.$lineheight-size-sm;
   }
 
   &--no-bottom-margin {
@@ -29,26 +29,14 @@
 }
 
 .label {
-  @include label;
+  @include fonts.label;
 
   &--subdued {
-    @include label-subdued;
-  }
-
-  &--sublabel {
-    display: block;
-    font-size: $font-size-xs;
-    line-height: 1.25rem;
-    color: $neutral800;
-
-    @media (min-width: map.get($grid-breakpoints, sm)) {
-      font-size: $font-size-sm;
-      line-height: $lineheight-size-xs;
-    }
+    @include fonts.label-subdued;
   }
 
   &--on-dark {
-    color: $white;
+    color: palette.$white;
   }
 
   &::after {
@@ -60,6 +48,22 @@
   }
 }
 
+.sublabel {
+  @include fonts.sublabel;
+
+  &--subdued {
+    @include fonts.sublabel-subdued;
+  }
+
+  &--on-dark {
+    color: palette.$white;
+  }
+
+  &::after {
+    content: ' ';
+  }
+}
+
 .after-label-children {
-  padding-left: getSpacer(xs);
+  padding-left: spacers.getSpacer(xs);
 }

package/components/Label/styles.module.scss.d.ts

@@ -4,11 +4,13 @@ export type Styles = {
   label__texts: string;
   'label--on-dark': string;
   'label--subdued': string;
-  'label--sublabel': string;
   'label-content-wrapper': string;
   'label-wrapper': string;
   'label-wrapper--after-label-children': string;
   'label-wrapper--no-bottom-margin': string;
+  sublabel: string;
+  'sublabel--on-dark': string;
+  'sublabel--subdued': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/LinkList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 .link-list {
@@ -22,42 +22,42 @@
 
     &--outline {
       &--white {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
 
       &--blueberry {
-        border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
         }
       }
 
       &--cherry {
-        border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
         }
       }
 
       &--neutral {
-        border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
-        border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
+        border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
 
         &:last-of-type {
-          border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
+          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
         }
       }
     }
@@ -100,7 +100,7 @@
 
     &--fill,
     &--fill-negative {
-      margin-top: getSpacer(s);
+      margin-top: spacers.getSpacer(s);
     }
 
     &--fill-negative {
@@ -108,34 +108,34 @@
     }
 
     &--small {
-      font-size: $font-size-xs;
-      line-height: $lineheight-size-xs;
+      font-size: font-settings.$font-size-xs;
+      line-height: font-settings.$lineheight-size-xs;
     }
 
     &--medium {
-      font-size: $font-size-sm;
-      line-height: $lineheight-size-sm;
+      font-size: font-settings.$font-size-sm;
+      line-height: font-settings.$lineheight-size-sm;
     }
 
     &--large {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
+      font-size: font-settings.$font-size-md;
+      line-height: font-settings.$lineheight-size-md;
     }
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       &--small {
-        font-size: $font-size-sm;
-        line-height: $lineheight-size-sm;
+        font-size: font-settings.$font-size-sm;
+        line-height: font-settings.$lineheight-size-sm;
       }
 
       &--medium {
-        font-size: $font-size-md;
-        line-height: $lineheight-size-md;
+        font-size: font-settings.$font-size-md;
+        line-height: font-settings.$lineheight-size-md;
       }
 
       &--large {
-        font-size: $font-size-lg;
-        line-height: $lineheight-size-lg;
+        font-size: font-settings.$font-size-lg;
+        line-height: font-settings.$lineheight-size-lg;
       }
     }
 

package/components/List/styles.module.scss

@@ -1,14 +1,14 @@
-@import '../../scss/spacers';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-mixins' as fonts;
 
 .list {
   $list: &;
 
-  margin-top: 0;
-  margin-bottom: 0;
+  @include fonts.text-list;
 
   &--margin {
-    margin-top: getSpacer(s);
-    margin-bottom: getSpacer(s);
+    margin-top: spacers.getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 
   &--bullet {
@@ -57,11 +57,11 @@
 
   &__item {
     > #{$list} {
-      margin-top: getSpacer(2xs);
+      margin-top: spacers.getSpacer(2xs);
     }
   }
 
   &__item:not(:last-child) {
-    margin-bottom: getSpacer(2xs);
+    margin-bottom: spacers.getSpacer(2xs);
   }
 }

package/components/ListHeader/styles.module.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .list-header {
   display: grid;
   grid-template:
     'icon text badge chevron' 4rem
     '. text . .' auto / min-content auto min-content min-content;
-  column-gap: getSpacer(2xs);
-  margin-left: getSpacer(2xs);
-  margin-right: getSpacer(2xs);
+  column-gap: spacers.getSpacer(2xs);
+  margin-left: spacers.getSpacer(2xs);
+  margin-right: spacers.getSpacer(2xs);
   width: 100%;
   height: 100%;
   text-align: left;
@@ -38,12 +38,12 @@
     }
 
     &--spacing {
-      margin-left: getSpacer(2xs);
+      margin-left: spacers.getSpacer(2xs);
     }
 
     :focus > &,
     :focus-visible > & {
-      border-color: $black;
+      border-color: palette.$black;
     }
   }
 

package/components/Loader/styles.module.scss

@@ -1,6 +1,6 @@
-@import '../../scss/spacers';
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
 
 @mixin keyframes($name) {
   @keyframes #{$name} {
@@ -48,7 +48,7 @@
 
   &--inline {
     align-self: center;
-    padding-left: getSpacer(2xs);
+    padding-left: spacers.getSpacer(2xs);
   }
 
   &--overlay {
@@ -58,7 +58,7 @@
   }
 
   &--overlay-screen {
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     position: fixed;
     inset: 0;
   }
@@ -67,7 +67,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     height: 100%;
     width: 100%;
   }
@@ -102,7 +102,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    background-color: $blueberry500;
+    background-color: palette.$blueberry500;
     border-radius: 50%;
 
     // Sets a form of easing animation curve
@@ -124,31 +124,31 @@
     }
 
     &--banana {
-      background-color: $banana500;
+      background-color: palette.$banana500;
     }
 
     &--cherry {
-      background-color: $cherry500;
+      background-color: palette.$cherry500;
     }
 
     &--kiwi {
-      background-color: $kiwi500;
+      background-color: palette.$kiwi500;
     }
 
     &--neutral {
-      background-color: $neutral500;
+      background-color: palette.$neutral500;
     }
 
     &--plum {
-      background-color: $plum500;
+      background-color: palette.$plum500;
     }
 
     &--black {
-      background-color: $black;
+      background-color: palette.$black;
     }
 
     &--white {
-      background-color: $white;
+      background-color: palette.$white;
     }
 
     // Scales up the first dot

package/components/MaxCharacters/styles.module.scss

@@ -1,28 +1,28 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .max-characters {
   display: flex;
   justify-content: flex-end;
-  padding-top: getSpacer(2xs);
+  padding-top: spacers.getSpacer(2xs);
   padding-right: 2px;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    line-height: $lineheight-size-md;
-    font-size: $font-size-md;
+    line-height: font-settings.$lineheight-size-md;
+    font-size: font-settings.$font-size-md;
   }
 
   &--on-dark {
-    color: $white;
+    color: palette.$white;
   }
 
   &--invalid {
-    color: $cherry600;
+    color: palette.$cherry600;
     font-weight: 600;
   }
 }

package/components/Modal/index.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect } from "react";
+import React__default, { useEffect } from "react";
 import classNames from "classnames";
 import { ZIndex, AnalyticsId, IconSize } from "../../constants.js";
 import { useFocusTrap } from "../../hooks/useFocusTrap.js";
 import { useIsVisible } from "../../hooks/useIsVisible.js";
+import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
 import { palette } from "../../theme/palette.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import { u as uuid } from "../../uuid.js";
 import { B as Button } from "../../Button.js";
 import { C as Close } from "../../Close.js";
@@ -44,7 +46,7 @@ const getIcon = (variant, icon) => {
     return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: variantIcon });
   }
   if (icon) {
-    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: React.cloneElement(icon, {
+    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: React__default.cloneElement(icon, {
       size: IconSize.Small
     }) });
   }
@@ -60,14 +62,15 @@ const Modal = (props) => {
     size = "large",
     zIndex = ZIndex.Modal
   } = props;
-  const topContent = React.useRef(null);
-  const modalContentRef = React.useRef(null);
-  const dialogRef = React.useRef(null);
+  const topContent = React__default.useRef(null);
+  const modalContentRef = React__default.useRef(null);
+  const dialogRef = React__default.useRef(null);
   useFocusTrap(dialogRef, true);
   const topContentVisible = useIsVisible(topContent);
-  const bottomContent = React.useRef(null);
+  const bottomContent = React__default.useRef(null);
   const bottomContentVisible = useIsVisible(bottomContent);
   const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;
+  useReturnFocusOnUnmount(dialogRef);
   function handleKeyboardEvent(e) {
     if (e.key === "Escape" && props.onClose) {
       e.stopPropagation();
@@ -87,10 +90,9 @@ const Modal = (props) => {
     document.body.style.removeProperty("overflow");
   }
   const imageView = variant === "image";
-  const overlayRef = React.useRef(null);
+  const overlayRef = React__default.useRef(null);
   const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess;
-  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : void 0;
-  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : void 0;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });
   useEffect(() => {
     const overlayElement = overlayRef.current;
     disableBodyScroll();
@@ -130,79 +132,66 @@ const Modal = (props) => {
       "data-testid": props.testId,
       "data-analyticsid": AnalyticsId.Modal,
       style: { zIndex },
-      children: /* @__PURE__ */ jsx("div", { className: styles.align, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: dialogClasses,
-          role: "dialog",
-          "aria-modal": "true",
-          tabIndex: -1,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          ref: dialogRef,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], {
-                  [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable
-                })
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: classNames(styles.modal__contentWrapper, {
-                  [styles["modal__contentWrapper--image"]]: imageView
-                }),
-                tabIndex: contentIsScrollable ? 0 : void 0,
-                role: contentIsScrollable ? "region" : void 0,
-                "aria-label": contentIsScrollable ? ariaLabel : void 0,
-                "aria-labelledby": contentIsScrollable ? ariaLabelledBy : void 0,
-                ref: modalContentRef,
-                children: [
-                  !props.noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modal__closeWrapper, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.modal__closeWrapper__close), children: /* @__PURE__ */ jsx(Close, { onClick: props.onClose, ariaLabel: props.ariaLabelCloseBtn }) }) }),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`], {
-                        [styles["modal__contentWrapper__scroll--image"]]: imageView
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx("div", { ref: topContent }),
-                        /* @__PURE__ */ jsxs("div", { className: styles.modal__contentWrapper__title, children: [
-                          getIcon(variant, props.icon),
-                          /* @__PURE__ */ jsx(Title, { id: ariaLabelledBy, htmlMarkup: "h3", appearance: "title3", className: titleClasses, children: props.title }),
-                          props.afterTitleChildren && /* @__PURE__ */ jsx("div", { className: styles["modal__afterTitleChildren"], children: props.afterTitleChildren })
-                        ] }),
-                        imageView && /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsx("div", { className: styles["modal__contentWrapper__imageWrapper"], children: props.children }),
-                          /* @__PURE__ */ jsx("span", { className: styles["modal__contentWrapper__imageDescription"], children: props.description })
-                        ] }),
-                        !imageView && props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
-                        !imageView && !props.children && /* @__PURE__ */ jsx("p", { className: styles.modal__description, children: props.description }),
-                        /* @__PURE__ */ jsx("div", { ref: bottomContent })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], {
-                  [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable
-                })
-              }
-            ),
-            showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
-              props.onSuccess && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
-              props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText })
-            ] })
-          ]
-        }
-      ) })
+      children: /* @__PURE__ */ jsx("div", { className: styles.align, children: /* @__PURE__ */ jsxs("div", { className: dialogClasses, role: "dialog", "aria-modal": "true", tabIndex: -1, ...ariaLabelAttributes, ref: dialogRef, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], {
+              [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(styles.modal__contentWrapper, {
+              [styles["modal__contentWrapper--image"]]: imageView
+            }),
+            tabIndex: contentIsScrollable ? 0 : void 0,
+            role: contentIsScrollable ? "region" : void 0,
+            ...contentIsScrollable ? ariaLabelAttributes : {},
+            ref: modalContentRef,
+            children: [
+              !props.noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modal__closeWrapper, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.modal__closeWrapper__close), children: /* @__PURE__ */ jsx(Close, { onClick: props.onClose, ariaLabel: props.ariaLabelCloseBtn }) }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`], {
+                    [styles["modal__contentWrapper__scroll--image"]]: imageView
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { ref: topContent }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.modal__contentWrapper__title, children: [
+                      getIcon(variant, props.icon),
+                      /* @__PURE__ */ jsx(Title, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: "h3", appearance: "title3", className: titleClasses, children: props.title }),
+                      props.afterTitleChildren && /* @__PURE__ */ jsx("div", { className: styles["modal__afterTitleChildren"], children: props.afterTitleChildren })
+                    ] }),
+                    imageView && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { className: styles["modal__contentWrapper__imageWrapper"], children: props.children }),
+                      /* @__PURE__ */ jsx("span", { className: styles["modal__contentWrapper__imageDescription"], children: props.description })
+                    ] }),
+                    !imageView && props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
+                    !imageView && !props.children && /* @__PURE__ */ jsx("p", { className: styles.modal__description, children: props.description }),
+                    /* @__PURE__ */ jsx("div", { ref: bottomContent })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], {
+              [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable
+            })
+          }
+        ),
+        showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
+          props.onSuccess && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
+          props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText })
+        ] })
+      ] }) })
     }
   ) });
   if (props.printable) {