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

package/src/components/Button/Button.module.scss

@@ -0,0 +1,257 @@
+$base-class: 'btn';
+
+.#{$base-class} {
+  align-items: center;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 15px;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  min-width: 36px;
+  padding: 8px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition-duration: 200ms;
+  transition-property: opacity, border, color, background-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
+  user-select: none;
+
+  &:focus,
+  &:hover,
+  &:active {
+    outline: 0;
+  }
+
+  &:focus {
+    box-shadow: 0 0 1px 2px rgba(var(--color-action-default-rgb), 0.7);
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--icon-only {
+    padding: 6px;
+
+    .#{$base-class}__icon--left,
+    .#{$base-class}__icon--right {
+      margin: 0;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--basic {
+    background-color: var(--surface-basic-default);
+    border-color: var(--color-action-default);
+    color: var(--color-action-default);
+
+    &:hover {
+      background-color: var(--surface-basic-subtle);
+      color: var(--color-action-hover);
+    }
+
+    &:active {
+      background-color: var(--surface-feedback-info);
+      color: var(--color-action-hover);
+    }
+
+    &[disabled] {
+      background-color: inherit;
+      border-color: var(--color-action-disabled);
+      color: var(--color-action-disabled);
+    }
+  }
+
+  &--primary {
+    background-color: var(--color-action-default);
+    border-color: var(--color-action-default);
+    color: var(--content-invert-default);
+
+    &:hover {
+      background-color: var(--color-action-hover);
+      border-color: var(--color-action-hover);
+    }
+
+    &:active {
+      background-color: var(--color-action-active);
+      border-color: var(--color-action-active);
+    }
+
+    &[disabled] {
+      background-color: var(--color-action-disabled);
+      border-color: var(--color-action-disabled);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--surface-basic-default);
+    border-color: var(--surface-secondary-default);
+    color: var(--content-default);
+
+    &:hover {
+      background-color: var(--surface-basic-hover);
+      border-color: var(--surface-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--surface-feedback-info);
+      border-color: var(--color-action-default);
+      color: var(--color-action-default);
+    }
+
+    &[disabled] {
+      background-color: inherit;
+      border-color: var(--border-disabled);
+      color: var(--content-disabled);
+    }
+  }
+
+  &--destructive {
+    background-color: var(--color-negative-default);
+    border-color: var(--color-negative-default);
+    color: var(--content-invert-default);
+
+    &:hover {
+      background-color: var(--color-negative-hover);
+      border-color: var(--color-negative-hover);
+    }
+
+    &:active {
+      background-color: var(--color-negative-active);
+      border-color: var(--color-negative-active);
+    }
+
+    &[disabled] {
+      background-color: var(--color-negative-disabled);
+      border-color: var(--color-negative-disabled);
+    }
+  }
+
+  &--compact {
+    height: 32px;
+    min-width: 32px;
+    padding: 6px 16px;
+
+    &.#{$base-class}--icon-only {
+      padding: 4px;
+    }
+  }
+
+  &--large {
+    height: 42px;
+    min-width: 42px;
+    padding: 11px 16px;
+
+    &.#{$base-class}--icon-only {
+      padding: 9px;
+    }
+  }
+
+  &--text,
+  &--plain,
+  &--plain-light {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-action-default);
+
+    &:hover {
+      color: var(--color-action-hover);
+    }
+
+    &[disabled] {
+      color: var(--color-action-disabled);
+    }
+  }
+
+  &--plain-light {
+    font-weight: 400;
+  }
+
+  &--plain {
+    font-weight: 600;
+  }
+
+  &--plain,
+  &--plain-light {
+    border: 0;
+    height: auto;
+    min-width: auto;
+    padding: 0;
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      text-decoration: underline;
+    }
+
+    &:disabled {
+      text-decoration: none;
+    }
+  }
+
+  &--loading {
+    cursor: progress;
+    transition: all 0.2s cubic-bezier(0.64, 0, 0.35, 1);
+
+    > * {
+      opacity: 0;
+    }
+
+    .#{$base-class}__loader {
+      align-items: center;
+      box-sizing: border-box;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      left: 0;
+      opacity: 1;
+      padding: inherit;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      > * {
+        color: inherit;
+        font-weight: inherit;
+        margin: 0 5px;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  // TODO: Investigate
+  &__content {
+    margin-top: -2px;
+  }
+
+  &__icon {
+    color: inherit;
+    display: inline-block;
+    height: 20px;
+    line-height: 1;
+    width: 20px;
+
+    &--left {
+      margin-left: -4px;
+      margin-right: 5px;
+      order: -1;
+    }
+
+    &--right {
+      margin-left: 5px;
+      margin-right: -4px;
+      order: 1;
+    }
+  }
+}

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

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

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

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

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

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

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

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