@helsenorge/designsystem-react 12.7.0 → 12.9.0

package/components/LinkList/styles.module.scss

@@ -15,70 +15,56 @@
 
   &--outline {
     &--neutral {
-      border: 1px solid var(--color-base-border-onlight);
+      border: 1px solid var(--component-listelements-border-neutral-normal);
     }
 
     &--blueberry {
-      border: 1px solid var(--core-color-blueberry-500);
+      border: 1px solid var(--component-listelements-border-blueberry-normal);
     }
 
     &--cherry {
-      border: 1px solid var(--core-color-cherry-400);
+      border: 1px solid var(--component-listelements-border-cherry-normal);
     }
 
     &--white {
-      border: 1px solid var(--color-base-border-onlight);
+      border: 1px solid var(--component-listelements-border-neutral-normal);
     }
   }
 
   &__list-item {
     &--line {
-      border-bottom: 1px solid var(--color-base-border-onlight);
+      border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
 
       &:first-of-type {
-        border-top: 1px solid var(--color-base-border-onlight);
+        border-top: 1px solid var(--component-listelements-border-neutral-normal);
       }
     }
 
     &--outline {
-      &--white {
-        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;
+      --border-color: var(--component-listelements-border-neutral-light);
 
-        &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        }
+      border-top: spacers.getSpacer(2xs) var(--border-color) solid;
+      border-left: spacers.getSpacer(2xs) var(--border-color) solid;
+      border-right: spacers.getSpacer(2xs) var(--border-color) solid;
+
+      &:last-of-type {
+        border-bottom: spacers.getSpacer(2xs) var(--border-color) solid;
       }
 
-      &--blueberry {
-        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;
+      &--white {
+        --border-color: var(--component-listelements-border-neutral-light);
+      }
 
-        &:last-of-type {
-          border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
-        }
+      &--blueberry {
+        --border-color: var(--component-listelements-border-blueberry-light);
       }
 
       &--cherry {
-        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: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
-        }
+        --border-color: var(--component-listelements-border-cherry-light);
       }
 
       &--neutral {
-        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: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
-        }
+        --border-color: var(--component-listelements-border-neutral-light);
       }
     }
   }
@@ -110,15 +96,15 @@
       }
 
       &--blueberry {
-        background-color: var(--core-color-blueberry-50);
+        background-color: var(--component-listelements-background-blueberry-light);
       }
 
       &--cherry {
-        background-color: var(--core-color-cherry-50);
+        background-color: var(--component-listelements-background-cherry-light);
       }
 
       &--neutral {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
       }
     }
 
@@ -134,20 +120,20 @@
       }
 
       &--blueberry {
-        border: 1px solid var(--core-color-blueberry-500);
+        border: 1px solid var(--component-listelements-border-blueberry-normal);
       }
 
       &--cherry {
-        border: 1px solid var(--core-color-cherry-400);
+        border: 1px solid var(--component-listelements-border-cherry-normal);
       }
 
       &--neutral {
-        border: 1px solid var(--color-base-border-onlight);
+        border: 1px solid var(--component-listelements-border-neutral-normal);
       }
 
       // Skal ikke brukes, men klassen er definert for enkelhets skyld
       &--white {
-        border: 1px solid var(--color-base-border-onlight);
+        border: 1px solid var(--component-listelements-border-neutral-normal);
       }
     }
 
@@ -186,41 +172,41 @@
     &--white:not(.link-list__anchor--outline) {
       // listeelement settes til div om man er i edit mode, og skal da ikke ha hover/active effekter
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-50);
+        background-color: var(--component-listelements-background-neutral-light);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-100);
+        background-color: var(--component-listelements-background-neutral-medium);
       }
     }
 
     &--blueberry:not(.link-list__anchor--outline) {
       &:hover:not(div) {
-        background-color: var(--core-color-blueberry-100);
+        background-color: var(--component-listelements-background-blueberry-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--color-action-background-ondark-hoverselected);
+        background-color: var(--component-listelements-background-blueberry-dark);
       }
     }
 
     &--cherry:not(.link-list__anchor--outline) {
       &:hover:not(div) {
-        background-color: var(--core-color-cherry-100);
+        background-color: var(--component-listelements-background-cherry-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-cherry-200);
+        background-color: var(--component-listelements-background-cherry-dark);
       }
     }
 
     &--neutral:not(.link-list__anchor--outline) {
       &:hover:not(div) {
-        background-color: var(--core-color-neutral-100);
+        background-color: var(--component-listelements-background-neutral-medium);
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-neutral-200);
+        background-color: var(--component-listelements-background-neutral-dark);
       }
     }
 
@@ -240,51 +226,51 @@
       }
 
       &--blueberry {
-        border-bottom: 1px solid var(--core-color-blueberry-500);
+        border-bottom: 1px solid var(--component-listelements-border-blueberry-normal);
 
         &:hover:not(div) {
-          background-color: var(--core-color-blueberry-50);
+          background-color: var(--component-listelements-background-blueberry-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-blueberry-100);
+          background-color: var(--component-listelements-background-blueberry-medium);
         }
       }
 
       &--cherry {
-        border-bottom: 1px solid var(--core-color-cherry-400);
+        border-bottom: 1px solid var(--component-listelements-border-cherry-normal);
 
         &:hover:not(div) {
-          background-color: var(--core-color-cherry-50);
+          background-color: var(--component-listelements-background-cherry-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-cherry-100);
+          background-color: var(--component-listelements-background-cherry-medium);
         }
       }
 
       &--neutral {
-        border-bottom: 1px solid var(--color-base-border-onlight);
+        border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
 
         &:hover:not(div) {
-          background-color: var(--core-color-neutral-50);
+          background-color: var(--component-listelements-background-neutral-light);
         }
 
         &:active:not(div) {
-          background-color: var(--core-color-neutral-100);
+          background-color: var(--component-listelements-background-neutral-medium);
         }
       }
     }
 
     &--new {
-      background-color: var(--core-color-blueberry-50) !important;
+      background-color: var(--component-listelements-background-blueberry-light) !important;
 
       &:hover:not(div) {
-        background-color: var(--core-color-blueberry-100) !important;
+        background-color: var(--component-listelements-background-blueberry-medium) !important;
       }
 
       &:active:not(div) {
-        background-color: var(--core-color-blueberry-200) !important;
+        background-color: var(--component-listelements-background-blueberry-dark) !important;
       }
     }
   }

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

@@ -31,6 +31,7 @@ export type Styles = {
   'link-list__anchor--white': string;
   'link-list__image-container': string;
   'link-list__list-item--line': string;
+  'link-list__list-item--outline': string;
   'link-list__list-item--outline--blueberry': string;
   'link-list__list-item--outline--cherry': string;
   'link-list__list-item--outline--neutral': string;

package/components/ListEditMode/styles.module.scss

@@ -18,6 +18,7 @@
     outline: none;
     padding: 0;
     margin: 4px;
+    cursor: pointer;
 
     &:focus-visible {
       outline: 4px solid var(--color-action-border-onlight-focus);

package/components/NotificationPanel/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { useUuid } from "../../hooks/useUuid.js";
 import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import { N as NotificationBadge } from "../../NotificationBadge.js";
@@ -37,6 +38,7 @@ const NotificationPanel = React__default.forwardRef((props, ref) => {
   } = props;
   const uuid = useUuid(labelId);
   const [expanderOpen, setExpanderOpen] = React__default.useState(expanderOpenFromStart);
+  const isMobile = useIsMobileBreakpoint();
   const renderContent = () => {
     const outlineVariant = compactVariant === "outline";
     const contentClasses = classNames(styles["notification-panel__content"]);
@@ -95,7 +97,7 @@ const NotificationPanel = React__default.forwardRef((props, ref) => {
           NotificationBadge,
           {
             variant,
-            size: compactVariant ? IconSize.XSmall : IconSize.Small,
+            size: compactVariant || isMobile ? IconSize.XSmall : IconSize.Small,
             className: styles["notification-panel__icon"]
           }
         ),

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["React"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -15,9 +15,6 @@
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-left: spacers.getSpacer(s);
     padding-right: spacers.getSpacer(m);
-    #{$panel}__icon {
-      margin-right: spacers.getSpacer(m);
-    }
   }
 
   &--compact {
@@ -36,7 +33,11 @@
     }
   }
   #{$panel}__icon {
-    margin-right: spacers.getSpacer(2xs);
+    margin-right: spacers.getSpacer(3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: spacers.getSpacer(2xs);
+    }
   }
 
   &--dismissable {
@@ -114,7 +115,11 @@
   &__close {
     order: 1;
     margin-left: auto;
-    padding-left: spacers.getSpacer(2xs);
+    padding-left: spacers.getSpacer(3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-left: spacers.getSpacer(2xs);
+    }
   }
 
   &__content {

package/components/Panel/Panel.d.ts

@@ -42,7 +42,7 @@ export interface PanelProps {
     /** Sets classes on the outermost container of the panel */
     className?: string;
     /** Action called when toggling expansion of ExpandedContent */
-    onExpand?: () => void;
+    onExpand?: (isExpanded?: boolean) => void;
     /** Sets the stacking order of the content boxes */
     stacking?: PanelStacking;
     /** Sets the data-testid attribute. */

package/designsystem-react.css

@@ -236,4 +236,14 @@
   --component-listelements-background-cherry-dark: #eec0a5;
   --component-listelements-border-cherry-normal: #d56147;
   --component-listelements-border-neutral-normal: #7d7c79;
+  --component-statusdot-graphics-banana-ondark: #f5e080;
+  --component-statusdot-graphics-banana-onlight: #ab7c00;
+  --component-statusdot-graphics-blueberry-ondark: #afdae3;
+  --component-statusdot-graphics-blueberry-onlight: #188097;
+  --component-statusdot-graphics-cherry-ondark: #f7e1d2;
+  --component-statusdot-graphics-cherry-onlight: #a31f0e;
+  --component-statusdot-graphics-kiwi-ondark: #9de2bf;
+  --component-statusdot-graphics-kiwi-onlight: #078141;
+  --component-statusdot-graphics-neutral-ondark: #f5f3f3;
+  --component-statusdot-graphics-neutral-onlight: #7d7c79;
 }

package/index.d.ts

@@ -3,6 +3,7 @@ export { useBreakpoint, Breakpoint } from './hooks/useBreakpoint';
 export { useFocusToggle } from './hooks/useFocusToggle';
 export { useFocusTrap } from './hooks/useFocusTrap';
 export { useHover } from './hooks/useHover';
+export { usePseudoClasses } from './hooks/usePseudoClasses';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver';
 export { useIsVisible } from './hooks/useIsVisible';
 export { useLayoutEvent } from './hooks/useLayoutEvent';

package/index.js

@@ -3,6 +3,7 @@ import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
 import { useFocusToggle } from "./hooks/useFocusToggle.js";
 import { useFocusTrap } from "./hooks/useFocusTrap.js";
 import { useHover } from "./hooks/useHover.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
 import { useIsVisible } from "./hooks/useIsVisible.js";
 import { useLayoutEvent } from "./hooks/useLayoutEvent.js";
@@ -38,6 +39,7 @@ export {
   useLayoutEvent,
   useOutsideEvent,
   usePrevious,
+  usePseudoClasses,
   useResizeObserver,
   useSize,
   useToggle,

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "12.7.0",
+  "version": "12.9.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/supernova/styles/colors.css

@@ -236,4 +236,14 @@
   --component-listelements-background-cherry-dark: #eec0a5;
   --component-listelements-border-cherry-normal: #d56147;
   --component-listelements-border-neutral-normal: #7d7c79;
+  --component-statusdot-graphics-banana-ondark: #f5e080;
+  --component-statusdot-graphics-banana-onlight: #ab7c00;
+  --component-statusdot-graphics-blueberry-ondark: #afdae3;
+  --component-statusdot-graphics-blueberry-onlight: #188097;
+  --component-statusdot-graphics-cherry-ondark: #f7e1d2;
+  --component-statusdot-graphics-cherry-onlight: #a31f0e;
+  --component-statusdot-graphics-kiwi-ondark: #9de2bf;
+  --component-statusdot-graphics-kiwi-onlight: #078141;
+  --component-statusdot-graphics-neutral-ondark: #f5f3f3;
+  --component-statusdot-graphics-neutral-onlight: #7d7c79;
 }

package/use-animate.js

@@ -1,4 +1,5 @@
 import { useRef, useEffect } from "react";
+import { c as clamp } from "./clamp.js";
 function useConstant(init) {
   const ref = useRef(null);
   if (ref.current === null) {
@@ -276,13 +277,6 @@ const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\
 const getValueAsType = (value, type) => {
   return type && typeof value === "number" ? type.transform(value) : value;
 };
-const clamp = (min, max, v) => {
-  if (v > max)
-    return max;
-  if (v < min)
-    return min;
-  return v;
-};
 const number = {
   test: (v) => typeof v === "number",
   parse: parseFloat,