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

package/src/components/Progress/constants.ts

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

@@ -1,23 +0,0 @@
-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/PromoBanner/PromoBanner.module.scss

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

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

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import {
-  PromoBannerProps,
-  PromoBanner as PromoBannerComponent,
-  PromoBannerSize,
-} from './PromoBanner';
-
-export default {
-  title: 'Components/PromoBanner',
-  component: PromoBannerComponent,
-  parameters: {
-    componentSubtitle: `
-      Promo banner component is used to let users know about upgrade options, new features, 
-      or any other information that doesn't require immediate action. This component should be 
-      used wisely so don't overuse it too often. Remember to always specify the action that you 
-      want to promote.
-    `,
-  },
-  argTypes: { onClose: { defaultValue: null } },
-} as ComponentMeta<typeof PromoBannerComponent>;
-
-const StoryTemplate: Story<PromoBannerProps> = (args: PromoBannerProps) => (
-  <div>
-    <PromoBannerComponent {...args}>
-      <>
-        A description with a <b>maximum of 100 characters</b>. That usually
-        means only one or two sentences.
-      </>
-    </PromoBannerComponent>
-  </div>
-);
-
-export const PromoBanner = StoryTemplate.bind({});
-PromoBanner.args = {
-  header: 'This example headline has 40 characters',
-};
-
-export const PromoBannerWithButtons = StoryTemplate.bind({});
-PromoBannerWithButtons.args = {
-  header: 'This example headline has 40 characters',
-  buttonText: 'Example',
-  linkText: 'Example',
-  onButtonClick: () => {
-    alert('onButtonClick click');
-  },
-  onLinkClick: () => {
-    alert('onLinkClick click');
-  },
-};
-
-export const PromoBannerWithImage = StoryTemplate.bind({});
-PromoBannerWithImage.args = {
-  header: 'This example headline has 40 characters',
-  img: 'https://via.placeholder.com/100',
-};
-
-export const PromoBannerLight = StoryTemplate.bind({});
-PromoBannerLight.args = {
-  header: 'This example headline has 40 characters',
-  light: true,
-};
-
-export const PromoBannerWithClose = StoryTemplate.bind({});
-PromoBannerWithClose.args = {
-  header: 'This example headline has 40 characters',
-  onClose: () => {
-    alert('onClose click');
-  },
-};
-
-export const PromoBannerSmall = StoryTemplate.bind({});
-PromoBannerSmall.args = {
-  header: 'This example headline has 40 characters',
-  img: 'https://via.placeholder.com/100',
-  size: PromoBannerSize.Small,
-  buttonText: 'Example button',
-  linkText: 'Example link',
-  onClose: () => {
-    alert('onClose click');
-  },
-  onButtonClick: () => {
-    alert('onButtonClick click');
-  },
-  onLinkClick: () => {
-    alert('onLinkClick click');
-  },
-};
-
-export const PromoBannerMedium = StoryTemplate.bind({});
-PromoBannerMedium.args = {
-  header: 'This example headline has 40 characters',
-  img: 'https://via.placeholder.com/100',
-  size: PromoBannerSize.Medium,
-  buttonText: 'Example button',
-  linkText: 'Example link',
-  onClose: () => {
-    alert('onClose click');
-  },
-  onButtonClick: () => {
-    alert('onButtonClick click');
-  },
-  onLinkClick: () => {
-    alert('onLinkClick click');
-  },
-};
-
-export const PromoBannerLarge = StoryTemplate.bind({});
-PromoBannerLarge.args = {
-  header: 'This example headline has 40 characters',
-  img: 'https://via.placeholder.com/100',
-  size: PromoBannerSize.Large,
-  buttonText: 'Example button',
-  linkText: 'Example link',
-  onClose: () => {
-    alert('onClose click');
-  },
-  onButtonClick: () => {
-    alert('onButtonClick click');
-  },
-  onLinkClick: () => {
-    alert('onLinkClick click');
-  },
-};

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Close as CloseIcon } from '@livechat/design-system-icons/react/material';
-
-import { Button } from '../Button';
-import { Icon, IconSizeName } from '../Icon';
-
-import styles from './PromoBanner.module.scss';
-
-const baseClass = 'promo-banner';
-
-export const enum PromoBannerSize {
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
-}
-
-export interface PromoBannerProps {
-  className?: string;
-  buttonText?: string;
-  header: string;
-  img?: string;
-  light?: boolean;
-  linkText?: string;
-  size?: PromoBannerSize;
-  onButtonClick?: () => void;
-  onClose?: () => void;
-  onLinkClick?: () => void;
-}
-
-export const PromoBanner: React.FC<PromoBannerProps> = ({
-  className,
-  buttonText,
-  children,
-  header,
-  img,
-  light = false,
-  linkText,
-  size = PromoBannerSize.Small,
-  onButtonClick,
-  onClose,
-  onLinkClick,
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    {
-      [styles[`${baseClass}--light`]]: light,
-      [styles[`${baseClass}--${size}`]]: size,
-    },
-    className
-  );
-
-  const shouldRenderLargeFooter = (buttonText || linkText) && size === 'large';
-  const shouldRenderSmallOrMediumFooter =
-    (buttonText || linkText) && size !== 'large';
-
-  const footer = (
-    <div className={styles[`${baseClass}__footer`]}>
-      {buttonText && (
-        <Button
-          kind="primary"
-          size="compact"
-          onClick={onButtonClick}
-          className={styles[`${baseClass}__button-text`]}
-        >
-          {buttonText}
-        </Button>
-      )}
-      {linkText && (
-        <Button size="compact" kind="text" onClick={onLinkClick}>
-          {linkText}
-        </Button>
-      )}
-    </div>
-  );
-
-  return (
-    <div className={mergedClassNames}>
-      <div className={styles[`${baseClass}__content`]}>
-        {img && <img src={img} className={styles[`${baseClass}__img`]} />}
-        <div className={styles[`${baseClass}__wrapper`]}>
-          <div className={styles[`${baseClass}__header`]}>{header}</div>
-          <div>{children}</div>
-          {shouldRenderSmallOrMediumFooter && footer}
-        </div>
-        {shouldRenderLargeFooter && footer}
-      </div>
-      {onClose && (
-        <button
-          type="button"
-          className={styles[`${baseClass}__close-icon`]}
-          onClick={onClose}
-        >
-          <Icon source={CloseIcon} size={IconSizeName.Large} />
-        </button>
-      )}
-    </div>
-  );
-};

package/src/components/RadioButton/RadioButton.module.scss

@@ -1,100 +0,0 @@
-.radio-button {
-  display: inline-block;
-
-  &__label {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 1 auto;
-    width: 100%;
-  }
-
-  &__circle {
-    background-color: var(--surface-basic-default);
-    border: 1px solid var(--border-default);
-    border-radius: 16px;
-    box-sizing: border-box;
-    height: 16px;
-    margin-right: 8px;
-    position: relative;
-    transition: all 0.2s ease;
-    width: 16px;
-  }
-
-  &__inner-circle {
-    background-color: var(--color-action-default);
-    border-radius: 8px;
-    height: 8px;
-    left: 3px;
-    opacity: 0;
-    position: absolute;
-    top: 3px;
-    transition: all 0.2s ease;
-    width: 8px;
-  }
-
-  &__text {
-    color: var(--content-default);
-    flex: 1 0 auto;
-  }
-
-  &__input {
-    cursor: pointer;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-    width: 100%;
-  }
-
-  &__helper {
-    cursor: default;
-    margin-left: 24px;
-  }
-
-  &:focus {
-    .radio-button__circle {
-      border-radius: 20px;
-      box-shadow: 0 0 1px 1.6px rgba(67, 132, 245, 0.7); // TODO use color token
-    }
-  }
-
-  &--selected {
-    .radio-button__circle {
-      border-color: var(--color-action-default);
-    }
-
-    .radio-button__inner-circle {
-      opacity: 1;
-    }
-  }
-
-  &--selected:hover {
-    .radio-button__circle {
-      border-color: var(--color-action-hover);
-    }
-
-    .radio-button__inner-circle {
-      background-color: var(--color-action-hover);
-    }
-  }
-
-  &--disabled {
-    .radio-button__circle {
-      opacity: 0.4;
-    }
-
-    &:not(.radio-button--selected) {
-      .radio-button__circle {
-        background-color: var(--surface-basic-disabled);
-      }
-    }
-
-    .radio-button__label,
-    .radio-button__input,
-    .radio-button__text,
-    .radio-button__helper {
-      color: var(--content-disabled);
-      cursor: not-allowed;
-    }
-  }
-}

package/src/components/RadioButton/RadioButton.spec.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { render, userEvent, vi } from 'test-utils';
-import { RadioButton } from './RadioButton';
-
-import styles from './RadioButton.module.scss';
-
-const baseClass = 'radio-button';
-
-describe('<RadioButton> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = render(
-      <RadioButton className="my-css-class">test</RadioButton>
-    );
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should not have been checked or disabled by default', () => {
-    const { container } = render(<RadioButton>test</RadioButton>);
-    expect(container.firstChild).not.toHaveClass(
-      styles[`${baseClass}--selected`]
-    );
-    expect(container.firstChild).not.toHaveClass(
-      styles[`${baseClass}--disabled`]
-    );
-  });
-
-  it('should have secondary class when used with secondary prop', () => {
-    const { container } = render(
-      <RadioButton checked disabled>
-        test
-      </RadioButton>
-    );
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--selected`]);
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--disabled`]);
-  });
-
-  it('should call onChange method', () => {
-    const onChange = vi.fn();
-
-    const { getByRole } = render(
-      <RadioButton onChange={onChange}>test</RadioButton>
-    );
-    userEvent.click(getByRole('radio'));
-    expect(onChange).toBeCalledTimes(1);
-  });
-
-  it('should not call onChange method when checked', () => {
-    const onChange = vi.fn();
-
-    const { getByRole } = render(
-      <RadioButton checked onChange={onChange}>
-        test
-      </RadioButton>
-    );
-    userEvent.click(getByRole('radio'));
-    expect(onChange).not.toBeCalled();
-  });
-
-  it('should not call onChange method when disabled', () => {
-    const onChange = vi.fn();
-
-    const { getByRole } = render(
-      <RadioButton disabled onChange={onChange}>
-        test
-      </RadioButton>
-    );
-    userEvent.click(getByRole('radio'));
-    expect(onChange).not.toBeCalled();
-  });
-});