@helsenorge/designsystem-react 12.11.2-beta.0 → 12.12.2

package/.storybook/main.ts

@@ -1,8 +1,17 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
 import path, { dirname, join } from 'path';
+
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 
+import type { StorybookConfig } from '@storybook/react-vite';
+
+// This part has been automatically migrated to valid ESM format by Storybook.
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
+
 const { base } = yargs(hideBin(process.argv).filter(x => x !== '--'))
   .options({
     base: {
@@ -27,12 +36,7 @@ const config: StorybookConfig = {
     },
   },
 
-  addons: [
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('storybook-addon-tag-badges'),
-  ],
+  addons: [getAbsolutePath('@storybook/addon-a11y'), getAbsolutePath('@storybook/addon-docs'), getAbsolutePath('@chromatic-com/storybook')],
 
   // Oppsett for å serve storybook fra subfolder hentet fra: https://github.com/storybookjs/storybook/issues/1291
   // This is to change configurations of building process of storybook's main frame

package/.storybook/manager.ts

@@ -1,6 +1,5 @@
 import { addons } from 'storybook/manager-api';
 import { create } from 'storybook/theming';
-import { defaultConfig, type TagBadgeParameters } from 'storybook-addon-tag-badges';
 
 import { palette } from '../src/theme/palette';
 
@@ -13,77 +12,4 @@ const theme = create({
 
 addons.setConfig({
   theme,
-  tagBadges: [
-    {
-      tags: 'breaking',
-      badge: {
-        text: 'Breaking',
-        style: {
-          backgroundColor: '#fcf2bf',
-          color: '#764f00',
-        },
-        tooltip: 'Breaking changes added to this component',
-      },
-    },
-    {
-      tags: 'not-supernova',
-      badge: {
-        text: 'Not in documentation',
-        style: {
-          backgroundColor: '#eec0a5',
-          color: '#912112',
-        },
-        tooltip: 'This component is not documented in Supernova',
-      },
-      display: {
-        sidebar: [],
-        toolbar: ['docs'],
-      },
-    },
-    {
-      tags: 'new',
-      badge: {
-        text: 'New',
-        style: {
-          backgroundColor: '#afdae3',
-          color: '#06596c',
-        },
-        tooltip: 'New component',
-      },
-    },
-    {
-      tags: 'beta',
-      badge: {
-        text: 'Beta',
-        style: {
-          backgroundColor: '#bf98f3',
-          color: '#4c1b8c',
-        },
-        tooltip: 'New component',
-      },
-    },
-    {
-      tags: 'deprecated',
-      badge: {
-        text: 'Deprecated',
-        style: {
-          backgroundColor: '#eec0a5',
-          color: '#912112',
-        },
-        tooltip: 'Deprecated component that will be removed in a future release',
-      },
-    },
-    {
-      tags: 'outdated',
-      badge: {
-        text: 'Outdated',
-        style: {
-          backgroundColor: '#d6d4d3',
-          color: '#474745',
-        },
-        tooltip: 'This component has new features in Figma that is not yet implemented',
-      },
-    },
-    ...defaultConfig,
-  ] satisfies TagBadgeParameters,
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "12.11.2-beta.0",
+  "version": "12.12.2",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -56,8 +56,7 @@
       "import": "./lib/utils/*.js"
     },
     "./scss/*": "./lib/scss/*",
-    "./fonts/*": "./lib/fonts/*",
-    "./package.json": "./package.json"
+    "./fonts/*": "./lib/fonts/*"
   },
   "scripts": {
     "start": "storybook dev",
@@ -94,12 +93,12 @@
     "motion": "^11.14.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@helsenorge/typed-scss-modules": "^9.0.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@storybook/addon-a11y": "^9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/react-vite": "^9.0.18",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.5",
+    "@storybook/react-vite": "^10.0.5",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -123,13 +122,17 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.79.5",
-    "storybook": "^9.0.18",
-    "storybook-addon-tag-badges": "^2.0.1",
+    "storybook": "^10.0.5",
     "style-dictionary": "^4.1.3",
     "token-transformer": "^0.0.33",
     "typescript": "~5.8.2",
     "vite": "^6.2.1",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^3.1.2"
+  },
+  "overrides": {
+    "@helsenorge/typed-scss-modules": {
+      "glob": "7.2.3"
+    }
   }
 }

package/src/components/Button/styles.module.scss

@@ -225,6 +225,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   line-height: 1.375rem;
   align-items: center;
   width: 100%;
+  min-width: 2.75rem;
   min-height: 2.75rem;
   box-sizing: border-box;
   outline: none;

package/src/components/ElementHeader/styles.module.scss

@@ -96,6 +96,10 @@
   &__chevron {
     grid-area: chevron;
 
+    svg {
+      fill: var(--color-action-graphics-onlight);
+    }
+
     &[data-parenttype='linklist'] {
       align-self: center;
       height: 100%;

package/src/components/Label/styles.module.scss

@@ -51,6 +51,8 @@
 .sublabel {
   @include fonts.sublabel;
 
+  color: var(--color-base-text-onlight-subdued);
+
   &--subdued {
     @include fonts.sublabel-subdued;
   }

package/src/components/LinkList/styles.module.scss

@@ -116,7 +116,7 @@
     &--fill-negative {
       // listeelement settes til div om man er i edit mode, og styles da via ListEditMode
       &:not(div) {
-        margin-top: spacers.getSpacer(s);
+        margin-top: spacers.getSpacer(2xs);
       }
 
       &--blueberry {

package/src/components/List/List.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Docs } from 'frankenstein-build-tools';
-import { action } from 'storybook/internal/actions';
+import { action } from 'storybook/actions';
 
 import List from './List';
 import { mediumLoremText } from '../../utils/loremtext';

package/src/components/PopMenu/PopMenu.tsx

@@ -6,8 +6,8 @@ import { AnalyticsId, IconSize } from '../../constants';
 import { useHover } from '../../hooks/useHover';
 import { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';
 import { useOutsideEvent } from '../../hooks/useOutsideEvent';
-import { getColor } from '../../theme/currys';
 import { isComponent } from '../../utils/component';
+import Button from '../Button';
 import Icon, { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
 import VerticalDots from '../Icons/VerticalDots';
@@ -36,7 +36,7 @@ export interface PopMenuProps {
   popOverClassName?: string;
   /** Adds custom classes to the element. */
   popMenuClassName?: string;
-  /** Changes responsive design for the trigger buttons. */
+  /** @deprecated Changes responsive design for the trigger buttons. */
   popMenuVariant?: PopMenuVariant;
   /** Sets the data-testid attribute for the button that opens. */
   openButtonTestId?: string;
@@ -58,7 +58,7 @@ export interface PopMenuProps {
 
 export const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {
   const triggerButtonRef = useRef<HTMLButtonElement>(null);
-  const iconRef = useRef<HTMLDivElement>(null);
+  const iconRef = useRef(null);
   const outerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const {
@@ -68,16 +68,12 @@ export const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {
     openButtonTestId,
     closeButtonTestId,
     popOverTestId,
-    popMenuVariant = PopMenuVariant.onWhite,
     openButtonAriaLabel,
     closeButtonAriaLabel,
     svgIcon,
     labelText,
     labelTextPosition = PopMenuLabelPosition.right,
   } = props;
-  const buttonClasses = classNames(styles['pop-menu-button'], {
-    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,
-  });
   const isMobile = useIsMobileBreakpoint();
 
   useOutsideEvent(outerRef, () => {
@@ -119,8 +115,7 @@ export const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {
     }
   };
 
-  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {
-    if (e) e.stopPropagation();
+  const toggleOpenOnClick = (): void => {
     setIsOpen(!isOpen);
   };
 
@@ -134,34 +129,25 @@ export const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {
   const openIcon = svgIcon ? (
     iconComponent
   ) : (
-    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />
+    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />
   );
 
-  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;
-
-  const triggerButton = (
-    <button
-      ref={triggerButtonRef}
-      data-testid={isOpen ? closeButtonTestId : openButtonTestId}
-      className={buttonClasses}
-      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}
-      aria-expanded={isOpen}
-      onClick={toggleOpenOnClick}
-      type="button"
-    >
-      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}
-      {
-        <div className={styles['pop-menu-button__icon-wrapper']} ref={iconRef}>
-          {isOpen ? closeIcon : openIcon}
-        </div>
-      }
-      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}
-    </button>
-  );
+  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;
 
   return (
-    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>
-      {triggerButton}
+    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>
+      <Button
+        variant="borderless"
+        aria-expanded={isOpen}
+        onClick={toggleOpenOnClick}
+        ref={triggerButtonRef}
+        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}
+        testId={isOpen ? closeButtonTestId : openButtonTestId}
+      >
+        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}
+        {isOpen ? closeIcon : openIcon}
+        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}
+      </Button>
       {isOpen && renderChildren()}
     </div>
   );

package/src/components/PopMenu/styles.module.scss

@@ -2,114 +2,6 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
 
-.pop-menu-button {
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 3rem;
-  min-width: 3rem;
-
-  &:focus {
-    border: 0.1875rem solid palette.$black;
-    box-shadow: none;
-    outline: none;
-  }
-
-  &__icon-wrapper {
-    display: flex;
-  }
-}
-
-html :focus > .pop-menu-button {
-  box-shadow: none;
-  border: solid;
-}
-
-.pop-menu-button :focus > .pop-menu-button {
-  box-shadow: none;
-}
-
-// overrides
-:focus > .pop-menu-button:hover {
-  box-shadow: none;
-}
-
-.pop-menu-button--on-white {
-  &:focus {
-    background-color: transparent;
-  }
-
-  &:active {
-    background-color: palette.$neutral50;
-    border: none;
-  }
-
-  &:hover {
-    background-color: palette.$neutral50;
-  }
-
-  &:active:hover {
-    background-color: transparent;
-  }
-
-  &:active:focus {
-    background-color: palette.$neutral50;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-
-.pop-menu-button--on-gray {
-  &:focus {
-    background-color: transparent;
-  }
-
-  &:active {
-    background-color: palette.$neutral100;
-    border: none;
-  }
-
-  &:hover {
-    background-color: palette.$neutral100;
-  }
-
-  &:active:hover {
-    background-color: transparent;
-  }
-
-  &:active:focus {
-    background-color: palette.$neutral100;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-
-.pop-menu-button--on-blueberry {
-  &:focus {
-    background-color: transparent;
-  }
-
-  &:active {
-    background-color: palette.$blueberry100;
-    border: none;
-  }
-
-  &:hover {
-    background-color: palette.$blueberry100;
-  }
-
-  &:active:hover {
-    background-color: transparent;
-  }
-
-  &:active:focus {
-    background-color: palette.$blueberry100;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-
 .pop-menu__pop-over {
   width: 20.875rem;
   padding: 0;

package/src/components/PopMenu/styles.module.scss.d.ts

@@ -1,10 +1,5 @@
 export type Styles = {
   'pop-menu__pop-over': string;
-  'pop-menu-button': string;
-  'pop-menu-button__icon-wrapper': string;
-  'pop-menu-button--on-blueberry': string;
-  'pop-menu-button--on-gray': string;
-  'pop-menu-button--on-white': string;
 };
 
 export type ClassNames = keyof Styles;

package/src/components/Toast/Toast.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Docs } from 'frankenstein-build-tools';
-import { action, HandlerFunction } from 'storybook/internal/actions';
+import { action, HandlerFunction } from 'storybook/actions';
 
 import Toast from './Toast';
 

package/src/resources/HN.Designsystem.FormFieldTag.nb-NO.json

@@ -4,6 +4,6 @@
   "optional": "Valgfritt",
   "allOptional": "Alle felt er valgfrie",
   "requiredRadiobuttonList": "Velg én",
-  "requiredCheckboxList": "Velg en eller flere",
+  "requiredCheckboxList": "Velg én eller flere",
   "requiredSingleCheckbox": "Må velges"
 }

package/src/resources/Resources.d.ts

@@ -112,7 +112,7 @@ export type HNDesignsystemFormFieldTag = {
    */
   requiredRadiobuttonList: string;
   /**
-   * Velg en eller flere
+   * Velg én eller flere
    */
   requiredCheckboxList: string;
   /**

package/src/scss/supernova/styles/colors.css

@@ -210,7 +210,7 @@
   --component-stickynote-background-error-dark: #eec0a5;
   --component-stickynote-background-error-medium: #f7e1d2;
   --component-stickynote-background-error-light: #fff2ea;
-  --color-base-text-onlight-subdued: #000000;
+  --color-base-text-onlight-subdued: #474745;
   --component-stickynote-background-fold-error-dark: #e39376;
   --component-stickynote-background-fold-error-light: #f7e1d2;
   --component-stickynote-background-fold-error-medium: #eec0a5;
@@ -246,4 +246,13 @@
   --component-statusdot-graphics-kiwi-onlight: #078141;
   --component-statusdot-graphics-neutral-ondark: #f5f3f3;
   --component-statusdot-graphics-neutral-onlight: #7d7c79;
+  --color-action-graphics-emphasized-onlight: #08667c;
+  --color-base-background-stroke-dark-cherry: #b62e1c;
+  --color-base-background-stroke-dark-blueberry: #126f87;
+  --color-base-background-stroke-dark-neutral: #000000;
+  --color-destructive-graphics-emphasized-onlight: #a31f0e;
+  --component-listelements-background-neutral-verydark: #bdbab9;
+  --component-listelements-background-blueberry-verydark: #7abecc;
+  --component-listelements-border-neutral-ondark: #ffffff;
+  --component-listelements-background-cherry-verydark: #e39376;
 }