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

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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,87 @@
+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/Toast/index.ts

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './ToastWrapper';

package/src/components/Typography/Heading.tsx

@@ -0,0 +1,36 @@
+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
+  );
+};

package/src/components/Typography/Text.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import cx from 'clsx';
+
+import styles from './Typography.module.scss';
+
+type TSize = 'md' | 'sm' | 'xs';
+
+interface IProps {
+  /** DOM element name that will be rendered */
+  as?: string;
+  size?: TSize;
+  /** Optional custom className */
+  className?: string;
+  caps?: boolean;
+  bold?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+}
+
+export const Text: React.FC<IProps> = ({
+  as = 'p',
+  size = 'md',
+  caps = false,
+  bold = false,
+  underline = false,
+  strike = false,
+  children,
+  className,
+  ...props
+}) => {
+  const baseClassPrefix = caps ? 'caps' : `paragraph-${size}`;
+
+  return React.createElement(
+    as,
+    {
+      className: cx(
+        {
+          [styles[`${baseClassPrefix}`]]: true,
+          [styles[`${baseClassPrefix}--bold`]]: bold,
+          [styles[`${baseClassPrefix}--strike`]]: strike,
+          [styles[`${baseClassPrefix}--underline`]]: underline,
+        },
+        className
+      ),
+      ...props,
+    },
+    children
+  );
+};

package/src/components/Typography/Typography.module.scss

@@ -0,0 +1,132 @@
+@mixin heading-xl {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 40px;
+}
+
+@mixin heading-lg {
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 32px;
+}
+
+@mixin heading-md {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 28px;
+}
+
+@mixin heading-sm {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 24px;
+}
+
+@mixin heading-xs {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 24px;
+}
+
+@mixin caps {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  text-transform: uppercase;
+
+  &--bold {
+    font-weight: 600;
+  }
+}
+
+@mixin paragraph-md {
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 22px;
+
+  &--bold {
+    font-weight: 600;
+  }
+
+  &--underline {
+    text-decoration-line: underline;
+  }
+
+  &--strike {
+    text-decoration-line: line-through;
+  }
+}
+
+@mixin paragraph-sm {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 20px;
+
+  &--bold {
+    font-weight: 600;
+  }
+}
+
+@mixin paragraph-xs {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.2px;
+  line-height: 16px;
+
+  &--bold {
+    font-weight: 600;
+  }
+}
+
+.heading-xl {
+  @include heading-xl;
+}
+
+.heading-lg {
+  @include heading-lg;
+}
+
+.heading-md {
+  @include heading-md;
+}
+
+.heading-sm {
+  @include heading-sm;
+}
+
+.heading-xs {
+  @include heading-xs;
+}
+
+.caps {
+  @include caps;
+}
+
+.paragraph-md {
+  @include paragraph-md;
+}
+
+.paragraph-sm {
+  @include paragraph-sm;
+}
+
+.paragraph-xs {
+  @include paragraph-xs;
+}

package/src/components/Typography/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from './Heading';
+export { Text } from './Text';

package/src/index.scss

@@ -0,0 +1,9 @@
+@use './themes/legacy';
+
+*[class^='lc-'] {
+  box-sizing: border-box;
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI,
+    Helvetica Neue, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import './index.scss';
+
+export { DesignTokens } from './themes/designTokens';
+
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/FieldDescription';
+export * from './components/FieldError';
+export * from './components/FieldGroup';
+export * from './components/Form';
+export * from './components/FormGroup';
+export * from './components/Icon';
+export * from './components/InputField';
+export * from './components/Link';
+export * from './components/Loader';
+export * from './components/Modal';
+export * from './components/NumericInput';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/PromoBanner';
+export * from './components/RadioButton';
+export * from './components/Switch';
+export * from './components/Tab';
+export * from './components/Tag';
+export * from './components/TagInput';
+export * from './components/TextField';
+export * from './components/Toast';
+export * from './components/Typography';