@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/src/hoc/withBreakpoint/withBreakpoint.test.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { when } from 'jest-when';
-
-import { BreakpointProps, withBreakpoint } from './withBreakpoint';
-import { mockWindowMatchMedia } from '../../__mocks__/matchMedia';
-import { Breakpoint } from '../../hooks/useBreakpoint';
-import { screen as themeScreen } from '../../theme/grid';
-
-const Example: React.FC<BreakpointProps> = ({ breakpoint }) => {
-  return <>{`${Breakpoint[breakpoint]}/${breakpoint}`}</>;
-};
-
-const ExampleWithBreakpoint = withBreakpoint(Example);
-
-class ClassExample extends React.Component<BreakpointProps> {
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  render() {
-    return <>{`${Breakpoint[this.props.breakpoint]}/${this.props.breakpoint}`}</>;
-  }
-}
-
-const ClassExampleWithBreakpoint = withBreakpoint(ClassExample);
-
-describe('Gitt at withBreakpoint skal vises', (): void => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-  describe('Når skjermbredden er xl', (): void => {
-    test('Så er returnerer withBreakpoint xl breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('xl/1450')).toBeVisible();
-    });
-  });
-  describe('Når skjermbredden er lg', (): void => {
-    test('Så er returnerer withBreakpoint lg breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.lg)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('lg/1088')).toBeVisible();
-    });
-  });
-  describe('Når skjermbredden er md', (): void => {
-    test('Så er returnerer withBreakpoint md breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.lg)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.md)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('md/768')).toBeVisible();
-    });
-  });
-  describe('Når skjermbredden er sm', (): void => {
-    test('Så er returnerer withBreakpoint sm breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.lg)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.md)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.sm)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('sm/564')).toBeVisible();
-    });
-  });
-  describe('Når skjermbredden er xs', (): void => {
-    test('Så er returnerer withBreakpoint xs breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.lg)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.md)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.sm)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xs)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('xs/360')).toBeVisible();
-    });
-  });
-  describe('Når skjermbredden er xxs', (): void => {
-    test('Så er returnerer withBreakpoint xxs breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.lg)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.md)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.sm)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xs)
-        .mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xxs)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ExampleWithBreakpoint />);
-
-      expect(screen.getByText('xxs/0')).toBeVisible();
-    });
-  });
-  describe('Når komponenten er klassebasert', (): void => {
-    test('Så er returnerer withBreakpoint breakpoint', (): void => {
-      when(mockWindowMatchMedia)
-        .calledWith(themeScreen.xl)
-        .mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() });
-
-      render(<ClassExampleWithBreakpoint />);
-
-      expect(screen.getByText('xl/1450')).toBeVisible();
-    });
-  });
-});

package/src/hoc/withBreakpoint/withBreakpoint.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';
-
-export interface BreakpointProps {
-  breakpoint: Breakpoint;
-}
-
-// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842
-export function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(
-  Component: C & React.ComponentType<P>
-): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;
-
-export function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(
-  Component: React.ForwardRefExoticComponent<P>
-): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
-
-export function withBreakpoint<P extends BreakpointProps>(
-  Component: React.FunctionComponent<P>
-): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;
-
-export function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {
-  return React.forwardRef((props, ref) => {
-    const breakpoint = useBreakpoint();
-    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;
-  });
-}
-
-export default withBreakpoint;

package/src/hooks/useBreakpoint.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Breakpoint, useBreakpoint } from './useBreakpoint';
-
-const UseBreakpointExample: React.FC = () => {
-  const breakpoint = useBreakpoint();
-
-  const description = `Breakpoint er nå ${Breakpoint[breakpoint]} (${breakpoint}px)`;
-
-  return <p>{description}</p>;
-};
-
-const meta = {
-  title: '@helsenorge/designsystem-react/Hooks/useBreakpoint',
-  component: UseBreakpointExample,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Lytt på endringer i breakpoint basert på media queries. Trigger re-render bare når breakpoint er endret.',
-      },
-      source: {
-        language: 'tsx',
-        code: `
-import { Breakpoint, useBreakpoint } from '@helsenorge/designsystem-react/hooks/useBreakpoint';
-
-const UseBreakpointExample: React.FC = () => {
-  const breakpoint = useBreakpoint();
-  const description = \`Breakpoint er nå \${Breakpoint[breakpoint]} (\${breakpoint}px)\`;
-
-  return <p>{description}</p>;
-}
-`,
-      },
-    },
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta<typeof UseBreakpointExample>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { render: () => <UseBreakpointExample /> };

package/src/hooks/useBreakpoint.ts

@@ -1,67 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { breakpoints, screen } from '../theme/grid';
-
-export enum Breakpoint {
-  xxs = breakpoints.xxs,
-  xs = breakpoints.xs,
-  sm = breakpoints.sm,
-  md = breakpoints.md,
-  lg = breakpoints.lg,
-  xl = breakpoints.xl,
-}
-
-function getCurrentBreakpoint(): Breakpoint {
-  // We read from largest -> smallest or vice versa
-  // so that the first match is the "highest" one that applies
-  const mediaQueryList = Object.entries(screen)
-    .reverse() // e.g. check xl, lg, md, etc. in descending order
-    .map(([size, mediaQuery]) => {
-      return {
-        breakpoint: Breakpoint[size as keyof typeof Breakpoint],
-        mq: window.matchMedia(mediaQuery),
-      };
-    });
-
-  const matched = mediaQueryList.find(entry => entry.mq.matches);
-  return matched?.breakpoint ?? Breakpoint.xxs;
-}
-
-export const useBreakpoint = (): Breakpoint => {
-  const [breakpoint, setBreakpoint] = useState<Breakpoint>(Breakpoint.xxs);
-
-  useEffect(() => {
-    // Oppdater breakpoint i useEffect for å støtte server side rendering
-    setBreakpoint(getCurrentBreakpoint());
-  }, []);
-
-  useEffect(() => {
-    const mediaQueryList = Object.values(screen).map(mediaQuery => {
-      const mq = window.matchMedia(mediaQuery);
-      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,
-      // men har støtte for addListener
-      const handler = (): void => {
-        setBreakpoint(getCurrentBreakpoint());
-      };
-
-      if (mq.addEventListener) {
-        mq.addEventListener('change', handler);
-      } else if (mq.addListener) {
-        mq.addListener(handler);
-      }
-      return { mq, handler };
-    });
-
-    return (): void => {
-      mediaQueryList.forEach(({ mq, handler }) => {
-        if (mq.removeEventListener) {
-          mq.removeEventListener('change', handler);
-        } else if (mq.removeListener) {
-          mq.removeListener(handler);
-        }
-      });
-    };
-  }, []);
-
-  return breakpoint;
-};

package/src/hooks/useElementList.stories.tsx

@@ -1,112 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react-vite';
-
-import { useElementList } from './useElementList';
-import Button from '../components/Button';
-import Spacer from '../components/Spacer';
-
-const UseElementListExample: React.FC = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hasClass, setHasClass] = useState(true);
-  const elements = useElementList(ref, '.custom-button');
-
-  const toggleClass = (): void => {
-    setHasClass(!hasClass);
-  };
-
-  return (
-    <>
-      <p>{'Knapper med klassen "custom-button":'}</p>
-      <ul>
-        {elements &&
-          [...elements].map((element, index) => (
-            <li key={index}>
-              {element.tagName} {element.textContent}
-            </li>
-          ))}
-      </ul>
-      <Button onClick={toggleClass}>{'Slå av/på klassen "custom-button" på knapp nr 1'}</Button>
-      <Spacer />
-      <div ref={ref}>
-        <div>
-          <Button className={hasClass ? 'custom-button' : ''}>{'Knapp 1'}</Button>
-        </div>
-        <Spacer />
-        <div>
-          <Button className="custom-button">{'Knapp 2'}</Button>
-        </div>
-        <Spacer />
-        <div>
-          <Button className="custom-button">{'Knapp 3'}</Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const meta = {
-  title: '@helsenorge/designsystem-react/Hooks/useElementList',
-  component: UseElementListExample,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.',
-      },
-      source: {
-        language: 'tsx',
-        code: `
-import { useElementList } from '@helsenorge/designsystem-react/hooks/useElementList';
-import Button from '@helsenorge/designsystem-react/components/Button';
-import Spacer from '@helsenorge/designsystem-react/components/Spacer';
-
-const UseElementListExample: React.FC = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hasClass, setHasClass] = useState(true);
-  const elements = useElementList(ref, '.custom-button');
-
-  const toggleClass = (): void => {
-    setHasClass(!hasClass);
-  };
-
-  return (
-    <>
-      <p>{'Knapper med klassen "custom-button":'}</p>
-      <ul>
-        {elements &&
-          [...elements].map((element, index) => (
-            <li key={index}>
-              {element.tagName} {element.textContent}
-            </li>
-          ))}
-      </ul>
-      <Button onClick={toggleClass}>{'Slå av/på klassen "custom-button" på knapp nr 1'}</Button>
-      <Spacer />
-      <div ref={ref}>
-        <div>
-          <Button className={hasClass ? 'custom-button' : ''}>{'Knapp 1'}</Button>
-        </div>
-        <Spacer />
-        <div>
-          <Button className="custom-button">{'Knapp 2'}</Button>
-        </div>
-        <Spacer />
-        <div>
-          <Button className="custom-button">{'Knapp 3'}</Button>
-        </div>
-      </div>
-    </>
-  );
-};
-        `,
-      },
-    },
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta<typeof UseElementListExample>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { render: () => <UseElementListExample /> };

package/src/hooks/useElementList.ts

@@ -1,36 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.
- * @param ref Element som skal observeres
- * @param selectors Selektorer som sendes til querySelectorAll for å hente ut liste med elementer
- * @param options MutationObserver-options. Default er å lytte på endringer på child-elementer og deres attributter.
- * @returns Liste med HTML-elementer
- */
-export const useElementList = (
-  ref: React.RefObject<HTMLElement>,
-  selectors: string,
-  options?: MutationObserverInit
-): NodeListOf<HTMLElement> | undefined => {
-  const [elementList, setElementList] = useState<NodeListOf<HTMLElement>>();
-
-  useEffect(() => {
-    const handleMutationChange = (): void => {
-      const elements = ref.current?.querySelectorAll<HTMLElement>(selectors);
-      setElementList(elements);
-    };
-
-    const mutationObserver = new MutationObserver(handleMutationChange);
-    if (ref?.current) {
-      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributes: true, ...options });
-    }
-
-    handleMutationChange();
-
-    return (): void => {
-      mutationObserver.disconnect();
-    };
-  }, [ref, selectors]);
-
-  return elementList;
-};

package/src/hooks/useEventListenerState.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export const useEventListenerState = <T>(initial?: T): [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void] => {
-  const [value, _setValue] = React.useState<T | undefined>(initial);
-
-  const valueRef = React.useRef(value);
-
-  const setValue = (x: T): void => {
-    valueRef.current = x;
-    _setValue(x);
-  };
-
-  return [valueRef, setValue];
-};

package/src/hooks/useExpand.ts

@@ -1,22 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-import { usePrevious } from './usePrevious';
-
-export const useExpand = (expanded: boolean, onExpand?: (isExpanded: boolean) => void): [boolean, Dispatch<SetStateAction<boolean>>] => {
-  const [isExpanded, setIsExpanded] = useState(expanded);
-  const previousIsExpanded = usePrevious(isExpanded);
-
-  useEffect(() => {
-    if (expanded !== isExpanded) {
-      setIsExpanded(expanded);
-    }
-  }, [expanded]);
-
-  useEffect(() => {
-    if (onExpand && isExpanded !== !!previousIsExpanded) {
-      onExpand(isExpanded);
-    }
-  }, [isExpanded, onExpand]);
-
-  return [isExpanded, setIsExpanded];
-};

package/src/hooks/useFocusToggle.stories.tsx

@@ -1,103 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react-vite';
-
-import { useFocusToggle } from './useFocusToggle';
-import Button from '../components/Button';
-import HighlightPanel from '../components/HighlightPanel';
-import Spacer from '../components/Spacer';
-
-const UseFocusToggleExample: React.FC = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [allowFocus, setAllowFocus] = useState(true);
-  useFocusToggle(ref, allowFocus);
-
-  const toggleAllowFocus = (): void => {
-    setAllowFocus(!allowFocus);
-  };
-
-  return (
-    <>
-      <p>{`Fokus er ${allowFocus ? 'lov' : 'ikke lov'}`}</p>
-      <Button onClick={toggleAllowFocus}>{'Slå av/på fokus'}</Button>
-      <Spacer />
-      <HighlightPanel color="blueberry" size="fluid">
-        <div ref={ref}>
-          <div>
-            <Button>{'Knapp 1'}</Button>
-          </div>
-          <Spacer />
-          <div>
-            <Button>{'Knapp 2'}</Button>
-          </div>
-          <Spacer />
-          <div>
-            <Button>{'Knapp 3'}</Button>
-          </div>
-        </div>
-      </HighlightPanel>
-    </>
-  );
-};
-
-const meta = {
-  title: '@helsenorge/designsystem-react/Hooks/useFocusToggle',
-  component: UseFocusToggleExample,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig ikke kunne fokuseres/tabbes til med tastaturet.',
-      },
-      source: {
-        language: 'tsx',
-        code: `
-import { useFocusableElements } from '@helsenorge/designsystem-react/hooks/useFocusableElements';
-import Button from '@helsenorge/designsystem-react/components/Button';
-import HighlightPanel from '@helsenorge/designsystem-react/components/HighlightPanel';
-import Spacer from '@helsenorge/designsystem-react/components/Spacer';
-
-const UseFocusToggleExample: React.FC = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [allowFocus, setAllowFocus] = useState(true);
-  useFocusToggle(ref, allowFocus);
-
-  const toggleAllowFocus = (): void => {
-    setAllowFocus(!allowFocus);
-  };
-
-  return (
-    <>
-      <p>{\`Fokus er \${allowFocus ? 'lov' : 'ikke lov'}\`}</p>
-      <Button onClick={toggleAllowFocus}>{'Slå av/på fokus'}</Button>
-      <Spacer />
-      <HighlightPanel color="blueberry" size="fluid">
-        <div ref={ref}>
-          <div>
-            <Button>{'Knapp 1'}</Button>
-          </div>
-          <Spacer />
-          <div>
-            <Button>{'Knapp 2'}</Button>
-          </div>
-          <Spacer />
-          <div>
-            <Button>{'Knapp 3'}</Button>
-          </div>
-        </div>
-      </HighlightPanel>
-    </>
-  );
-};
-        `,
-      },
-    },
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta<typeof UseFocusToggleExample>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { render: () => <UseFocusToggleExample /> };

package/src/hooks/useFocusToggle.ts

@@ -1,42 +0,0 @@
-import React, { useEffect } from 'react';
-
-import { useElementList } from './useElementList';
-import { FOCUSABLE_SELECTORS } from './useFocusableElements';
-
-/**
- * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
- * ikke kunne fokuseres/tabbes til med tastaturet.
- * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
- * @param allowFocus Om elementene skal være fokuserbare eller ikke
- * @returns void
- */
-export const useFocusToggle = (ref: React.RefObject<HTMLElement>, allowFocus?: boolean): void => {
-  // Kan ikke lytte på endringer i attributter, fordi det vil føre til en loop når vi endrer dem etterpå
-  const focusableElementList = useElementList(ref, FOCUSABLE_SELECTORS, { attributes: false });
-
-  useEffect(() => {
-    const TABINDEX_ATTRIBUTE_NAME = 'tabindex';
-    const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = 'data-tabindex';
-    if (allowFocus) {
-      focusableElementList?.forEach(el => {
-        // Sett tabIndex tilbake til verdien den hadde før, eller fjern tabIndex
-        // slik at elementet kan tabbes til igjen.
-        const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);
-        if (prevTabIndex) {
-          el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);
-        } else {
-          el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);
-        }
-      });
-    } else {
-      focusableElementList?.forEach(el => {
-        // Hvis elementet allerede har tabIndex, ta vare på den før vi gjør det umulig å
-        // tabbe til det.
-        if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {
-          el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);
-        }
-        el.tabIndex = -1;
-      });
-    }
-  }, [ref, allowFocus, focusableElementList]);
-};