@livechat/design-system-react-components 1.0.0-alpha.4 → 1.0.0-alpha.7

package/src/components/Loader/Loader.spec.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-
-import { Loader } from './Loader';
-import styles from './Loader.module.scss';
-
-describe('<Loader> component', () => {
-  function renderLoader(props = {}) {
-    const result = render(<Loader {...props} />);
-    return {
-      ...result,
-      loaderEl: result.container.firstChild,
-      spinnerEl: result.container.querySelector(
-        `.${styles['loader__spinner']}`
-      ),
-      circleEl: result.container.querySelector(
-        `.${styles['loader__spinner-circle']}`
-      ),
-      labelEl: result.container.querySelector(`.${styles['loader__label']}`),
-    };
-  }
-
-  it('should have default set of classNames', () => {
-    const { loaderEl, spinnerEl, circleEl } = renderLoader();
-
-    expect(loaderEl).toHaveClass(styles['loader']);
-    expect(spinnerEl).toBeVisible();
-    expect(spinnerEl).toHaveClass(styles['loader__spinner--medium']);
-    expect(circleEl).toBeVisible();
-  });
-
-  it('should allow for custom className', () => {
-    const { loaderEl } = renderLoader({ className: 'my-loader-class' });
-
-    expect(loaderEl).toHaveClass('my-loader-class');
-  });
-
-  it('should not display "label" by default', () => {
-    const { labelEl } = renderLoader();
-
-    expect(labelEl).not.toBeInTheDocument();
-  });
-
-  it('should display label passed via "label" prop', () => {
-    const { labelEl } = renderLoader({ label: 'my custom label' });
-
-    expect(labelEl).toBeVisible();
-    expect(labelEl).toHaveTextContent('my custom label');
-  });
-
-  it('should allow for change colors of loader', () => {
-    const { circleEl } = renderLoader({
-      primaryColor: 'red',
-      secondaryColor: 'blue',
-    });
-
-    const { borderColor, borderTopColor } = getComputedStyle(
-      circleEl as HTMLElement
-    );
-
-    expect(borderColor).toBe('blue');
-    expect(borderTopColor).toBe('red');
-  });
-});

package/src/components/Loader/Loader.stories.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Loader, LoaderProps } from './Loader';
-
-export default {
-  title: 'Components/Loader',
-  component: Loader,
-} as ComponentMeta<typeof Loader>;
-
-export const sizes = (): React.ReactElement => (
-  <div className="spacer">
-    <Loader size="small" />
-    <Loader size="medium" />
-    <Loader size="large"></Loader>
-  </div>
-);
-
-export const labeled = (args: LoaderProps): React.ReactElement => (
-  <Loader size="small" label="Loading..." {...args} />
-);
-
-export const customColors = (args: LoaderProps): React.ReactElement => (
-  <Loader primaryColor="#d64646" secondaryColor="#eec4c5" {...args} />
-);

package/src/components/Loader/Loader.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import { Text } from '../Typography';
-
-import styles from './Loader.module.scss';
-
-const baseClass = 'loader';
-const spinnerClass = `${baseClass}__spinner`;
-
-export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?: 'small' | 'medium' | 'large';
-  label?: string;
-  /** Fragment circle color */
-  primaryColor?: string;
-  /** Main circle color */
-  secondaryColor?: string;
-}
-
-export const Loader: React.FC<LoaderProps> = ({
-  primaryColor,
-  secondaryColor,
-  label,
-  className,
-  size = 'medium',
-}) => {
-  return (
-    <div className={cx(styles[baseClass], className)}>
-      <div
-        className={cx(styles[spinnerClass], styles[`${spinnerClass}--${size}`])}
-      >
-        <div
-          className={styles['loader__spinner-circle']}
-          style={{
-            /* stylelint-disable */
-            borderColor: secondaryColor,
-            borderTopColor: primaryColor,
-          }}
-        />
-      </div>
-      {label && (
-        <Text as="div" size="md" className={styles['loader__label']}>
-          {label}
-        </Text>
-      )}
-    </div>
-  );
-};

package/src/components/Modal/ActionModal.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { ModalBaseProps, ModalBase } from './ModalBase';
-
-import styles from './Modal.module.scss';
-
-export interface ActionModalProps extends ModalBaseProps {
-  icon?: React.ReactNode;
-  heading?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-
-const baseClass = 'action-modal';
-
-export const ActionModal: React.FC<ActionModalProps> = ({
-  children,
-  className = '',
-  icon,
-  heading,
-  actions,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  return (
-    <ModalBase className={mergedClassNames} {...props}>
-      {icon && <div className={styles[`${baseClass}__icon`]}>{icon}</div>}
-      {heading && (
-        <div className={styles[`${baseClass}__heading`]}>{heading}</div>
-      )}
-      <div className={styles[`${baseClass}__content`]}>{children}</div>
-      {actions && (
-        <div className={styles[`${baseClass}__actions`]}>{actions}</div>
-      )}
-    </ModalBase>
-  );
-};

package/src/components/Modal/Modal.module.scss

@@ -1,131 +0,0 @@
-.modal-base {
-  background-color: var(--surface-basic-default);
-  border-radius: 4px;
-  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.3);
-  color: var(--content-default);
-  display: flex;
-  flex-direction: column;
-  margin: 10px;
-  max-width: 800px;
-  min-width: 400px;
-  overflow: hidden;
-  position: relative;
-
-  &__overlay {
-    align-items: center;
-    background-color: var(--surface-overlay);
-    display: none;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 13000;
-
-    &--visible {
-      display: flex;
-    }
-  }
-
-  &__close {
-    align-items: center;
-    background-color: transparent;
-    border-style: none;
-    box-shadow: none;
-    color: var(--content-subtle);
-    cursor: pointer;
-    display: flex;
-    height: 24px;
-    justify-content: center;
-    outline: none;
-    padding: 0;
-    position: absolute;
-    right: 18px;
-    top: 18px;
-    width: 24px;
-    z-index: 1;
-
-    &:hover {
-      color: var(--content-default);
-    }
-  }
-}
-
-.modal {
-  &__header {
-    background-color: var(--surface-basic-default);
-    box-shadow: inset 0 -1px 0 var(--border-subtle);
-    box-sizing: border-box;
-    color: var(--content-default);
-    padding: 20px;
-    width: 100%;
-  }
-
-  &__heading {
-    color: var(--content-default);
-    margin: 0;
-    max-width: calc(100% - 32px);
-    padding: 0;
-    text-align: left;
-  }
-
-  &__body {
-    background-color: var(--surface-basic-default);
-    box-sizing: border-box;
-    color: var(--content-default);
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    padding: 20px;
-    position: relative;
-    width: 100%;
-  }
-
-  &__footer {
-    box-shadow: inset 0 1px 0 var(--border-subtle);
-    box-sizing: border-box;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: flex-end;
-    padding: 20px;
-    width: 100%;
-  }
-}
-
-.action-modal {
-  align-items: center;
-  box-sizing: border-box;
-  justify-content: center;
-  padding: 52px 20px;
-
-  &__heading {
-    color: var(--content-default);
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 1.33;
-    margin: 0 0 20px;
-    text-align: center;
-    width: 100%;
-  }
-
-  &__content {
-    color: var(--content-default);
-    font-size: 15px;
-    line-height: 1.33;
-    text-align: center;
-    width: 100%;
-  }
-
-  &__actions {
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    margin-top: 32px;
-    width: 100%;
-  }
-
-  &__icon {
-    margin-bottom: 20px;
-  }
-}

package/src/components/Modal/Modal.stories.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Error } from '@livechat/design-system-icons/react/material';
-
-import {
-  Modal as ModalComponent,
-  ModalProps,
-  ActionModal as ActionModalComponent,
-  ActionModalProps,
-  ModalPortal as ModalPortalComponent,
-  ModalPortalProps,
-  ModalBase,
-} from './index';
-import { Button } from '../Button';
-import { Icon, IconSizeName } from '../Icon';
-
-export default {
-  title: 'Components/Modal',
-  component: ModalComponent,
-} as ComponentMeta<typeof ModalComponent>;
-
-export const Modal = ({
-  children,
-  ...args
-}: ModalProps): React.ReactElement => (
-  <ModalComponent {...args}>{children}</ModalComponent>
-);
-
-Modal.args = {
-  heading: 'Modal',
-  children: 'Modal content',
-  closeOnEscPress: true,
-  style: { width: '600px', height: '400px' },
-  footer: (
-    <React.Fragment>
-      <Button size="medium" kind="secondary" style={{ marginRight: '8px' }}>
-        Secondary
-      </Button>
-      <Button kind="primary" size="medium">
-        Primary
-      </Button>
-    </React.Fragment>
-  ),
-} as ModalProps;
-
-export const ActionModal = ({
-  children,
-  ...args
-}: ActionModalProps): React.ReactElement => (
-  <ActionModalComponent {...args}>{children}</ActionModalComponent>
-);
-
-ActionModal.args = {
-  heading: 'Danger! Danger!',
-  style: { width: '410px' },
-  closeOnEscPress: true,
-  children:
-    'You’re about to do something that cannot be undone. Are you sure you want to continue?',
-  actions: (
-    <React.Fragment>
-      <Button size="medium" kind="secondary" style={{ marginRight: '8px' }}>
-        Wait, go back
-      </Button>
-      <Button kind="destructive" size="medium">
-        Yes, delete
-      </Button>
-    </React.Fragment>
-  ),
-  icon: <Icon source={Error} size={IconSizeName.XLarge} />,
-} as ActionModalProps;
-
-export const ModalPortal = ({
-  children,
-  ...args
-}: ModalPortalProps): React.ReactElement => (
-  <ModalPortalComponent {...args}>{children}</ModalPortalComponent>
-);
-
-ModalPortal.args = {
-  children: (
-    <ModalBase onClose={() => ({})} style={{ width: '600px', height: '400px' }}>
-      <div style={{ margin: 'auto' }}>Modal Portal content</div>
-    </ModalBase>
-  ),
-} as ModalPortalProps;

package/src/components/Modal/Modal.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { ModalBaseProps, ModalBase } from './ModalBase';
-import { Heading } from '../Typography';
-
-import styles from './Modal.module.scss';
-
-export interface ModalProps extends ModalBaseProps {
-  heading?: React.ReactNode;
-  footer?: React.ReactNode;
-}
-
-const baseClass = 'modal';
-
-export const Modal: React.FC<ModalProps> = ({
-  children,
-  className = '',
-  heading,
-  footer,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  return (
-    <ModalBase className={mergedClassNames} {...props}>
-      {heading && (
-        <div className={styles[`${baseClass}__header`]}>
-          <Heading
-            size="sm"
-            as="div"
-            className={styles[`${baseClass}__heading`]}
-          >
-            {heading}
-          </Heading>
-        </div>
-      )}
-      <div className={styles[`${baseClass}__body`]}>{children}</div>
-      {footer && <div className={styles[`${baseClass}__footer`]}>{footer}</div>}
-    </ModalBase>
-  );
-};

package/src/components/Modal/ModalBase.spec.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, vi } from 'test-utils';
-import { ModalBase } from './ModalBase';
-
-describe('<ModalBase /> component', () => {
-  it('should allow for custom class', () => {
-    const onClose = vi.fn();
-    const { container } = render(
-      <ModalBase onClose={onClose} className="my-css-class">
-        test
-      </ModalBase>
-    );
-    expect(container.firstChild?.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should call onClose method on overlay click', () => {
-    const onClose = vi.fn();
-    const { queryByTestId } = render(
-      <ModalBase onClose={onClose}>test</ModalBase>
-    );
-
-    const overlay = queryByTestId('lc-modal-overlay');
-
-    if (overlay) {
-      userEvent.click(overlay);
-    }
-    expect(onClose).toBeCalledTimes(1);
-  });
-
-  it('should call onClose method on close modal button press', () => {
-    const onClose = vi.fn();
-    const { getByRole } = render(<ModalBase onClose={onClose}>test</ModalBase>);
-
-    userEvent.click(getByRole('button'));
-    expect(onClose).toBeCalledTimes(1);
-  });
-
-  it('should call onClose on escape button pressed by default', () => {
-    const onClose = vi.fn();
-    render(<ModalBase onClose={onClose}>test</ModalBase>);
-
-    userEvent.keyboard('[Escape]');
-    expect(onClose).toBeCalledTimes(1);
-  });
-
-  it('should not call onClose on escape button pressed when closeOnEscPress is disabled', () => {
-    const onClose = vi.fn();
-    render(
-      <ModalBase onClose={onClose} closeOnEscPress={false}>
-        test
-      </ModalBase>
-    );
-
-    userEvent.keyboard('[Escape]');
-    expect(onClose).not.toBeCalled();
-  });
-});

package/src/components/Modal/ModalBase.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { ModalCloseButton } from './ModalCloseButton';
-import { KeyCodes } from '../../utils/keyCodes';
-
-import styles from './Modal.module.scss';
-
-export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClose(): void;
-  closeOnEscPress?: boolean;
-}
-
-const baseClass = 'modal-base';
-
-export const ModalBase: React.FC<ModalBaseProps> = ({
-  children,
-  className = '',
-  onClose,
-  closeOnEscPress = true,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  React.useEffect(() => {
-    if (!closeOnEscPress) {
-      return;
-    }
-
-    const onKeyUp = (event: KeyboardEvent) => {
-      if (event.key === KeyCodes.esc) {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keyup', onKeyUp, true);
-    return () => document.removeEventListener('keyup', onKeyUp, true);
-  }, [closeOnEscPress]);
-
-  const onOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  const onCloseButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose();
-  };
-
-  return (
-    <div
-      data-testid="lc-modal-overlay"
-      onMouseDown={onOverlayClick}
-      className={cx(
-        styles[`${baseClass}__overlay`],
-        styles[`${baseClass}__overlay--visible`]
-      )}
-    >
-      <div className={mergedClassNames} {...props}>
-        <ModalCloseButton onClick={onCloseButtonClick} />
-        {children}
-      </div>
-    </div>
-  );
-};

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { Close } from '@livechat/design-system-icons/react/material';
-import { Icon, IconSizeName } from '../Icon';
-
-import styles from './Modal.module.scss';
-
-export type ModalCloseButtonProps = React.HTMLAttributes<HTMLButtonElement>;
-
-export const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
-  onClick,
-}) => (
-  <button
-    title="Close modal"
-    className={styles['modal-base__close']}
-    onClick={onClick}
-    type="button"
-  >
-    <Icon source={Close} size={IconSizeName.Large} />
-  </button>
-);

package/src/components/Modal/ModalPortal.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  zIndex: number;
-  parentElementName: string;
-}
-
-export const ModalPortal: React.FC<ModalPortalProps> = ({
-  children,
-  className = '',
-  parentElementName = 'body',
-  zIndex,
-}) => {
-  const [container] = React.useState(() => document.createElement('div'));
-
-  if (className) {
-    container.classList.add(className);
-  }
-
-  if (zIndex) {
-    container.style.zIndex = zIndex.toString();
-  }
-
-  React.useEffect(() => {
-    document.querySelector(parentElementName)?.appendChild(container);
-    return () => {
-      document.querySelector(parentElementName)?.removeChild(container);
-    };
-  }, []);
-
-  // Fragment added to fix TS complaining about createPortal any type
-  return <>{ReactDOM.createPortal(children, container)}</>;
-};