@goodhood-web/ui 0.0.3 → 0.0.4

package/src/lib/Thumbnail/Thumbnail.type.tsx

@@ -0,0 +1,18 @@
+import { ImageProps } from '../Image/Image.type';
+
+interface ThumbnailProps extends ImageProps {
+  isPlaceholder?: boolean;
+}
+
+export type TCircularSize = '28' | '32' | '40' | '48' | '56' | '80' | '120' | '280';
+export type TSquareSize = '24' | '32' | '40' | '48' | '56' | '64' | '80' | '120';
+
+export interface ThumbnailCircularProps extends ThumbnailProps {
+  shape: 'circular';
+  size: TCircularSize;
+}
+
+export interface ThumbnailSquareProps extends ThumbnailProps {
+  shape: 'square';
+  size: TSquareSize;
+}

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { UseSwitchParameters } from '@mui/base';
+
 export interface ToggleProps extends UseSwitchParameters {
-    className?: string;
-    id?: string;
+  className?: string;
+  id?: string;
 }

package/src/lib/ToggleInput/ToggleInput.module.scss

@@ -0,0 +1,33 @@
+.toggleInput {
+  display: flex;
+  align-items: center;
+  padding: getSpacing('sm') getSpacing('lg');
+  background-color: getSemanticColor('surface', 'surface');
+  gap: getSpacing('md');
+
+  color: getSemanticColor('surface', 'onSurfaceVariant');
+  cursor: pointer;
+  width: 100%;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  .textLabel {
+    flex-grow: 1;
+  }
+
+  .switch {
+    flex-shrink: 0;
+  }
+
+  &--checked {
+    color: getSemanticColor('surface', 'onSurface');
+  }
+
+  &--withBorder {
+    padding: getSpacing('md') getSpacing('lg');
+    border-radius: getBorderRadius('lg');
+    box-shadow: inset 0px 0px 0px 1px getSemanticColor('outline', 'outlineVariant');
+  }
+}

package/src/lib/ToggleInput/ToggleInput.spec.tsx

@@ -0,0 +1,45 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ToggleInput from './ToggleInput';
+import { ToggleInputProps } from './ToggleInput.types';
+
+describe('ToggleInput Component', () => {
+  const mockProps = {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    icon: 'notification_bell',
+    label: 'Test Label',
+    onChange: jest.fn(),
+    variant: 'rounded',
+  } as ToggleInputProps;
+
+  it('renders without crashing', () => {
+    render(<ToggleInput {...mockProps} />);
+  });
+
+  it('renders label and icon correctly', () => {
+    render(<ToggleInput {...mockProps} />);
+    const labelElement = screen.getByText('Test Label');
+    const iconElement = screen.getByRole('presentation');
+
+    expect(labelElement).toBeInTheDocument();
+    expect(iconElement).toBeInTheDocument();
+  });
+
+  it('calls onChange when the toggle switch is clicked', () => {
+    render(<ToggleInput {...mockProps} />);
+    const toggleSwitch = screen.getByTestId('toggle-switch');
+
+    fireEvent.click(toggleSwitch);
+
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state correctly', () => {
+    render(<ToggleInput {...mockProps} disabled={true} />);
+    const toggleSwitch = screen.getByTestId('toggle-switch');
+
+    expect(toggleSwitch).toBeDisabled();
+  });
+});

package/src/lib/ToggleInput/ToggleInput.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import Icons32 from '../Icon/icons/32x32';
+
+import ToggleInput from './ToggleInput';
+import { ToggleInputProps } from './ToggleInput.types';
+
+const meta: Meta<typeof ToggleInput> = {
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+      },
+      description: 'This will be icon of the toggle input',
+      options: [undefined, ...Object.keys(Icons32)],
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'This will be text of the toggle input',
+    },
+    onChange: { action: 'clicked', description: 'On click event callback' },
+
+    withBorder: {
+      defaultValue: 'false',
+      description: 'This will be variant of the toggle input',
+    },
+  },
+  component: ToggleInput,
+  title: 'Components/ToggleInput',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleInput>;
+
+const WrapperToggle = (props: ToggleInputProps) => {
+  const [checked, setChecked] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.checked);
+  };
+
+  return <ToggleInput {...props} checked={checked} onChange={handleChange} />;
+};
+
+export const Primary: Story = {
+  args: {
+    icon: 'notification_bell',
+    label: 'Toggle Input',
+    withBorder: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=181%3A2876&mode=dev',
+    },
+  },
+  render: WrapperToggle,
+};

package/src/lib/ToggleInput/ToggleInput.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+
+import Icon from '../Icon/Icon';
+import Toggle from '../Toggle/Toggle';
+import Typography from '../Typography/Typography';
+
+import styles from './ToggleInput.module.scss';
+import { ToggleInputProps } from './ToggleInput.types';
+
+const ToggleInput = ({
+  checked,
+  defaultChecked,
+  disabled,
+  icon,
+  label,
+  onChange,
+  withBorder,
+}: ToggleInputProps) => {
+  return (
+    <label
+      className={clsx(styles.toggleInput, {
+        [styles[`toggleInput--withBorder`]]: withBorder,
+        [styles[`toggleInput--checked`]]: checked,
+      })}
+    >
+      {icon && <Icon name={icon} size="32" />}
+      <Typography type="body-large" className={styles.textLabel}>
+        {label}
+      </Typography>
+      <Toggle
+        onChange={onChange}
+        disabled={disabled}
+        defaultChecked={defaultChecked}
+        className={styles.switch}
+      />
+    </label>
+  );
+};
+
+export default ToggleInput;

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

@@ -1,7 +1,9 @@
 import { UseSwitchParameters } from '@mui/base';
+
 import { Icon32 } from '../Icon/Icon.types';
+
 export interface ToggleInputProps extends UseSwitchParameters {
-    icon?: Icon32;
-    label: string;
-    withBorder?: boolean;
+  icon?: Icon32;
+  label: string;
+  withBorder?: boolean;
 }

package/src/lib/Typography/Typography.module.scss

@@ -0,0 +1,61 @@
+.h1 {
+  @include typography('headings', 'H1');
+}
+
+.h2 {
+  @include typography('headings', 'H2');
+}
+
+.h3 {
+  @include typography('headings', 'H3');
+}
+
+.h4 {
+  @include typography('headings', 'H4');
+}
+
+.h5 {
+  @include typography('headings', 'H5');
+}
+
+.h6 {
+  @include typography('headings', 'H6');
+}
+
+.h7 {
+  @include typography('headings', 'H7');
+}
+
+.h8 {
+  @include typography('headings', 'H8');
+}
+
+// Body
+.body-large {
+  @include typography('body', 'Large');
+}
+
+.body-regular {
+  @include typography('body', 'Regular');
+}
+
+.body-semibold {
+  @include typography('body', 'Semibold');
+}
+
+.body-italic {
+  @include typography('body', 'Italic');
+}
+
+// Detail
+.detail-medium {
+  @include typography('detail', 'Medium');
+}
+
+.detail-bold {
+  @include typography('detail', 'Bold');
+}
+
+.detail-upper-case {
+  @include typography('detail', 'Upper Case');
+}

package/src/lib/Typography/Typography.spec.tsx

@@ -0,0 +1,60 @@
+import { render } from '@testing-library/react';
+
+import Typography from './Typography';
+import { TypographyType } from './Typography.types';
+
+describe('<Typography />', () => {
+  const types: TypographyType[] = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'h7',
+    'h8',
+    'body-large',
+    'body-regular',
+    'body-semibold',
+    'body-italic',
+    'detail-medium',
+    'detail-bold',
+    'detail-upper-case',
+  ];
+
+  types.forEach((type) => {
+    it(`renders correctly for type "${type}"`, () => {
+      const { getByText } = render(<Typography type={type}>Sample Text</Typography>);
+      const element = getByText('Sample Text');
+
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(type)) {
+        expect(element.tagName).toBe(type.toUpperCase());
+      } else {
+        expect(element.tagName).toBe('SPAN');
+      }
+
+      expect(element).toHaveClass(type);
+    });
+  });
+
+  it('renders correctly with "as" prop', () => {
+    const { getByText } = render(
+      <Typography type="body-large" as="p">
+        Sample Text
+      </Typography>,
+    );
+    const element = getByText('Sample Text');
+    expect(element.tagName).toBe('P');
+    expect(element).toHaveClass('body-large');
+  });
+
+  it('take a custom classname and adds it properly to the element', () => {
+    const { getByText } = render(
+      <Typography type="body-large" className="custom-classname">
+        Sample Text
+      </Typography>,
+    );
+    const element = getByText('Sample Text');
+    expect(element).toHaveClass('custom-classname');
+  });
+});

package/src/lib/Typography/Typography.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Typography from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  component: Typography,
+  title: 'Components/Typography',
+};
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const Heading1: Story = {
+  args: {
+    children: 'Heading 1',
+    type: 'h1',
+  },
+};
+
+export const Heading2: Story = {
+  args: {
+    children: 'Heading 2',
+    type: 'h2',
+  },
+};
+
+export const BodyLarge: Story = {
+  args: {
+    children: 'Body Large Text',
+    type: 'body-large',
+  },
+};
+
+export const BodyRegular: Story = {
+  args: {
+    children: 'Body Regular Text',
+    type: 'body-regular',
+  },
+};
+
+export const DetailBold: Story = {
+  args: {
+    children: 'Detail Bold Text',
+    type: 'detail-bold',
+  },
+};

package/src/lib/Typography/Typography.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React, { JSX } from 'react';
+
+import styles from './Typography.module.scss';
+import { TypographyProps, TypographyType } from './Typography.types';
+
+function deriveTagFromType(type: TypographyType): keyof JSX.IntrinsicElements {
+  switch (type) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+      return type as keyof JSX.IntrinsicElements;
+    default:
+      return 'span';
+  }
+}
+
+function Typography({ as, children, className, type }: TypographyProps) {
+  const ElementTag = as || deriveTagFromType(type);
+  return <ElementTag className={clsx(styles[type], className)}>{children}</ElementTag>;
+}
+
+export default Typography;

package/src/lib/Typography/Typography.types.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'react';
+
+export type TypographyType =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'h7'
+  | 'h8'
+  | 'body-large'
+  | 'body-regular'
+  | 'body-semibold'
+  | 'body-italic'
+  | 'detail-medium'
+  | 'detail-bold'
+  | 'detail-upper-case';
+
+export interface TypographyProps {
+  as?: Extract<
+    keyof JSX.IntrinsicElements,
+    'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  >;
+  children: string;
+  className?: string;
+  type: TypographyType;
+}

package/src/styles/_design-tokens.scss

@@ -0,0 +1 @@
+@forward '@goodhood/design-tokens/lib/web/index';

package/src/styles/_functions.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+@function mapGet($map, $keys...) {
+  @return map.get($map, $keys...);
+}
+
+@function getSemanticColor($color, $shade) {
+  @return mapGet($tokens, color, semantic, $color, $shade);
+}
+
+@function getSpacing($spacingType) {
+  @return mapGet($tokens, spacing, $spacingType);
+}
+
+@function getBorderRadius($spacingType) {
+  @return mapGet($tokens, borderRadius, $spacingType);
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+
+@mixin spacing($properties, $map: map.get($tokens, 'spacing')) {
+  // Extract the correct spacing settings;
+  @each $size, $i in $map {
+    $value: map.get($tokens, 'spacing', $size);
+    &-#{$size} {
+      @each $property in $properties {
+        #{$property}: #{$value};
+      }
+    }
+  }
+}
+
+@mixin typography($type, $level) {
+  // Extract the correct typography settings based on the provided type and level
+  $typo-settings: map.get(map.get($tokens, $type), $level);
+
+  // Ensure the level exists
+  @if $typo-settings {
+    margin-bottom: mapGet($typo-settings, 'paragraphSpacing');
+    font-family: mapGet($typo-settings, 'fontFamily');
+    font-size: mapGet($typo-settings, 'fontSize');
+    font-weight: mapGet($typo-settings, 'fontWeight');
+    letter-spacing: mapGet($typo-settings, 'letterSpacing');
+    line-height: mapGet($typo-settings, 'lineHeight');
+    text-decoration: mapGet($typo-settings, 'textDecoration');
+    text-indent: mapGet($typo-settings, 'paragraphIndent');
+    text-transform: mapGet($typo-settings, 'textCase');
+  } @else {
+    @error "Unknown typography type: #{$type} or level: #{$level}.";
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,3 @@
+@import 'design-tokens';
+@import 'mixins';
+@import 'functions';