@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  blue,
+  green,
+  blueLight,
+  pink,
+  purple,
+  turquoise,
+  yellow,
+  yellowWarm,
+} from '@styles/global';
+
+import BadgeBase from './BadgeBase';
+import { BadgeProps } from './types';
+import { large, medium, small } from './styles';
+
+const mapSizes: MainSizes = {
+  small,
+  medium,
+  large,
+};
+
+const mapColors: MainColors = {
+  pink,
+  yellow,
+  yellowWarm,
+  green,
+  turquoise,
+  purple,
+  blueLight,
+  blue,
+};
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  { color = 'purple', size = 'medium', children, ...props },
+  ref,
+) {
+  return (
+    <BadgeBase ref={ref} css={[mapColors[color], mapSizes[size]]} {...props}>
+      {children ? children : null}
+    </BadgeBase>
+  );
+});
+
+export default Badge;

package/src/components/Badge/BadgeBase.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const BadgeBase = styled.div<CommonProps>`
+  display: inline-block;
+
+  font-family: Manrope, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+
+  border-radius: 6px;
+
+  text-align: center;
+  color: #fff;
+
+  white-space: pre;
+`;
+
+export default BadgeBase;

package/src/components/Badge/helpers.ts

@@ -0,0 +1,49 @@
+import { IMapIcons } from '@components/Icon/types';
+import styled from '@emotion/styled';
+
+export const sizes: Array<keyof MainSizes> = ['small', 'medium', 'large'];
+export const colors: Array<keyof MainColors> = [
+  'purple',
+  'blueLight',
+  'green',
+  'blue',
+  'pink',
+  'turquoise',
+  'yellow',
+  'yellowWarm',
+];
+
+export const icons: Array<{ color: keyof MainColors; icon: keyof IMapIcons }> =
+  [
+    {
+      color: 'blueLight',
+      icon: 'information',
+    },
+    {
+      color: 'yellowWarm',
+      icon: 'warning',
+    },
+    {
+      color: 'pink',
+      icon: 'attention',
+    },
+  ];
+
+export const HeaderTitle = styled.span`
+  text-align: center;
+  font-weight: 800;
+  font-size: 10px;
+`;
+
+export const GridWrapper = styled.div`
+  display: grid;
+  grid-template: 'a a a a';
+  grid-gap: 10px;
+  grid-auto-columns: min-content;
+  align-items: center;
+  & > span {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;

package/src/components/Badge/index.ts

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

package/src/components/Badge/styles.ts

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+
+export const large = css`
+  height: 32px;
+  padding: 4px 18px;
+
+  font-size: 1rem;
+`;
+export const medium = css`
+  height: 24px;
+  padding: 4px 15px;
+
+  font-size: 0.688rem;
+`;
+export const small = css`
+  height: 18px;
+  padding: 4px 8px;
+
+  font-size: 0.438rem;
+`;

package/src/components/Badge/types.ts

@@ -0,0 +1,7 @@
+export interface BadgeProps {
+  color?: keyof MainColors;
+  size?: keyof MainSizes;
+  children?: React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+}

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,529 @@
+import userEvent from '@testing-library/user-event';
+
+import Icon from '@components/Icon';
+
+import Button from './index';
+import { IButtonProps } from './types';
+import {
+  primaryBtnSpecs,
+  secondaryBtnSpecs,
+  tertiaryBtnSpecs,
+  infoBtnSpecs,
+  attentionBtnSpecs,
+  TestPropsType,
+} from './fixtures';
+
+function setup(component: JSX.Element) {
+  return {
+    user: userEvent.setup(),
+    ...render(component),
+  };
+}
+
+const getElTestId = (
+  elType: string,
+  isDisabled?: boolean,
+  variant?: IButtonProps['variant'],
+  isHovered?: boolean,
+) => {
+  const prefix = isDisabled
+    ? 'disabled'
+    : ['primary', 'info', 'attention'].includes(variant || '')
+    ? 'white'
+    : variant === 'tertiary' && isHovered
+    ? 'greylight'
+    : 'grey';
+
+  return `${prefix}-button-${elType}`;
+};
+
+const getSpecName = (props: TestPropsType) => {
+  return `Renders ${props.variant} [${props.type}${',' + props.size}${
+    props.text ? ',text' : ''
+  }${props.startIcon ? ',startIcon' : ''}${props.endIcon ? ',endIcon' : ''}${
+    props.disabled ? ',disabled' : ''
+  }]`;
+};
+
+const testButton = async (spec: TestPropsType) => {
+  const { type, size, variant, text, disabled, endIcon, startIcon } = spec;
+  const mockOnClick = jest.fn();
+  let appendIcon;
+  let prependIcon;
+
+  if (startIcon) {
+    prependIcon = <Icon name={startIcon} />;
+  }
+  if (endIcon) {
+    appendIcon = <Icon name={endIcon} />;
+  }
+
+  const { user, getByRole, getByTestId, findByTitle } = setup(
+    <Button
+      type={type as IButtonProps['type']}
+      size={size as IButtonProps['size']}
+      variant={variant as IButtonProps['variant']}
+      text={text}
+      endIcon={appendIcon}
+      startIcon={prependIcon}
+      isDisabled={disabled}
+      onClick={mockOnClick}
+    />,
+  );
+
+  const buttonEl = getByRole('button');
+  expect(buttonEl).toHaveAttribute('type', type);
+
+  if (text) {
+    const textEl = getByTestId(getElTestId('text', disabled, variant));
+    expect(textEl).toHaveTextContent(text);
+  }
+
+  await user.click(buttonEl);
+
+  if (disabled) {
+    expect(mockOnClick).not.toBeCalled();
+  } else {
+    expect(mockOnClick).toBeCalled();
+  }
+
+  if (startIcon) {
+    const iconTitle = new RegExp(startIcon, 'i');
+    const icon = await findByTitle(iconTitle);
+
+    expect(icon).toBeInTheDocument();
+  }
+  if (endIcon) {
+    const iconTitle = new RegExp(endIcon, 'i');
+    const icon = await findByTitle(iconTitle);
+
+    expect(icon).toBeInTheDocument();
+  }
+};
+
+const testTertiaryBtnHoverState = async (spec: TestPropsType) => {
+  const { type, size, variant, text, disabled, endIcon, startIcon } = spec;
+  const mockOnClick = jest.fn();
+  let appendIcon;
+  let prependIcon;
+
+  if (startIcon) {
+    prependIcon = <Icon name={startIcon} />;
+  }
+  if (endIcon) {
+    appendIcon = <Icon name={endIcon} />;
+  }
+
+  const { user, getByRole, getByTestId, findByTitle } = setup(
+    <Button
+      type={type as IButtonProps['type']}
+      size={size as IButtonProps['size']}
+      variant={variant as IButtonProps['variant']}
+      text={text}
+      endIcon={appendIcon}
+      startIcon={prependIcon}
+      isDisabled={disabled}
+      onClick={mockOnClick}
+    />,
+  );
+
+  const buttonEl = getByRole('button');
+  expect(buttonEl).toHaveAttribute('type', type);
+
+  await user.hover(buttonEl);
+
+  if (text) {
+    const textEl = getByTestId(getElTestId('text', disabled, variant, true));
+    expect(textEl).toHaveTextContent(text);
+  }
+
+  if (startIcon) {
+    const iconTitle = new RegExp(startIcon, 'i');
+    const icon = await findByTitle(iconTitle);
+
+    expect(icon).toBeInTheDocument();
+  }
+  if (endIcon) {
+    const iconTitle = new RegExp(endIcon, 'i');
+    const icon = await findByTitle(iconTitle);
+
+    expect(icon).toBeInTheDocument();
+  }
+};
+
+describe('Button', () => {
+  describe('Primary', () => {
+    primaryBtnSpecs.forEach((spec) =>
+      it(getSpecName(spec), () => testButton(spec)),
+    );
+
+    it('Renders with custom styles', () => {
+      const { getByRole } = render(
+        <Button
+          size="small"
+          variant="primary"
+          text="Click me!"
+          css={{ backgroundColor: 'blue' }}
+        />,
+      );
+
+      const buttonEl = getByRole('button');
+      expect(buttonEl).toHaveStyleRule('background-color', 'blue');
+    });
+
+    it('Renders with full width', () => {
+      const { getByRole } = render(
+        <Button block={true} variant="primary" text="Click me!" />,
+      );
+
+      const buttonWrapper = getByRole('button').closest('div');
+
+      expect(buttonWrapper).toHaveStyleRule('width', '100%');
+    });
+
+    it('Renders with a custom text component', () => {
+      const { queryByTestId, getByText } = render(
+        <Button size="small" variant="primary">
+          Click me!
+        </Button>,
+      );
+
+      getByText('Click me!');
+      expect(queryByTestId('disabled-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('white-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('grey-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('greylight-button-text')).not.toBeInTheDocument();
+    });
+
+    it('Renders with custom aria-* attributes', () => {
+      const { getByRole } = render(
+        <Button size="small" variant="primary" aria-current="true">
+          Click me!
+        </Button>,
+      );
+
+      expect(getByRole('button')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('Throw error when without register', () => {
+      jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => render(<Button variant="primary" />)).toThrow(
+        'Button must have either text or icon or children',
+      );
+    });
+  });
+
+  describe('Info', () => {
+    infoBtnSpecs.forEach((spec) =>
+      it(getSpecName(spec), () => testButton(spec)),
+    );
+
+    it('Renders with custom styles', () => {
+      const { getByRole } = render(
+        <Button
+          size="small"
+          variant="info"
+          text="Click me!"
+          css={{ backgroundColor: 'blue' }}
+        />,
+      );
+
+      const buttonEl = getByRole('button');
+      expect(buttonEl).toHaveStyleRule('background-color', 'blue');
+    });
+
+    it('Renders with full width', () => {
+      const { getByRole } = render(
+        <Button block={true} variant="info" text="Click me!" />,
+      );
+
+      const buttonWrapper = getByRole('button').closest('div');
+
+      expect(buttonWrapper).toHaveStyleRule('width', '100%');
+    });
+
+    it('Renders with a custom text component', () => {
+      const { queryByTestId, getByText } = render(
+        <Button size="small" variant="info">
+          Click me!
+        </Button>,
+      );
+
+      getByText('Click me!');
+      expect(queryByTestId('disabled-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('white-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('grey-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('greylight-button-text')).not.toBeInTheDocument();
+    });
+
+    it('Renders with custom aria-* attributes', () => {
+      const { getByRole } = render(
+        <Button size="small" variant="info" aria-current="true">
+          Click me!
+        </Button>,
+      );
+
+      expect(getByRole('button')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('Throw error when without register', () => {
+      jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => render(<Button variant="info" />)).toThrow(
+        'Button must have either text or icon or children',
+      );
+    });
+  });
+
+  describe('Secondary', () => {
+    secondaryBtnSpecs.forEach((spec) =>
+      it(getSpecName(spec), () => testButton(spec)),
+    );
+
+    it('Renders with custom styles', () => {
+      const { getByRole } = render(
+        <Button
+          size="small"
+          variant="secondary"
+          text="Click me!"
+          css={{ backgroundColor: 'blue' }}
+        />,
+      );
+
+      const buttonEl = getByRole('button');
+
+      expect(buttonEl).toHaveStyleRule('background-color', 'blue');
+    });
+
+    it('Renders with full width', () => {
+      const { getByRole } = render(
+        <Button block={true} variant="secondary" text="Click me!" />,
+      );
+
+      const buttonWrapper = getByRole('button').closest('div');
+
+      expect(buttonWrapper).toHaveStyleRule('width', '100%');
+    });
+
+    it('Renders with a custom text component', () => {
+      const { queryByTestId, getByText } = render(
+        <Button size="small" variant="secondary">
+          Secondary button
+        </Button>,
+      );
+
+      getByText('Secondary button');
+      expect(queryByTestId('disabled-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('white-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('grey-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('greylight-button-text')).not.toBeInTheDocument();
+    });
+
+    it('Renders with custom aria-* attributes', () => {
+      const { getByRole } = render(
+        <Button size="small" variant="secondary" aria-current="true">
+          Click me!
+        </Button>,
+      );
+
+      expect(getByRole('button')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('Trow error when without register', () => {
+      jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => render(<Button variant="secondary" />)).toThrow(
+        'Button must have either text or icon or children',
+      );
+    });
+  });
+
+  describe('Tertiary', () => {
+    tertiaryBtnSpecs.forEach((spec) =>
+      it(getSpecName(spec), () => testButton(spec)),
+    );
+
+    tertiaryBtnSpecs.forEach((spec) =>
+      it(`${getSpecName(spec)} hover`, () => testTertiaryBtnHoverState(spec)),
+    );
+
+    it('Renders with custom styles', () => {
+      const { getByRole } = render(
+        <Button
+          size="small"
+          variant="tertiary"
+          text="Click me!"
+          css={{ backgroundColor: 'blue' }}
+        />,
+      );
+
+      const buttonEl = getByRole('button');
+      expect(buttonEl).toHaveStyleRule('background-color', 'blue');
+    });
+
+    it('Renders with full width', () => {
+      const { getByRole } = render(
+        <Button block={true} variant="tertiary" text="Click me!" />,
+      );
+
+      const buttonWrapper = getByRole('button').closest('div');
+
+      expect(buttonWrapper).toHaveStyleRule('width', '100%');
+    });
+
+    it('Renders with a custom text component', () => {
+      const { queryByTestId, getByText } = render(
+        <Button size="small" variant="tertiary">
+          Tertiary button
+        </Button>,
+      );
+
+      getByText('Tertiary button');
+      expect(queryByTestId('disabled-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('white-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('grey-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('greylight-button-text')).not.toBeInTheDocument();
+    });
+
+    it('Renders with custom aria-* attributes', () => {
+      const { getByRole } = render(
+        <Button size="small" variant="tertiary" aria-current="true">
+          Click me!
+        </Button>,
+      );
+
+      expect(getByRole('button')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('Trow error when without register', () => {
+      jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => render(<Button variant="tertiary" />)).toThrow(
+        'Button must have either text or icon or children',
+      );
+    });
+  });
+
+  describe('Attention', () => {
+    attentionBtnSpecs.forEach((spec) =>
+      it(getSpecName(spec), () => testButton(spec)),
+    );
+
+    it('Renders with custom styles', () => {
+      const { getByRole } = render(
+        <Button
+          size="small"
+          variant="attention"
+          text="Click me!"
+          css={{ backgroundColor: 'pink' }}
+        />,
+      );
+
+      const buttonEl = getByRole('button');
+      expect(buttonEl).toHaveStyleRule('background-color', 'pink');
+    });
+
+    it('Renders with full width', () => {
+      const { getByRole } = render(
+        <Button block={true} variant="attention" text="Click me!" />,
+      );
+
+      const buttonWrapper = getByRole('button').closest('div');
+
+      expect(buttonWrapper).toHaveStyleRule('width', '100%');
+    });
+
+    it('Renders with a custom text component', () => {
+      const { queryByTestId, getByText } = render(
+        <Button size="small" variant="attention">
+          Click me!
+        </Button>,
+      );
+
+      getByText('Click me!');
+      expect(queryByTestId('disabled-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('white-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('grey-button-text')).not.toBeInTheDocument();
+      expect(queryByTestId('greylight-button-text')).not.toBeInTheDocument();
+    });
+
+    it('Renders with custom aria-* attributes', () => {
+      const { getByRole } = render(
+        <Button size="small" variant="attention" aria-current="true">
+          Click me!
+        </Button>,
+      );
+
+      expect(getByRole('button')).toHaveAttribute('aria-current', 'true');
+    });
+
+    it('Throw error when without register', () => {
+      jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => render(<Button variant="attention" />)).toThrow(
+        'Button must have either text or icon or children',
+      );
+    });
+  });
+
+  describe('Custom', () => {
+    it('Renders with the "custom" variant', () => {
+      const { getByRole } = render(
+        <Button variant="custom" text="Click me!" size="small" />,
+      );
+
+      expect(getByRole('button')).not.toHaveStyleRule(
+        'background-color',
+        'ButtonFace',
+      );
+    });
+  });
+
+  describe('Icon', () => {
+    it('Renders icon at the start', async () => {
+      const { findByTitle } = render(
+        <Button
+          startIcon={<Icon name="calendar" />}
+          variant="primary"
+          text="Click me!"
+        />,
+      );
+
+      const icon = await findByTitle(/calendar/i);
+
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('Renders icon at the end', async () => {
+      const { findByTitle } = render(
+        <Button
+          endIcon={<Icon name="calendar" />}
+          variant="primary"
+          text="Click me!"
+        />,
+      );
+
+      const icon = await findByTitle(/calendar/i);
+
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('Renders icon on both sides', async () => {
+      const { findByTitle } = render(
+        <Button
+          endIcon={<Icon name="carrot-left" />}
+          startIcon={<Icon name="carrot-right" />}
+          variant="primary"
+          text="Click me!"
+        />,
+      );
+
+      const iconLeft = await findByTitle(/carrot left/i);
+      const iconRight = await findByTitle(/carrot right/i);
+
+      expect(iconLeft).toBeInTheDocument();
+      expect(iconRight).toBeInTheDocument();
+    });
+  });
+});