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

package/src/components/Button/Button.spec.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-
-import { render } from 'test-utils';
-import { Icon } from '../Icon';
-
-import { Button } from './Button';
-import styles from './Button.module.scss';
-
-describe('<Button> component', () => {
-  function renderButton(props = {}) {
-    const result = render(<Button {...props} />);
-
-    return {
-      ...result,
-      btnEl: result.container.firstChild,
-    };
-  }
-
-  it('should have default set of classNames', () => {
-    const { btnEl } = renderButton();
-
-    const expectedClasses = ['btn', 'btn--basic', 'btn--medium'].map(
-      (cls) => styles[cls]
-    );
-    const notExpectedClasses = [
-      'btn--loading',
-      'btn--full-width',
-      'btn--icon-only',
-    ].map((cls) => styles[cls]);
-
-    expect(btnEl).toHaveClass(...expectedClasses);
-    expect(btnEl).not.toHaveClass(...notExpectedClasses);
-  });
-
-  it('should allow to pass custom className', () => {
-    const { btnEl } = renderButton({ className: 'my-class' });
-
-    expect(btnEl).toHaveClass('my-class');
-  });
-
-  it('should not show loader by deafult', () => {
-    const { container, btnEl } = renderButton();
-
-    expect(btnEl).not.toHaveClass(styles['btn--loading']);
-    expect(
-      container.querySelector(`.${styles['btn__loader']}`)
-    ).not.toBeInTheDocument();
-  });
-
-  it('should show loader when "loading" prop is true', () => {
-    const { container, btnEl } = renderButton({ loading: true });
-
-    expect(btnEl).toHaveClass(styles['btn--loading']);
-    expect(container.querySelector(`.${styles['btn__loader']}`)).toBeVisible();
-  });
-
-  it('should not show icon by default', () => {
-    const { container } = renderButton();
-
-    expect(
-      container.querySelector(`.${styles['btn__icon']}`)
-    ).not.toBeInTheDocument();
-  });
-
-  it('should show icon component when "icon" prop has been passed', () => {
-    const { container } = renderButton({
-      icon: <Icon source="span" />,
-    });
-
-    const iconEl = container.querySelector(`.${styles['btn__icon']}`);
-
-    expect(iconEl).toBeVisible();
-    expect(iconEl).toHaveClass(styles['btn__icon--left']);
-  });
-
-  it('should show icon component on right side', () => {
-    const { container } = renderButton({
-      icon: <Icon source="span" />,
-      iconPosition: 'right',
-    });
-
-    const iconEl = container.querySelector(`.${styles['btn__icon']}`);
-
-    expect(iconEl).toBeVisible();
-    expect(iconEl).toHaveClass(styles['btn__icon--right']);
-  });
-
-  it('should allow to take "fullWidth"', () => {
-    const { btnEl } = renderButton({ fullWidth: true });
-
-    expect(btnEl).toHaveClass(styles['btn--full-width']);
-  });
-
-  it('should allow for "icon-only" content', () => {
-    const { btnEl } = renderButton({
-      children: null,
-      icon: <Icon source="span" />,
-    });
-
-    expect(btnEl).toHaveClass(styles['btn--icon-only']);
-  });
-
-  it('should render as an anchor element if href is passed', () => {
-    const { btnEl: linkEl } = renderButton({ href: 'https://example.com' });
-    const { btnEl } = renderButton({ href: '' });
-
-    expect((btnEl as HTMLElement).tagName).toBe('BUTTON');
-    expect((linkEl as HTMLElement).tagName).toBe('A');
-  });
-});

package/src/components/Button/Button.stories.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import * as MaterialIcons from '@livechat/design-system-icons/react/material';
-
-import { Icon } from '../Icon';
-import { Button, ButtonProps } from './Button';
-
-const icons = Object.fromEntries(
-  Object.entries(MaterialIcons).map(([key, source]) => [
-    key,
-    <Icon source={source as React.FC} />,
-  ])
-);
-
-const iterator = Object.keys(icons);
-
-export default {
-  title: 'Components/Button',
-  component: Button,
-  argTypes: {
-    icon: {
-      options: ['None', ...iterator],
-      mapping: Object.assign(icons, { None: null }),
-      control: {
-        type: 'select',
-        labels: iterator,
-      },
-    },
-  },
-  parameters: {
-    controls: {
-      sort: 'alpha',
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-export const button = (args: ButtonProps): React.ReactElement => (
-  <Button {...args} />
-);
-button.args = {
-  loading: false,
-  disabled: false,
-  size: 'medium',
-  kind: 'primary',
-  children: 'Button Text',
-  fullWidth: false,
-  iconPosition: 'left',
-  icon: 'None',
-};
-
-export const kinds = (): React.ReactElement => (
-  <div>
-    <div className="spacer">
-      <Button>Basic</Button>
-      <Button kind="primary">Primary</Button>
-      <Button kind="secondary">Secondary</Button>
-      <Button kind="destructive">Destructive</Button>
-      <Button kind="text">Text</Button>
-      <Button kind="plain">Plain</Button>
-      <Button kind="plain-light">Plain light</Button>
-    </div>
-  </div>
-);
-
-export const states = (): React.ReactElement => (
-  <div>
-    <div className="spacer">
-      <Button disabled>Disabled</Button>
-      <Button disabled kind="primary">
-        Disabled
-      </Button>
-      <Button disabled kind="secondary">
-        Disabled
-      </Button>
-      <Button disabled kind="destructive">
-        Disabled
-      </Button>
-      <Button disabled kind="text">
-        Disabled
-      </Button>
-      <Button disabled kind="plain">
-        Disabled
-      </Button>
-      <Button disabled kind="plain-light">
-        Disabled
-      </Button>
-    </div>
-    <div className="spacer">
-      <Button loading>Loading</Button>
-      <Button loading kind="primary">
-        Loading
-      </Button>
-      <Button loading kind="secondary">
-        Loading
-      </Button>
-      <Button loading kind="destructive">
-        Loading
-      </Button>
-      <Button loading kind="text">
-        Loading
-      </Button>
-      <Button loading kind="plain">
-        Loading
-      </Button>
-      <Button loading kind="plain-light">
-        Loading
-      </Button>
-    </div>
-  </div>
-);
-
-export const sizes = (): React.ReactElement => (
-  <>
-    <div className="spacer">
-      <Button size="compact" kind="primary">
-        Compact
-      </Button>
-      <Button size="medium" kind="primary">
-        Medium (default)
-      </Button>
-      <Button size="large" kind="primary">
-        Large
-      </Button>
-    </div>
-    <div className="spacer">
-      <Button
-        icon={<Icon source={MaterialIcons.AddCircle} />}
-        size="compact"
-        kind="primary"
-      />
-      <Button
-        icon={<Icon source={MaterialIcons.AddCircle} />}
-        size="medium"
-        kind="primary"
-      />
-      <Button
-        icon={<Icon source={MaterialIcons.AddCircle} />}
-        size="large"
-        kind="primary"
-      />
-    </div>
-  </>
-);
-
-export const buttonAsLink = (args: ButtonProps): React.ReactElement => (
-  <Button href="https://livechat.com" target="_blank" kind="primary" {...args}>
-    Button as an external link to livechat.com
-  </Button>
-);
-
-buttonAsLink.args = { ...button.args, href: 'https://livechat.com' };

package/src/components/Button/Button.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Loader } from '../Loader';
-
-import styles from './Button.module.scss';
-
-export type ButtonSize = 'compact' | 'medium' | 'large';
-
-export type ButtonProps = {
-  kind?:
-    | 'basic'
-    | 'primary'
-    | 'secondary'
-    | 'destructive'
-    | 'text'
-    | 'plain'
-    | 'plain-light';
-  size?: ButtonSize;
-  disabled?: boolean;
-  loading?: boolean;
-  fullWidth?: boolean;
-  loaderLabel?: string;
-  icon?: React.ReactElement;
-  iconPosition?: 'left' | 'right';
-} & React.ButtonHTMLAttributes<HTMLButtonElement> &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>;
-
-const baseClass = 'btn';
-
-export const Button: React.FC<ButtonProps> = ({
-  loading = false,
-  disabled = false,
-  type = 'button',
-  fullWidth = false,
-  kind = 'basic',
-  size = 'medium',
-  icon = null,
-  iconPosition = 'left',
-  loaderLabel,
-  className,
-  children,
-  href,
-  ...props
-}) => {
-  const isDisabled = loading || disabled;
-
-  const Component = href ? 'a' : 'button';
-
-  const mergedClassNames = cx(
-    className,
-    styles[baseClass],
-    styles[`${baseClass}--${kind}`],
-    styles[`${baseClass}--${size}`],
-    {
-      [styles[`${baseClass}--loading`]]: loading,
-      [styles[`${baseClass}--full-width`]]: fullWidth,
-      [styles[`${baseClass}--icon-only`]]: !children && icon,
-      [styles[`${baseClass}--disabled`]]: isDisabled,
-    }
-  );
-
-  return (
-    <Component
-      className={mergedClassNames}
-      disabled={isDisabled}
-      type={type}
-      href={isDisabled ? undefined : href}
-      {...props}
-    >
-      {loading && (
-        <Loader
-          size="small"
-          label={loaderLabel}
-          className={styles[`${baseClass}__loader`]}
-        />
-      )}
-      {icon &&
-        React.cloneElement(icon, {
-          className: cx(
-            styles[`${baseClass}__icon`],
-            styles[`${baseClass}__icon--${iconPosition}`]
-          ),
-          disabled,
-        })}
-      <div className={styles[`${baseClass}__content`]}>{children}</div>
-    </Component>
-  );
-};

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export type { ButtonSize, ButtonProps } from './Button';

package/src/components/ButtonGroup/ButtonGroup.module.scss

@@ -1,31 +0,0 @@
-.btn-group {
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
-  display: inline-flex;
-  flex-direction: row;
-  padding: 3px;
-  vertical-align: middle;
-
-  .btn {
-    border-color: transparent;
-    color: var(--content-default);
-
-    &--active {
-      background-color: var(--surface-basic-active);
-    }
-
-    &--compact {
-      height: 24px;
-    }
-    &--medium {
-      height: 28px;
-    }
-    &--large {
-      height: 34px;
-    }
-  }
-
-  .btn + .btn {
-    margin-left: 2px;
-  }
-}

package/src/components/ButtonGroup/ButtonGroup.spec.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { render, userEvent, vi } from 'test-utils';
-import noop from '../../utils/noop';
-import { Button } from '../Button';
-import { ButtonGroup } from './ButtonGroup';
-
-import styles from './ButtonGroup.module.scss';
-
-describe('<ButtonGroup> component', () => {
-  function renderComponent(props = {}, onButtonClick = noop) {
-    return render(
-      <ButtonGroup {...props}>
-        <Button onClick={onButtonClick}>First button</Button>
-        <Button>Second button</Button>
-      </ButtonGroup>
-    );
-  }
-
-  it('should have custom css class', () => {
-    const className = 'my-custom-class';
-    const {
-      container: { firstChild: el },
-    } = renderComponent({ className });
-
-    expect(el).toHaveClass(className);
-  });
-
-  it('should allow for controlled version of component by passing "currentIndex" prop', () => {
-    const { getAllByRole } = renderComponent({ currentIndex: 1 });
-
-    const [firstButton, secondButton] = getAllByRole('button');
-
-    expect(firstButton).not.toHaveClass(styles['btn--active']);
-    expect(secondButton).toHaveClass(styles['btn--active']);
-  });
-
-  it('should not have active button by default in unconrolled version', () => {
-    const { getAllByRole } = renderComponent();
-
-    const [firstButton, secondButton] = getAllByRole('button');
-
-    expect(firstButton).not.toHaveClass(styles['btn--active']);
-    expect(secondButton).not.toHaveClass(styles['btn--active']);
-  });
-
-  it('should call "onIndexChange" with index of current selected button on click', () => {
-    const onIndexChange = vi.fn();
-    const onButtonClick = vi.fn();
-    const { getAllByRole } = renderComponent({ onIndexChange }, onButtonClick);
-
-    const [firstButton] = getAllByRole('button');
-
-    expect(firstButton).not.toHaveClass(styles['btn--active']);
-
-    userEvent.click(firstButton);
-
-    expect(onIndexChange).toHaveBeenCalledWith(0, expect.anything());
-    expect(onButtonClick).toHaveBeenCalled();
-    expect(firstButton).toHaveClass(styles['btn--active']);
-  });
-});

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  ButtonGroup as ButtonGroupComponent,
-  ButtonGroupProps,
-} from './ButtonGroup';
-
-import { Button } from '../Button';
-
-export default {
-  title: 'Components/Button Group',
-  component: ButtonGroupComponent,
-} as ComponentMeta<typeof ButtonGroupComponent>;
-
-export const controlled = (args: ButtonGroupProps): React.ReactElement => {
-  return (
-    <ButtonGroupComponent {...args}>
-      <Button>First option</Button>
-      <Button>Second option</Button>
-    </ButtonGroupComponent>
-  );
-};
-
-controlled.args = {
-  currentIndex: 1,
-};
-
-export const uncontrolledEmptySelection = (
-  args: ButtonGroupProps
-): React.ReactElement => {
-  return (
-    <ButtonGroupComponent {...args}>
-      <Button>First option</Button>
-      <Button>Second option</Button>
-    </ButtonGroupComponent>
-  );
-};
-
-export const uncontrolledWithInitialSelection = (
-  args: ButtonGroupProps
-): React.ReactElement => {
-  return (
-    <ButtonGroupComponent {...args}>
-      <Button>First option</Button>
-      <Button>Second option</Button>
-    </ButtonGroupComponent>
-  );
-};
-
-uncontrolledWithInitialSelection.args = {
-  initialIndex: 1,
-};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import { ButtonSize, ButtonProps } from '../Button';
-
-import styles from './ButtonGroup.module.scss';
-
-import noop from '../../utils/noop';
-
-const baseClass = 'btn-group';
-
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  currentIndex?: number;
-  initialIndex?: number;
-  fullWidth?: boolean;
-  size?: ButtonSize;
-  children: ReadonlyArray<
-    React.ReactElement<React.PropsWithChildren<ButtonProps>>
-  >;
-  onIndexChange?: (
-    currentIndex: number,
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => void;
-}
-
-export const ButtonGroup: React.FC<ButtonGroupProps> = ({
-  size = 'medium',
-  fullWidth = false,
-  onIndexChange = noop,
-  className,
-  children,
-  currentIndex,
-  initialIndex = -1,
-  ...restProps
-}) => {
-  const mergedClassName = cx(styles[baseClass], className);
-  const [currentStateIndex, setCurrentStateIndex] =
-    React.useState(initialIndex);
-
-  const isControlled = typeof currentIndex === 'number';
-
-  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
-
-  const handleClick = (index: number, event: any) => {
-    if (!isControlled) {
-      setCurrentStateIndex(index);
-    }
-
-    onIndexChange(index, event);
-  };
-
-  return (
-    <div role="group" className={mergedClassName} {...restProps}>
-      {React.Children.map(children, (child, i) =>
-        React.cloneElement(child, {
-          fullWidth,
-          size,
-          kind: 'secondary',
-          type: 'button',
-          onClick: (event: any) => {
-            handleClick(i, event);
-            if (child.props.onClick) {
-              child.props.onClick(event);
-            }
-          },
-          className: cx(
-            styles['btn'],
-            styles[`btn--${size as string}`],
-            i === _currentIndex && styles['btn--active']
-          ),
-        })
-      )}
-    </div>
-  );
-};

package/src/components/ButtonGroup/index.ts

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

package/src/components/Card/Card.module.scss

@@ -1,31 +0,0 @@
-.card {
-  background-color: var(--surface-basic-default);
-  border: solid 1px var(--border-subtle);
-  border-radius: 4px;
-  color: var(--content-default);
-  margin-top: 8px;
-  overflow: hidden;
-  padding: 16px;
-
-  &__title {
-    align-items: center;
-    display: flex;
-    margin-bottom: 14px;
-  }
-
-  &__text {
-    color: var(--content-default);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-  }
-
-  &__img {
-    border-radius: 4px;
-    display: inline-block;
-    height: 24px;
-    margin-right: 10px;
-    width: 24px;
-  }
-}

package/src/components/Card/Card.spec.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { Card } from './Card';
-
-describe('<Card /> component', () => {
-  it('should render only title if image is not provided', () => {
-    const { getByText, getByRole } = render(<Card title="Hello" />);
-    expect(getByText('Hello')).toBeVisible();
-    expect(() => getByRole('img')).toThrow();
-  });
-
-  it('should render title and image if provided', () => {
-    const { getByText, getByRole } = render(
-      <Card title="Hello" img="https://via.placeholder.com/100" />
-    );
-    expect(getByText('Hello')).toBeVisible();
-    expect(getByRole('img')).toBeVisible();
-  });
-
-  it('should render text children', () => {
-    const { getByText } = render(<Card title="Hello">Lorem ipsum</Card>);
-    expect(getByText('Lorem ipsum')).toBeVisible();
-  });
-
-  it('should render nested elements as children', () => {
-    const { getByRole } = render(
-      <Card title="Hello">
-        <div>
-          <h3>Lorem ipsum</h3>
-        </div>
-      </Card>
-    );
-
-    const heading = getByRole('heading');
-    expect(heading).toBeVisible();
-    expect(heading).toHaveTextContent('Lorem ipsum');
-  });
-});

package/src/components/Card/Card.stories.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Card as CardComponent, CardProps } from '../Card';
-
-export default {
-  title: 'Components/Card',
-  component: CardComponent,
-} as ComponentMeta<typeof CardComponent>;
-
-type ICardArgs = CardProps;
-
-export const Card = (args: ICardArgs): React.ReactElement => {
-  return (
-    <div style={{ width: '300px' }}>
-      <CardComponent {...args} />
-    </div>
-  );
-};
-
-Card.args = {
-  title: 'Title goes here',
-  img: 'https://via.placeholder.com/100',
-  children: (
-    <p style={{ margin: 0 }}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore
-    </p>
-  ),
-} as ICardArgs;