@helsenorge/lightbox 8.0.0

package/__scripts__/entries.js

@@ -0,0 +1,23 @@
+import { globSync } from 'glob';
+
+const getEntryName = name => {
+  return name.replace(/^src[/\\]/, '').replace(/\.tsx?$/, '');
+};
+
+const createEntries = (entryList, entry) => {
+  const name = getEntryName(entry);
+
+  if (name in entryList) {
+    throw new Error(`${name} finnes flere ganger i listen med entries`);
+  }
+  entryList[name] = entry;
+
+  return entryList;
+};
+
+export const alwaysIgnore = ['**/__snapshots__/**/*', '**/*.stories.tsx', '**/*.test.tsx', '**/*.scss', '**/*.scss.d.ts', '**/*.d.ts'];
+
+const components = globSync(`src/components/**/index.{ts,tsx}`, { ignore: alwaysIgnore });
+const hooksAndExtras = globSync(`src/**/*.{ts,tsx}`, { ignore: [...alwaysIgnore, 'src/components/**/*'] });
+
+export const entries = [...components, ...hooksAndExtras].sort((a, b) => a.localeCompare(b)).reduce(createEntries, {});

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@helsenorge/lightbox",
+  "sideEffects": false,
+  "private": false,
+  "version": "8.0.0",
+  "description": "The official Helsenorge lightbox.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/helsenorge/designsystem.git"
+  },
+  "homepage": "https://helsenorge.design",
+  "author": "Helsenorge",
+  "maintainers": [
+    "ROX"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "directory": "lib",
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "npm-run-all clean generate:cssdefinitions generate:tsdefinitions",
+    "build": "vite build",
+    "clean": "rimraf lib types",
+    "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
+    "generate:tsdefinitions": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir types",
+    "eslint": "eslint \"src/**/*.{js,jsx,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"
+  },
+  "peerDependencies": {
+    "@helsenorge/designsystem-react": "^8.0.0",
+    "classnames": "^2.5.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@helsenorge/designsystem-react": "^8.0.0",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-istanbul": "^2.0.5",
+    "@vitest/coverage-v8": "^2.0.5",
+    "bootstrap": "^4.6.2",
+    "classnames": "^2.5.1",
+    "jsdom": "^24.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typed-scss-modules": "^8.0.1",
+    "typescript": "~5.5.4",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
+  }
+}

package/src/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export {};

package/src/components/LightBox/LightBox.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { StoryObj, Meta } from '@storybook/react';
+
+import Docs from '@helsenorge/designsystem-react/docs';
+
+import LightBox from './LightBox';
+
+const meta = {
+  title: '@helsenorge/lightbox/LightBox',
+  component: LightBox,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Beskrivelse av LightBox',
+      },
+      page: (): React.JSX.Element => <Docs component={LightBox} />,
+    },
+  },
+  args: {
+    ariaLabelCloseButton: 'Lukk Lightbox',
+    ariaLabelLeftArrow: 'Forrige bilde',
+    ariaLabelLightBox: 'Bildevisning',
+    ariaLabelRightArrow: 'Neste bilde',
+    ariaLabelCloseTextBox: 'Lukk tekstboks',
+    ariaLabelOpenTextBox: 'Åpne tekstboks',
+    ariaLabelZoomIn: 'Zoom inn',
+    ariaLabelZoomOut: 'Zoom ut',
+    ariaLabelZoomSlider: 'Zoom',
+    closeTextAfterSeconds: 3,
+    imageAlt: 'A random cat',
+    imageSrc: 'https://loremflickr.com/640/480',
+    testId: 'lightBox',
+    imageText: 'En søt pus eller kanskje flere',
+    onClose: action('Close button clicked'),
+    onLeftArrowClick: action('Left arrow clicked'),
+    onRightArrowClick: action('Right arrow clicked'),
+  },
+  argTypes: {},
+} satisfies Meta<typeof LightBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <LightBox {...args} />,
+};
+
+export const LangBildetekst: Story = {
+  render: args => (
+    <LightBox
+      {...args}
+      imageText={
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu turpis posuere, dignissim ex at, interdum metus. Etiam efficitur ut lectus et condimentum. Suspendisse ornare suscipit metus sit amet luctus. Quisque risus orci, molestie sit amet tempus non, semper a ligula. Etiam volutpat scelerisque magna vel feugiat. Sed ac venenatis justo. Aliquam iaculis ante a eros sagittis, id gravida felis placerat. Cras luctus mi quam, non venenatis lorem condimentum vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer nulla sem, placerat non blandit ac, interdum vel augue. Nulla fermentum orci non augue pulvinar, sed posuere neque scelerisque. Aenean pulvinar commodo lorem vel consectetur. Nam augue lectus, tempus vitae finibus id, dignissim id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar commodo lorem vel consectetur. Nam augue lectus, tempus vitae finibus id, dignissim id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+      }
+      closeTextAfterSeconds={undefined}
+    />
+  ),
+};

package/src/components/LightBox/LightBox.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import LightBox from './LightBox';
+
+describe('Gitt at LightBox skal vises', (): void => {
+  describe('Når LightBox vises', (): void => {
+    test('Så vises LightBox', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton={''}
+          ariaLabelLeftArrow={''}
+          ariaLabelRightArrow={''}
+          ariaLabelCloseTextBox={''}
+          ariaLabelOpenTextBox={''}
+          imageAlt={''}
+          imageSrc={''}
+          onClose={() => null}
+          ariaLabelZoomOut={''}
+          ariaLabelZoomIn={''}
+        />
+      );
+    });
+
+    test('Så vises lukkeknapp med riktig label', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton="Lukk"
+          ariaLabelLeftArrow=""
+          ariaLabelRightArrow=""
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={() => null}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+        />
+      );
+
+      const closeButton = screen.getByLabelText('Lukk');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    test('Så vises begge pilknapper når callback er gitt', (): void => {
+      render(
+        <LightBox
+          ariaLabelCloseButton=""
+          ariaLabelLeftArrow="Forrige bilde"
+          onLeftArrowClick={() => null}
+          ariaLabelRightArrow="Neste bilde"
+          onRightArrowClick={() => null}
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={() => null}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+        />
+      );
+
+      const rightArrow = screen.getByLabelText('Neste bilde');
+      const leftArrow = screen.getByLabelText('Forrige bilde');
+      expect(rightArrow).toBeInTheDocument();
+      expect(leftArrow).toBeInTheDocument();
+    });
+
+    test('Så blir onClose funksjonen kalt når lukkeknappen trykkes', (): void => {
+      const onCloseMock = vi.fn();
+      render(
+        <LightBox
+          ariaLabelCloseButton="Lukk"
+          ariaLabelLeftArrow=""
+          ariaLabelRightArrow=""
+          ariaLabelCloseTextBox=""
+          ariaLabelOpenTextBox=""
+          imageAlt=""
+          imageSrc=""
+          onClose={onCloseMock}
+          ariaLabelZoomOut=""
+          ariaLabelZoomIn=""
+        />
+      );
+      const closeButton = screen.getByLabelText('Lukk');
+      fireEvent.click(closeButton);
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/LightBox/LightBox.tsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import { TransformWrapper, TransformComponent, useTransformComponent } from 'react-zoom-pan-pinch';
+
+import Icon from '@helsenorge/designsystem-react/components/Icon';
+import ChevronLeft from '@helsenorge/designsystem-react/components/Icons/ChevronLeft';
+import ChevronRight from '@helsenorge/designsystem-react/components/Icons/ChevronRight';
+import ChevronsDown from '@helsenorge/designsystem-react/components/Icons/ChevronsDown';
+import ChevronsUp from '@helsenorge/designsystem-react/components/Icons/ChevronsUp';
+import Minus from '@helsenorge/designsystem-react/components/Icons/Minus';
+import PlusSmall from '@helsenorge/designsystem-react/components/Icons/PlusSmall';
+import X from '@helsenorge/designsystem-react/components/Icons/X';
+import { IconSize, KeyboardEventKey, ZIndex } from '@helsenorge/designsystem-react/constants';
+import { useSize } from '@helsenorge/designsystem-react/hooks/useSize';
+
+import { useKeyboardEvent } from '@helsenorge/designsystem-react';
+
+import MiniSlider from './MiniSlider';
+
+import styles from './styles.module.scss';
+
+export interface LightBoxProps {
+  /** Aria label for the close button */
+  ariaLabelCloseButton: string;
+  /** Aria label for the text box button when its open */
+  ariaLabelCloseTextBox: string;
+  /** Aria label for the left arrow button */
+  ariaLabelLeftArrow: string;
+  /** Aria label for the full modal describing what the modal contains */
+  ariaLabelLightBox: string;
+  /** Aria label for the right arrow button */
+  ariaLabelRightArrow: string;
+  /** Aria label for the text box button when its closed */
+  ariaLabelOpenTextBox: string;
+  /** Aria label for the zoom in button */
+  ariaLabelZoomIn: string;
+  /** Aria label for the zoom out button */
+  ariaLabelZoomOut: string;
+  /** Aria label for the slider input component */
+  ariaLabelZoomSlider: string;
+  /** If set the text box closes automatically after the given seconds */
+  closeTextAfterSeconds?: number;
+  /** Alt text for the image */
+  imageAlt: string;
+  /** Source of the image that will be shown */
+  imageSrc: string;
+  /** The text for the image that shows in the textbox */
+  imageText?: string;
+  /** Function is called when user clicks the close button */
+  onClose: () => void;
+  /** Function is called when user clicks the left arrow button. If not given the arrow will not show. */
+  onLeftArrowClick?: () => void;
+  /** Function is called when user clicks the right arrow button. If not given the arrow will not show. */
+  onRightArrowClick?: () => void;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+
+const LightBox: React.FC<LightBoxProps> = ({
+  ariaLabelCloseButton,
+  ariaLabelLeftArrow,
+  ariaLabelLightBox,
+  ariaLabelRightArrow,
+  ariaLabelCloseTextBox,
+  ariaLabelOpenTextBox,
+  ariaLabelZoomIn,
+  ariaLabelZoomOut,
+  ariaLabelZoomSlider,
+  closeTextAfterSeconds,
+  imageAlt,
+  imageSrc,
+  imageText,
+  onClose,
+  onLeftArrowClick,
+  onRightArrowClick,
+  testId,
+}) => {
+  const [imageTextOpen, setImageTextOpen] = React.useState(true);
+  const lightBoxRef = useRef<HTMLDivElement>(null);
+  const textBoxRef = useRef<HTMLParagraphElement>(null);
+  const { height: textBoxHeight = 0 } = useSize(textBoxRef) || {};
+  const [zoom, setZoom] = useState(1.0);
+
+  useKeyboardEvent(lightBoxRef, onClose, [KeyboardEventKey.Escape]);
+
+  const updateStates = (newZoom: number): void => {
+    if (zoom === newZoom) return;
+    setZoom(newZoom);
+  };
+
+  useEffect(() => {
+    if (!closeTextAfterSeconds) return;
+    const timer = setTimeout(() => {
+      setImageTextOpen(false);
+    }, closeTextAfterSeconds * 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      data-testid={testId}
+      className={styles.lightBox}
+      style={{ zIndex: ZIndex.OverlayScreen }}
+      role="dialog"
+      aria-modal={true}
+      aria-label={ariaLabelLightBox}
+      ref={lightBoxRef}
+    >
+      <button
+        onClick={onClose}
+        aria-label={ariaLabelCloseButton}
+        data-testid="closeButton"
+        className={classNames(styles.button, styles['close-button'])}
+        style={{ zIndex: ZIndex.LightBoxButtons }}
+      >
+        <Icon svgIcon={X} color="white" size={IconSize.XSmall} />
+      </button>
+      {onLeftArrowClick && (
+        <button
+          className={classNames(styles.button, styles['arrow-button'], styles['arrow-button--left'])}
+          onClick={onLeftArrowClick}
+          aria-label={ariaLabelLeftArrow}
+          data-testid="leftArrow"
+          style={{ zIndex: ZIndex.LightBoxButtons }}
+        >
+          <Icon svgIcon={ChevronLeft} color="white" size={IconSize.XSmall} />
+        </button>
+      )}
+      {onRightArrowClick && (
+        <button
+          className={classNames(styles.button, styles['arrow-button'], styles['arrow-button--right'])}
+          onClick={onRightArrowClick}
+          aria-label={ariaLabelRightArrow}
+          data-testid="rightarrow"
+          style={{ zIndex: ZIndex.LightBoxButtons }}
+        >
+          <Icon svgIcon={ChevronRight} color="white" size={IconSize.XSmall} />
+        </button>
+      )}
+      {imageText && (
+        <div
+          className={styles['image-text-box']}
+          style={{ bottom: imageTextOpen ? '0' : '-' + textBoxHeight + 'px', transition: '0.5s', zIndex: ZIndex.LightBoxButtons }}
+        >
+          <button
+            className={classNames(styles.button, styles['image-text-box__button'])}
+            onClick={() => setImageTextOpen(!imageTextOpen)}
+            style={{ zIndex: ZIndex.LightBoxButtons }}
+            aria-label={imageTextOpen ? ariaLabelCloseTextBox : ariaLabelOpenTextBox}
+            aria-expanded={imageTextOpen}
+          >
+            {imageTextOpen ? (
+              <Icon svgIcon={ChevronsDown} color="white" size={IconSize.XSmall} />
+            ) : (
+              <Icon svgIcon={ChevronsUp} color="white" size={IconSize.XSmall} />
+            )}
+          </button>
+          <div>
+            <p ref={textBoxRef} className={styles['image-text-box__text']}>
+              {imageText}
+            </p>
+            <div className={styles['image-text-box__overflow-border']}></div>
+          </div>
+        </div>
+      )}
+      <TransformWrapper initialScale={1} maxScale={4} doubleClick={{ mode: 'toggle', step: 4 }}>
+        {({ setTransform }) => (
+          <>
+            <Controls
+              transform={setTransform}
+              updateStates={updateStates}
+              zoom={zoom}
+              ariaLabelZoomIn={ariaLabelZoomIn}
+              ariaLabelZoomOut={ariaLabelZoomOut}
+              ariaLabelZoomSlider={ariaLabelZoomSlider}
+            />
+            <TransformComponent
+              wrapperStyle={{
+                zIndex: 1,
+                width: '100%',
+                height: '100%',
+              }}
+              contentStyle={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <img src={imageSrc} alt={imageAlt} />
+            </TransformComponent>
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+const Controls = ({
+  transform,
+  updateStates,
+  zoom,
+  ariaLabelZoomIn,
+  ariaLabelZoomOut,
+  ariaLabelZoomSlider,
+}: {
+  transform: (newPositionX: number, newPositionY: number, newScale: number, animationTime?: number | undefined) => void;
+  updateStates: (newZoom: number) => void;
+  zoom: number;
+  ariaLabelZoomIn: string;
+  ariaLabelZoomOut: string;
+  ariaLabelZoomSlider: string;
+}): React.JSX.Element => {
+  useTransformComponent(({ state }) => {
+    updateStates(state.scale);
+  });
+
+  const calculateZoomCenter = (newScale: number): number[] => {
+    const element = document.getElementsByClassName('react-transform-component')[0];
+    const style = window.getComputedStyle(element);
+    const matrix = new WebKitCSSMatrix(style.transform);
+
+    const ratio = (newScale - zoom) / zoom + 1;
+    const x = (matrix.m41 - (window.innerWidth / 2) * (1 - zoom / newScale)) * ratio;
+    const y = (matrix.m42 - (window.innerHeight / 2) * (1 - zoom / newScale)) * ratio;
+    return [x, y];
+  };
+
+  const adjustZoom = (newScale: number | undefined): void => {
+    if (newScale === undefined || newScale === zoom) return;
+    if (newScale < 1) newScale = 1;
+    if (newScale > 4) newScale = 4;
+    const [x, y] = calculateZoomCenter(newScale);
+    transform(x, y, newScale, 1);
+  };
+
+  const adjustZoomWithAnimation = (newScale: number | undefined): void => {
+    if (newScale === undefined || newScale === zoom) return;
+    if (newScale < 1) newScale = 1;
+    if (newScale > 4) newScale = 4;
+    const [x, y] = calculateZoomCenter(newScale);
+    transform(x, y, newScale);
+  };
+
+  return (
+    <div className={classNames(styles['zoom-buttons'])} style={{ zIndex: ZIndex.LightBoxButtons }}>
+      <button className={classNames(styles.button)} onClick={() => adjustZoomWithAnimation(zoom - 0.5)} aria-label={ariaLabelZoomOut}>
+        <Icon svgIcon={Minus} color="white" size={IconSize.XSmall} />
+      </button>
+      <MiniSlider
+        className={styles['slider']}
+        minValue={1}
+        maxValue={4}
+        onChange={adjustZoom}
+        value={zoom}
+        ariaLabel={ariaLabelZoomSlider}
+      />
+      <button className={classNames(styles.button)} onClick={() => adjustZoomWithAnimation(zoom + 0.5)} aria-label={ariaLabelZoomIn}>
+        <Icon svgIcon={PlusSmall} color="white" size={IconSize.XSmall} />
+      </button>
+    </div>
+  );
+};
+
+export default LightBox;

package/src/components/LightBox/MiniSlider.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent } from 'react';
+
+interface MiniSliderProps {
+  value: number;
+  minValue: number;
+  maxValue: number;
+  onChange: (newValue: number) => void;
+  className?: string;
+  ariaLabel: string;
+}
+
+const MiniSlider = (props: MiniSliderProps): React.JSX.Element => {
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    event.preventDefault();
+    const newValue = parseFloat(event.target.value);
+    props.onChange(newValue);
+  };
+
+  return (
+    <div className={props.className}>
+      <input
+        onChange={handleOnChange}
+        type="range"
+        min={props.minValue}
+        max={props.maxValue}
+        value={props.value}
+        aria-valuenow={props.value}
+        aria-valuemin={props.minValue}
+        aria-valuemax={props.maxValue}
+        aria-label={props.ariaLabel}
+        step={0.1}
+      />
+    </div>
+  );
+};
+
+export default MiniSlider;

package/src/components/LightBox/index.ts

@@ -0,0 +1,3 @@
+import LightBox from './LightBox';
+export * from './LightBox';
+export default LightBox;

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

@@ -0,0 +1,139 @@
+@import '@helsenorge/designsystem-react/scss/supernova/styles/colors';
+
+.lightBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--core-color-black);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100dvh;
+}
+
+.lightBox img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.button {
+  background-color: var(--core-color-black);
+  color: var(--color-base-text-ondark);
+  display: flex;
+  justify-content: center;
+  border: 0;
+
+  &:hover {
+    background-color: var(--color-action-background-transparent-ondark-hover);
+    outline: 1px solid var(--color-action-border-ondark-hover);
+  }
+
+  &:focus-visible {
+    background-color: var(--color-action-background-transparent-ondark-hoverselected);
+    outline: 2px solid var(--color-action-border-ondark-focus);
+  }
+}
+
+.slider {
+  color: var(--core-color-white);
+  display: flex;
+  cursor: ew-resize;
+  align-items: center;
+
+  input[type='range'] {
+    appearance: none;
+    height: 2px;
+    background: var(--core-color-white);
+    border-radius: 5px;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    appearance: none;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--core-color-white);
+    cursor: ew-resize;
+    box-shadow: 0 0 2px 0 #555;
+  }
+
+  input[type='range']::-webkit-slider-runnable-track {
+    appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
+}
+
+.zoom-buttons {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--core-color-black);
+  color: var(--color-base-text-ondark);
+  padding: 0.1rem;
+  border-radius: 0 0 4px 4px;
+  font-size: 1.5rem;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 4px;
+}
+
+.arrow-button {
+  position: absolute;
+
+  // top: 50dvh;
+  width: 2.375rem;
+
+  &--left {
+    left: 0;
+    border-radius: 0 4px 4px 0;
+  }
+
+  &--right {
+    right: 0;
+    border-radius: 4px 0 0 4px;
+  }
+}
+
+.image-text-box {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  &__button {
+    outline: none;
+    border: none;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2.5rem;
+    border-radius: 4px 4px 0 0;
+  }
+
+  &__text {
+    color: var(--color-base-text-ondark);
+    background-color: var(--core-color-black);
+    margin: 0;
+    padding: 0.75rem 1rem;
+    max-height: calc(50dvh - 19px);
+    overflow: auto;
+  }
+
+  &__overflow-border {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 1.5rem;
+    background: linear-gradient(#0000, var(--core-color-black));
+  }
+}

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

@@ -0,0 +1,20 @@
+export type Styles = {
+  'arrow-button': string;
+  'arrow-button--left': string;
+  'arrow-button--right': string;
+  button: string;
+  'close-button': string;
+  'image-text-box': string;
+  'image-text-box__button': string;
+  'image-text-box__overflow-border': string;
+  'image-text-box__text': string;
+  lightBox: string;
+  slider: string;
+  'zoom-buttons': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "exclude": ["**/*.test.snap.tsx", "**/*.test.tsx", "**/*.stories.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,83 @@
+import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
+import generatePackageJson from 'rollup-plugin-generate-package-json';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { defineConfig } from 'vite';
+
+import { entries } from './__scripts__/entries';
+
+const OUTPUT_DIRECTORY = 'lib';
+
+export default defineConfig({
+  build: {
+    outDir: OUTPUT_DIRECTORY,
+    sourcemap: true,
+    lib: {
+      entry: 'index.js',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      preserveEntrySignatures: 'strict',
+      input: entries,
+      external: [/.module.scss/],
+      output: {
+        format: 'es',
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]',
+      },
+      plugins: [
+        peerDepsExternal(),
+        copy({
+          targets: [
+            { src: '*.md', dest: OUTPUT_DIRECTORY },
+            { src: '../../CHANGELOG.md', dest: OUTPUT_DIRECTORY },
+          ],
+          hook: 'writeBundle',
+        }),
+        copy({
+          targets: [
+            { src: 'src/components/**/*.module.scss*', dest: OUTPUT_DIRECTORY },
+            { src: 'types/**/*.d.ts*', dest: OUTPUT_DIRECTORY },
+          ],
+          hook: 'writeBundle',
+          flatten: false,
+        }),
+        generatePackageJson({
+          baseContents: ({
+            name,
+            type,
+            description,
+            repository,
+            homepage,
+            version,
+            author,
+            license,
+            dependencies = {},
+            peerDependencies = {},
+            sideEffects,
+          }) => ({
+            name,
+            type,
+            description,
+            repository,
+            homepage,
+            version,
+            author,
+            license,
+            dependencies,
+            peerDependencies,
+            sideEffects,
+          }),
+        }),
+        // rollup har begynt å legge til ?used på slutten av styles.module.scss når vi behandler
+        // dem som external.
+        replace({
+          '.module.scss?used': '.module.scss',
+          '.module.css?used': '.module.css',
+          preventAssignment: true,
+        }),
+      ],
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['../designsystem/src/utils/tests/setup-test.ts'],
+    css: {
+      modules: {
+        classNameStrategy: 'non-scoped',
+      },
+    },
+    coverage: {
+      enabled: true,
+      provider: 'istanbul',
+      reporter: ['cobertura', 'lcov', 'json'],
+    },
+    reporters: ['default', 'junit'],
+    outputFile: {
+      junit: 'test-report.xml',
+    },
+    server: {
+      deps: {
+        inline: ['@helsenorge/designsystem-react'],
+      },
+    },
+  },
+});