@goodhood-web/ui 0.0.4 → 0.0.5

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

@@ -1,36 +0,0 @@
-@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

@@ -1,56 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/src/lib/IconButton/utils.ts

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,70 +0,0 @@
-$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

@@ -1,47 +0,0 @@
-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);
-  });
-});

package/src/lib/MenuItem/MenuItem.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BrowserRouter } from 'react-router-dom';
-
-import Icon from '../Icon/Icon';
-import NotificationBubble from '../NotificationBubble/NotificationBubble';
-
-import MenuItem from './MenuItem';
-
-const meta: Meta<typeof MenuItem> = {
-  argTypes: {
-    labelPillText: {
-      control: {
-        type: 'text',
-      },
-      description: 'This will be text of the label pill',
-    },
-    leftIcon: {
-      control: false,
-      description: 'This will be left icon of the menu item',
-    },
-    onBlur: {
-      action: 'blurred',
-      description: 'On blur event callback',
-    },
-    onClick: { action: 'clicked', description: 'On click event callback' },
-    referrerPolicy: {
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'no-referrer',
-      description: 'Referrer policy for the link',
-      options: ['no-referrer', 'origin', 'unsafe-url'],
-    },
-    rightIcon: {
-      control: false,
-      description: 'This will be right icon of the menu item',
-    },
-
-    target: {
-      control: {
-        type: 'select',
-      },
-      defaultValue: '_self',
-      description:
-        "Target attribute for the link '_blank' | '_self' | '_parent' | '_top'",
-      options: ['_blank', '_self', '_parent', '_top'],
-    },
-
-    text: {
-      control: {
-        type: 'text',
-      },
-      defaultValue: 'Home',
-      description: 'This will be text of the menu item',
-    },
-
-    to: {
-      control: {
-        type: 'text',
-      },
-      description: 'This will be the link of the menu item',
-    },
-  },
-  component: MenuItem,
-  decorators: [
-    (Story) => (
-      <BrowserRouter>
-        <Story />
-      </BrowserRouter>
-    ),
-  ],
-  title: 'Components/MenuItem',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MenuItem>;
-
-export const Primary: Story = {
-  args: {
-    labelPillText: 'New',
-    leftIcon: (
-      <NotificationBubble ariaLabel="Notifications">
-        <Icon name="nebenan_de" size="32" />
-      </NotificationBubble>
-    ),
-    rightIcon: <Icon name="chevron_down" size="24" />,
-    text: 'Home',
-    to: '/',
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=3709-7139&mode=design&t=ugANsqRffu1KkyuR-0',
-    },
-  },
-};

package/src/lib/MenuItem/MenuItem.tsx

@@ -1,34 +0,0 @@
-'use client';
-import clsx from 'clsx';
-
-import { BaseButton, LabelPill, Typography } from '@goodhood-web/ui';
-
-import styles from './MenuItem.module.scss';
-import { MenuItemProps } from './MenuItem.types';
-
-const MenuItem = ({
-  isSelected,
-  labelPillText,
-  leftIcon,
-  onClick,
-  rightIcon,
-  text,
-}: MenuItemProps) => (
-  <BaseButton
-    onClick={onClick}
-    className={clsx(styles.menuItem, {
-      [styles['menuItem--selected']]: isSelected,
-    })}
-  >
-    <span className={clsx(styles.highlightFrame)}>
-      {leftIcon}
-      <Typography type="body-large" as="span">
-        {text}
-      </Typography>
-      <LabelPill label={labelPillText} size="small" />
-      <span className={styles.rightIcon}>{rightIcon}</span>
-    </span>
-  </BaseButton>
-);
-
-export default MenuItem;

package/src/lib/MenuItem/MenuItem.types.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface MenuItemProps {
-  isSelected?: boolean;
-  labelPillText: string;
-  leftIcon: ReactNode;
-  onClick: () => void;
-  rightIcon: ReactNode;
-  text: string;
-}