@helsenorge/designsystem-react 12.11.1 → 12.12.2

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import Loader, { Overlay } from './Loader';
+import { allPaletteNames } from '../../../.storybook/knobs';
+import Button from '../Button/Button';
+import Title from '../Title/Title';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Loader',
+  component: Loader,
+  tags: ['not-supernova'],
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => <Docs component={Loader} />,
+      description: {
+        component:
+          'Loader benyttes for å vise innbygger at det lastes ned innhold, slik at innbygger må vente til innholdet er lastet ferdig.',
+      },
+    },
+  },
+  args: {
+    color: 'blueberry',
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: allPaletteNames,
+    },
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Loader {...args} />,
+};
+
+export const AllSizes: Story = {
+  render: args => (
+    <div style={{ display: 'grid', gridGap: '2rem' }}>
+      <Loader {...args} size={'tiny'} />
+      <Loader {...args} size={'small'} />
+      <Loader {...args} size={'medium'} />
+      <Loader {...args} size={'large'} />
+    </div>
+  ),
+};
+
+export const LoaderIsCentered: Story = {
+  args: {
+    center: true,
+  },
+  render: args => (
+    <div style={{ background: 'white' }}>
+      <Loader {...args} />
+    </div>
+  ),
+};
+
+export const Inline: Story = {
+  args: {
+    color: 'black',
+    inline: true,
+    size: 'tiny',
+  },
+  render: args => (
+    <>
+      <Title htmlMarkup="span" appearance="title1">
+        {'Søker'}
+      </Title>
+      <Loader {...args} />
+    </>
+  ),
+};
+
+export const OverlayScreen: Story = {
+  args: {
+    overlay: Overlay.screen,
+  },
+  render: args => (
+    <div style={{ width: '100%', height: '200vh' }}>
+      <Loader {...args} />
+    </div>
+  ),
+};
+
+export const OverlayParent: Story = {
+  args: {
+    overlay: Overlay.parent,
+  },
+  render: args => (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <div>
+        <Title>{'Søknad'}</Title>
+        <p style={{ color: 'red' }}>{'Søknad om greier'}</p>
+        <Button>{'Lagre'}</Button>
+        <Loader {...args} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,127 @@
+import { render, screen } from '@testing-library/react';
+
+import Loader, { Overlay } from './Loader';
+
+describe('Gitt at en loader skal vises ', (): void => {
+  describe('Når at en loader rendres ', (): void => {
+    test('Så vises loaderen', (): void => {
+      const { container } = render(<Loader />);
+      expect(container).toMatchSnapshot();
+    });
+
+    test('Så er alle fire loaderDots riktig plassert', (): void => {
+      render(<Loader testId={'loaderDotTest'} />);
+      const loaderDotsWrapper = screen.getByTestId('loaderDotTest');
+
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderDotsWrapper.children[0].className).toBe('loader__dot loader__dot--small loader__dot--neutral');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderDotsWrapper.children[1].className).toBe('loader__dot loader__dot--small loader__dot--neutral');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderDotsWrapper.children[2].className).toBe('loader__dot loader__dot--small loader__dot--neutral');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderDotsWrapper.children[3].className).toBe('loader__dot loader__dot--small loader__dot--neutral');
+    });
+  });
+
+  describe('Når center prop er true ', (): void => {
+    test('Så sentreres loader', (): void => {
+      render(<Loader center testId="load" />);
+      const wrapper = screen.getByTestId('load');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(wrapper.parentElement).toHaveClass('loader-wrapper--center');
+    });
+  });
+
+  describe('Når overlay prop er satt til screen', (): void => {
+    test('Så har loaderen en overlay som dekker skjermen, og color er nå svart på loaderen og progressbar. Samt ingen styling på parent element', (): void => {
+      render(
+        <div data-testid="parent-wrapper">
+          <Loader overlay={Overlay.screen} testId={'loaderDotTest'} />
+        </div>
+      );
+      const loader = screen.getByRole('progressbar');
+      expect(loader).toBeVisible();
+
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loader.parentElement).toHaveClass('loader-wrapper--overlay-screen');
+
+      const loaderDotsWrapper = screen.getByTestId('loaderDotTest');
+      expect(loaderDotsWrapper).toHaveAttribute('aria-labelledby', 'test');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderDotsWrapper.children[0].className).toBe('loader__dot loader__dot--small loader__dot--white');
+
+      const parent = screen.getByTestId('parent-wrapper');
+      expect(parent).not.toHaveStyle('position: relative');
+    });
+  });
+
+  describe('Når ariaLabelledById er satt', (): void => {
+    test('Så settes attributten aria-labelledby til det samme', (): void => {
+      render(<Loader ariaLabelledById="aria-test" overlay={Overlay.screen} testId="load" />);
+      const wrapper = screen.getByTestId('load');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(wrapper.parentElement).toHaveClass('loader-wrapper--overlay-screen');
+      expect(wrapper).toHaveAttribute('aria-labelledby', 'aria-test');
+    });
+  });
+
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(<Loader testId="bare-tester" />);
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+    });
+  });
+
+  describe('Når loader skal vises med overlay på parent', (): void => {
+    test('Så så endres parent postion til display og riktig klasse i loader', (): void => {
+      render(
+        <div data-testid="parent-wrapper">
+          <Loader testId="bare-tester" overlay={Overlay.parent} />
+        </div>
+      );
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+
+      const loaderWrapper = screen.getByRole('progressbar');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderWrapper.parentElement).toHaveClass('loader-wrapper--overlay-parent');
+
+      const wrapper = screen.getByTestId('parent-wrapper');
+      expect(wrapper).toHaveStyle('position: relative');
+    });
+  });
+
+  describe('Når loader skal vises inline med span', (): void => {
+    test('Så rendres komponenten med riktig klasse', (): void => {
+      render(
+        <div data-testid="parent-wrapper">
+          <span>{'Morn'}</span>
+          <Loader testId="bare-tester" inline />
+        </div>
+      );
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+
+      const loaderWrapper = screen.getByRole('progressbar');
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(loaderWrapper.parentElement).toHaveClass('loader-wrapper--inline');
+
+      const wrapper = screen.getByTestId('parent-wrapper');
+      expect(wrapper).toHaveStyle('display: flex');
+    });
+  });
+
+  describe('Når loader skal vises med custom labelId', (): void => {
+    test('Så har label id-en', (): void => {
+      render(<Loader ariaLabel="Laster inn" labelId="testing" />);
+
+      const label = screen.getByText('Laster inn');
+      expect(label).toHaveAttribute('id', 'testing');
+    });
+  });
+});

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { AnalyticsId, ZIndex } from '../../constants';
+import { PaletteNames } from '../../theme/palette';
+import { uuid } from '../../utils/uuid';
+
+import loaderStyles from './styles.module.scss';
+
+export type LoaderColors = PaletteNames;
+export type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';
+export enum Overlay {
+  screen = 'screen',
+  parent = 'parent',
+}
+
+export interface LoaderProps {
+  /** Sets the color of the loader. If overlay is used, the color will always be white.  */
+  color?: LoaderColors;
+  /**	Adds custom classes to the element. */
+  className?: string;
+  /** Changes the size of the loader. */
+  size?: LoaderSizes;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+  /** id of the label */
+  labelId?: string;
+  /** Centers the loader in a container */
+  center?: boolean;
+  /** Inline the loader so it can be used in a span or paragraph */
+  inline?: boolean;
+  /** Loader is displayed with grey background covering the entire screen */
+  overlay?: keyof typeof Overlay;
+  /** Individual id for loading icon (aria-labelledby).  */
+  ariaLabelledById?: string;
+  /** String that labels the current loading element  */
+  ariaLabel?: string;
+}
+
+const Loader: React.FC<LoaderProps> = props => {
+  const {
+    overlay,
+    size = 'small',
+    className = '',
+    labelId = uuid(),
+    testId,
+    center,
+    inline,
+    ariaLabelledById,
+    ariaLabel = 'Laster inn',
+  } = props;
+  const color = props.overlay ? 'white' : props.color || 'neutral';
+
+  const showLoader = (): boolean => {
+    if (overlay === Overlay.parent || inline) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const [display, setDisplay] = useState(showLoader());
+
+  const isSmall = size === 'small';
+  const isMedium = size === 'medium';
+  const isLarge = size === 'large';
+
+  const loaderWrapperClasses = classNames({
+    [loaderStyles['loader-wrapper--center']]: center,
+    [loaderStyles['loader-wrapper--overlay']]: overlay,
+    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,
+    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,
+    [loaderStyles['loader-wrapper--inline']]: inline && display,
+  });
+  const loaderClasses = classNames(
+    loaderStyles.loader,
+    {
+      [loaderStyles['loader--small']]: isSmall,
+      [loaderStyles['loader--medium']]: isMedium,
+      [loaderStyles['loader--large']]: isLarge,
+    },
+    className
+  );
+  const loaderDotClasses = classNames(loaderStyles.loader__dot, {
+    [loaderStyles['loader__dot--small']]: isSmall,
+    [loaderStyles['loader__dot--medium']]: isMedium,
+    [loaderStyles['loader__dot--large']]: isLarge,
+    [loaderStyles['loader__dot--banana']]: color === 'banana',
+    [loaderStyles['loader__dot--cherry']]: color === 'cherry',
+    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',
+    [loaderStyles['loader__dot--neutral']]: color === 'neutral',
+    [loaderStyles['loader__dot--plum']]: color === 'plum',
+    [loaderStyles['loader__dot--black']]: color === 'black',
+    [loaderStyles['loader__dot--white']]: color === 'white',
+  });
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {
+      wrapperRef.current.parentElement.style.position = 'relative';
+      setDisplay(true);
+    }
+
+    if (inline && wrapperRef.current?.parentElement?.style) {
+      wrapperRef.current.parentElement.style.display = 'flex';
+      setDisplay(true);
+    }
+  }, []);
+
+  return (
+    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>
+      {display && (
+        <div
+          data-testid={testId}
+          data-analyticsid={AnalyticsId.Loader}
+          role="progressbar"
+          aria-labelledby={ariaLabelledById || labelId}
+          className={loaderClasses}
+        >
+          <div className={loaderDotClasses} />
+          <div className={loaderDotClasses} />
+          <div className={loaderDotClasses} />
+          <div className={loaderDotClasses} />
+          {!ariaLabelledById && (
+            <span id={labelId} className={loaderStyles['loader__hidden-text']}>
+              {ariaLabel}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Loader;

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

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Gitt at en loader skal vises  > Når at en loader rendres  > Så vises loaderen 1`] = `
+<div>
+  <div
+    class=""
+  >
+    <div
+      aria-labelledby="test"
+      class="loader loader--small"
+      data-analyticsid="loader"
+      role="progressbar"
+    >
+      <div
+        class="loader__dot loader__dot--small loader__dot--neutral"
+      />
+      <div
+        class="loader__dot loader__dot--small loader__dot--neutral"
+      />
+      <div
+        class="loader__dot loader__dot--small loader__dot--neutral"
+      />
+      <div
+        class="loader__dot loader__dot--small loader__dot--neutral"
+      />
+      <span
+        class="loader__hidden-text"
+        id="test"
+      >
+        Laster inn
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Loader/index.ts

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

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import Logo from './Logo';
+import { allLogoPaletteNames } from '../../../.storybook/knobs';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Logo',
+  component: Logo,
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => <Docs component={Logo} />,
+      description: {
+        component: 'Et komponent som lar deg vise logoen til helsenorge i ulike varianter',
+      },
+    },
+  },
+  args: {
+    color: 'black',
+    size: 300,
+    byline: false,
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: allLogoPaletteNames,
+    },
+    size: {
+      control: 'number',
+    },
+    byline: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Logo {...args} />,
+};
+
+export const Sizes: Story = {
+  render: args => (
+    <>
+      <Logo {...args} size={100} />
+      <Logo {...args} size={200} />
+      <Logo {...args} size={300} />
+    </>
+  ),
+};
+
+export const Colors: Story = {
+  parameters: {
+    backgrounds: { default: 'neutral400' },
+  },
+  render: args => (
+    <>
+      <Logo {...args} color={'black'} />
+      <Logo {...args} color={'white'} />
+    </>
+  ),
+};
+
+export const Byline: Story = {
+  args: {
+    byline: true,
+  },
+  render: args => <Logo {...args} />,
+};

package/src/components/Logo/Logo.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+
+import Logo from './Logo';
+
+test('displays original logo', (): void => {
+  const { container } = render(<Logo />);
+  expect(container).toMatchSnapshot();
+});
+
+test('displays byline logo', (): void => {
+  const { container } = render(<Logo byline />);
+  expect(container).toMatchSnapshot();
+});
+
+describe('Gitt at Logo skal vises', (): void => {
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(<Logo testId="bare-tester" />);
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+    });
+  });
+});

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { AnalyticsId } from '../../constants';
+import { useUuid } from '../../hooks/useUuid';
+import { getColor } from '../../theme/currys/color';
+
+type LogoColor = 'black' | 'white';
+
+export interface LogoProps {
+  /** Changes the size of the logo. */
+  size?: number;
+  /** Adds custom classes to the element. */
+  className?: string;
+  /**	Changes the color of the logo. */
+  color?: LogoColor;
+  /** Changes to the byline variant of the logo. */
+  byline?: boolean;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+
+const Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {
+  const uuid = useUuid();
+
+  if (byline) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        role={'img'}
+        aria-labelledby={uuid}
+        viewBox="0 0 87 12"
+        className={className}
+        data-testid={testId}
+        data-analyticsid={AnalyticsId.Logo}
+      >
+        <title id={uuid}>{'Helsenorge'}</title>
+        <g fill={getColor(color)}>
+          <path d="M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z" />
+        </g>
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      role={'img'}
+      aria-labelledby={uuid}
+      viewBox="0 0 502 220"
+      className={className}
+      data-testid={testId}
+      data-analyticsid={AnalyticsId.Logo}
+    >
+      <title id={uuid}>{'Helsenorge'}</title>
+      <g fill={getColor(color)}>
+        <path d="M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z" />
+      </g>
+    </svg>
+  );
+};
+
+export default Logo;

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

@@ -0,0 +1,53 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`displays byline logo 1`] = `
+<div>
+  <svg
+    aria-labelledby="test"
+    data-analyticsid="logo"
+    role="img"
+    viewBox="0 0 87 12"
+    width="300"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title
+      id="test"
+    >
+      Helsenorge
+    </title>
+    <g
+      fill="#000000"
+    >
+      <path
+        d="M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z"
+      />
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`displays original logo 1`] = `
+<div>
+  <svg
+    aria-labelledby="test"
+    data-analyticsid="logo"
+    role="img"
+    viewBox="0 0 502 220"
+    width="300"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title
+      id="test"
+    >
+      Helsenorge
+    </title>
+    <g
+      fill="#000000"
+    >
+      <path
+        d="M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z"
+      />
+    </g>
+  </svg>
+</div>
+`;

package/src/components/Logo/index.ts

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

package/src/components/MaxCharacters/MaxCharacters.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+
+import MaxCharacters from './MaxCharacters';
+
+describe('Gitt at MaxCharacters skal vises', (): void => {
+  describe('Når antall tegn er under grensen', (): void => {
+    test('Så vises en teller', (): void => {
+      render(<MaxCharacters length={95} maxCharacters={100} maxText={'characters'} />);
+
+      const text = screen.getByText('95/100 characters');
+      expect(text).toBeVisible();
+      expect(text).toHaveAttribute('aria-atomic', 'true');
+      expect(text).toHaveAttribute('aria-live', 'off');
+    });
+  });
+  describe('Når antall tegn er over 95%', (): void => {
+    test('Så vises en teller', (): void => {
+      render(<MaxCharacters length={96} maxCharacters={100} maxText={'characters'} />);
+
+      const text = screen.getByText('96/100 characters');
+      expect(text).toBeVisible();
+      expect(text).toHaveAttribute('aria-atomic', 'true');
+      expect(text).toHaveAttribute('aria-live', 'polite');
+    });
+  });
+  describe('Når antall tegn er over 100%', (): void => {
+    test('Så vises en teller', (): void => {
+      render(<MaxCharacters length={101} maxCharacters={100} maxText={'characters'} />);
+
+      const text = screen.getByText('101/100 characters');
+      expect(text).toBeVisible();
+      expect(text).toHaveAttribute('aria-atomic', 'true');
+      expect(text).toHaveAttribute('aria-live', 'polite');
+    });
+  });
+});