@goodhood-web/ui 0.0.3 → 0.0.4

package/src/lib/Icon/icons/32x32/svg/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path stroke="#201649" stroke-width="1.5" d="M16 14.5a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 0a8 8 0 0 0-8 8v2.114c0 .834.517 1.578 1.316 1.814C10.821 26.87 13.41 27.5 16 27.5s5.18-.629 6.684-1.072c.8-.236 1.316-.98 1.316-1.814V22.5a8 8 0 0 0-8-8Z"/></svg>

package/src/lib/Icon/icons/32x32/svg/user_profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path stroke="#201649" stroke-width="1.5" d="M16 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 0c-3.866 0-7 3.5-7 7 0 .263.015 1.523.043 1.779M16 17c3.866 0 6.957 3.5 7 7 .003.263-.015 1.523-.043 1.779m-13.914 0A11.945 11.945 0 0 0 16 28c2.593 0 4.995-.823 6.957-2.221m-13.914 0A11.985 11.985 0 0 1 4 16C4 9.373 9.373 4 16 4s12 5.373 12 12c0 4.034-1.99 7.603-5.043 9.779"/></svg>

package/src/lib/Icon/icons/32x32/svg/wellness.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path stroke="#201649" stroke-linecap="round" stroke-miterlimit="16" stroke-width="1.5" d="M16 25.5S11 21 11 16c0-3.881 3.013-7.461 4.361-8.869a.875.875 0 0 1 1.278 0C17.987 8.54 21 12.12 21 16c0 5-5 9.5-5 9.5Zm0 0c8.398 0 11.725-4.087 11.983-11.529a.926.926 0 0 0-.95-.966c-1.358.038-3.9.22-6.033 1.007M16 25.5c-8.267 0-11.713-4.137-11.983-11.529a.925.925 0 0 1 .95-.966c1.358.038 3.9.22 6.033 1.007"/></svg>

package/src/lib/Icon/icons/index.ts

@@ -0,0 +1,9 @@
+import icons24 from './24x24';
+import icons32 from './32x32';
+
+const iconsMap = {
+  '24': icons24,
+  '32': icons32,
+};
+
+export default iconsMap;

package/src/lib/IconButton/IconButton.module.scss

@@ -0,0 +1,36 @@
+@mixin iconButtonSize($size) {
+  width: $size;
+  height: $size;
+}
+
+.iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: getSemanticColor('primary', 'primary');
+
+  &:disabled {
+    background: getSemanticColor('surface', 'surface');
+  }
+
+  &:hover {
+    background: getSemanticColor('primary', 'primaryVariant');
+  }
+
+  &:active {
+    background: getSemanticColor('primary', 'primary');
+  }
+
+  &--small {
+    @include iconButtonSize(40px);
+  }
+
+  &--medium {
+    @include iconButtonSize(48px);
+  }
+
+  &--large {
+    @include iconButtonSize(56px);
+  }
+}

package/src/lib/IconButton/IconButton.spec.tsx

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import IconButton from './IconButton';
+
+describe('IconButton', () => {
+  it('should render a medium sized icon button by default', () => {
+    const { baseElement } = render(
+      <IconButton
+        icon="pencil"
+        ariaLabel="create post"
+        onClick={() => {
+          // empty body
+        }}
+      />,
+    );
+    const iconButtonEl = baseElement.querySelector('[type=button]');
+
+    expect(iconButtonEl).toBeInTheDocument();
+    expect(iconButtonEl).not.toBeEmptyDOMElement();
+  });
+
+  it('should render a empty button if icon and size are incompatible', () => {
+    const { baseElement } = render(
+      // @ts-expect-error no small icon for address_book
+      <IconButton
+        size="small"
+        icon="address_book"
+        onClick={() => {
+          // empty body
+        }}
+      />,
+    );
+    const iconButtonEl = baseElement.querySelector('[type=button]');
+
+    expect(iconButtonEl).toBeInTheDocument();
+    expect(iconButtonEl).toBeEmptyDOMElement();
+  });
+
+  it('should handle button click', async () => {
+    const handleClick = jest.fn();
+
+    const { baseElement } = render(
+      <IconButton
+        icon="pencil"
+        size="medium"
+        onClick={handleClick}
+        ariaLabel="create new post"
+      />,
+    );
+    const iconButtonEl = baseElement.querySelector('[type=button]');
+
+    await userEvent.click(iconButtonEl as HTMLButtonElement);
+    expect(handleClick).toHaveBeenCalled();
+  });
+});

package/src/lib/IconButton/IconButton.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Icons24 from '../Icon/icons/24x24';
+import Icons32 from '../Icon/icons/32x32';
+
+import IconButton from './IconButton';
+
+const iconNames24 = Object.keys(Icons24);
+const iconName32 = Object.keys(Icons32);
+const allIconNames = Array.from(new Set([...iconNames24, ...iconName32]));
+
+const meta: Meta<typeof IconButton> = {
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: allIconNames,
+    },
+  },
+  component: IconButton,
+  title: 'Components/IconButton',
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Primary: Story = {
+  args: {
+    icon: 'pencil',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=6952-1150&mode=design&t=3J2DmPvWcXt6Hs2q-4',
+    },
+  },
+};

package/src/lib/IconButton/IconButton.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import BaseButton from '../BaseButton/BaseButton';
+import Icon from '../Icon/Icon';
+
+import styles from './IconButton.module.scss';
+import { IconButtonProps } from './IconButton.types';
+import { getIconSize } from './utils';
+
+const IconButton = ({ icon, size = 'medium', ...baseButtonProps }: IconButtonProps) => {
+  const iconSize = getIconSize(size);
+
+  return (
+    <BaseButton
+      {...baseButtonProps}
+      className={clsx(styles.iconButton, styles[`iconButton--${size}`])}
+    >
+      {/* @ts-expect-error Icon validates props */}
+      <Icon size={iconSize} name={icon} />
+    </BaseButton>
+  );
+};
+
+export default IconButton;

package/{lib/IconButton/IconButton.types.d.ts → src/lib/IconButton/IconButton.types.ts}

@@ -1,17 +1,17 @@
 import { BaseButtonProps } from '../BaseButton/BaseButton';
 import { Icon24, Icon32 } from '../Icon/Icon.types';
-type BaseIconButtonProps = Omit<BaseButtonProps, 'children' | 'ref' | 'className'> & ({
-    ariaLabel: string;
-} | {
-    ariaLabelledBy: string;
-});
+
+type BaseIconButtonProps = Omit<BaseButtonProps, 'children' | 'ref' | 'className'> &
+  ({ ariaLabel: string } | { ariaLabelledBy: string });
+
 type IconButtonIcon24Props = {
-    icon: Icon24;
-    size?: 'small';
+  icon: Icon24;
+  size?: 'small';
 } & BaseIconButtonProps;
+
 type IconButtonIcon32Props = {
-    icon: Icon32;
-    size: 'medium' | 'large';
+  icon: Icon32;
+  size: 'medium' | 'large';
 } & BaseIconButtonProps;
+
 export type IconButtonProps = IconButtonIcon32Props | IconButtonIcon24Props;
-export {};

package/src/lib/IconButton/utils.ts

@@ -0,0 +1,6 @@
+type IconButtonSize = 'large' | 'medium' | 'small';
+
+export const getIconSize = (size: IconButtonSize) => {
+  if (size === 'small') return '24';
+  return '32';
+};

package/src/lib/Image/Image.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Image from './Image';
+
+describe('Image', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Image src="" alt="" />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/Image/Image.tsx

@@ -0,0 +1,7 @@
+import { ImageProps } from './Image.type';
+
+const Image = ({ alt, className, src }: ImageProps) => (
+  <img className={className} src={src} alt={alt} />
+);
+
+export default Image;

package/src/lib/Image/Image.type.tsx

@@ -0,0 +1,5 @@
+export interface ImageProps {
+  alt: string;
+  className?: string;
+  src: string;
+}

package/src/lib/LabelPill/LabelPill.module.scss

@@ -0,0 +1,33 @@
+.labelPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: mapGet($tokens, borderRadius, lg);
+  background: getSemanticColor('secondary2', 'secondary2');
+
+  span {
+    color: getSemanticColor('secondary2', 'onSecondary2');
+    line-height: mapGet($tokens, lineHeight, sm);
+    text-align: center;
+  }
+
+  &--small {
+    height: 20px;
+    padding: 0px 8px;
+
+    span {
+      font-size: 10px;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+  }
+
+  &--medium {
+    padding: 4px 8px;
+
+    span {
+      font-size: 12px;
+      font-weight: 700;
+    }
+  }
+}

package/src/lib/LabelPill/LabelPill.spec.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+
+import LabelPill from './LabelPill';
+
+describe('LabelPill', () => {
+  it('should render with "small" size', () => {
+    const { baseElement } = render(<LabelPill label="New" size="small" />);
+    const spanElement = baseElement.querySelector('span.labelPill span');
+
+    expect(spanElement?.innerHTML).toBe('New');
+
+    const elementWithClassName = baseElement.querySelector('.labelPill--small');
+
+    expect(elementWithClassName).not.toBeNull();
+  });
+
+  it('should renders with "medium" size', () => {
+    const { baseElement } = render(<LabelPill label="New" size="medium" />);
+    const elementWithClassName = baseElement.querySelector('.labelPill--medium');
+
+    expect(elementWithClassName).not.toBeNull();
+  });
+});

package/src/lib/LabelPill/LabelPill.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import LabelPill from './LabelPill';
+
+const meta: Meta<typeof LabelPill> = {
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium'],
+    },
+  },
+  component: LabelPill,
+  title: 'Components/LabelPill',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LabelPill>;
+
+export const Primary: Story = {
+  args: {
+    label: 'new',
+    size: 'small',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=1680%3A6106&mode=dev',
+    },
+  },
+};

package/src/lib/LabelPill/LabelPill.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+
+import styles from './LabelPill.module.scss';
+import { LabelPillProps } from './LabelPill.types';
+
+const LabelPill = ({ label, size }: LabelPillProps) => {
+  const pillClass = styles[`labelPill--${size}`];
+
+  return (
+    <span className={clsx(styles.labelPill, pillClass)}>
+      <span>{label}</span>
+    </span>
+  );
+};
+
+export default LabelPill;

package/src/lib/LabelPill/LabelPill.types.ts

@@ -0,0 +1,4 @@
+export interface LabelPillProps {
+  label: string;
+  size: 'small' | 'medium';
+}

package/src/lib/Legend/Legend.module.scss

@@ -0,0 +1,9 @@
+.legend {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: getSpacing('md');
+  gap: getSpacing('sm');
+  .text {
+    color: getSemanticColor('surface', 'onSurfaceVariant');
+  }
+}

package/src/lib/Legend/Legend.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+
+import Legend from './Legend';
+
+describe('Legend', () => {
+  it('should render with a headline', () => {
+    const { getByText } = render(<Legend headline="Example Headline" />);
+    const headlineElement = getByText('Example Headline');
+
+    expect(headlineElement).toBeInTheDocument();
+  });
+
+  it('should render with optional text when provided', () => {
+    const testText = 'Additional information';
+    const { getByText } = render(
+      <Legend headline="Headline" text={testText} />,
+    );
+    const textElement = getByText(testText);
+
+    expect(textElement).toBeInTheDocument();
+  });
+
+  it('should not render optional text when not provided', () => {
+    const { queryByText } = render(<Legend headline="Headline" />);
+    const textElement = queryByText('Additional information');
+
+    expect(textElement).toBeNull();
+  });
+
+  it('should apply custom className if provided', () => {
+    const customClass = 'custom-legend-class';
+    const { container } = render(
+      <Legend headline="Headline" className={customClass} />,
+    );
+    const legendElement = container.firstChild;
+
+    expect(legendElement).toHaveClass(customClass);
+  });
+});

package/src/lib/Legend/Legend.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Legend from './Legend';
+
+const meta: Meta<typeof Legend> = {
+  argTypes: {
+    className: {
+      control: { type: 'text' },
+      description: 'Additional CSS class name',
+    },
+    headline: {
+      control: { type: 'text' },
+      description: 'Headline of the legend',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'Text of the legend',
+    },
+  },
+  component: Legend,
+  title: 'Components/Legend',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Legend>;
+
+export const Primary: Story = {
+  args: {
+    headline: 'Test Headline',
+    text: 'Test Text',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Q0LB4cf1uDAOQlRv79mj2W/User-Settings?type=design&node-id=5534-27808&mode=design&t=twDm2lPGITVsLdiy-0',
+    },
+  },
+};

package/src/lib/Legend/Legend.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+import { Typography } from '@goodhood-web/ui';
+
+import styles from './Legend.module.scss';
+import { LegendProps } from './Legend.types';
+
+const Legend = ({ className, headline, text }: LegendProps) => (
+  <legend className={clsx(styles.legend, className)}>
+    <Typography type="h5">{headline}</Typography>
+    {text && (
+      <Typography className={styles.text} type="body-regular" as="p">
+        {text}
+      </Typography>
+    )}
+  </legend>
+);
+
+export default Legend;

package/src/lib/Legend/Legend.types.ts

@@ -0,0 +1,5 @@
+export type LegendProps = {
+  className?: string;
+  headline: string;
+  text?: string;
+};

package/src/lib/MenuItem/MenuItem.module.scss

@@ -0,0 +1,70 @@
+$color-surface: getSemanticColor('surface', 'surface');
+$color-on-surface: getSemanticColor('surface', 'onSurface');
+$color-on-surface-variant: getSemanticColor('surface', 'onSurfaceVariant');
+$color-surface-container: getSemanticColor('surface', 'surfaceContainer');
+
+$color-primary: getSemanticColor('primary', 'primary');
+$color-on-primary-container: getSemanticColor('primary', 'onPrimaryContainer');
+$color-primary-container: getSemanticColor('primary', 'primaryContainer');
+
+$border-radius-sm: mapGet($tokens, borderRadius, sm);
+
+$spacing-sm: getSpacing('sm');
+
+.menuItem {
+  display: flex;
+  width: 280px;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 $spacing-sm;
+  background-color: $color-surface;
+  color: $color-on-surface;
+  gap: $spacing-sm;
+  text-decoration: none;
+
+  .highlightFrame {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding: $spacing-sm;
+    border-radius: $border-radius-sm;
+    gap: $spacing-sm;
+  }
+
+  .rightIcon {
+    display: inherit;
+    margin-left: auto;
+
+    svg path {
+      stroke: $color-on-surface-variant !important;
+    }
+  }
+  &--selected {
+    .highlightFrame {
+      background-color: $color-primary-container;
+
+      svg path {
+        stroke: $color-on-primary-container;
+      }
+    }
+    &:hover {
+      color: $color-on-primary-container;
+    }
+  }
+  &:not(&--selected) {
+    &:active {
+      background-color: $color-surface-container;
+    }
+    &:hover {
+      color: $color-on-surface-variant;
+
+      svg path {
+        stroke: $color-on-surface-variant;
+      }
+
+      .highlightFrame {
+        background-color: $color-surface-container;
+      }
+    }
+  }
+}

package/src/lib/MenuItem/MenuItem.spec.tsx

@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import MenuItem from './MenuItem';
+import { MenuItemProps } from './MenuItem.types';
+
+describe('MenuItem Component', () => {
+  const defaultProps: MenuItemProps = {
+    labelPillText: 'Label',
+    leftIcon: null,
+    onClick: jest.fn(),
+    rightIcon: null,
+    text: 'Test Menu Item',
+  };
+
+  it('renders with the correct props', () => {
+    render(<MenuItem {...defaultProps} />);
+
+    const textElement = screen.getByText(defaultProps.text);
+    const labelPillElement = screen.getByText(defaultProps.labelPillText);
+
+    expect(textElement).toBeInTheDocument();
+    expect(labelPillElement).toBeInTheDocument();
+    expect(textElement.textContent).toBe(defaultProps.text);
+    expect(labelPillElement.textContent).toBe(defaultProps.labelPillText);
+  });
+
+  it('renders left and right icons when provided', () => {
+    const mockLeftIcon = <span>Left Icon</span>;
+    const mockRightIcon = <span>Right Icon</span>;
+    render(
+      <MenuItem {...defaultProps} leftIcon={mockLeftIcon} rightIcon={mockRightIcon} />,
+    );
+
+    expect(screen.getByText('Left Icon')).toBeInTheDocument();
+    expect(screen.getByText('Right Icon')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    render(<MenuItem {...defaultProps} />);
+
+    const menuItem = screen.getByRole('button');
+
+    fireEvent.click(menuItem);
+
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+});