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

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

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

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

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

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

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

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

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

package/src/components/Progress/constants.ts

@@ -0,0 +1,23 @@
+export const enum ProgressStatus {
+  Normal = 'normal',
+  Error = 'error',
+  Success = 'success',
+}
+
+export const enum ProgressSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export const PROGRESS_STATUSES = [
+  ProgressStatus.Normal,
+  ProgressStatus.Error,
+  ProgressStatus.Success,
+];
+
+export const PROGRESS_SIZES = [
+  ProgressSize.Small,
+  ProgressSize.Medium,
+  ProgressSize.Large,
+];

package/src/components/Progress/helpers.ts

@@ -0,0 +1,23 @@
+import { PROGRESS_STATUSES, ProgressStatus } from './constants';
+
+const clampPercentage = (percent: number): number =>
+  Math.min(Math.max(percent, 0), 100);
+
+export function getPercentNumber(status: ProgressStatus, percent = 0): number {
+  if (status === ProgressStatus.Error) {
+    return 0;
+  }
+
+  return clampPercentage(parseInt(percent.toString(), 10));
+}
+
+export function getProgressStatus(
+  status: ProgressStatus,
+  percent: number
+): ProgressStatus {
+  if (!PROGRESS_STATUSES.includes(status) && percent >= 100) {
+    return ProgressStatus.Normal;
+  }
+
+  return status || ProgressStatus.Normal;
+}

package/src/components/Progress/index.ts

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

package/src/components/PromoBanner/PromoBanner.module.scss

@@ -0,0 +1,121 @@
+.promo-banner {
+  align-items: center;
+  background-color: var(--surface-basic-subtle);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--content-default);
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  min-width: 180px;
+  padding: 20px;
+  position: relative;
+  width: 100%;
+  word-break: break-word;
+
+  b {
+    font-weight: 600;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  &__img {
+    height: 48px;
+    object-fit: contain;
+    width: 48px;
+  }
+
+  &__button-text {
+    margin-right: 24px;
+  }
+
+  &--light {
+    background-color: var(--surface-basic-default);
+    border: solid 1px var(--border-subtle);
+  }
+
+  &--small {
+    flex-wrap: wrap;
+    max-width: 400px;
+
+    .promo-banner__content {
+      flex-direction: column;
+    }
+
+    .promo-banner__img {
+      margin-bottom: 12px;
+    }
+
+    .promo-banner__footer {
+      display: flex;
+      margin-top: 12px;
+    }
+  }
+
+  &--medium {
+    flex-wrap: wrap;
+    max-width: 800px;
+
+    .promo-banner__img {
+      margin-right: 20px;
+    }
+
+    .promo-banner__wrapper {
+      max-width: 680px;
+    }
+
+    .promo-banner__footer {
+      display: flex;
+      flex-shrink: 0;
+      margin-top: 12px;
+    }
+  }
+
+  &--large {
+    min-width: 600px;
+
+    .promo-banner__img {
+      margin-right: 20px;
+    }
+
+    .promo-banner__wrapper {
+      max-width: 680px;
+      min-width: 180px;
+    }
+
+    .promo-banner__footer {
+      align-items: center;
+      display: inline-flex;
+      flex-shrink: 0;
+      margin: 0 56px;
+    }
+  }
+
+  &__close-icon {
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    cursor: pointer;
+    height: 24px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 24px;
+  }
+}

package/src/components/PromoBanner/PromoBanner.spec.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { render, fireEvent, vi } from 'test-utils';
+import { PromoBannerProps, PromoBanner, PromoBannerSize } from './PromoBanner';
+
+import styles from './PromoBanner.module.scss';
+
+const promoHeader = 'This example headline has 40 characters';
+
+const renderComponent = (props: PromoBannerProps) => {
+  return render(<PromoBanner {...props}>This example content</PromoBanner>);
+};
+
+describe('<PromoBanner> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = renderComponent({
+      header: promoHeader,
+      className: 'my-css-class',
+    });
+
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should display button', () => {
+    const { getByText } = renderComponent({
+      header: promoHeader,
+      buttonText: 'Example text',
+    });
+
+    expect(getByText('Example text')).toBeVisible();
+  });
+
+  it('should display link', () => {
+    const { getByText } = renderComponent({
+      header: promoHeader,
+      linkText: 'Example text',
+    });
+
+    expect(getByText('Example text')).toBeVisible();
+  });
+
+  it('should display image', () => {
+    const { getByRole } = renderComponent({
+      header: promoHeader,
+      img: 'https://via.placeholder.com/100',
+    });
+
+    expect(getByRole('img')).toBeVisible();
+  });
+
+  it('should display with light mode', () => {
+    const { container } = renderComponent({
+      header: promoHeader,
+      light: true,
+    });
+
+    expect(container.firstChild).toHaveClass(styles['promo-banner--light']);
+  });
+
+  it('should display with small size by default', () => {
+    const { container } = renderComponent({
+      header: promoHeader,
+    });
+
+    expect(container.firstChild).toHaveClass(styles['promo-banner--small']);
+  });
+
+  it('should display with medium size', () => {
+    const { container } = renderComponent({
+      header: promoHeader,
+      size: PromoBannerSize.Medium,
+    });
+
+    expect(container.firstChild).toHaveClass(styles['promo-banner--medium']);
+  });
+
+  it('should display with large size', () => {
+    const { container } = renderComponent({
+      header: promoHeader,
+      size: PromoBannerSize.Large,
+    });
+
+    expect(container.firstChild).toHaveClass(styles['promo-banner--large']);
+  });
+
+  it('should call onClose function', () => {
+    const onClose = vi.fn();
+    const { getByRole } = renderComponent({
+      header: promoHeader,
+      onClose,
+    });
+
+    fireEvent.click(getByRole('button'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should call onButtonClick function', () => {
+    const onButtonClick = vi.fn();
+    const { getByText } = renderComponent({
+      header: promoHeader,
+      buttonText: 'Example text',
+      onButtonClick,
+    });
+
+    fireEvent.click(getByText('Example text'));
+    expect(onButtonClick).toHaveBeenCalled();
+  });
+
+  it('should call onLinkClick function', () => {
+    const onLinkClick = vi.fn();
+    const { getByText } = renderComponent({
+      header: promoHeader,
+      linkText: 'Example text',
+      onLinkClick,
+    });
+
+    fireEvent.click(getByText('Example text'));
+    expect(onLinkClick).toHaveBeenCalled();
+  });
+});