@ssa-ui-kit/core 0.0.1-alpha

package/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import {
+  blue,
+  green,
+  blueLight,
+  pink,
+  purple,
+  turquoise,
+  yellow,
+} from '@styles/global';
+
+import { ColorPickerProps, Colors, ColorsList } from './types';
+import { ColorMarker } from './styles';
+
+export const mapColors: Colors = {
+  pink,
+  yellow,
+  green,
+  turquoise,
+  blueLight,
+  blue,
+  purple,
+};
+
+const ColorPicker = ({ onChange, initColor }: ColorPickerProps) => {
+  const [activeColor, setActiveColor] = useState(initColor || '');
+
+  const handleColorChange = (color: ColorsList) => {
+    onChange(color);
+    setActiveColor(color);
+  };
+
+  return (
+    <ul css={{ display: 'flex', gap: 10, listStyle: 'none', padding: 0 }}>
+      {(Object.keys(mapColors) as ColorsList[]).map((color) => (
+        <li key={color}>
+          <ColorMarker
+            active={color === activeColor}
+            onClick={() => handleColorChange(color)}
+            css={[mapColors[color]]}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+};
+export default ColorPicker;

package/src/components/ColorPicker/index.ts

@@ -0,0 +1 @@
+export { default } from './ColorPicker';

package/src/components/ColorPicker/styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const ColorMarker = styled.button<{ active: boolean }>`
+  cursor: pointer;
+
+  width: 24px;
+  height: 24px;
+
+  border: none;
+  border-radius: 50%;
+
+  border: ${({ active }) => (active ? '1.4px solid #fff' : 'none')};
+  box-shadow: ${({ active }) => (active ? 'inherit' : 'none !important')};
+`;

package/src/components/ColorPicker/types.ts

@@ -0,0 +1,21 @@
+import { Interpolation } from '@emotion/react';
+import { CommonProps, Theme } from '../..';
+import { Dispatch, SetStateAction } from 'react';
+
+export type ColorsList =
+  | 'pink'
+  | 'yellow'
+  | 'green'
+  | 'turquoise'
+  | 'purple'
+  | 'blueLight'
+  | 'blue';
+
+// TODO: this is similar to MainColors from types/global.d.ts
+// Probably, we should use MainColors here (or at least extend form it)
+export type Colors = Record<ColorsList, Interpolation<Theme>>;
+
+export interface ColorPickerProps extends CommonProps {
+  onChange: Dispatch<SetStateAction<ColorsList>>;
+  initColor?: ColorsList;
+}

package/src/components/Dropdown/Dropdown.context.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { DropdownContextType } from './types';
+
+const DropdownContext = React.createContext<DropdownContextType>({
+  activeItem: null,
+  onChange: () => {
+    /* noop */
+  },
+});
+
+export function useDropdownContext(): DropdownContextType {
+  return React.useContext(DropdownContext);
+}
+
+export default DropdownContext;

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -0,0 +1,326 @@
+import { within } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+import DropdownOption from '@components/DropdownOption';
+
+import Dropdown from './index';
+
+interface Item {
+  id: number;
+  value: string;
+}
+
+const items = [
+  { id: 1, value: 'First Item' },
+  { id: 2, value: 'Second Item' },
+  { id: 3, value: 'Third Item' },
+  { id: 4, value: 'Fourth Item' },
+  { id: 5, value: 'Fifth Item' },
+  { id: 6, value: 'Sixth Item' },
+  { id: 7, value: 'Seventh Item' },
+];
+
+const getListItemValue = (item: Item) => item.value;
+
+describe('Dropdown', () => {
+  function setup(props = {}) {
+    const mockOnChange = jest.fn();
+
+    return {
+      user: userEvent.setup(),
+      mockOnChange,
+      ...render(
+        <Dropdown onChange={mockOnChange} {...props}>
+          {items.map((item, index) => (
+            <DropdownOption key={index} value={item.value} />
+          ))}
+        </Dropdown>,
+      ),
+    };
+  }
+
+  it('Renders without a selected item', async () => {
+    const {
+      user,
+      mockOnChange,
+      getByRole,
+      queryByRole,
+      getByTestId,
+      findByTitle,
+    } = setup();
+
+    expect(mockOnChange).not.toBeCalled();
+
+    const dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'false');
+    expect(dropdownToggleEl).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(dropdownToggleEl).toHaveAttribute('aria-controls');
+    expect(dropdownToggleEl).toHaveAttribute('aria-labelledby');
+    findByTitle('Carrot down');
+
+    let listboxEl = queryByRole('listbox');
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await user.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+    expect(listItemEls.length).toBe(items.length);
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveFocus();
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'true');
+    findByTitle('Carrot up');
+
+    for (let i = 0; i < items.length; ++i) {
+      const listItem = items[i];
+      const listItemEl = listItemEls[i];
+
+      expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+      const itemListValue = getListItemValue(listItem);
+      expect(within(listItemEl).getByRole('button')).toHaveTextContent(
+        itemListValue,
+      );
+      await within(listItemEl).findByText(itemListValue);
+    }
+  });
+
+  it('Renders with a selected item', async () => {
+    const selectedItem = items[2];
+    const { user, mockOnChange, getByRole, queryByRole, getByTestId } = setup({
+      selectedItem,
+    });
+
+    expect(mockOnChange).not.toBeCalled();
+
+    const dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent(getListItemValue(selectedItem));
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'false');
+    expect(dropdownToggleEl).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(dropdownToggleEl).toHaveAttribute('aria-controls');
+    expect(dropdownToggleEl).toHaveAttribute('aria-labelledby');
+    await within(dropdownToggleEl).findByTitle('Carrot down');
+
+    let listboxEl = queryByRole('listbox');
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await user.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+    expect(listItemEls.length).toBe(items.length);
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveFocus();
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'true');
+    await within(dropdownToggleEl).findByTitle('Carrot up');
+
+    for (let i = 0; i < items.length; ++i) {
+      const listItem = items[i];
+      const listItemEl = listItemEls[i];
+
+      const itemListValue = getListItemValue(listItem);
+
+      await within(listItemEl).findByText(itemListValue);
+      expect(within(listItemEl).getByRole('button')).toHaveTextContent(
+        itemListValue,
+      );
+
+      if (listItem.id === selectedItem.id) {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'true');
+        expect(listItemEl).toHaveStyle('background: #DEE1EC');
+      } else {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+      }
+    }
+  });
+
+  it('Renders with an empty items array', async () => {
+    const mockOnChange = jest.fn();
+    const { getByTestId, queryByRole, getByRole } = render(
+      <Dropdown onChange={mockOnChange}>{null}</Dropdown>,
+    );
+
+    expect(mockOnChange).not.toBeCalled();
+
+    const dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'false');
+    expect(dropdownToggleEl).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(dropdownToggleEl).toHaveAttribute('aria-controls');
+    expect(dropdownToggleEl).toHaveAttribute('aria-labelledby');
+    await within(dropdownToggleEl).findByTitle('Carrot down');
+
+    let listboxEl = queryByRole('listbox');
+
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await userEvent.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+
+    const listItemEl = within(listboxEl).getByRole('listitem');
+
+    expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+    within(listItemEl).getByText('No items');
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveFocus();
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'true');
+
+    await within(dropdownToggleEl).findByTitle('Carrot up');
+
+    // Items list hides when clicked
+    await userEvent.click(within(listItemEl).getByRole('button'));
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+  });
+
+  it("Chooses an item when it's clicked", async () => {
+    const selectedItem = items[2];
+    const { user, mockOnChange, getByRole, queryByRole, getByTestId } = setup({
+      selectedItem,
+    });
+
+    const dropdownEl = getByTestId('dropdown');
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveTextContent(selectedItem.value);
+
+    await user.click(dropdownToggleEl);
+
+    const listItemEls = within(getByRole('listbox')).getAllByRole('button');
+
+    await user.click(listItemEls[0]);
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    expect(dropdownToggleEl).toHaveTextContent(getListItemValue(items[0]));
+    expect(mockOnChange).toHaveBeenCalledWith({ value: items[0].value });
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+    await within(dropdownToggleEl).findByTitle('Carrot down');
+  });
+
+  it('Closes when clicked outside', async () => {
+    const { user, getByRole, queryByRole } = setup();
+
+    await user.click(getByRole('combobox'));
+    getByRole('listbox');
+
+    await user.click(document.body);
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+    // Doesn't open up when clicked outside again
+    await user.click(document.body);
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('Do not trigger onChange if clicked on the same option', async () => {
+    const selectedItem = items[2];
+    const { user, mockOnChange, getByRole, getByTestId } = setup({
+      selectedItem,
+    });
+
+    const dropdownEl = getByTestId('dropdown');
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await user.click(dropdownToggleEl);
+
+    const listItemEls = within(getByRole('listbox')).getAllByRole('button');
+
+    await user.click(listItemEls[2]);
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await user.click(dropdownToggleEl);
+    await user.click(listItemEls[2]);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('Renders with a custom placeholder', () => {
+    const { getByTestId } = setup({ placeholder: 'Select something' });
+
+    const dropdownToggleEl = within(getByTestId('dropdown')).getByRole(
+      'combobox',
+    );
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+  });
+
+  it('Renders in the disabled state', async () => {
+    const { user, mockOnChange, queryByRole, getByTestId } = setup({
+      isDisabled: true,
+    });
+
+    const dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+    expect(dropdownToggleEl).toHaveAttribute('aria-expanded', 'false');
+    expect(dropdownToggleEl).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(dropdownToggleEl).toHaveAttribute('aria-controls');
+    expect(dropdownToggleEl).toHaveAttribute('aria-labelledby');
+    expect(dropdownToggleEl).toHaveAttribute('disabled');
+    await within(dropdownToggleEl).findByTitle('Carrot down');
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+    await user.click(dropdownToggleEl);
+
+    expect(mockOnChange).not.toBeCalled();
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).not.toHaveFocus();
+    expect(dropdownToggleEl).toHaveTextContent('Select something');
+    expect(dropdownToggleEl).toHaveAttribute('disabled');
+    await within(dropdownToggleEl).findByTitle('Carrot down');
+  });
+
+  it('Closes when changes state to disabled', async () => {
+    const { rerender, user, queryByRole, getByTestId } = setup();
+
+    const dropdownToggleEl = within(getByTestId('dropdown')).getByRole(
+      'combobox',
+    );
+
+    await user.click(dropdownToggleEl);
+
+    expect(queryByRole('listbox')).toBeInTheDocument();
+
+    rerender(
+      <Dropdown isDisabled>
+        {items.map((item, index) => (
+          <DropdownOption key={index} value={item.id}>
+            {item.value}
+          </DropdownOption>
+        ))}
+      </Dropdown>,
+    );
+
+    expect(queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('Renders opened', () => {
+    const { queryByRole } = setup({ isOpen: true });
+
+    expect(queryByRole('listbox')).toBeInTheDocument();
+  });
+});

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,155 @@
+import { Meta, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import DropdownOption from '@components/DropdownOption';
+
+import Dropdown from './Dropdown';
+import { IDropdownProps } from './types';
+import { IDropdownOption } from '../..';
+
+type Args = IDropdownProps<IDropdownOption>;
+
+const items = [
+  { id: 1, value: 'One lorem ipsum', subText: 'subtext' },
+  { id: 2, value: 'Two lorem ipsum', subText: 'subtext' },
+  { id: 3, value: 'Three lorem ipsum', subText: 'subtext' },
+];
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    onChange: {
+      control: {
+        disable: true,
+      },
+    },
+    className: {
+      description: 'Used in order to overwrite the default style',
+      table: {
+        type: {
+          summary: 'StyledComponent',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      const noop = () => {
+        /* no-op */
+      };
+      return (
+        <div style={{ paddingBottom: 200 }}>
+          {Story({ ...args, onChange: noop })}
+        </div>
+      );
+    },
+  ],
+} as Meta<typeof Dropdown>;
+
+export const Basic: StoryObj = (args: Args) => {
+  return (
+    <Dropdown selectedItem={items[2]} isDisabled={args.isDisabled}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.id}>
+          {item.value}
+        </DropdownOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Basic.args = { isDisabled: false };
+
+export const Opened: StoryObj = (args: Args) => {
+  return (
+    <Dropdown selectedItem={items[2]} {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.id}>
+          {item.value}
+        </DropdownOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Opened.args = { isOpen: true, isDisabled: false };
+
+export const Simple: StoryObj = (args: Args) => {
+  return (
+    <Dropdown isDisabled={args.isDisabled}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.value} />
+      ))}
+    </Dropdown>
+  );
+};
+
+Simple.args = { isDisabled: false };
+
+export const NoItems: StoryObj = () => {
+  return <Dropdown>{null}</Dropdown>;
+};
+
+NoItems.args = { isDisabled: false };
+
+export const Custom: StoryObj = (args: Args) => {
+  // Color palette: https://mycolor.space/?hex=%23FF69B4&sub=1
+  const CustomOption = styled(DropdownOption)`
+    width: auto;
+    height: auto;
+    padding: 10px;
+
+    text-align: left;
+    line-height: 18px;
+    font-size: 16px;
+
+    background: hotpink;
+    color: white;
+
+    :hover {
+      background: pink;
+    }
+
+    b {
+      color: white;
+    }
+  `;
+
+  return (
+    <Dropdown
+      isDisabled={args.isDisabled}
+      selectedItem={items[2]}
+      css={css`
+        background: #ff947b;
+        :focus {
+          background: #ffb566;
+        }
+        &[aria-expanded='true'] {
+          color: #975875;
+
+          svg {
+            path {
+              stroke: #975875;
+            }
+          }
+        }
+      `}>
+      {items.map((item) => (
+        <CustomOption key={item.id} value={item.id} label={item.value}>
+          {item.value}
+          &nbsp;|&nbsp;
+          <b>{item.subText}</b>
+        </CustomOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Custom.args = {
+  isDisabled: false,
+};