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

package/src/components/Popover/Popover.stories.tsx

@@ -1,164 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Button } from '../Button';
-import { Popover as PopoverComponent } from './Popover';
-import {
-  Block,
-  Chats,
-  DropDown,
-  Email,
-  Tickets,
-} from '@livechat/design-system-icons/react/material';
-import { Icon } from '../Icon';
-
-import * as PopperCore from '@popperjs/core';
-import './Popover.stories.css';
-
-const OpenChat = () => {
-  return (
-    <div className="lc-listElement">
-      <Icon source={Chats} /> <span className="lc-label">Open chat</span>{' '}
-    </div>
-  );
-};
-
-const CreateTicket = () => {
-  return (
-    <div className="lc-listElement">
-      <Icon source={Tickets} />{' '}
-      <span className="lc-label">Create a ticket</span>{' '}
-    </div>
-  );
-};
-
-const SendTranscript = () => {
-  return (
-    <div className="lc-listElement lc-divider">
-      <Icon source={Email} /> <span className="lc-label">Send transcript</span>{' '}
-    </div>
-  );
-};
-
-const BanCustomer = () => {
-  return (
-    <div className="lc-listElement">
-      <Icon source={Block} />{' '}
-      <span className="lc-label">Ban this customer</span>{' '}
-    </div>
-  );
-};
-
-export const Popover = ({
-  placement,
-  isVisible,
-}: {
-  placement: PopperCore.Placement;
-  isVisible: boolean;
-}): React.ReactElement => (
-  <div style={{ minHeight: '400px' }}>
-    <PopoverComponent
-      placement={placement}
-      isVisible={isVisible}
-      triggerRenderer={() => (
-        <div>
-          <Button icon={<Icon source={DropDown}></Icon>} iconPosition={'right'}>
-            Open Popover
-          </Button>
-        </div>
-      )}
-      modifiers={{
-        preventOverflow: {
-          enabled: true,
-        },
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          padding: '12px',
-          width: '308px',
-          height: '308px',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            border: '1px dashed var(--border-default)',
-            backgroundColor: 'var(--surface-basic-default)',
-            width: '100%',
-            height: '100%',
-            borderRadius: '4px',
-          }}
-        >
-          Popover content
-        </div>
-      </div>
-    </PopoverComponent>
-  </div>
-);
-
-Popover.args = {
-  placement: 'bottom-start',
-  isVisible: true,
-};
-
-export const Actions = ({
-  placement,
-  isVisible,
-}: {
-  placement: PopperCore.Placement;
-  isVisible: boolean;
-}): React.ReactElement => (
-  <div style={{ minHeight: '200px' }}>
-    <PopoverComponent
-      placement={placement}
-      isVisible={isVisible}
-      triggerRenderer={() => (
-        <div>
-          <Button icon={<Icon source={DropDown}></Icon>} iconPosition={'right'}>
-            Actions
-          </Button>
-        </div>
-      )}
-      modifiers={{
-        preventOverflow: {
-          enabled: true,
-        },
-      }}
-    >
-      <div
-        style={{
-          minWidth: '200px',
-        }}
-      >
-        <OpenChat />
-        <CreateTicket />
-        <SendTranscript />
-        <BanCustomer />
-      </div>
-    </PopoverComponent>
-  </div>
-);
-
-Actions.args = {
-  placement: 'bottom-start',
-  isVisible: true,
-};
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-  argTypes: {
-    placement: {
-      options: PopperCore.placements,
-      control: {
-        type: 'select',
-        labels: PopperCore.placements,
-      },
-    },
-  },
-} as ComponentMeta<typeof Popover>;

package/src/components/Popover/Popover.tsx

@@ -1,124 +0,0 @@
-import * as React from 'react';
-import { usePopper } from 'react-popper';
-import * as PopperCore from '@popperjs/core';
-import cx from 'clsx';
-
-import cssStyles from './Popover.module.scss';
-
-type PopoverModifiers = {
-  [key: string]: Partial<PopperCore.StrictModifiers>;
-};
-export interface IPopoverProps {
-  children?: React.ReactNode;
-  className?: string;
-  modifiers?: PopoverModifiers;
-  placement?: PopperCore.Placement;
-  isVisible?: boolean;
-  triggerRenderer: () => React.ReactNode;
-}
-
-const buildPopperModifiers = (modifiers: PopoverModifiers) => {
-  const { offset, flip, preventOverflow } = modifiers;
-
-  const calculatedOffset = [
-    {
-      name: 'offset',
-      options: {
-        offset: [0, 4],
-        ...(offset?.options || {}),
-      },
-    },
-  ];
-
-  const calculateFlip = [
-    {
-      name: 'flip',
-      options: {
-        ...(flip?.options || {}),
-      },
-    },
-  ];
-
-  const calculatePreventOverflow = [
-    {
-      name: 'preventOverlow',
-      options: {
-        rootBoundary: 'viewport',
-        ...(preventOverflow || {}),
-      },
-    },
-  ];
-
-  return [...calculatedOffset, ...calculateFlip, ...calculatePreventOverflow];
-};
-
-export const Popover: React.FC<IPopoverProps> = (props) => {
-  const {
-    triggerRenderer,
-    children,
-    className,
-    placement,
-    isVisible = false,
-  } = props;
-
-  const rendererRef = React.useRef<HTMLDivElement | null>(null);
-  const popperRef = React.useRef<HTMLDivElement | null>(null);
-
-  const [visible, setVisibility] = React.useState(false);
-
-  React.useEffect(() => {
-    setVisibility(isVisible);
-  }, [isVisible]);
-
-  function handleDocumentClick(event: MouseEvent) {
-    if (popperRef.current?.contains(event.target as Node)) {
-      return;
-    } else if (rendererRef.current?.contains(event.target as Node)) {
-      setVisibility((prevVisible) => !prevVisible);
-    } else {
-      setVisibility(false);
-    }
-  }
-
-  const handleHideOnEscape = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      setVisibility(false);
-    }
-  };
-
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleHideOnEscape);
-    document.addEventListener('mousedown', handleDocumentClick);
-    return () => {
-      document.removeEventListener('keydown', handleHideOnEscape);
-      document.removeEventListener('mousedown', handleDocumentClick);
-    };
-  }, []);
-
-  const { styles, attributes } = usePopper(
-    rendererRef.current,
-    popperRef.current,
-    {
-      modifiers: props.modifiers ? buildPopperModifiers(props.modifiers) : [],
-      placement: placement,
-    }
-  );
-
-  const mergedClassNames = cx(cssStyles['popover'], className, {
-    [cssStyles['popover--visible']]: visible,
-  });
-
-  return (
-    <>
-      <div ref={rendererRef}>{triggerRenderer()}</div>
-      <div
-        ref={popperRef}
-        className={mergedClassNames}
-        style={styles.popper}
-        {...attributes.popper}
-      >
-        {children}
-      </div>
-    </>
-  );
-};

package/src/components/Progress/ProgressBar.module.scss

@@ -1,48 +0,0 @@
-.progress-bar {
-  background-color: var(--color-action-disabled);
-  border-radius: 100px;
-  display: inline-block;
-  height: 4px;
-  position: relative;
-  width: 100%;
-
-  &--small {
-    height: 3px;
-  }
-
-  &--medium {
-    height: 4px;
-  }
-
-  &--large {
-    height: 6px;
-  }
-
-  &--error {
-    background-color: var(--color-negative-disabled);
-  }
-
-  &--success {
-    background-color: var(--color-positive-disabled);
-  }
-
-  &--normal {
-    background-color: var(--color-action-disabled);
-  }
-
-  &__indicator--success {
-    background-color: var(--color-positive-default);
-    border-radius: 100px;
-    height: 100%;
-    position: relative;
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-  }
-
-  &__indicator--normal {
-    background-color: var(--color-action-default);
-    border-radius: 100px;
-    height: 100%;
-    position: relative;
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-  }
-}

package/src/components/Progress/ProgressBar.spec.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-import { render } from 'test-utils';
-import { ProgressStatus } from './constants';
-import { ProgressBar } from './ProgressBar';
-
-import styles from './ProgressBar.module.scss';
-
-describe('<ProgressBar /> component', () => {
-  it('should render normal ProgressBar by default', () => {
-    const { getByRole } = render(<ProgressBar percent={10} />);
-    expect(getByRole('progressbar')).toHaveClass(styles['progress-bar']);
-    expect(getByRole('progressbar')).toHaveClass(
-      styles['progress-bar--normal']
-    );
-  });
-
-  it('should render success ProgressBar when success status is passed', () => {
-    const { getByRole } = render(
-      <ProgressBar status={ProgressStatus.Success} percent={10} />
-    );
-    expect(getByRole('progressbar')).toHaveClass(
-      styles['progress-bar--success']
-    );
-  });
-
-  it('should render error ProgressBar when error status is passed', () => {
-    const { getByRole } = render(
-      <ProgressBar status={ProgressStatus.Error} percent={10} />
-    );
-    expect(getByRole('progressbar')).toHaveClass(styles['progress-bar--error']);
-  });
-});

package/src/components/Progress/ProgressBar.stories.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  ProgressBar as ProgressBarComponent,
-  ProgressBarProps,
-} from './ProgressBar';
-import { ProgressSize, ProgressStatus } from './constants';
-
-export default {
-  title: 'Components/Progress',
-  component: ProgressBarComponent,
-} as ComponentMeta<typeof ProgressBarComponent>;
-
-export const ProgressBar = (args: ProgressBarProps): React.ReactElement => {
-  return <ProgressBarComponent {...args} />;
-};
-
-ProgressBar.args = {
-  percent: 10,
-  status: ProgressStatus.Normal,
-  size: ProgressSize.Medium,
-};

package/src/components/Progress/ProgressBar.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import { ProgressSize, ProgressStatus } from './constants';
-import { getPercentNumber, getProgressStatus } from './helpers';
-
-import styles from './ProgressBar.module.scss';
-
-const baseClass = 'progress-bar';
-
-export interface ProgressBarProps {
-  className?: string;
-  percent: number;
-  status?: ProgressStatus;
-  size?: ProgressSize;
-}
-
-export const ProgressBar: React.ExoticComponent<
-  ProgressBarProps & React.RefAttributes<HTMLInputElement>
-> = React.forwardRef(
-  (
-    {
-      status = ProgressStatus.Normal,
-      percent,
-      size = ProgressSize.Medium,
-      className = '',
-      ...restProps
-    },
-    ref: React.LegacyRef<HTMLInputElement>
-  ) => {
-    const progressStatus = getProgressStatus(status, percent);
-    const percentNumber = getPercentNumber(progressStatus, percent);
-
-    const mergedClassNames = cx(
-      styles[baseClass],
-      {
-        [styles[`${baseClass}--${size}`]]: size,
-        [styles[`${baseClass}--error`]]:
-          progressStatus === ProgressStatus.Error,
-        [styles[`${baseClass}--success`]]:
-          progressStatus === ProgressStatus.Success,
-        [styles[`${baseClass}--normal`]]:
-          progressStatus === ProgressStatus.Normal,
-      },
-      className
-    );
-
-    return (
-      <div
-        {...restProps}
-        className={mergedClassNames}
-        ref={ref}
-        role="progressbar"
-      >
-        <div
-          className={styles[`${baseClass}__indicator--${status}`]}
-          style={{ width: `${percentNumber}%` }}
-        />
-      </div>
-    );
-  }
-);

package/src/components/Progress/ProgressCircle.module.scss

@@ -1,64 +0,0 @@
-.progress-circle {
-  height: 36px;
-  transform: rotate(-90deg);
-  width: 36px;
-
-  &--small {
-    height: 15px;
-    width: 15px;
-  }
-
-  &--medium {
-    height: 36px;
-    width: 36px;
-  }
-
-  &--large {
-    height: 56px;
-    width: 56px;
-  }
-
-  &__bg-line--normal {
-    stroke: var(--color-action-disabled);
-  }
-
-  &__bg-line--success {
-    stroke: var(--color-positive-disabled);
-  }
-
-  &__bg-line--error {
-    stroke: var(--color-negative-disabled);
-  }
-
-  &__indicator--normal {
-    stroke: var(--color-action-default);
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-  }
-
-  &__indicator--success {
-    stroke: var(--color-positive-default);
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-  }
-
-  &__indicator--error {
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-  }
-
-  &--error {
-    .progress-circle__bg-line {
-      stroke: var(--color-negative-disabled);
-    }
-  }
-
-  &--success {
-    .progress-circle__bg-line {
-      stroke: var(--color-positive-disabled);
-    }
-  }
-
-  &--normal {
-    .progress-circle__bg-line {
-      stroke: var(--color-action-disabled);
-    }
-  }
-}

package/src/components/Progress/ProgressCircle.spec.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { ProgressStatus } from './constants';
-import { ProgressCircle } from './ProgressCircle';
-
-import styles from './ProgressCircle.module.scss';
-
-describe('<ProgressCircle /> component', () => {
-  it('should render  ProgressCircle by default', () => {
-    const { getByRole } = render(<ProgressCircle percent={10} />);
-    expect(getByRole('progressbar')).toHaveClass(styles['progress-circle']);
-    expect(getByRole('progressbar')).toHaveClass(
-      styles['progress-circle--normal']
-    );
-  });
-
-  it('should render success ProgressCircle when success status is passed', () => {
-    const { getByRole } = render(
-      <ProgressCircle status={ProgressStatus.Success} percent={10} />
-    );
-    expect(getByRole('progressbar')).toHaveClass(
-      styles['progress-circle--success']
-    );
-  });
-
-  it('should render error ProgressCircle when error status is passed', () => {
-    const { getByRole } = render(
-      <ProgressCircle status={ProgressStatus.Error} percent={10} />
-    );
-    expect(getByRole('progressbar')).toHaveClass(
-      styles['progress-circle--error']
-    );
-  });
-});

package/src/components/Progress/ProgressCircle.stories.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  ProgressCircle as ProgressCircleComponent,
-  ProgressCircleProps,
-} from './ProgressCircle';
-
-export default {
-  title: 'Components/Progress',
-  component: ProgressCircleComponent,
-} as ComponentMeta<typeof ProgressCircleComponent>;
-
-export const ProgressCircle = (
-  args: ProgressCircleProps
-): React.ReactElement => {
-  return (
-    <div>
-      <ProgressCircleComponent {...args} />
-    </div>
-  );
-};
-
-ProgressCircle.args = {
-  percent: 10,
-  status: 'normal',
-  size: 'medium',
-};

package/src/components/Progress/ProgressCircle.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { ProgressSize, ProgressStatus } from './constants';
-import { getPercentNumber, getProgressStatus } from './helpers';
-
-import styles from './ProgressCircle.module.scss';
-
-const THICKNESS_FROM_SIZE = {
-  [ProgressSize.Small]: 2,
-  [ProgressSize.Medium]: 3,
-  [ProgressSize.Large]: 4,
-};
-
-const SIZE_VALUE_FROM_SIZE = {
-  [ProgressSize.Small]: 15,
-  [ProgressSize.Medium]: 36,
-  [ProgressSize.Large]: 56,
-};
-
-const baseClass = 'progress-circle';
-
-export interface ProgressCircleProps {
-  className?: string;
-  percent: number;
-  status?: ProgressStatus;
-  size?: ProgressSize;
-}
-
-export const ProgressCircle: React.ExoticComponent<
-  ProgressCircleProps & React.RefAttributes<HTMLInputElement>
-> = React.forwardRef(
-  (
-    {
-      status = ProgressStatus.Normal,
-      percent,
-      className,
-      size = ProgressSize.Medium,
-      ...restProps
-    },
-    ref: React.LegacyRef<HTMLInputElement>
-  ) => {
-    const progressStatus = getProgressStatus(status, percent);
-    const percentNumber = getPercentNumber(progressStatus, percent);
-    const thickness = THICKNESS_FROM_SIZE[size];
-    const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-
-    const mergedClassNames = cx(
-      styles[baseClass],
-      {
-        [styles[`${baseClass}--${size}`]]: size,
-        [styles[`${baseClass}--error`]]:
-          progressStatus === ProgressStatus.Error,
-        [styles[`${baseClass}--success`]]:
-          progressStatus === ProgressStatus.Success,
-        [styles[`${baseClass}--normal`]]:
-          progressStatus === ProgressStatus.Normal,
-      },
-      className
-    );
-
-    const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
-
-    const indicatorStyle = {
-      strokeDasharray: circumference.toFixed(3),
-      strokeDashoffset: `${(
-        ((100 - percentNumber) / 100) *
-        circumference
-      ).toFixed(3)}px`,
-    };
-
-    const svgViewBox = `${sizeValue / 2} ${
-      sizeValue / 2
-    } ${sizeValue} ${sizeValue}`;
-
-    return (
-      <div
-        className={mergedClassNames}
-        ref={ref}
-        role="progressbar"
-        {...restProps}
-      >
-        <svg viewBox={svgViewBox}>
-          <circle
-            className={styles[`${baseClass}__bg-line--${status}`]}
-            cx={sizeValue}
-            cy={sizeValue}
-            r={(sizeValue - thickness) / 2}
-            fill="none"
-            strokeWidth={thickness}
-          />
-          <circle
-            className={styles[`${baseClass}__indicator--${status}`]}
-            style={indicatorStyle}
-            cx={sizeValue}
-            cy={sizeValue}
-            r={(sizeValue - thickness) / 2}
-            fill="none"
-            strokeWidth={thickness}
-          />
-        </svg>
-      </div>
-    );
-  }
-);