@goodhood-web/ui 0.0.3 → 0.0.4

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

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

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

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

package/src/lib/NotificationBubble/NotificationBubble.module.scss

@@ -0,0 +1,30 @@
+.bubbleContent {
+  position: relative;
+  display: inline-block;
+}
+
+.bubble {
+  position: absolute;
+  z-index: auto;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: getSemanticColor(highlight, highlight);
+  color: getSemanticColor(highlight, onHighlight);
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+  white-space: nowrap;
+
+  &--empty {
+    width: 12px;
+    height: 12px;
+  }
+}

package/src/lib/NotificationBubble/NotificationBubble.spec.tsx

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import NotificationBubble from './NotificationBubble';
+import { NotificationBubbleProps } from './NotificationBubble.types';
+
+describe('NotificationBubble', () => {
+  it('renders the bubble with a value', () => {
+    const props: NotificationBubbleProps = {
+      ariaLabel: 'Notification Bubble',
+      value: 5,
+    };
+
+    render(<NotificationBubble {...props}>Content</NotificationBubble>);
+
+    const bubble = screen.getByRole('status', { name: 'Notification Bubble' });
+    const badge = screen.getByText('5');
+    expect(bubble).toBeInTheDocument();
+    expect(badge).toBeInTheDocument();
+  });
+
+  it('renders the bubble without a value', () => {
+    const props: NotificationBubbleProps = {
+      ariaLabel: 'Notification Bubble',
+      value: undefined,
+    };
+
+    render(<NotificationBubble {...props}>Content</NotificationBubble>);
+
+    const bubble = screen.getByRole('status', { name: 'Notification Bubble' });
+    const badge = screen.queryByText('0'); // Modify this to match the expected behavior
+    expect(bubble).toBeInTheDocument();
+    expect(badge).toBeNull(); // Check that badge is not present
+  });
+});

package/src/lib/NotificationBubble/NotificationBubble.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BaseButton from '../BaseButton/BaseButton';
+import Icon from '../Icon/Icon';
+
+import NotificationBubble from './NotificationBubble';
+
+const meta: Meta<typeof NotificationBubble> = {
+  argTypes: {
+    children: {
+      control: { type: 'select' },
+      mapping: {
+        Button: (
+          <BaseButton
+            onClick={() => {
+              // do nothing
+            }}
+          >
+            Button
+          </BaseButton>
+        ),
+        Icon: <Icon name="envelope" size="32" />,
+      },
+      // TODO replace with actual use case from our new design system (Icon etc)
+      options: ['Icon', 'Button'],
+    },
+  },
+  args: {
+    children: 'Icon',
+  },
+  component: NotificationBubble,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=237-3029&mode=design',
+    },
+  },
+  title: 'Components/NotificationBubble',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBubble>;
+
+export const Primary: Story = {
+  args: {
+    ariaLabel: '5 new messages',
+    value: 5,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    ariaLabel: 'Messages',
+  },
+};

package/src/lib/NotificationBubble/NotificationBubble.tsx

@@ -0,0 +1,34 @@
+import { Badge } from '@mui/base';
+import clsx from 'clsx';
+
+import styles from './NotificationBubble.module.scss';
+import { NotificationBubbleProps } from './NotificationBubble.types';
+
+const MAX_COUNT = 9;
+
+const NotificationBubble = (props: NotificationBubbleProps) => {
+  const { ariaLabel, children, value } = props;
+
+  const displayValue = value && value < 0 ? 0 : value;
+  const classes = clsx(
+    {
+      [styles['bubble--empty']]: displayValue === undefined,
+    },
+    styles.bubble,
+  );
+
+  return (
+    <Badge
+      badgeContent={displayValue}
+      className={styles.bubbleContent}
+      max={MAX_COUNT}
+      slotProps={{ badge: { className: classes } }}
+      aria-label={ariaLabel}
+      role="status"
+    >
+      {children}
+    </Badge>
+  );
+};
+
+export default NotificationBubble;

package/{lib/NotificationBubble/NotificationBubble.types.d.ts → src/lib/NotificationBubble/NotificationBubble.types.tsx}

@@ -1,5 +1,6 @@
 import { BadgeOwnProps } from '@mui/base';
+
 export interface NotificationBubbleProps extends BadgeOwnProps {
-    ariaLabel?: string;
-    value?: number;
+  ariaLabel?: string;
+  value?: number;
 }

package/src/lib/Thumbnail/Thumbnail.module.scss

@@ -0,0 +1,67 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
+
+@mixin setSizes {
+  $sizes: (24, 28, 32, 40, 48, 56, 64, 80, 120, 280);
+
+  @each $size in $sizes {
+    &--#{$size} {
+      width: #{$size}px;
+      height: #{$size}px;
+    }
+  }
+}
+
+.root {
+  @include setSizes;
+  position: relative;
+  overflow: hidden;
+  border: solid 1px getSemanticColor('outline', 'outlineVariant');
+  background-color: getSemanticColor('outline', 'outlineVariant');
+
+  &--square {
+    &.root--24,
+    &.root--32 {
+      border-radius: getBorderRadius('xs');
+    }
+    &.root--40,
+    &.root--48 {
+      border-radius: getBorderRadius('sm');
+    }
+    &.root--56,
+    &.root--64 {
+      border-radius: getBorderRadius('md');
+    }
+    &.root--80,
+    &.root--120 {
+      border-radius: getBorderRadius('lg');
+    }
+  }
+
+  &--circular {
+    border-radius: 50%;
+  }
+
+  &--isPlaceholder {
+    &::before {
+      position: absolute;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background-color: getSemanticColor('outline', 'outlineVariant');
+      content: '';
+      opacity: 0.4;
+    }
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/src/lib/Thumbnail/Thumbnail.spec.tsx

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import Thumbnail from './Thumbnail';
+import { ThumbnailCircularProps, ThumbnailSquareProps } from './Thumbnail.type';
+
+describe('Thumbnail component', () => {
+  it('renders a valid circular thumbnail', () => {
+    const circularProps = {
+      alt: 'Test Image',
+      shape: 'circular',
+      size: '40',
+      src: 'test.jpg',
+    };
+    const { container } = render(
+      <Thumbnail {...(circularProps as ThumbnailCircularProps)} />,
+    );
+
+    const thumbnail = container.querySelector('.root--circular');
+    expect(thumbnail).toBeInTheDocument();
+  });
+
+  it('renders a valid square thumbnail', () => {
+    const squareProps = {
+      alt: 'Test Image',
+      shape: 'square',
+      size: '40',
+      src: 'test.jpg',
+    };
+    const { container } = render(
+      <Thumbnail {...(squareProps as ThumbnailSquareProps)} />,
+    );
+    const thumbnail = container.querySelector('.root--square');
+    expect(thumbnail).toBeInTheDocument();
+  });
+
+  it('does not display image when src is not provided', () => {
+    const circularEmptySrcProps = {
+      alt: 'Test Image',
+      shape: 'circular',
+      size: '24',
+      src: '',
+    };
+    const { queryByAltText } = render(
+      <Thumbnail {...(circularEmptySrcProps as ThumbnailSquareProps)} />,
+    );
+    expect(queryByAltText('Test Image')).not.toBeInTheDocument();
+  });
+
+  // Add more test cases for different scenarios
+});

package/src/lib/Thumbnail/Thumbnail.stories.tsx

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Thumbnail from './Thumbnail';
+import { TCircularSize, TSquareSize } from './Thumbnail.type';
+
+const circularSizes = ['28', '32', '40', '48', '56', '80', '120', '280'];
+const squareSizes = ['24', '32', '40', '48', '56', '64', '80', '120'];
+const imgSrc = 'https://placekitten.com/640/360';
+const meta: Meta<typeof Thumbnail> = {
+  component: Thumbnail,
+  title: 'Components/Thumbnail',
+};
+export default meta;
+
+type Story = StoryObj<typeof Thumbnail>;
+
+export const Primary: Story = {
+  argTypes: {
+    alt: {
+      description:
+        'The "alt" attribute provides descriptive text for an image, ensuring accessibility by offering an alternative description.',
+    },
+    isPlaceholder: {
+      active: { control: 'boolean' },
+      defaultValue: { summary: false },
+      description:
+        'The isPlaceholder property is used to add a background color overlay to the component, indicating they are temporary.',
+    },
+    shape: {
+      control: { type: 'radio' },
+      description:
+        'The "shape" property defines the component\'s visual form, with options "circular" or "square."',
+      options: ['circular', 'square'],
+    },
+    size: {
+      control: {
+        readonly: true,
+        type: 'string',
+      },
+      description:
+        'To view the available sizes, please refer to the individual stories that showcase the shape variations.',
+    },
+    src: {
+      description:
+        'The "src" attribute specifies the image source, indicating the location from which the image is loaded.',
+    },
+  },
+  args: {
+    alt: 'component image',
+    isPlaceholder: false,
+    shape: 'circular',
+    size: '80',
+    src: imgSrc,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=116-2637&mode=design&t=0zWTONm1DR992lT9-0',
+    },
+  },
+};
+
+export const Circular: Story = {
+  argTypes: {
+    alt: {
+      control: { readonly: true, type: 'string' },
+    },
+    isPlaceholder: {
+      control: { readonly: true, type: 'string' },
+    },
+    shape: {
+      control: { readonly: true, type: 'string' },
+      description: 'circular',
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      description: `The size property allows you to choose from predefined options like
+          "28", "32", "40", "48", "56", "80", "120" or "280" to specify the element's dimensions or scale in pixels (px).`,
+      options: circularSizes,
+    },
+    src: {
+      control: { readonly: true, type: 'string' },
+    },
+  },
+  args: {
+    shape: 'circular',
+    size: '48',
+    src: imgSrc,
+  },
+  parameters: {
+    a11y: {
+      disable: true,
+    },
+    actions: {
+      disable: true,
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=116%3A2649&mode=dev',
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '32px',
+        justifyContent: 'space-between',
+      }}
+    >
+      <div style={{ display: 'flex', height: '280px', width: '280px' }}>
+        <Thumbnail
+          shape="circular"
+          src={imgSrc}
+          size={args?.size as TCircularSize}
+          alt=""
+        />
+      </div>
+      <div
+        style={{
+          alignItems: 'start',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '16px',
+          justifyContent: 'center',
+        }}
+      >
+        {circularSizes.map((size) => {
+          return (
+            <div
+              key={size}
+              style={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+              }}
+            >
+              <h2>{size}</h2>
+              <Thumbnail
+                shape="circular"
+                src={imgSrc}
+                size={`${size}` as TCircularSize}
+                alt={size}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  argTypes: {
+    alt: {
+      control: { readonly: true, type: 'string' },
+    },
+    isPlaceholder: {
+      control: { readonly: true, type: 'string' },
+    },
+    shape: {
+      control: { readonly: true, type: 'string' },
+      description: 'square',
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      description: `The size property allows you to choose from predefined options like
+          "24", "32", "40", "48", "56", "64", "80" or "120" to specify the element's dimensions or scale in pixels (px).`,
+      options: squareSizes,
+    },
+    src: {
+      control: { readonly: true, type: 'string' },
+    },
+  },
+  args: {
+    shape: 'square',
+    size: '48',
+    src: imgSrc,
+  },
+  parameters: {
+    a11y: {
+      disable: true,
+    },
+    actions: {
+      disable: true,
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=119-2453&mode=design&t=tRDkebYkaf8rn7Vz-0',
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '32px',
+        justifyContent: 'space-between',
+      }}
+    >
+      <div style={{ display: 'flex', height: '120px', width: '120px' }}>
+        <Thumbnail shape="square" src={imgSrc} size={args?.size as TSquareSize} alt="" />
+      </div>
+      <div
+        style={{
+          alignItems: 'start',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '16px',
+          justifyContent: 'center',
+        }}
+      >
+        {squareSizes.map((size) => {
+          return (
+            <div
+              key={size}
+              style={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+              }}
+            >
+              <h2>{size}</h2>
+              <Thumbnail
+                shape="square"
+                src={imgSrc}
+                size={`${size}` as TSquareSize}
+                alt={size}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  ),
+};

package/src/lib/Thumbnail/Thumbnail.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+import Image from '../Image/Image';
+
+import styles from './Thumbnail.module.scss';
+import { ThumbnailCircularProps, ThumbnailSquareProps } from './Thumbnail.type';
+
+const Thumbnail = ({
+  alt,
+  isPlaceholder,
+  shape,
+  size,
+  src,
+}: ThumbnailCircularProps | ThumbnailSquareProps) => {
+  const thumbnailIsPlaceholder = styles['root--isPlaceholder'];
+
+  return (
+    <div
+      className={clsx(styles.root, styles[`root--${size}`], styles[`root--${shape}`], {
+        [thumbnailIsPlaceholder]: isPlaceholder,
+      })}
+    >
+      {src && <Image src={src} alt={alt} />}
+    </div>
+  );
+};
+
+export default Thumbnail;