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

package/src/components/Title/Title.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import Title from './Title';
+import { allTitleTags, allTitleAppearances } from '../../../.storybook/knobs';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Title',
+  component: Title,
+  tags: ['new'],
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => (
+        <Docs
+          component={Title}
+          supernovaLink="https://frankenstein.helsenorge.design/latest/fundament/typografi/font-og-stiler-jym9t8zW#section-stil-oversikt-17"
+        />
+      ),
+      description: {
+        component: 'Som innbygger vil jeg kunne vise titler i ulike størrelser og html markup.',
+      },
+    },
+  },
+  args: {
+    children: 'Title',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    htmlMarkup: {
+      control: 'select',
+      options: allTitleTags,
+    },
+    margin: {
+      control: 'number',
+    },
+    appearance: {
+      control: 'select',
+      options: allTitleAppearances,
+    },
+  },
+} satisfies Meta<typeof Title>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Title {...args} />,
+};
+
+export const AllAppearances: Story = {
+  render: args => (
+    <>
+      <Title {...args} appearance="titleFeature">
+        {args.children} {'(feature)'}
+      </Title>
+      <Title {...args} appearance="title1">
+        {args.children} {'(title1)'}
+      </Title>
+      <Title {...args} appearance="title2">
+        {args.children} {'(title2)'}
+      </Title>
+      <Title {...args} appearance="title3">
+        {args.children} {'(title3)'}
+      </Title>
+      <Title {...args} appearance="title4">
+        {args.children} {'(title4)'}
+      </Title>
+      <Title {...args} appearance="title5">
+        {args.children} {'(title5)'}
+      </Title>
+      <Title {...args} appearance="title6">
+        {args.children} {'(title6)'}
+      </Title>
+    </>
+  ),
+};

package/src/components/Title/Title.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+
+import Title from './Title';
+
+describe('Gitt at Title skal rendres', (): void => {
+  describe('Gitt at Title skal vises vanlig', (): void => {
+    test('Så rendres Title riktig', (): void => {
+      const { container } = render(<Title>{'Title'}</Title>);
+
+      expect(container).toMatchSnapshot();
+
+      const titleElement = screen.getByText('Title');
+
+      expect(titleElement).toBeTruthy();
+      expect(titleElement.tagName).toBe('H1');
+    });
+  });
+
+  describe('Gitt at Title skal vises som h2', (): void => {
+    test('Så rendres Title med riktig tag', (): void => {
+      render(<Title htmlMarkup={'h2'}>{'Title'}</Title>);
+
+      const titleElement = screen.getByText('Title');
+
+      expect(titleElement.tagName).toBe('H2');
+    });
+  });
+
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(<Title testId="bare-tester">{'Title'}</Title>);
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+    });
+  });
+});

package/src/components/Title/Title.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { AnalyticsId } from '../../constants';
+
+import titleStyles from './styles.module.scss';
+
+export type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+export type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';
+
+export interface TitleProps {
+  children: React.ReactNode;
+  /** Gives a unique id to the title */
+  id?: string;
+  /** Adds custom classes to the element. */
+  className?: string;
+  /** Adds top and bottom margin in rem. */
+  margin?: number | TitleMargin;
+  /** Changes the underlying element of the title. */
+  htmlMarkup?: TitleTags;
+  /** Changes the appearance of the title. */
+  appearance?: TitleAppearances;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+
+export const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {
+  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;
+  const titleClasses = classNames(
+    titleStyles.title,
+    {
+      [titleStyles['title--feature']]: appearance === 'titleFeature',
+      [titleStyles['title--title1']]: appearance === 'title1',
+      [titleStyles['title--title2']]: appearance === 'title2',
+      [titleStyles['title--title3']]: appearance === 'title3',
+      [titleStyles['title--title4']]: appearance === 'title4',
+      [titleStyles['title--title5']]: appearance === 'title5',
+      [titleStyles['title--title6']]: appearance === 'title6',
+    },
+    className
+  );
+  const CustomTag = htmlMarkup;
+
+  const inlineStyle = instanceOfTitleMargin(margin)
+    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }
+    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };
+
+  return (
+    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>
+      {children}
+    </CustomTag>
+  );
+});
+
+export interface TitleMargin {
+  marginTop: number;
+  marginBottom: number;
+}
+
+export const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {
+  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');
+};
+
+export default Title;

package/src/components/Title/__snapshots__/Title.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Gitt at Title skal rendres > Gitt at Title skal vises vanlig > Så rendres Title riktig 1`] = `
+<div>
+  <h1
+    class="title title--title1"
+    data-analyticsid="title"
+    style="margin-top: 0rem; margin-bottom: 0rem;"
+  >
+    Title
+  </h1>
+</div>
+`;

package/src/components/Title/index.ts

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

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

@@ -0,0 +1,37 @@
+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 Toast from './Toast';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Toast',
+  component: Toast,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Toast informerer innbygger om en handling som har blitt utført eller kommer til å bli utført. De vises midlertidig, nederst på skjermen og skal ikke kreve handling eller avbryte brukeropplevelsen. ',
+      },
+      page: (): React.JSX.Element => <Docs component={Toast} />,
+    },
+  },
+  args: {
+    title: 'Dette er en toast',
+    onClose: (): HandlerFunction => action('Lukket toast'),
+  },
+  argTypes: {
+    message: { control: 'text' },
+    testId: { control: 'text' },
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Toast {...args} />,
+};

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import Toast from './Toast';
+
+describe('Gitt at Toast skal vises', (): void => {
+  describe('Når Toast vises', (): void => {
+    test('Så vises Toast', (): void => {
+      render(<Toast />);
+    });
+  });
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';
+import Close from '../Close';
+import Icon, { IconSize } from '../Icon';
+import CheckFill from '../Icons/CheckFill';
+
+import styles from './styles.module.scss';
+
+export interface ToastProps {
+  /** Sets the data-testid attribute. */
+  testId?: string;
+  /** The title to display in the toast */
+  title: string;
+  /** The message to display in the toast */
+  message?: string;
+  /** Callback when toast is closed */
+  onClose?: () => void;
+}
+
+const Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {
+  const isMobile = useIsMobileBreakpoint();
+
+  const handleClose = (): void => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <output className={styles['toast']} data-testid={testId}>
+      <Icon
+        size={isMobile ? IconSize.XSmall : IconSize.Small}
+        svgIcon={CheckFill}
+        className={classNames(styles['toast__icon'], styles['toast__icon--check'])}
+      />
+      <div className={styles['toast__text-container']}>
+        <span className={styles['toast__title']}>{title}</span>
+        {message && <span className={styles['toast__description']}>{message}</span>}
+      </div>
+      <Close
+        onClick={handleClose}
+        color="black"
+        className={classNames(styles['toast__icon'], styles['toast__icon--close'])}
+        testId={`${testId}-close`}
+      />
+    </output>
+  );
+};
+
+export default Toast;

package/src/components/Toast/index.ts

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

package/src/components/ToastList/ToastList.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import ToastList, { ToastData } from './ToastList';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/ToastList',
+  component: ToastList,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Toast informerer innbygger om en handling som har blitt utført eller kommer til å bli utført. ToastList er en container for flere toasts, og håndterer visning og fjerning av disse. ',
+      },
+      page: (): React.JSX.Element => <Docs component={ToastList} />,
+    },
+  },
+  args: {},
+  argTypes: {
+    toasts: {
+      control: 'object',
+    },
+  },
+} satisfies Meta<typeof ToastList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: args => {
+    const [toasts, setToasts] = React.useState<ToastData[]>([]);
+    const toastIdCounter = React.useRef(0);
+
+    const addToast = (): void => {
+      const id = `toast-${++toastIdCounter.current}`;
+      const newToast: ToastData = { id: id, title: `This is message ${toastIdCounter.current}` };
+      setToasts(prevToasts => [...prevToasts, newToast]);
+    };
+
+    const addToastWithDescription = (): void => {
+      const id = `toast-${++toastIdCounter.current}`;
+      const newToast: ToastData = {
+        id: id,
+        title: `This is message ${toastIdCounter.current}`,
+        message: 'With description text, that is a bit long',
+      };
+      setToasts(prevToasts => [...prevToasts, newToast]);
+    };
+
+    return (
+      <>
+        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', flexWrap: 'wrap' }}>
+          <button type="button" onClick={addToast}>
+            {'Add Toast'}
+          </button>
+          <button type="button" onClick={addToastWithDescription}>
+            {'Add Toast with description'}
+          </button>
+        </div>
+        <ToastList {...args} toasts={toasts} />
+      </>
+    );
+  },
+};

package/src/components/ToastList/ToastList.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+
+import ToastList, { type ToastData } from './ToastList';
+
+vi.useFakeTimers();
+
+// Mock motion/react
+vi.mock('motion/react', () => ({
+  motion: {
+    div: ({ ...props }: React.PropsWithChildren<Record<string, unknown>>): JSX.Element => <div {...props}>{props.children}</div>,
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren): React.ReactNode => children,
+}));
+
+const mockToastData: ToastData[] = [
+  {
+    id: 'toast-1',
+    title: 'Success message',
+    message: 'This is a success toast',
+  },
+  {
+    id: 'toast-2',
+    title: 'Another message',
+  },
+  {
+    id: 'toast-3',
+    title: 'Third message',
+    message: 'With a description',
+  },
+];
+
+describe('Gitt at ToastList skal vises', (): void => {
+  beforeEach(() => {
+    vi.clearAllTimers();
+  });
+
+  describe('Når ToastList vises uten toasts', (): void => {
+    test('Så vises en tom liste', (): void => {
+      render(<ToastList testId="toast-list" />);
+
+      const toastList = screen.getByTestId('toast-list');
+      expect(toastList).toBeInTheDocument();
+      expect(toastList).toBeEmptyDOMElement();
+    });
+  });
+
+  describe('Når ToastList vises med toasts', (): void => {
+    test('Så vises alle toasts', (): void => {
+      render(<ToastList testId="toast-list" toasts={mockToastData} />);
+
+      const toastList = screen.getByTestId('toast-list');
+      expect(toastList).toBeInTheDocument();
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+      expect(screen.getByText('This is a success toast')).toBeInTheDocument();
+      expect(screen.getByText('Another message')).toBeInTheDocument();
+      expect(screen.getByText('Third message')).toBeInTheDocument();
+      expect(screen.getByText('With a description')).toBeInTheDocument();
+    });
+
+    test('Så har hver toast riktig testId', (): void => {
+      render(<ToastList testId="toast-list" toasts={mockToastData} />);
+
+      expect(screen.getByTestId('toast-list-toast-1')).toBeInTheDocument();
+      expect(screen.getByTestId('toast-list-toast-2')).toBeInTheDocument();
+      expect(screen.getByTestId('toast-list-toast-3')).toBeInTheDocument();
+    });
+
+    test('Så vises toasts uten message korrekt', (): void => {
+      const toastWithoutMessage: ToastData[] = [
+        {
+          id: 'toast-no-msg',
+          title: 'Title only',
+        },
+      ];
+
+      render(<ToastList testId="toast-list" toasts={toastWithoutMessage} />);
+
+      expect(screen.getByText('Title only')).toBeInTheDocument();
+      expect(screen.queryByText('This is a success toast')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Når bruker klikker på lukk-knappen', (): void => {
+    test('Så fjernes toasten fra listen', (): void => {
+      render(<ToastList testId="toast-list" toasts={[mockToastData[0]]} />);
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+
+      const closeButton = screen.getByTestId('toast-list-toast-1-close');
+      fireEvent.click(closeButton);
+
+      // Since motion is mocked, the toast should be removed immediately
+      expect(screen.queryByText('Success message')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Når toasts legges til dynamisk', (): void => {
+    test('Så vises nye toasts i tillegg til eksisterende', (): void => {
+      const { rerender } = render(<ToastList testId="toast-list" toasts={[mockToastData[0]]} />);
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+      expect(screen.queryByText('Another message')).not.toBeInTheDocument();
+
+      rerender(<ToastList testId="toast-list" toasts={mockToastData} />);
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+      expect(screen.getByText('Another message')).toBeInTheDocument();
+      expect(screen.getByText('Third message')).toBeInTheDocument();
+    });
+
+    test('Så ignoreres duplikate toasts', (): void => {
+      const { rerender } = render(<ToastList testId="toast-list" toasts={[mockToastData[0]]} />);
+
+      rerender(<ToastList testId="toast-list" toasts={[mockToastData[0], mockToastData[0]]} />);
+
+      const successMessages = screen.getAllByText('Success message');
+      expect(successMessages).toHaveLength(1);
+    });
+  });
+
+  describe('Når toasts auto-fjernes etter timeout', (): void => {
+    test('Så settes timeout for auto-fjerning', (): void => {
+      render(<ToastList testId="toast-list" toasts={[mockToastData[0]]} />);
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+
+      expect(vi.getTimerCount()).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Når komponenten unmountes', (): void => {
+    test('Så ryddes alle timers opp', (): void => {
+      const { unmount } = render(<ToastList testId="toast-list" toasts={mockToastData} />);
+
+      expect(vi.getTimerCount()).toBeGreaterThan(0);
+
+      unmount();
+
+      // After unmount the timers should be cleared
+      // Note: We can't test that directly but checks that the component unmount without errors
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('Når ref sendes til komponenten', (): void => {
+    test('Så eksponeres riktig DOM element', (): void => {
+      const ref = React.createRef<HTMLElement>();
+
+      render(<ToastList ref={ref} testId="toast-list" />);
+
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe('SECTION');
+      expect(ref.current?.getAttribute('data-testid')).toBe('toast-list');
+    });
+  });
+});

package/src/components/ToastList/ToastList.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import { AnimatePresence, motion } from 'motion/react';
+
+import { mergeRefs } from '../../utils/refs';
+import Toast from '../Toast/Toast';
+
+import styles from './styles.module.scss';
+
+export interface ToastData {
+  id: string;
+  title: string;
+  message?: string;
+}
+
+export interface ToastListProps {
+  /** Sets the data-testid attribute. */
+  testId?: string;
+  /** Array of toast data to display */
+  toasts?: ToastData[];
+}
+
+const DURATION = 8000;
+
+const ToastList = React.forwardRef<HTMLElement, ToastListProps>((props, ref) => {
+  const { testId, toasts = [] } = props;
+  const internalRef = React.useRef<HTMLElement | null>(null);
+  const [visibleToasts, setVisibleToasts] = React.useState<ToastData[]>([]);
+  const [removedToastIds, setRemovedToastIds] = React.useState<Set<string>>(new Set());
+  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  React.useEffect(() => {
+    const newToasts = toasts.filter(toast => !visibleToasts.some(vt => vt.id === toast.id) && !removedToastIds.has(toast.id));
+    if (newToasts.length > 0) {
+      setVisibleToasts(prev => [...prev, ...newToasts]);
+    }
+  }, [toasts, visibleToasts, removedToastIds]);
+
+  // Handles removal of a toast
+  const handleRemoveToast = React.useCallback((id: string): void => {
+    setVisibleToasts(prev => prev.filter(t => t.id !== id));
+    // Add to removed IDs to prevent re-appearance
+    setRemovedToastIds(prev => new Set([...prev, id]));
+
+    // Clear timeout if exists
+    const timeout = timeoutRefs.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutRefs.current.delete(id);
+    }
+  }, []);
+
+  // Handle auto-removal of toasts after duration
+  React.useEffect(() => {
+    const timeouts = timeoutRefs.current;
+
+    // Set up timeouts for new visible toasts that don't have timeout yet
+    visibleToasts.forEach(toast => {
+      if (!timeouts.has(toast.id)) {
+        const timeout = setTimeout(() => {
+          handleRemoveToast(toast.id);
+        }, DURATION);
+
+        timeouts.set(toast.id, timeout);
+      }
+    });
+  }, [visibleToasts, handleRemoveToast]);
+
+  // Cleanup timeouts for removed toasts
+  React.useEffect(() => {
+    const timeouts = timeoutRefs.current;
+    const currentToastIds = new Set(visibleToasts.map(t => t.id));
+
+    timeouts.forEach((timeout, id) => {
+      if (!currentToastIds.has(id)) {
+        clearTimeout(timeout);
+        timeouts.delete(id);
+      }
+    });
+  }, [visibleToasts]);
+
+  // Cleanup all timeouts on unmount
+  React.useEffect(() => {
+    return (): void => {
+      timeoutRefs.current.forEach(timeout => clearTimeout(timeout));
+      timeoutRefs.current.clear();
+    };
+  }, []);
+
+  const setRefs = mergeRefs([internalRef, ref]);
+
+  return (
+    <section ref={setRefs} className={styles['toast-list']} data-testid={testId}>
+      <AnimatePresence mode="popLayout">
+        {visibleToasts.map(toast => (
+          <motion.div
+            key={toast.id}
+            layout
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{
+              layout: { type: 'spring', duration: 0.4, bounce: 0.1 },
+            }}
+          >
+            <Toast
+              testId={`${testId}-${toast.id}`}
+              title={toast.title}
+              message={toast.message}
+              onClose={() => handleRemoveToast(toast.id)}
+            />
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </section>
+  );
+});
+
+ToastList.displayName = 'ToastList';
+
+export default ToastList;

package/src/components/ToastList/index.ts

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