@helsenorge/designsystem-react 12.11.1 → 12.12.2

package/__scripts__/new-component.js

@@ -0,0 +1,106 @@
+import { writeFile, mkdir } from 'fs/promises';
+import readline from 'readline';
+
+const rl = readline.createInterface({
+  input: process.stdin,
+
+  output: process.stdout,
+});
+
+const ask = str => new Promise(resolve => rl.question(str, resolve));
+
+const componentName = await ask('Hva skal komponenten hete? Eksempel: PromoPanel ');
+
+if (!/^[A-Z][a-z][a-zA-Z]+$/.test(componentName)) {
+  throw Error('Navnet må bruke PascalCase Button eller SpecialButton');
+}
+
+const componentDirectory = `./src/components/${componentName}`;
+
+await mkdir(componentDirectory);
+
+await writeFile(
+  `${componentDirectory}/index.ts`,
+  `import ${componentName} from './${componentName}';
+export * from './${componentName}';
+export default ${componentName};
+`
+);
+
+await writeFile(`${componentDirectory}/styles.module.scss`, '');
+
+await writeFile(
+  `${componentDirectory}/${componentName}.tsx`,
+  `import React from 'react';
+
+import styles from './styles.module.scss';
+
+export interface ${componentName}Props {
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+
+const ${componentName}: React.FC<${componentName}Props> = () => {
+  return null;
+};
+
+export default ${componentName};
+`
+);
+
+await writeFile(
+  `${componentDirectory}/${componentName}.test.tsx`,
+  `import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import ${componentName} from './${componentName}';
+
+describe('Gitt at ${componentName} skal vises', (): void => {
+  describe('Når ${componentName} vises', (): void => {
+    test('Så vises ${componentName}', (): void => {
+      render(<${componentName} />);
+    });
+  });
+});
+`
+);
+
+await writeFile(
+  `${componentDirectory}/${componentName}.stories.tsx`,
+  `import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react';
+
+import ${componentName} from './${componentName}';
+import { Docs } from 'frankenstein-build-tools';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/${componentName}',
+  component: ${componentName},
+  parameters: {
+    docs: {
+      description: {
+        component: 'Beskrivelse av ${componentName}',
+      },
+      page: (): React.JSX.Element => <Docs component={${componentName}} />,
+    },
+  },
+  args: {},
+  argTypes: {},
+} satisfies Meta<typeof ${componentName}>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: args => (
+      <${componentName} {...args} />
+  ),
+};
+`
+);
+
+rl.close();

package/chromatic.config.json

@@ -0,0 +1,7 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:671f7e04436ea3529af77b34",
+  "storybookBaseDir": "npm/designsystem",
+  "buildScriptName": "build-storybook",
+  "zip": true
+}

package/figma-token.config.json

@@ -0,0 +1,19 @@
+{
+  "source": ["data/design-tokens.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "src/scss/",
+      "files": [
+        {
+          "destination": "_figma-tokens.scss",
+          "format": "scss/variables",
+          "options": {
+            "outputReferences": true,
+            "showFileHeader": true
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,18 +1,86 @@
 {
   "name": "@helsenorge/designsystem-react",
-  "type": "module",
+  "sideEffects": false,
+  "private": false,
+  "version": "12.12.2",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "12.11.1",
   "author": "Helsenorge",
+  "maintainers": [
+    "Frankenstein"
+  ],
   "license": "MIT",
-  "dependencies": {
-    "@floating-ui/react": "^0.27.8",
-    "motion": "^11.14.3"
+  "type": "module",
+  "publishConfig": {
+    "directory": "lib",
+    "access": "public"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./components/Icons/*": {
+      "types": "./lib/components/Icons/*.d.ts",
+      "import": "./lib/components/Icons/*.js"
+    },
+    "./components/Illustrations/*": {
+      "types": "./lib/components/Illustrations/*.d.ts",
+      "import": "./lib/components/Illustrations/*.js"
+    },
+    "./components/*": {
+      "types": "./lib/components/*/index.d.ts",
+      "import": "./lib/components/*/index.js"
+    },
+    "./constants": {
+      "types": "./lib/constants.d.ts",
+      "import": "./lib/constants.js"
+    },
+    "./hooks/*": {
+      "types": "./lib/hooks/*.d.ts",
+      "import": "./lib/hooks/*.js"
+    },
+    "./theme/*": {
+      "types": "./lib/theme/*.d.ts",
+      "import": "./lib/theme/*.js"
+    },
+    "./utils/*": {
+      "types": "./lib/utils/*.d.ts",
+      "import": "./lib/utils/*.js"
+    },
+    "./scss/*": "./lib/scss/*",
+    "./fonts/*": "./lib/fonts/*"
+  },
+  "scripts": {
+    "start": "storybook dev",
+    "prebuild": "npm-run-all clean generate:iconnames generate:illustrationnames generate:cssdefinitions",
+    "build": "vite build",
+    "postbuild": "node __scripts__/link-root-scss.mjs",
+    "build-storybook": "storybook build -o dist",
+    "clean": "rimraf lib",
+    "generate:iconnames": "node __scripts__/generateIconNames.mjs",
+    "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
+    "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
+    "pregenerate:figmatokens": "git -C ../../../designtokens pull https://github.com/helsenorge/designtokens.git",
+    "generate:figmatokens": "token-transformer ../../../designtokens/tokens.json data/design-tokens.json hn-designsystem --resolveReferences=false",
+    "postgenerate:figmatokens": "style-dictionary build --config figma-token.config.json",
+    "eslint": "eslint \"src/**/*.{ts,tsx}\"",
+    "eslint:fix": "npm run eslint -- --fix",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "stylelint:fix": "npm run stylelint -- --fix",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "prettier:fix": "npm run prettier -- --write",
+    "pretypecheck": "tsc -v",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "new": "node __scripts__/new-component.js"
   },
   "peerDependencies": {
     "classnames": "^2.3.2",
@@ -20,5 +88,51 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "sideEffects": false
+  "dependencies": {
+    "@floating-ui/react": "^0.27.8",
+    "motion": "^11.14.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.2",
+    "@helsenorge/typed-scss-modules": "^9.0.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@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",
+    "@types/jest-when": "^3.5.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
+    "classnames": "^2.5.1",
+    "copyfiles": "^2.4.1",
+    "frankenstein-build-tools": "file:../build-tools",
+    "glob": "^11.0.0",
+    "jest-when": "^3.6.0",
+    "jsdom": "^26.0.0",
+    "normalize.css": "^8.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.79.5",
+    "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/__mocks__/IntersectionObserver.ts

@@ -0,0 +1,17 @@
+class IntersectionObserver {
+  observe(): void {
+    // do nothing
+  }
+  unobserve(): void {
+    // do nothing
+  }
+  disconnect(): void {
+    // do nothing
+  }
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  value: IntersectionObserver,
+});
+
+export default IntersectionObserver;

package/src/__mocks__/MutationObserver.ts

@@ -0,0 +1,14 @@
+class MutationObserver {
+  observe(): void {
+    // do nothing
+  }
+  disconnect(): void {
+    // do nothing
+  }
+}
+
+Object.defineProperty(window, 'MutationObserver', {
+  value: MutationObserver,
+});
+
+export default MutationObserver;

package/src/__mocks__/ResizeObserver.ts

@@ -0,0 +1,17 @@
+class ResizeObserver {
+  observe(): void {
+    // do nothing
+  }
+  unobserve(): void {
+    // do nothing
+  }
+  disconnect(): void {
+    // do nothing
+  }
+}
+
+Object.defineProperty(window, 'ResizeObserver', {
+  value: ResizeObserver,
+});
+
+export default ResizeObserver;

package/src/__mocks__/matchMedia.ts

@@ -0,0 +1,13 @@
+import { vi } from 'vitest';
+
+export const mockWindowMatchMedia = vi.fn().mockImplementation(() => ({
+  matches: true,
+  addListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: mockWindowMatchMedia,
+});

package/src/__mocks__/useHover.ts

@@ -0,0 +1,7 @@
+vi.mock('../hooks/useHover', () => ({
+  useHover: vi.fn().mockImplementation(ref => {
+    return { hoverRef: ref || { current: undefined }, isHovered: false };
+  }),
+}));
+
+export {};

package/src/__mocks__/useLayoutEvent.ts

@@ -0,0 +1,5 @@
+vi.mock('../hooks/useLayoutEvent', () => ({
+  useLayoutEvent: vi.fn(),
+}));
+
+export {};

package/src/__mocks__/useOutsideEvent.ts

@@ -0,0 +1,5 @@
+vi.mock('../hooks/useOutsideEvent', () => ({
+  useOutsideEvent: vi.fn(),
+}));
+
+export {};

package/src/__mocks__/usePseudoClasses.ts

@@ -0,0 +1,7 @@
+vi.mock('../hooks/usePseudoClasses', () => ({
+  usePseudoClasses: vi.fn().mockImplementation(ref => {
+    return { refObject: ref, isHovered: false, isFocused: false };
+  }),
+}));
+
+export {};

package/src/__mocks__/useSize.ts

@@ -0,0 +1,12 @@
+vi.mock('../hooks/useSize', () => ({
+  useSize: vi.fn().mockReturnValue({
+    height: 100,
+    width: 100,
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 100,
+  }),
+}));
+
+export {};

package/src/__mocks__/uuid.ts

@@ -0,0 +1,13 @@
+import * as uuidUtils from '../utils/uuid';
+
+const testId = {
+  id: 0,
+};
+
+/**
+ * Returnerer en unik, forutsigbar id hver gang uuid() kalles
+ */
+vi.spyOn(uuidUtils, 'uuid').mockImplementation(() => {
+  testId.id++;
+  return `testid-${testId.id}`;
+});

package/src/components/AnchorLink/AnchorLink.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+import { action } from 'storybook/actions';
+
+import AnchorLink from './AnchorLink';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/AnchorLink',
+  component: AnchorLink,
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => (
+        <Docs
+          component={AnchorLink}
+          supernovaLink={'https://frankenstein.helsenorge.design/latest/komponenter/anchor-link/bruk-lyuI2gRy'}
+        />
+      ),
+      description: {
+        component:
+          'AnchorLink kan bli brukt som et komponent for \\<a\\> tag eller \\<button\\> tag som skal ha en anchorlink styling.<br>.anchorlink-wrapper kan også bli brukt når det ikke er kontroll over markup som kommer inn.',
+      },
+    },
+  },
+  args: {
+    children: 'Anchorlink tekst',
+    target: '_parent',
+    href: 'https://www.helsenorge.no',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    href: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof AnchorLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <AnchorLink {...args}>{args.children}</AnchorLink>,
+};
+
+export const LongText: Story = {
+  render: args => (
+    <AnchorLink {...args}>
+      {
+        'Eiusmod veniam reprehenderit dolore magna tempor dolor reprehenderit reprehenderit ullamco sit in nulla qui. (Lang tekst - Skal wrappe).'
+      }
+    </AnchorLink>
+  ),
+};
+
+export const External: Story = {
+  render: args => (
+    <>
+      <AnchorLink {...args} target={'_blank'}>
+        {args.children}
+      </AnchorLink>
+      <br />
+      <br />
+      <AnchorLink {...args} target={'_blank'}>
+        {
+          'Eiusmod veniam reprehenderit dolore magna tempor dolor reprehenderit reprehenderit ullamco sit in nulla qui. (Lang tekst - Skal wrappe).'
+        }
+      </AnchorLink>
+    </>
+  ),
+};
+
+export const AsButton: Story = {
+  render: args => (
+    <p style={{ fontSize: '1.25rem' }}>
+      {'Dette er først en'}
+      <AnchorLink htmlMarkup={'a'} onClick={action('AnchorLink clicked!')} {...args}>
+        {'vanlig lenke i løpende tekst'}
+      </AnchorLink>
+      {'og nå kommer en'}
+      <AnchorLink htmlMarkup={'button'} onClick={action('AnchorLink clicked!')} {...args}>
+        {'button-lenke i løpende tekst som går over flere linjer'}
+      </AnchorLink>
+      {'og til slutt en'}
+      <AnchorLink htmlMarkup={'button'} onClick={action('AnchorLink clicked!')} {...args}>
+        {'kort'}
+      </AnchorLink>
+      {'button-lenke'}
+    </p>
+  ),
+};

package/src/components/AnchorLink/AnchorLink.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import AnchorLink from './AnchorLink';
+
+describe('Gitt at AnchorLink skal rendres', (): void => {
+  describe('Gitt at AnchorLink skal vises vanlig', (): void => {
+    test('Så rendres AnchorLink riktig', (): void => {
+      const { container } = render(<AnchorLink target={'_self'}>{'AnchorLink'}</AnchorLink>);
+      expect(container).toMatchSnapshot();
+
+      const svgElement = screen.queryByRole('img', { hidden: true });
+      expect(svgElement).not.toBeTruthy();
+    });
+  });
+
+  describe('Gitt at AnchorLink skal vises med className og id', (): void => {
+    test('Så rendres AnchorLink riktig', (): void => {
+      const { container } = render(
+        <AnchorLink target={'_self'} id={'custom-id'} className={'custom-classname'}>
+          {'AnchorLink'}
+        </AnchorLink>
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  describe('Gitt at AnchorLink skal vises som external', (): void => {
+    test('Så rendres AnchorLink riktig', (): void => {
+      const { container } = render(<AnchorLink target={'_blank'}>{'AnchorLink external'}</AnchorLink>);
+      expect(container).toMatchSnapshot();
+    });
+
+    test('Så har AnchorLink riktig rel-attributt', (): void => {
+      render(
+        <AnchorLink testId="target-test" target={'_blank'}>
+          {'AnchorLink external'}
+        </AnchorLink>
+      );
+      const component = screen.getByTestId('target-test');
+      expect(component).toBeVisible();
+      expect(component).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    test('Så har AnchorLink ArrowUpRight svg', (): void => {
+      render(<AnchorLink target={'_blank'}>{'AnchorLink external'}</AnchorLink>);
+
+      const svgElement = screen.getByRole('presentation', { hidden: true });
+      expect(svgElement).toBeTruthy();
+
+      // eslint-disable-next-line testing-library/no-node-access
+      const pathElement = svgElement.firstChild;
+      expect(pathElement).toHaveAttribute('d', 'M18.76 14.426v1.768h11.83L14.719 32.065l1.251 1.25 15.801-15.801v11.691h1.768V14.426z');
+    });
+  });
+
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(
+        <AnchorLink testId="bare-tester" href="/">
+          {'AnchorLink'}
+        </AnchorLink>
+      );
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+    });
+  });
+
+  describe('Når htmlMarkup er button', () => {
+    test('Skal kalles onClick-handler når man klikker på knappen', async () => {
+      const onClickMock = vi.fn();
+      render(
+        <AnchorLink htmlMarkup="button" onClick={onClickMock} href="#">
+          {'Lenketekst'}
+        </AnchorLink>
+      );
+
+      const link = screen.getByRole('button', { name: 'Lenketekst' });
+      await userEvent.click(link);
+      expect(onClickMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Når htmlMarkup er a', () => {
+    test('Skal kalles onClick-handler når man klikker på knappen', async () => {
+      const onClickMock = vi.fn();
+      render(
+        <AnchorLink htmlMarkup="a" onClick={onClickMock} href="#">
+          {'Lenketekst'}
+        </AnchorLink>
+      );
+
+      const link = screen.getByRole('link', { name: 'Lenketekst' });
+      await userEvent.click(link);
+      expect(onClickMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});