@goodhood-web/ui 0.0.4 → 0.0.5

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

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

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

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

@@ -1,34 +0,0 @@
-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/src/lib/Thumbnail/Thumbnail.module.scss

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

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

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

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

package/src/lib/Toggle/Toggle.module.scss

@@ -1,53 +0,0 @@
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 28px;
-
-  input {
-    position: absolute;
-    z-index: 2;
-    width: 48px;
-    height: 28px;
-    cursor: pointer;
-    opacity: 0;
-  }
-
-  .slider {
-    z-index: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 34px;
-    background-color: getSemanticColor('surface', 'surfaceDim');
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-    cursor: pointer;
-    transition: 0.4s;
-
-    &:before {
-      position: absolute;
-      right: 3px;
-      bottom: 2px;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background-color: getSemanticColor('surface', 'surface');
-      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.20);
-      content: '';
-      transform: translateX(-18px);
-      transition: 0.4s;
-    }
-
-    &.focusVisible {
-      box-shadow: 0 0 0 3px getSemanticColor('primary', 'primary');
-    }
-  }
-
-  input:checked + .slider {
-    background-color: getSemanticColor('primary', 'primaryVariant');
-  }
-
-  input:checked + .slider:before {
-   transform: translateX(0px);
-  }
-}

package/src/lib/Toggle/Toggle.spec.tsx

@@ -1,23 +0,0 @@
-import { render, fireEvent } from '@testing-library/react';
-
-import Toggle from './Toggle';
-
-describe('Toggle', () => {
-  it('renders correctly', () => {
-    const { getByRole } = render(<Toggle />);
-    const switchElement = getByRole('switch');
-
-    expect(switchElement).toBeInTheDocument();
-  });
-
-  it('changes state when clicked', () => {
-    const { getByRole } = render(<Toggle />);
-    const switchElement = getByRole('switch');
-
-    expect(switchElement).not.toBeChecked();
-
-    fireEvent.click(switchElement);
-
-    expect(switchElement).toBeChecked();
-  });
-});

package/src/lib/Toggle/Toggle.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Toggle from './Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  component: Toggle,
-  title: 'Components/Toggle',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Primary: Story = {
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: `"id" prop allows providing an id for the Toggle component.`,
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'onChange handler',
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?type=design&node-id=114-2676&mode=design&t=ChoKDRpaOoYuHr92-0',
-    },
-  },
-};

package/src/lib/Toggle/Toggle.tsx

@@ -1,32 +0,0 @@
-'use client';
-import { useSwitch } from '@mui/base';
-import clsx from 'clsx';
-
-import styles from './Toggle.module.scss';
-import { ToggleProps } from './Toggle.types';
-
-const Toggle = (props: ToggleProps) => {
-  const { checked, disabled, focusVisible, getInputProps } = useSwitch(props);
-  const { id, className } = props;
-
-  return (
-    <span className={clsx(styles.switch, className)}>
-      <input
-        {...getInputProps()}
-        type="checkbox"
-        aria-checked={checked}
-        aria-disabled={disabled}
-        role="switch"
-        id={id}
-        data-testid="toggle-switch"
-      />
-      <span
-        className={clsx(styles.slider, {
-          [styles['focusVisible']]: focusVisible,
-        })}
-      ></span>
-    </span>
-  );
-};
-
-export default Toggle;