feat: add dropdown component

src/components/dropdown/dropdown.test.tsx

@@ -0,0 +1,62 @@
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { renderWithTheme } from '../utils/test-utils';
+import { DropdownProps, IonDropdown } from './dropdown';
+
+const options = [
+  { label: 'Item 1', value: '1' },
+  { label: 'Item 2', value: '2' },
+  { label: 'Item 3', value: '3' },
+  { label: 'Item 4', value: '4' },
+  { label: 'Item 5', value: '5' },
+  { label: 'Item 6', value: '6' },
+  { label: 'Item 7', value: '7' },
+];
+
+const sut = (props: DropdownProps) => {
+  renderWithTheme(<IonDropdown {...props} />);
+};
+
+describe('Dropdown', () => {
+  it('should render a list of items', () => {
+    sut({ options });
+    options.forEach((option) => {
+      expect(screen.getByText(option.label)).toBeInTheDocument();
+    });
+  });
+  it('should emit a click with a value', async () => {
+    const onItemSelect = jest.fn();
+    sut({ options, onItemSelect });
+    await userEvent.click(screen.getByText(options[0].label));
+    expect(onItemSelect).toHaveBeenCalledWith(options[0].value);
+  });
+  it('should render an empty message when there is no options', () => {
+    sut({} as DropdownProps);
+    expect(screen.getByText('Não há dados')).toBeInTheDocument();
+  });
+  it('should not emit a click when there is no onItemSelect', async () => {
+    sut({ options, onItemSelect: undefined });
+    await userEvent.click(screen.getByText(options[0].label));
+    expect(screen.getByText(options[0].label)).toBeInTheDocument();
+  });
+  it('should render a loading spinner', () => {
+    sut({ options: [], loading: true });
+    expect(screen.getByTestId('ion-spinner')).toBeInTheDocument();
+  });
+  it('should render a top container', () => {
+    const testId = 'top-container';
+    sut({
+      options,
+      topContainer: <div data-testid={testId}>Top Container</div>,
+    });
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+  it('should render a bottom container', () => {
+    const testId = 'bottom-container';
+    sut({
+      options,
+      bottomContainer: <div data-testid={testId}>Bottom Container</div>,
+    });
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+});

src/components/dropdown/dropdown.tsx

@@ -0,0 +1,59 @@
+import { IonEmpty } from '../empty';
+import { IonSpinner } from '../spinner';
+import {
+  DropdownItemProps,
+  IonDropdownItem,
+} from './dropdownItem/dropdownItem';
+import { Container, Dropdown, ItemsContainer } from './styles';
+
+interface Option extends Omit<DropdownItemProps, 'onClick'> {
+  value: string;
+}
+
+export interface DropdownProps {
+  options: Option[];
+  onItemSelect?: (value: Option['value']) => void;
+  loading?: boolean;
+  topContainer?: React.ReactNode;
+  bottomContainer?: React.ReactNode;
+}
+
+export const IonDropdown = ({
+  options = [],
+  onItemSelect,
+  loading,
+  topContainer,
+  bottomContainer,
+}: DropdownProps) => {
+  const handleItemClick = (value: Option['value']) => {
+    if (onItemSelect) {
+      onItemSelect(value);
+    }
+  };
+
+  return (
+    <Dropdown>
+      {topContainer}
+      <ItemsContainer>
+        {loading ? (
+          <Container>
+            <IonSpinner />
+          </Container>
+        ) : options.length ? (
+          options.map((option) => (
+            <IonDropdownItem
+              {...option}
+              key={option.value}
+              onClick={() => handleItemClick(option.value)}
+            />
+          ))
+        ) : (
+          <Container>
+            <IonEmpty label='Não há dados' />
+          </Container>
+        )}
+      </ItemsContainer>
+      {bottomContainer}
+    </Dropdown>
+  );
+};

src/components/dropdown/dropdownItem/dropdownItem.test.tsx

@@ -0,0 +1,66 @@
+import { renderWithTheme } from '@ion/components/utils/test-utils';
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { DropdownItemProps, IonDropdownItem } from './dropdownItem';
+
+const sut = (props: DropdownItemProps) => {
+  renderWithTheme(<IonDropdownItem {...props} />);
+};
+
+describe('DropdownItem', () => {
+  describe('Default', () => {
+    it('should render a label', () => {
+      const label = 'Item';
+      sut({ label });
+      expect(screen.getByText(label)).toBeInTheDocument();
+    });
+    it('should render an icon', () => {
+      const icon = 'access';
+      sut({ label: 'Item', icon });
+      expect(screen.getByTestId('ion-icon-access')).toBeInTheDocument();
+    });
+    it('should emit a click', async () => {
+      const onClick = jest.fn();
+      sut({ label: 'Item', onClick });
+      await userEvent.click(screen.getByText('Item'));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  describe('Selected', () => {
+    it('should render a selected item', () => {
+      sut({ label: 'Item', selected: true });
+      expect(screen.getByTestId('ion-icon-check')).toBeInTheDocument();
+    });
+    it('should show a close icon when hovering', async () => {
+      sut({ label: 'Item', selected: true });
+      expect(screen.getByTestId('ion-icon-check')).toBeInTheDocument();
+      await userEvent.hover(screen.getByText('Item'));
+      expect(screen.getByTestId('ion-icon-close')).toBeInTheDocument();
+    });
+    it('should reset to check icon when unhovering', async () => {
+      sut({ label: 'Item', selected: true });
+      expect(screen.getByTestId('ion-icon-check')).toBeInTheDocument();
+      await userEvent.hover(screen.getByText('Item'));
+      expect(screen.getByTestId('ion-icon-close')).toBeInTheDocument();
+      await userEvent.unhover(screen.getByText('Item'));
+      expect(screen.getByTestId('ion-icon-check')).toBeInTheDocument();
+    });
+  });
+  describe('Disabled', () => {
+    it('should not emit a click', async () => {
+      const onClick = jest.fn();
+      sut({ label: 'Item', disabled: true, onClick });
+      await userEvent.click(screen.getByText('Item'));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+    it('should render check icon when selected', () => {
+      sut({ label: 'Item', selected: true, disabled: true });
+      expect(screen.getByTestId('ion-icon-check')).toBeInTheDocument();
+    });
+    it('should not render close icon when hovering', async () => {
+      sut({ label: 'Item', selected: true, disabled: true });
+      await userEvent.hover(screen.getByText('Item'));
+      expect(screen.queryByTestId('ion-icon-close')).not.toBeInTheDocument();
+    });
+  });
+});

src/components/dropdown/dropdownItem/dropdownItem.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { IonIcon, IonIconProps } from '../../icons';
+import { Container, Label } from './styles';
+
+export interface DropdownItemProps {
+  label: string;
+  icon?: IonIconProps['type'];
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const IonDropdownItem = ({
+  label,
+  selected,
+  disabled,
+  icon,
+  onClick,
+}: DropdownItemProps) => {
+  const [hover, setHover] = useState(false);
+
+  const handleHover = () => {
+    if (!disabled) {
+      setHover(true);
+    }
+  };
+
+  const handleUnhover = () => {
+    setHover(false);
+  };
+
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <Container
+      $selected={selected}
+      $disabled={disabled}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleUnhover}
+      onClick={handleClick}
+    >
+      <Label>
+        {icon && <IonIcon type={icon} size={16} />}
+        <span>{label}</span>
+      </Label>
+      {selected && <IonIcon type={hover ? 'close' : 'check'} size={16} />}
+    </Container>
+  );
+};

src/components/dropdown/dropdownItem/styles.ts

@@ -0,0 +1,94 @@
+import { css, styled } from 'styled-components';
+
+interface DropdownItemStylesProps {
+  $selected?: boolean;
+  $disabled?: boolean;
+}
+
+export const Label = styled.div`
+  ${({ theme }) => css`
+    ${theme.utils.flex.start(8)}
+  `}
+`;
+
+export const Container = styled.div<DropdownItemStylesProps>`
+  ${({ theme, $selected, $disabled }) => css`
+    ${theme.utils.flex.spaceBetween(8)}
+    ${theme.font.size[14]}
+    font-weight: 400;
+    height: 32px;
+    border-radius: 8px;
+    padding: 6px 12px;
+    background: ${theme.colors.neutral[1]};
+    color: ${theme.colors.neutral[7]};
+    cursor: pointer;
+
+    svg {
+      fill: ${theme.colors.neutral[7]};
+    }
+
+    ${!$disabled &&
+    css`
+      &:hover {
+        background: ${theme.colors.primary[1]};
+      }
+
+      &:active {
+        background: ${theme.colors.primary[2]};
+        color: ${theme.colors.primary[5]};
+
+        svg {
+          fill: ${theme.colors.primary[5]};
+        }
+      }
+
+      ${$selected &&
+      css`
+        background: ${theme.colors.primary[1]};
+        color: ${theme.colors.primary[5]};
+
+        svg {
+          fill: ${theme.colors.primary[5]};
+        }
+
+        &:hover {
+          color: ${theme.colors.primary[4]};
+
+          svg {
+            fill: ${theme.colors.primary[4]};
+          }
+        }
+
+        &:active {
+          background: ${theme.colors.primary[2]};
+          color: ${theme.colors.primary[7]};
+
+          svg {
+            fill: ${theme.colors.primary[7]};
+          }
+        }
+      `}
+    `}
+
+    ${$disabled &&
+    css`
+      cursor: not-allowed;
+      background: ${theme.colors.neutral[1]};
+      color: ${theme.colors.neutral[3]};
+
+      svg {
+        fill: ${theme.colors.neutral[3]};
+      }
+
+      ${$selected &&
+      css`
+        background: ${theme.colors.neutral[2]};
+        color: ${theme.colors.neutral[5]};
+
+        svg {
+          fill: ${theme.colors.neutral[5]};
+        }
+      `}
+    `}
+  `}
+`;

src/components/dropdown/index.ts

@@ -0,0 +1 @@
+export * from './dropdown';

src/components/dropdown/styles.ts

@@ -0,0 +1,50 @@
+import { css, styled } from 'styled-components';
+
+export const columnWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const Dropdown = styled.div`
+  ${({ theme }) => css`
+    width: 182px;
+    max-height: 316px;
+    padding: 12px 8px;
+    border-radius: 8px;
+    background: ${theme.colors.neutral[1]};
+    ${theme.font.size[14]}
+    font-weight: 600;
+    color: ${theme.colors.neutral[7]};
+    ${columnWrapper}
+    ${theme.utils.shadow.doubleShadow};
+
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: ${theme.colors.neutral[1]};
+    }
+
+    ::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb:active,
+    ::-webkit-scrollbar-thumb:hover {
+      border-radius: 10px;
+      background: ${theme.colors.neutral[6]};
+    }
+  `}
+`;
+
+export const ItemsContainer = styled.div`
+  max-height: 212px;
+  overflow-y: auto;
+  ${columnWrapper}
+`;
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    ${theme.utils.flex.center()}
+    padding: 16px 0;
+  `}
+`;