@helsenorge/designsystem-react 12.11.1 → 12.12.2

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import Avatar, { AvatarSize } from './Avatar';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Avatar',
+  component: Avatar,
+  tags: ['breaking'],
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => (
+        <Docs component={Avatar} supernovaLink="https://frankenstein.helsenorge.design/latest/komponenter/avatar/bruk-tsrq6evL" />
+      ),
+      description: {
+        component:
+          'Avatar lar innbygger oppfatte en representasjon, f.eks. hvem man er logget inn som, hvem man handler på vegne av eller hvem som er avsender eller mottaker av en melding',
+      },
+    },
+  },
+  args: {
+    children: 'Line Danser',
+    selected: false,
+    size: AvatarSize.small,
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    selected: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: Object.values(AvatarSize),
+    },
+    color: {
+      control: 'select',
+      options: ['blueberry', 'black'],
+    },
+    variant: {
+      control: 'select',
+      options: ['square', 'circle'],
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Avatar {...args} />,
+};
+
+export const Inverted: Story = {
+  args: {
+    color: 'black',
+  },
+  render: args => <Avatar {...args} />,
+};
+
+export const RepresentingSomeoneElse: Story = {
+  args: {
+    variant: 'circle',
+  },
+  render: args => <Avatar {...args} />,
+};

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,55 @@
+import { screen, render } from '@testing-library/react';
+
+import Avatar from './Avatar';
+
+describe('Gitt at Avatar skal vises', (): void => {
+  describe('Når selected er false', (): void => {
+    it('Så vises teksten i Avatar-komponenten', (): void => {
+      const { container } = render(<Avatar>{'Line Danser'}</Avatar>);
+
+      const text = screen.getByText('Li');
+      expect(text).toBeVisible();
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Når selected er true', (): void => {
+    it('Så vises ikke teksten', (): void => {
+      const { container } = render(<Avatar selected>{'Line Danser'}</Avatar>);
+
+      const text = screen.queryByText('Li');
+      expect(text).not.toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Når variant er black', (): void => {
+    it('Så skal komponenten være svart', (): void => {
+      const { container } = render(<Avatar color="black">{'Barbra Streisand'}</Avatar>);
+
+      const text = screen.queryByText('Ba');
+      expect(text).toBeVisible();
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Når variant er black og selected', (): void => {
+    it('Så skal bakgrunnen være transparent og fargen på ikon er svart', (): void => {
+      const { container } = render(
+        <Avatar selected color="black">
+          {'Barbra Streisand'}
+        </Avatar>
+      );
+
+      const text = screen.queryByText('Ba');
+      expect(text).not.toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(<Avatar testId="bare-tester">{'Barbara Streisand'}</Avatar>);
+
+      const component = screen.getByTestId('bare-tester');
+      expect(component).toBeVisible();
+    });
+  });
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import cn from 'classnames';
+
+import { AnalyticsId } from '../../constants';
+import { palette } from '../../theme/palette';
+import Icon, { IconSize } from '../Icon';
+import Check from '../Icons/Check';
+
+import styles from './styles.module.scss';
+
+export enum AvatarSize {
+  xsmall = 'xsmall',
+  small = 'small',
+}
+
+export interface AvatarProps {
+  /** Name to display in the avatar. Will be truncated to the first two characters. */
+  children: string;
+  /** Displays a check icon to indicated the selected state. */
+  selected?: boolean;
+  /** Sets blue or black color on avatar. */
+  color?: 'blueberry' | 'black';
+  /** Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */
+  variant?: 'square' | 'circle';
+  /** Avatar size. Default: small */
+  size?: keyof typeof AvatarSize;
+  /** Adds custom classes to the element. */
+  className?: string;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+}
+export type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;
+const Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {
+  const { children, className = '', selected = false, color = 'blueberry', variant = 'square', size = AvatarSize.small, testId } = props;
+  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
+  return (
+    <span
+      className={cn(
+        styles.avatar,
+        selected && styles['avatar--selected'],
+        color === 'black' && styles['avatar--black'],
+        variant === 'circle' && styles['avatar--circle'],
+        size === AvatarSize.xsmall && styles['avatar--xsmall'],
+        size === AvatarSize.small && styles['avatar--small'],
+        className
+      )}
+      ref={ref}
+      data-testid={testId}
+      data-analyticsid={AnalyticsId.Avatar}
+    >
+      {selected ? (
+        <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />
+      ) : (
+        truncatedName
+      )}
+    </span>
+  );
+});
+
+export default Avatar;

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

@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Gitt at Avatar skal vises > Når selected er false > Så vises teksten i Avatar-komponenten 1`] = `
+<div>
+  <span
+    class="avatar avatar--small"
+    data-analyticsid="avatar"
+  >
+    Li
+  </span>
+</div>
+`;
+
+exports[`Gitt at Avatar skal vises > Når selected er true > Så vises ikke teksten 1`] = `
+<div>
+  <span
+    class="avatar avatar--selected avatar--small"
+    data-analyticsid="avatar"
+  >
+    <svg
+      aria-hidden="true"
+      class="hnds-style-icon"
+      color="#126F87"
+      data-analyticsid="icon"
+      fill="#126F87"
+      focusable="false"
+      height="48"
+      role="presentation"
+      style="min-width: 48px; min-height: 48px;"
+      viewBox="0 0 48 48"
+      width="48"
+    >
+      <path
+        d="M22.504 31.198l-9.59-9.966 1.441-1.387 8.149 8.468 14.455-15.016 1.441 1.386z"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Gitt at Avatar skal vises > Når variant er black > Så skal komponenten være svart 1`] = `
+<div>
+  <span
+    class="avatar avatar--black avatar--small"
+    data-analyticsid="avatar"
+  >
+    Ba
+  </span>
+</div>
+`;
+
+exports[`Gitt at Avatar skal vises > Når variant er black og selected > Så skal bakgrunnen være transparent og fargen på ikon er svart 1`] = `
+<div>
+  <span
+    class="avatar avatar--selected avatar--black avatar--small"
+    data-analyticsid="avatar"
+  >
+    <svg
+      aria-hidden="true"
+      class="hnds-style-icon"
+      color="#2B2C2B"
+      data-analyticsid="icon"
+      fill="#2B2C2B"
+      focusable="false"
+      height="48"
+      role="presentation"
+      style="min-width: 48px; min-height: 48px;"
+      viewBox="0 0 48 48"
+      width="48"
+    >
+      <path
+        d="M22.504 31.198l-9.59-9.966 1.441-1.387 8.149 8.468 14.455-15.016 1.441 1.386z"
+      />
+    </svg>
+  </span>
+</div>
+`;

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Docs } from 'frankenstein-build-tools';
+
+import Badge from './Badge';
+import Title from '../Title';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/Components/Badge',
+  component: Badge,
+  parameters: {
+    docs: {
+      page: (): React.JSX.Element => (
+        <Docs component={Badge} supernovaLink="https://frankenstein.helsenorge.design/latest/komponenter/badge/bruk-TCKiSYLz" />
+      ),
+      description: {
+        component:
+          'Badge [Markør] lar innbygger oppfatte at det er et antall nye elementer som har kommet til i et område siden sist gang innbygger besøkte området.',
+      },
+    },
+  },
+  args: {
+    children: 'Tekst',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: ['blueberry', 'cherry', 'neutral'],
+    },
+    type: {
+      control: 'select',
+      options: ['string', 'notification'],
+    },
+    notificationVariant: {
+      control: 'select',
+      options: ['success', 'warn', 'error', 'info'],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: args => <Badge {...args} />,
+};
+
+export const Colors: Story = {
+  render: args => (
+    <>
+      <Title margin={2} htmlMarkup={'h3'} appearance={'title3'}>
+        {'Colors'}
+      </Title>
+      <br />
+      <Badge color="blueberry">{args.children}</Badge>
+      <br />
+      <Badge color="cherry">{args.children}</Badge>
+      <br />
+      <Badge color="neutral">{args.children}</Badge>
+    </>
+  ),
+};
+
+export const Notification: Story = {
+  render: () => (
+    <>
+      <Title margin={2} htmlMarkup={'h3'} appearance={'title3'}>
+        {'Notification variants'}
+      </Title>
+      <br />
+      <Badge type="notification" notificationVariant="info" />
+      <br />
+      <Badge type="notification" notificationVariant="warn" />
+      <br />
+      <Badge type="notification" notificationVariant="error" />
+      <br />
+      <Badge type="notification" notificationVariant="success" />
+    </>
+  ),
+};

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+
+import Badge from './Badge';
+
+describe('Gitt at Badge skal vises', (): void => {
+  describe('Når Badge har tekst', (): void => {
+    test('Så vises teksten', (): void => {
+      render(<Badge>{123}</Badge>);
+
+      const badgeNumber = screen.getByText('123');
+      expect(badgeNumber).toBeVisible();
+    });
+  });
+  describe('Når Badge er av type notification', (): void => {
+    test('Så vises ikke teksten', (): void => {
+      render(
+        <Badge type="notification" notificationVariant="info">
+          {123}
+        </Badge>
+      );
+
+      const text = screen.queryByText('123');
+      expect(text).not.toBeInTheDocument();
+    });
+  });
+  describe('Når testId-prop er satt', (): void => {
+    test('Så kan komponenten finnes ved hjelp av testId', (): void => {
+      render(<Badge testId="bare-tester">{'123'}</Badge>);
+
+      const component = screen.getByTestId('bare-tester');
+
+      expect(component).toBeVisible();
+    });
+  });
+  describe('Når Badge rendres med ulike farger', (): void => {
+    test('Så rendres innholdet riktig', (): void => {
+      render(
+        <div>
+          <Badge testId={'test01'} color="blueberry">
+            {'Badge'}
+          </Badge>
+          <Badge testId={'test02'} color="cherry">
+            {'Badge'}
+          </Badge>
+          <Badge testId={'test03'} color="neutral">
+            {'Badge'}
+          </Badge>
+        </div>
+      );
+
+      const testFill = screen.getByTestId('test01');
+      expect(testFill.className).toBe('badge badge--blueberry');
+
+      const testOutline = screen.getByTestId('test02');
+      expect(testOutline.className).toBe('badge badge--cherry');
+
+      const testBorderless = screen.getByTestId('test03');
+      expect(testBorderless.className).toBe('badge badge--neutral');
+    });
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import NotificationBadge, { BadgeNotificationVariant } from './NotificationBadge';
+import { AnalyticsId, IconSize } from '../../constants';
+import { PaletteNames } from '../../theme/palette';
+
+import badgeStyles from './styles.module.scss';
+
+export type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;
+export type BadgeChildren = string | number;
+export type BadgeVariant = 'string' | 'notification';
+
+export interface BadgeProps {
+  /** Sets the content of the badge. */
+  children?: BadgeChildren;
+  /** Adds custom classes to the element. */
+  className?: string;
+  /** Changes the badge background color. */
+  color?: BadgeColors;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+  /** Changes the type of the badge. Default: string */
+  type?: BadgeVariant;
+  /** Type of notification badge. Only works if type is 'notification'. */
+  notificationVariant?: BadgeNotificationVariant;
+}
+
+export type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
+const Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {
+  const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info' } = props;
+  const badgeClasses = classNames(
+    badgeStyles.badge,
+    {
+      [badgeStyles['badge--blueberry']]: color === 'blueberry',
+      [badgeStyles['badge--cherry']]: color === 'cherry',
+      [badgeStyles['badge--neutral']]: color === 'neutral',
+    },
+    className
+  );
+
+  if (type === 'notification' && notificationVariant !== undefined) {
+    return (
+      <NotificationBadge
+        variant={notificationVariant}
+        size={IconSize.XSmall}
+        className={className}
+        testId={testId}
+        data-analyticsid={AnalyticsId.Badge}
+      />
+    );
+  }
+
+  return (
+    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>
+      {children}
+    </span>
+  );
+});
+
+export default Badge;

package/src/components/Badge/NotificationBadge.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { IconSize } from '../../constants';
+import { palette } from '../../theme/palette';
+import Icon from '../Icon';
+import CheckFill from '../Icons/CheckFill';
+import ErrorSignFill from '../Icons/ErrorSignFill';
+import InfoSignFill from '../Icons/InfoSignFill';
+import TriangleX from '../Icons/TriangleX';
+
+export type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';
+
+export interface NotificationBadgeProps {
+  /** Changes the type of the badge */
+  variant: BadgeNotificationVariant;
+  /** Sets the size of the badge */
+  size: IconSize;
+  /** Adds custom classes to the element */
+  className?: string;
+  /** Sets the data-testid attribute. */
+  testId?: string;
+  /** Sets hover state */
+  isHovered?: boolean;
+}
+
+const NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {
+  const { variant, size, className = '', testId, isHovered = false } = props;
+  switch (variant) {
+    case 'info':
+      return (
+        <Icon
+          svgIcon={InfoSignFill}
+          color={palette.blueberry700}
+          hoverColor={palette.blueberry700}
+          size={size}
+          className={className}
+          testId={testId}
+          isHovered={isHovered}
+        />
+      );
+    case 'warn':
+      return (
+        <Icon
+          svgIcon={ErrorSignFill}
+          color={palette.banana800}
+          hoverColor={palette.banana700}
+          size={size}
+          className={className}
+          testId={testId}
+          isHovered={isHovered}
+        />
+      );
+    case 'error':
+      return (
+        <Icon
+          svgIcon={TriangleX}
+          color={palette.cherry700}
+          hoverColor={palette.cherry700}
+          size={size}
+          className={className}
+          testId={testId}
+          isHovered={isHovered}
+        />
+      );
+    case 'success':
+      return (
+        <Icon
+          svgIcon={CheckFill}
+          color={palette.kiwi900}
+          hoverColor={palette.kiwi900}
+          size={size}
+          className={className}
+          testId={testId}
+          isHovered={isHovered}
+        />
+      );
+  }
+};
+
+export default NotificationBadge;

package/src/components/Badge/index.ts

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