@helsenorge/lightbox 8.0.0 → 8.0.2

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

@@ -1,92 +0,0 @@
-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

@@ -1,265 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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/tsconfig.json

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

package/tsconfig.node.json

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

package/vite.config.ts

@@ -1,83 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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'],
-      },
-    },
-  },
-});