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

package/src/components/Toast/Toast.module.scss

@@ -1,218 +0,0 @@
-$toast-appear-animation-timeout: 200ms;
-$toast-exit-animation-timeout: 200ms;
-
-.toast {
-  align-items: center;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 6px 30px -10px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
-  display: inline-flex;
-  flex: 0 1 auto;
-  font-size: 15px;
-  font-stretch: normal;
-  font-style: normal;
-  font-weight: 600;
-  justify-content: flex-start;
-  letter-spacing: normal;
-  line-height: 20px;
-  max-width: 500px;
-  min-width: 300px;
-  padding: 10px 12px;
-
-  &__content {
-    color: var(--content-default);
-    width: 100%;
-  }
-
-  &__icon,
-  &__close {
-    align-self: baseline;
-    height: 20px;
-    padding-right: 12px;
-  }
-
-  &__icon svg {
-    display: flex;
-    fill: var(--color-action-default);
-    height: 20px;
-    width: 20px;
-  }
-
-  &__actions {
-    align-items: center;
-    align-self: flex-start;
-    display: inline-flex;
-    flex: 1 0 auto;
-    flex-wrap: nowrap;
-    height: 20px;
-    margin-bottom: auto;
-    margin-left: auto;
-
-    &-close {
-      align-items: center;
-      display: flex;
-      flex: 0 1 auto;
-      height: 100%;
-      margin-left: 16px;
-      width: 100%;
-
-      svg {
-        cursor: pointer;
-        display: flex;
-        fill: var(--content-subtle);
-        height: 16px;
-        width: 16px;
-      }
-    }
-
-    &-custom {
-      background-color: transparent;
-      border: 0;
-      color: var(--content-default);
-      cursor: pointer;
-      font-weight: 600;
-      line-height: 20px;
-      margin-left: 16px;
-      outline: 0;
-      padding: 0;
-      text-decoration: underline;
-      white-space: nowrap;
-    }
-  }
-
-  &--notification {
-    background: #fff;
-  }
-
-  &--success {
-    background: var(--color-positive-default);
-  }
-
-  &--warning {
-    background: var(--color-warning-default);
-
-    .toast__content {
-      color: #424d57;
-    }
-  }
-
-  &--error {
-    background: var(--color-negative-default);
-  }
-
-  &--info {
-    background: var(--color-action-default);
-  }
-
-  &--success,
-  &--error,
-  &--info {
-    .toast__content,
-    .toast__actions-custom {
-      color: #fff;
-    }
-  }
-
-  &-wrapper {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 120;
-
-    &--fixed {
-      position: fixed;
-    }
-
-    &--block {
-      position: static;
-    }
-
-    &--horizontal-center {
-      left: calc(50%);
-      transform: translateX(-50%);
-    }
-
-    &--horizontal-left {
-      left: 5px;
-    }
-
-    &--horizontal-right {
-      right: 5px;
-    }
-
-    &--vertical-top {
-      top: 5px;
-
-      .toast {
-        margin-bottom: 10px;
-      }
-
-      .toast-appear--slide {
-        transform: translateY(-100%) !important;
-
-        &.toast-appear-active--slide {
-          transform: translateY(0) !important;
-          transition: transform $toast-appear-animation-timeout ease-in;
-        }
-      }
-
-      .toast-exit--slide {
-        transform: translateY(0) !important;
-
-        &.toast-exit-active--slide {
-          transform: translateY(-100%) !important;
-          transition: transform $toast-exit-animation-timeout ease-in;
-        }
-      }
-    }
-
-    &--vertical-bottom {
-      bottom: 5px;
-
-      .toast {
-        margin-top: 10px;
-      }
-
-      .toast-appear--slide {
-        transform: translateY(100%) !important;
-
-        &.toast-appear-active--slide {
-          transform: translateY(0) !important;
-          transition: transform $toast-appear-animation-timeout ease-in;
-        }
-      }
-
-      .toast-exit--slide {
-        transform: translateY(0) !important;
-
-        &.toast-exit-active--slide {
-          transform: translateY(100%) !important;
-          transition: transform $toast-exit-animation-timeout ease-in;
-        }
-      }
-    }
-
-    &--vertical-top,
-    &--vertical-bottom {
-      .toast-appear--fade {
-        opacity: 0;
-
-        &.toast-appear-active--fade {
-          opacity: 1;
-          transition: opacity $toast-appear-animation-timeout ease-in;
-        }
-      }
-
-      .toast-exit--fade {
-        opacity: 1;
-        transition: opacity $toast-appear-animation-timeout ease-in;
-
-        &.toast-exit-active--fade {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}

package/src/components/Toast/Toast.spec.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, vi } from 'test-utils';
-import { ToastProps, Toast, Variants } from './Toast';
-
-import styles from './Toast.module.scss';
-
-const renderComponent = (props: ToastProps) => {
-  return render(
-    <Toast {...props} className="my-css-class">
-      This example content
-    </Toast>
-  );
-};
-
-describe('<Toast> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should render as info by default', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass(styles['toast--info']);
-  });
-
-  it('should render as success', () => {
-    const { container } = renderComponent({ variant: Variants.Success });
-
-    expect(container.firstChild).toHaveClass(styles['toast--success']);
-  });
-
-  it('should render as warning', () => {
-    const { container } = renderComponent({ variant: Variants.Warning });
-
-    expect(container.firstChild).toHaveClass(styles['toast--warning']);
-  });
-
-  it('should render as error', () => {
-    const { container } = renderComponent({ variant: Variants.Error });
-
-    expect(container.firstChild).toHaveClass(styles['toast--error']);
-  });
-
-  it('should render as notification', () => {
-    const { container } = renderComponent({
-      variant: Variants.Notification,
-    });
-
-    expect(container.firstChild).toHaveClass(styles['toast--notification']);
-  });
-
-  it('should render with action button and call action function', () => {
-    const handler = vi.fn();
-    const { getByText } = renderComponent({
-      action: {
-        label: 'Example action',
-        handler,
-      },
-    });
-
-    expect(getByText('Example action')).toBeVisible();
-    fireEvent.click(getByText('Example action'));
-    expect(handler).toHaveBeenCalled();
-  });
-
-  it('should call action function with onClose function', () => {
-    const handler = vi.fn();
-    const onClose = vi.fn();
-    const { getByText } = renderComponent({
-      action: {
-        label: 'Example action',
-        handler,
-        closeOnClick: true,
-      },
-      onClose,
-    });
-
-    fireEvent.click(getByText('Example action'));
-    expect(handler).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('should render with close button and call onClose function', () => {
-    const onClose = vi.fn();
-    const { getByLabelText } = renderComponent({
-      removable: true,
-      onClose,
-    });
-
-    expect(getByLabelText('Close toast')).toBeVisible();
-    fireEvent.click(getByLabelText('Close toast'));
-    expect(onClose).toHaveBeenCalled();
-  });
-});

package/src/components/Toast/Toast.stories.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import { ToastProps, Toast as ToastComponent, Variants } from './Toast';
-
-export default {
-  title: 'Components/Toast',
-  component: ToastComponent,
-  parameters: {
-    componentSubtitle: `
-    Toast is a small message that by default shows up in the top middle of the screen. 
-    It disappears on its own after a few seconds. It provides a feedback about an operation 
-    for user.
-    `,
-  },
-} as ComponentMeta<typeof ToastComponent>;
-
-interface IToastArgs extends ToastProps {
-  label: string;
-}
-
-const StoryTemplate: Story<IToastArgs> = (args: IToastArgs) => (
-  <div>
-    <ToastComponent {...args}>Example text</ToastComponent>
-  </div>
-);
-
-export const Toast = StoryTemplate.bind({});
-Toast.args = {};
-
-export const SuccessToast = StoryTemplate.bind({});
-SuccessToast.args = {
-  variant: Variants.Success,
-};
-
-export const WarningToast = StoryTemplate.bind({});
-WarningToast.args = {
-  variant: Variants.Warning,
-};
-
-export const ErrorToast = StoryTemplate.bind({});
-ErrorToast.args = {
-  variant: Variants.Error,
-};
-
-export const InfoToast = StoryTemplate.bind({});
-InfoToast.args = {
-  variant: Variants.Info,
-};
-
-export const NotificationToast = StoryTemplate.bind({});
-NotificationToast.args = {
-  variant: Variants.Notification,
-};
-
-export const ToastWithActionAndRemovable = StoryTemplate.bind({});
-ToastWithActionAndRemovable.args = {
-  action: {
-    label: 'Action',
-    handler: () => alert('onAction click'),
-  },
-  removable: true,
-  onClose: () => alert('onClose click'),
-};

package/src/components/Toast/Toast.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import {
-  Close,
-  Info,
-  Warning,
-  CheckCircleSolid,
-  Error,
-} from '@livechat/design-system-icons/react/material';
-import { Icon, IconSizeName, IconTypeName } from '../Icon';
-
-import styles from './Toast.module.scss';
-
-const baseClass = 'toast';
-
-export const enum Variants {
-  Success = 'success',
-  Warning = 'warning',
-  Error = 'error',
-  Info = 'info',
-  Notification = 'notification',
-}
-
-interface ToastAction {
-  handler: () => void;
-  label: string;
-  closeOnClick?: boolean;
-}
-
-export interface ToastProps {
-  action?: ToastAction;
-  className?: string;
-  removable?: boolean;
-  variant?: Variants;
-  onClose?: () => void;
-}
-
-const IconConfig = {
-  [Variants.Success]: {
-    source: CheckCircleSolid,
-    iconType: IconTypeName.Inverted,
-  },
-  [Variants.Warning]: {
-    source: Warning,
-  },
-  [Variants.Error]: {
-    source: Error,
-    iconType: IconTypeName.Inverted,
-  },
-  [Variants.Info]: {
-    source: Info,
-    iconType: IconTypeName.Inverted,
-  },
-  [Variants.Notification]: {
-    source: Info,
-    iconType: IconTypeName.Link,
-  },
-};
-
-export const Toast: React.FC<ToastProps> = ({
-  action,
-  className,
-  children,
-  removable,
-  variant = Variants.Info,
-  onClose,
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    styles[`${baseClass}--${variant}`],
-    className
-  );
-
-  const onActionClick = (action: ToastAction) => {
-    if (action && action.closeOnClick && onClose) {
-      action.handler();
-      return onClose();
-    }
-
-    return action.handler();
-  };
-
-  return (
-    <div className={mergedClassNames}>
-      <div className={styles[`${baseClass}__icon`]}>
-        <Icon {...IconConfig[variant]} />
-      </div>
-      <div className={styles[`${baseClass}__content`]}>{children}</div>
-      {(action || removable) && (
-        <div className={styles[`${baseClass}__actions`]}>
-          {action && (
-            <button
-              className={styles[`${baseClass}__actions-custom`]}
-              onClick={() => onActionClick(action)}
-            >
-              {action.label}
-            </button>
-          )}
-          {removable && (
-            <div
-              className={styles[`${baseClass}__actions-close`]}
-              aria-label="Close toast"
-              onClick={onClose}
-            >
-              <Icon
-                source={Close}
-                size={IconSizeName.Small}
-                iconType={
-                  [Variants.Warning, Variants.Notification].includes(variant)
-                    ? IconTypeName.Primary
-                    : IconTypeName.Inverted
-                }
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/Toast/ToastWrapper.spec.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { ToastWrapper } from './ToastWrapper';
-
-describe('<ToastWrapper> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = render(
-      <ToastWrapper toasts={[]} className="my-css-class" />
-    );
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-});

package/src/components/Toast/ToastWrapper.stories.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  ToastWrapperProps,
-  ToastWrapper as ToastWrapperComponent,
-} from './ToastWrapper';
-import { Variants } from './Toast';
-
-export default {
-  title: 'Components/Toast Wrapper',
-  component: ToastWrapperComponent,
-  parameters: {
-    componentSubtitle: `
-    You can use ToastWrapper component to position your toasts.
-    `,
-  },
-} as ComponentMeta<typeof ToastWrapperComponent>;
-
-export const ToastWrapper = (args: ToastWrapperProps): React.ReactElement => (
-  <div style={{ width: '100%', height: 700, position: 'relative' }}>
-    <ToastWrapperComponent {...args} />
-  </div>
-);
-
-ToastWrapper.args = {
-  fixed: false,
-  toasts: [
-    {
-      id: '1',
-      variant: Variants.Success,
-      content: <div>First toast with DOM element as content</div>,
-    },
-    {
-      id: '2',
-      variant: Variants.Info,
-      content: 'Second toast with string as content and with removable prop',
-      removable: true,
-    },
-    {
-      id: '3',
-      variant: Variants.Warning,
-      content: 'Third toast with action',
-      action: {
-        label: 'Action',
-        handler: () => alert('Third toast action click'),
-      },
-    },
-    {
-      id: '4',
-      variant: Variants.Error,
-      content: 'Fourth toast',
-    },
-  ],
-};

package/src/components/Toast/ToastWrapper.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-
-import { ToastProps, Toast } from './Toast';
-
-import styles from './Toast.module.scss';
-
-export enum HorizontalPosition {
-  Left = 'left',
-  Center = 'center',
-  Right = 'right',
-}
-
-export enum VerticalPosition {
-  Top = 'top',
-  Bottom = 'bottom',
-}
-
-export const ANIMATION_TIME = 200;
-
-const baseClass = 'toast-wrapper';
-
-interface Toast extends ToastProps {
-  id: string;
-  content: React.ReactElement | string;
-}
-
-export interface ToastWrapperProps {
-  className?: string;
-  toasts: Toast[];
-  fixed?: boolean;
-  block?: boolean;
-  animationType?: string;
-  verticalPosition?: VerticalPosition;
-  horizontalPosition?: HorizontalPosition;
-}
-
-export const ToastWrapper: React.FC<ToastWrapperProps> = ({
-  className,
-  toasts = [],
-  fixed = true,
-  block = false,
-  animationType = 'slide',
-  verticalPosition = 'top',
-  horizontalPosition = 'center',
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    {
-      [styles[`${baseClass}--fixed`]]: fixed,
-      [styles[`${baseClass}--block`]]: !fixed && block,
-      [styles[`${baseClass}--horizontal-${horizontalPosition}`]]:
-        horizontalPosition,
-      [styles[`${baseClass}--vertical-${verticalPosition}`]]: verticalPosition,
-    },
-    className
-  );
-
-  return (
-    <div className={mergedClassNames}>
-      <TransitionGroup component={null}>
-        {toasts.map(({ id, variant, content, removable, action, onClose }) => (
-          <CSSTransition
-            key={id}
-            classNames={{
-              enter: styles[`toast-appear--${animationType}`],
-              enterActive: styles[`toast-appear-active--${animationType}`],
-              exit: styles[`toast-exit--${animationType}`],
-              exitActive: styles[`toast-exit-active--${animationType}`],
-            }}
-            timeout={ANIMATION_TIME}
-          >
-            <Toast
-              variant={variant}
-              onClose={onClose}
-              removable={removable}
-              action={action}
-            >
-              {content}
-            </Toast>
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
-    </div>
-  );
-};

package/src/components/Typography/Heading.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import styles from './Typography.module.scss';
-
-enum sizeToElement {
-  xl = 'h1',
-  lg = 'h2',
-  md = 'h3',
-  sm = 'h4',
-  xs = 'h5',
-}
-
-type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-
-interface IProps {
-  size?: TSize;
-  /** DOM element name that will be rendered */
-  as?: string;
-  /** Optional custom className */
-  className?: string;
-}
-
-export const Heading: React.FC<IProps> = ({
-  as,
-  size = 'md',
-  children,
-  className,
-  ...props
-}) => {
-  return React.createElement(
-    as || sizeToElement[size],
-    { className: cx(styles[`heading-${size}`], className), ...props },
-    children
-  );
-};