@ssa-ui-kit/core 0.0.1-alpha

package/src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,26 @@
+import { CommonProps } from '@global-types/emotion';
+import CardHeaderBase from './CardHeaderBase';
+
+export interface CardProps extends CommonProps {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  transparent?: boolean;
+}
+
+const CardHeader = ({ children, icon, transparent, ...props }: CardProps) => (
+  <CardHeaderBase transparent={transparent} hasIcon={!!icon} {...props}>
+    {icon ? (
+      <span
+        style={{
+          position: 'absolute',
+          left: '-30px',
+          top: '-30px',
+        }}>
+        {icon}
+      </span>
+    ) : null}
+    {children}
+  </CardHeaderBase>
+);
+
+export default CardHeader;

package/src/components/CardHeader/CardHeaderBase.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+const CardHeaderBase = styled.div<{ transparent?: boolean; hasIcon?: boolean }>`
+  position: relative;
+
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+  margin-bottom: 20px;
+
+  background: ${(props) => (props.transparent ? 'transparent' : 'initial')};
+
+  padding-left: ${(props) => (props.hasIcon ? '30px' : null)};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding-left: ${(props) => (props.hasIcon ? '40px' : null)};
+  }
+`;
+
+export default CardHeaderBase;

package/src/components/CardHeader/index.ts

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

package/src/components/Checkbox/Checkbox.spec.tsx

@@ -0,0 +1,193 @@
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@emotion/react';
+import colors from '@themes/main';
+import { useForm } from 'react-hook-form';
+
+import Checkbox from '@components/Checkbox';
+import FormCheckbox from '@components/FormCheckbox';
+
+import { ICheckboxProps } from './types';
+import { getByRole } from '@testing-library/dom';
+
+const checkLabel = () => {
+  const labelEl = document.getElementsByTagName('label')[0];
+  expect(labelEl).toBeInTheDocument();
+  expect(labelEl).toHaveAttribute('for');
+
+  return labelEl;
+};
+
+const checkIcon = (labelEl: HTMLLabelElement, isChecked: boolean) => {
+  const icons = labelEl.getElementsByTagName('svg');
+
+  if (isChecked) {
+    expect(icons.length).toEqual(1);
+    expect(icons[0]).toBeInTheDocument();
+  } else {
+    expect(icons.length).toEqual(0);
+  }
+};
+
+const checkToggle = async (
+  container: HTMLElement,
+  mockOnChange: () => void,
+  labelEl: HTMLLabelElement,
+  isChecked: boolean,
+) => {
+  checkIcon(labelEl, isChecked);
+  const checkboxEl: HTMLInputElement = getByRole(container, 'checkbox', {
+    checked: isChecked,
+  });
+  expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
+
+  const newIsChecked = !isChecked;
+
+  await userEvent.click(labelEl);
+
+  expect(checkboxEl.checked).toBe(newIsChecked);
+  expect(mockOnChange).toBeCalledWith(newIsChecked);
+
+  checkIcon(labelEl, newIsChecked);
+};
+
+function setup(props: Omit<ICheckboxProps, 'onChange'> = {}) {
+  const mockOnChange = jest.fn();
+  return {
+    user: userEvent.setup(),
+    mockOnChange,
+    ...render(<Checkbox onChange={mockOnChange} {...props} />),
+  };
+}
+
+describe('Checkbox', () => {
+  it('Renders without text', async () => {
+    const { mockOnChange, container } = setup();
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, false);
+  });
+
+  it('Renders with text', async () => {
+    const text = 'some text';
+
+    const { container, mockOnChange } = setup({ text });
+
+    const labelEl = checkLabel();
+    expect(labelEl).toHaveTextContent(text);
+    await checkToggle(container, mockOnChange, labelEl, false);
+    expect(labelEl).toHaveTextContent(text);
+  });
+
+  it('Renders with custom id', () => {
+    const checkboxId = 'my-checkbox';
+    const { getByRole } = setup({ id: checkboxId });
+    const checkboxEl = getByRole('checkbox', { checked: false });
+
+    const labelEl = document.getElementsByTagName('label')[0];
+    expect(labelEl).toBeInTheDocument();
+    expect(checkboxEl.id).toEqual(checkboxId);
+    expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
+  });
+
+  it('Renders in the disabled state', async () => {
+    const { getByRole, user, mockOnChange } = setup({ isDisabled: true });
+
+    const checkboxEl = getByRole('checkbox', { checked: false });
+
+    await user.click(checkboxEl);
+    expect(mockOnChange).not.toBeCalled();
+  });
+
+  it('Renders with the initial state passed in props', async () => {
+    const isChecked = true;
+    const { container, mockOnChange } = setup({ initialState: isChecked });
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, isChecked);
+  });
+
+  it('Renders with the external state passed in props', async () => {
+    const isChecked = true;
+    const { container, mockOnChange } = setup({ externalState: isChecked });
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, isChecked);
+  });
+
+  it('Renders in the indeterminate state', () => {
+    const { getByRole, rerender, mockOnChange } = setup({
+      isIndeterminate: true,
+    });
+
+    let checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).not.toBeChecked();
+    expect(checkboxEl).toHaveProperty('indeterminate', true);
+
+    rerender(
+      <ThemeProvider theme={colors}>
+        <Checkbox onChange={mockOnChange} isIndeterminate={false} />
+      </ThemeProvider>,
+    );
+
+    checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).not.toBeChecked();
+    expect(checkboxEl).toHaveProperty('indeterminate', false);
+  });
+
+  it('Renders with the "name" attribute', () => {
+    const name = 'nice-checkbox';
+    const { getByRole } = setup({ name });
+    const checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).toHaveAttribute('name', name);
+  });
+
+  it('Renders with the "required" attribute', () => {
+    const { getByRole } = setup({ isRequired: true });
+    const checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).toHaveAttribute('required', name);
+  });
+
+  describe('FormCheckbox', () => {
+    type TestFormValues = {
+      consent: boolean;
+    };
+
+    const TestForm = ({
+      onFormSubmit,
+    }: {
+      onFormSubmit: (data: TestFormValues) => void;
+    }) => {
+      const { control, handleSubmit } = useForm<TestFormValues>();
+      const onSubmit = handleSubmit((data) => onFormSubmit(data));
+
+      return (
+        <form onSubmit={onSubmit}>
+          <FormCheckbox
+            control={control}
+            name="consent"
+            text="Give your consent"
+          />
+          <input type="submit" />
+        </form>
+      );
+    };
+
+    it('Renders and is connected to the form', async () => {
+      const user = userEvent.setup();
+      const onMockFormSubmit = jest.fn();
+
+      const { getByLabelText } = render(
+        <TestForm onFormSubmit={onMockFormSubmit} />,
+      );
+
+      const checkboxEl = getByLabelText('Give your consent');
+      expect(checkboxEl).toHaveProperty('checked', false);
+      const submitEl = document.querySelector('input[type="submit"]');
+
+      await user.click(checkboxEl);
+      await user.click(submitEl as HTMLInputElement);
+
+      expect(onMockFormSubmit).toBeCalledWith({ consent: true });
+    });
+  });
+});

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,93 @@
+import { Fragment } from 'react';
+import type { Meta } from '@storybook/react';
+import Typography from '@components/Typography';
+import Checkbox, { ICheckboxProps } from './index';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component: 'UI component that triggers an action or event.',
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    text: 'label',
+  },
+} as Meta<typeof Checkbox>;
+
+export const Default = {};
+
+const checkboxPropsVariants: Array<ICheckboxProps & { caption?: string }> = [
+  {
+    id: 'checked',
+    caption: 'Checked by default',
+    initialState: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'checked-disabled',
+    initialState: true,
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'not-checked',
+    caption: 'Un-checked by default',
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'not-checked-disabled',
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'undetermined',
+    caption: 'Undetermined',
+    isIndeterminate: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'undetermined-disabled',
+    isIndeterminate: true,
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+];
+
+export const AllStates = () => (
+  <Fragment>
+    {checkboxPropsVariants.map(({ id, caption, ...props }) => (
+      <Fragment key={id}>
+        {caption ? <Typography variant="h6">{caption}</Typography> : null}
+        <div style={{ display: 'flex' }}>
+          <span style={{ marginRight: '20px' }}>
+            <Checkbox text="label" {...props} id={id} />
+          </span>{' '}
+          <Checkbox {...props} id={`${id}-no-text`} />
+        </div>
+      </Fragment>
+    ))}
+  </Fragment>
+);

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,77 @@
+import { useState, useId, useEffect, useRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { CheckboxBase } from './CheckboxBase';
+import Icon from '@components/Icon';
+
+import { ICheckboxProps } from './types';
+
+const Checkbox = ({
+  text,
+  id,
+  onChange,
+  isDisabled,
+  externalState,
+  initialState,
+  isIndeterminate,
+  name = '',
+  isRequired = false,
+  ref,
+  ...rest
+}: ICheckboxProps) => {
+  const [isChecked, setIsChecked] = useState(Boolean(initialState));
+  const autoGenId = useId();
+  const theme = useTheme();
+  const checkboxInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    // istanbul ignore else
+    if (checkboxInputRef.current) {
+      // Browsers drop the "indeterminate" state after the "checked" state
+      // changes. We keep the component in the "indeterminate" state until the
+      // prop's value changes to false or is removed.
+      checkboxInputRef.current.indeterminate = Boolean(isIndeterminate);
+    }
+  }, [isIndeterminate, isChecked]);
+
+  useEffect(() => {
+    if (typeof externalState === 'boolean') {
+      setIsChecked(Boolean(externalState));
+    }
+  }, [externalState]);
+
+  const checkboxId = id || autoGenId;
+
+  return (
+    <CheckboxBase htmlFor={checkboxId} {...rest}>
+      <input
+        id={checkboxId}
+        type="checkbox"
+        checked={isChecked}
+        onChange={() => {
+          const newIsChecked = !isChecked;
+          setIsChecked(newIsChecked);
+          onChange?.(newIsChecked);
+        }}
+        disabled={isDisabled}
+        ref={(node: HTMLInputElement) => {
+          checkboxInputRef.current = node;
+          if (ref) {
+            ref.current = node;
+          }
+        }}
+        name={name}
+        required={isRequired}
+      />
+      <div>
+        {isIndeterminate ? (
+          <Icon name="minus" size={12} color={theme.colors.white} />
+        ) : isChecked ? (
+          <Icon name="check" size={12} color={theme.colors.white} />
+        ) : null}
+      </div>
+      {text ? <span>{text}</span> : null}
+    </CheckboxBase>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/CheckboxBase.tsx

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+import Label from '@components/Label';
+import { checkboxStyles } from './styles';
+import { ICheckboxProps } from './types';
+
+export const CheckboxBase = styled(Label)<Pick<ICheckboxProps, 'color'>>`
+  position: relative;
+  display: inline-flex;
+  flex-grow: 0;
+  align-items: center;
+  vertical-align: middle;
+  cursor: pointer;
+  &:has(input:disabled) {
+    cursor: default;
+  }
+
+  div {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+  }
+
+  input + div {
+    svg {
+      z-index: 2;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      box-sizing: border-box;
+      height: 20px;
+      width: 20px;
+      top: 0;
+      left: 0;
+      border-radius: 6px;
+      z-index: 1;
+    }
+  }
+
+  ${({ color = 'green', theme }) => {
+    switch (color) {
+      case 'blue':
+        return checkboxStyles.blueInput(theme);
+      case 'green':
+        return checkboxStyles.greenInput(theme);
+      default:
+    }
+  }}
+
+  input {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  span {
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: 100;
+  }
+`;

package/src/components/Checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Checkbox';
+export { checkboxStyles } from './styles';
+export * from './types';

package/src/components/Checkbox/styles.tsx

@@ -0,0 +1,70 @@
+import { css, Theme } from '@emotion/react';
+
+const blueInput = (theme: Theme) => css`
+  & input:focus + div {
+    box-shadow: -4px 4px 10px ${theme.colors.blueNotification40};
+  }
+  & input:disabled + div,
+  & input:indeterminate:disabled + div {
+    background: ${theme.colors.greyFocused};
+  }
+  & input:not(:checked, :indeterminate, :disabled) + div::before {
+    border: 1.5px solid ${theme.colors.greyDropdownMain};
+  }
+  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
+    border: 1.5px solid ${theme.colors.greyDropdownMain};
+  }
+  & input:not(:disabled):checked + div::before,
+  & input:not(:disabled):indeterminate + div::before {
+    background: ${theme.colors.blueNotification};
+  }
+  & input:not(:disabled):checked + div:hover::before {
+    background: ${theme.colors.blueNotification};
+  }
+  & input:not(:disabled):checked + div + span {
+    font-weight: 500;
+    color: ${theme.colors.greyDropdownText};
+  }
+`;
+
+const greenInput = (theme: Theme) => css`
+  & input:focus + div {
+    box-shadow: -4px 4px 10px ${theme.colors.green40};
+  }
+
+  & input:disabled + div,
+  & input:indeterminate:disabled + div {
+    background: ${theme.colors.greyFocused};
+  }
+
+  & input:not(:checked, :indeterminate, :disabled) + div::before {
+    border: 1.5px solid ${theme.colors.green};
+  }
+
+  & input:not(:checked, :indeterminate, :disabled) + div:hover::before {
+    border: 1.5px solid ${theme.colors.green60};
+  }
+
+  & input:not(:disabled):checked + div::before,
+  & input:not(:disabled):indeterminate + div::before {
+    background: linear-gradient(
+      117.5deg,
+      ${theme.colors.greenLighter} 17.12%,
+      ${theme.colors.green} 85.53%
+    );
+  }
+
+  & input:not(:disabled):checked + div:hover::before,
+  & input:not(:disabled):indeterminate + div:hover::before {
+    background: linear-gradient(
+      117.5deg,
+      ${theme.colors.greenLighter60} 17.12%,
+      ${theme.colors.green60} 85.53%
+    );
+  }
+`;
+
+export const checkboxStyles = {
+  blueInput,
+  greenInput,
+};

package/src/components/Checkbox/types.ts

@@ -0,0 +1,26 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { MutableRefObject } from 'react';
+
+export interface ICheckboxProps {
+  text?: string;
+  id?: string;
+  onChange?: (newState: boolean) => void;
+  externalState?: boolean;
+  isDisabled?: boolean;
+  initialState?: boolean;
+  isIndeterminate?: boolean;
+  name?: string;
+  isRequired?: boolean;
+  ref?: MutableRefObject<HTMLInputElement>;
+  color?: 'green' | 'blue' | 'custom';
+  as?: React.ElementType;
+  className?: string;
+}
+
+export type IFormCheckboxProps<T extends FieldValues> = Omit<
+  ICheckboxProps,
+  'onChange' | 'name'
+> & {
+  name: FieldPath<T>;
+  control: Control<T>;
+};

package/src/components/ColorPicker/ColorPicker.spec.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, screen } from '../../../customTest';
+import ColorPicker from '@components/ColorPicker';
+
+describe('ColorPicker', () => {
+  it('Return the correct color onChange', async () => {
+    const mockOnChange = jest.fn();
+
+    render(<ColorPicker onChange={mockOnChange} />);
+
+    const [
+      btnPink,
+      btnYellow,
+      btnGreen,
+      btnTurquoise,
+      btnBlueLight,
+      btnBlue,
+      btnPurple,
+    ] = await screen.queryAllByRole('button');
+
+    fireEvent.click(btnPink);
+
+    expect(mockOnChange).toBeCalledWith('pink');
+
+    fireEvent.click(btnYellow);
+
+    expect(mockOnChange).toBeCalledWith('yellow');
+
+    fireEvent.click(btnGreen);
+
+    expect(mockOnChange).toBeCalledWith('green');
+
+    fireEvent.click(btnTurquoise);
+
+    expect(mockOnChange).toBeCalledWith('turquoise');
+
+    fireEvent.click(btnBlueLight);
+
+    expect(mockOnChange).toBeCalledWith('blueLight');
+
+    fireEvent.click(btnBlue);
+
+    expect(mockOnChange).toBeCalledWith('blue');
+
+    fireEvent.click(btnPurple);
+
+    expect(mockOnChange).toBeCalledWith('purple');
+  });
+
+  it('Return the correct init color', async () => {
+    const mockOnChange = jest.fn();
+
+    render(<ColorPicker onChange={mockOnChange} initColor="green" />);
+
+    const [, , btnGreen] = await screen.queryAllByRole('button');
+
+    expect(btnGreen).toHaveStyleRule('border', '1.4px solid #fff');
+  });
+});

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { css } from '@emotion/react';
+
+import ColorPicker, { mapColors } from './ColorPicker';
+import { ColorPickerProps, ColorsList } from './types';
+
+export default {
+  title: 'Components/ColorPicker',
+  component: ColorPicker,
+} as Meta<typeof ColorPicker>;
+
+export const Default = ({ initColor }: ColorPickerProps) => {
+  const [color, setColor] = useState<ColorsList>(
+    initColor || ('' as ColorsList),
+  );
+
+  return (
+    <div>
+      <ColorPicker onChange={setColor} />
+      <div
+        css={[
+          mapColors[color],
+          css`
+            width: 50px;
+            height: 50px;
+          `,
+        ]}
+      />
+    </div>
+  );
+};
+
+Default.args = {};
+Default.propTypes = {
+  initColor: String,
+};
+
+export const SelectedColor = () => {
+  return (
+    <Default
+      initColor="green"
+      onChange={() => {
+        console.log('onChange');
+      }}
+    />
+  );
+};