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

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  RadioButton as RadioButtonComponent,
-  RadioButtonProps,
-} from './RadioButton';
-
-export default {
-  title: 'Forms (WIP)/Radio Button',
-  component: RadioButtonComponent,
-  argTypes: { onChange: { action: 'changed' } },
-  parameters: {
-    componentSubtitle: `
-    Use radio buttons where there’s a list of two or more mutually exclusive items, and the users must select exactly one option.
-    `,
-  },
-} as ComponentMeta<typeof RadioButtonComponent>;
-
-export const RadioButton = ({
-  children,
-  ...args
-}: RadioButtonProps): React.ReactElement => (
-  <div>
-    <RadioButtonComponent {...args}>{children}</RadioButtonComponent>
-  </div>
-);
-
-RadioButton.args = {
-  checked: false,
-  disabled: false,
-  description: 'Help text',
-  children: 'Radio label',
-} as RadioButtonProps;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { FieldDescription } from '../FieldDescription';
-import { Text } from '../Typography';
-
-import styles from './RadioButton.module.scss';
-
-export interface RadioButtonProps
-  extends React.HTMLAttributes<HTMLInputElement> {
-  description?: React.ReactNode;
-  checked?: boolean;
-  disabled?: boolean;
-}
-
-const baseClass = 'radio-button';
-
-export const RadioButton: React.FC<RadioButtonProps> = ({
-  children,
-  className = '',
-  description,
-  checked,
-  disabled,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className, {
-    [styles[`${baseClass}--selected`]]: checked,
-    [styles[`${baseClass}--disabled`]]: disabled,
-  });
-
-  return (
-    <div className={mergedClassNames}>
-      <label className={styles[`${baseClass}__label`]}>
-        <div className={styles[`${baseClass}__circle`]}>
-          <span className={styles[`${baseClass}__inner-circle`]} />
-          <input
-            className={styles[`${baseClass}__input`]}
-            {...props}
-            type="radio"
-            checked={checked}
-            disabled={disabled}
-          />
-        </div>
-        <Text as="div" size="md" className={styles[`${baseClass}__text`]}>
-          {children}
-        </Text>
-      </label>
-      {description && (
-        <FieldDescription className={styles[`${baseClass}__helper`]}>
-          {description}
-        </FieldDescription>
-      )}
-    </div>
-  );
-};

package/src/components/Switch/Switch.module.scss

@@ -1,126 +0,0 @@
-$switch-transition-duration: 300ms;
-$switch-transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
-
-$base-class: 'switch';
-$basic-height: 28px;
-$basic-width: 44px;
-$basic-size: $basic-height - 4px;
-$basic-move: $basic-width - $basic-size;
-
-$compact-height: 16px;
-$compact-width: 25px;
-$compact-size: $compact-height - 2px;
-$compact-move: $compact-width - $compact-size;
-
-/* stylelint-disable max-nesting-depth */
-.#{$base-class} {
-  display: inline-block;
-  outline: none;
-  position: relative;
-
-  &:hover {
-    .#{$base-class}__track {
-      &--enabled {
-        background-color: var(--color-positive-default);
-      }
-
-      &--disabled {
-        background-color: var(--surface-secondary-default);
-      }
-    }
-  }
-
-  &--basic {
-    height: $basic-height;
-    width: $basic-width;
-  }
-
-  &--compact {
-    height: $compact-height;
-    width: $compact-width;
-  }
-
-  &__input {
-    cursor: pointer;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-    width: 100%;
-  }
-
-  &__input:focus + .#{$base-class}__container {
-    .#{$base-class}__track {
-      //TODO use shadow token instead of hex color
-      box-shadow: 0 0 1px 2px rgba(#4379d6, 0.7);
-    }
-  }
-
-  &__container {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  &__track {
-    border-radius: 24px;
-    flex: 1;
-    height: 100%;
-    transition-duration: $switch-transition-duration;
-    transition-property: background-color;
-    transition-timing-function: $switch-transition-timing-function;
-
-    &--enabled {
-      background-color: var(--color-positive-default);
-    }
-
-    &--disabled {
-      background-color: var(--surface-secondary-default);
-    }
-  }
-
-  &__slider {
-    background: var(--content-white-locked);
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transition-duration: $switch-transition-duration;
-    transition-property: left, right;
-    transition-timing-function: $switch-transition-timing-function;
-
-    &--basic {
-      height: calc(#{$basic-size});
-      width: calc(#{$basic-size});
-
-      &--enabled {
-        left: calc(#{$basic-move} - 2px);
-        right: 2px;
-      }
-
-      &--disabled {
-        left: 2px;
-        right: calc(#{$basic-move} - 2px);
-      }
-    }
-
-    &--compact {
-      height: calc(#{$compact-size});
-      width: calc(#{$compact-size});
-
-      &--enabled {
-        left: calc(#{$compact-move} - 2px);
-        right: 2px;
-      }
-
-      &--disabled {
-        left: 2px;
-        right: calc(#{$compact-move} - 2px);
-      }
-    }
-  }
-}

package/src/components/Switch/Switch.spec.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, vi } from 'test-utils';
-import { Switch } from './Switch';
-
-describe('Switch', () => {
-  it('should call onChange without changing state when custom handler is passed', () => {
-    const toggleFn = vi.fn();
-    const { getByRole } = render(<Switch onChange={toggleFn} />);
-    const checkbox = getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.checked).toEqual(false);
-    fireEvent.click(checkbox);
-    expect(toggleFn).toHaveBeenCalled();
-    expect(checkbox.checked).toEqual(false);
-  });
-
-  it('should change state to enabled when user clicks on disabled switch', () => {
-    const { getByRole } = render(<Switch />);
-    const checkbox = getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.checked).toEqual(false);
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toEqual(true);
-  });
-
-  it('should change state to disabled when user clicks on enabled switch', () => {
-    const { getByRole } = render(<Switch on={true} />);
-    const checkbox = getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.checked).toEqual(true);
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toEqual(false);
-  });
-
-  it('should be enabled if defaultOn is set to true', () => {
-    const { getByRole } = render(<Switch defaultOn={true} />);
-    const checkbox = getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.checked).toEqual(true);
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toEqual(false);
-  });
-});
-1;

package/src/components/Switch/Switch.stories.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Switch as SwitchComponent, SwitchProps, SwitchSize } from './Switch';
-import noop from '../../utils/noop';
-
-export default {
-  title: 'Components/Switch',
-  component: SwitchComponent,
-} as ComponentMeta<typeof SwitchComponent>;
-
-export const Switch = (args: SwitchProps): React.ReactElement => {
-  return (
-    <div>
-      <SwitchComponent {...args} />
-    </div>
-  );
-};
-
-Switch.args = {
-  size: SwitchSize.Basic,
-  onChange: noop,
-};

package/src/components/Switch/Switch.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import noop from '../../utils/noop';
-
-import styles from './Switch.module.scss';
-
-const baseClass = 'switch';
-
-export const enum SwitchSize {
-  Basic = 'basic',
-  Compact = 'compact',
-}
-
-export const enum SwitchStyles {
-  Enabled = 'enabled',
-  Disabled = 'disabled',
-}
-
-export interface SwitchProps {
-  className?: string;
-  defaultOn?: boolean;
-  disabled?: boolean;
-  innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
-  name?: string;
-  on?: boolean;
-  onChange?(e: React.FormEvent, value: boolean): void;
-  size?: SwitchSize;
-}
-
-export const Switch: React.FC<SwitchProps> = ({
-  className = '',
-  defaultOn = false,
-  disabled = false,
-  name = baseClass,
-  on,
-  onChange = noop,
-  size = SwitchSize.Basic,
-  innerRef,
-  ...props
-}) => {
-  const getEnabledValue = () => {
-    return on !== undefined ? on : defaultOn;
-  };
-  const [enabled, setEnabled] = React.useState(getEnabledValue());
-
-  React.useEffect(() => {
-    if (on !== undefined) {
-      setEnabled(on);
-    }
-  }, [on]);
-
-  const valueStyles = enabled ? SwitchStyles.Enabled : SwitchStyles.Disabled;
-  const mergedClassNames = cx(
-    styles[baseClass],
-    styles[`${baseClass}--${size}`],
-    className
-  );
-
-  const handleChange = (e: React.FormEvent) => {
-    const hasOnChangePassed = onChange !== noop;
-    if (hasOnChangePassed) {
-      onChange(e, enabled);
-      return;
-    }
-    e.stopPropagation();
-    setEnabled((prevEnabled) => !prevEnabled);
-  };
-
-  return (
-    <span className={mergedClassNames}>
-      <input
-        type="checkbox"
-        className={styles[`${baseClass}__input`]}
-        onChange={handleChange}
-        checked={enabled}
-        name={name}
-        ref={innerRef}
-        disabled={disabled}
-        test-id="foo"
-        {...props}
-      />
-      <span className={styles[`${baseClass}__container`]}>
-        <span
-          className={cx(
-            styles[`${baseClass}__track`],
-            styles[`${baseClass}__track--${valueStyles}`]
-          )}
-        />
-        <span
-          className={cx(
-            styles[`${baseClass}__slider`],
-            styles[`${baseClass}__slider--${size}`],
-            styles[`${baseClass}__slider--${size}--${valueStyles}`]
-          )}
-        />
-      </span>
-    </span>
-  );
-};

package/src/components/Tab/Tab.module.scss

@@ -1,56 +0,0 @@
-.tab {
-  align-items: center;
-  background: none;
-  border: 0;
-  color: var(--content-default);
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  margin: 0 8px 11px;
-  outline: none;
-  overflow: visible;
-  padding: 0 12px 1px;
-  position: relative;
-  transition: color 0.25s;
-
-  &__description {
-    color: var(--content-subtle);
-    display: inline-block;
-    padding-left: 3px;
-    transition: color 0.25s;
-  }
-
-  &::before {
-    background-color: var(--color-action-default);
-    bottom: 0;
-    content: '';
-    display: block;
-    height: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    z-index: 1;
-  }
-
-  &--selected {
-    color: var(--color-action-default);
-
-    .tab__description {
-      color: var(--color-action-default);
-    }
-
-    &::before {
-      bottom: -12px;
-      height: 3px;
-    }
-  }
-
-  &:hover {
-    color: var(--color-action-default);
-    text-decoration: none;
-
-    .tab__description {
-      color: var(--color-action-default);
-    }
-  }
-}

package/src/components/Tab/Tab.spec.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { Tab } from './Tab';
-
-import styles from './Tab.module.scss';
-
-describe('<Tab /> component', () => {
-  it('should render unselected Tab by default', () => {
-    const { getByText } = render(<Tab>Hello</Tab>);
-    expect(getByText('Hello')).not.toHaveClass(styles['tab--selected']);
-  });
-
-  it("should render selected Tab if 'isSelected' is provided", () => {
-    const { getByText } = render(<Tab isSelected>Hello</Tab>);
-    expect(getByText('Hello')).toHaveClass(styles['tab--selected']);
-  });
-
-  it('should render properly formatted description', () => {
-    const { getByText } = render(<Tab description="1">Hello</Tab>);
-    expect(getByText('(1)')).toBeVisible();
-  });
-
-  it('should render with button element by default', () => {
-    const { getByRole } = render(<Tab>Hello</Tab>);
-    expect(getByRole('button')).toHaveTextContent('Hello');
-  });
-
-  it("should render with anchor element if 'href' is provided", () => {
-    const { getByRole } = render(<Tab href="http://example.com">Hello</Tab>);
-    const link = getByRole('link');
-    expect(link).toHaveTextContent('Hello');
-    expect(link).toHaveAttribute('href', 'http://example.com');
-  });
-});

package/src/components/Tab/Tab.stories.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Tab as TabComponent, TabProps } from './Tab';
-
-export default {
-  title: 'Components/Tabs',
-  component: TabComponent,
-} as ComponentMeta<typeof TabComponent>;
-
-type ITabArgs = TabProps;
-
-export const Tab = (args: ITabArgs): React.ReactElement => {
-  return <TabComponent {...args} />;
-};
-
-Tab.args = {
-  children: 'Lorem ipsum',
-  description: '1',
-} as ITabArgs;

package/src/components/Tab/Tab.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text } from '../Typography';
-
-import styles from './Tab.module.scss';
-
-type HTMLProps =
-  | (React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string })
-  | (React.ButtonHTMLAttributes<HTMLButtonElement> & { href?: never });
-
-export type TabProps = HTMLProps & {
-  description?: React.ReactNode;
-  isSelected?: boolean;
-};
-
-const baseClass = 'tab';
-
-export const Tab: React.FC<TabProps> = ({
-  children,
-  className,
-  description,
-  isSelected,
-  ...restProps
-}) => {
-  return (
-    <Text
-      {...restProps}
-      as={restProps.href ? 'a' : 'button'}
-      size="md"
-      bold={isSelected}
-      className={cx(
-        styles[baseClass],
-        className,
-        isSelected && styles[`${baseClass}--selected`]
-      )}
-    >
-      {children}
-      {description && (
-        <Text
-          as="span"
-          size="md"
-          className={styles[`${baseClass}__description`]}
-        >
-          ({description})
-        </Text>
-      )}
-    </Text>
-  );
-};

package/src/components/Tab/TabsWrapper.module.scss

@@ -1,11 +0,0 @@
-.tabs {
-  border-bottom: 1px solid var(--border-subtle);
-  position: relative;
-
-  &__list {
-    display: flex;
-    flex-direction: row;
-    margin: 0 -8px;
-    position: relative;
-  }
-}

package/src/components/Tab/TabsWrapper.spec.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { TabsWrapper, TabsList } from './TabsWrapper';
-
-describe('<TabsWrapper /> component', () => {
-  it('should render nested elements as children', () => {
-    const { getByRole } = render(
-      <TabsWrapper>
-        <TabsList>
-          <h3>Hello</h3>
-        </TabsList>
-      </TabsWrapper>
-    );
-
-    const heading = getByRole('heading');
-    expect(heading).toBeVisible();
-    expect(heading).toHaveTextContent('Hello');
-  });
-});

package/src/components/Tab/TabsWrapper.stories.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { TabsList, TabsWrapper as TabsWrapperComponenet } from './TabsWrapper';
-import { Tab } from './Tab';
-
-export default {
-  title: 'Components/Tabs',
-  component: TabsWrapperComponenet,
-} as ComponentMeta<typeof TabsWrapperComponenet>;
-
-type ITabArgs = {
-  items: Array<{
-    id: string;
-    title: string;
-    count: number;
-  }>;
-};
-
-export const TabsWrapper = ({ items }: ITabArgs): React.ReactElement => {
-  const [selectedTab, setSelectedTab] = React.useState(items[0].id);
-
-  return (
-    <TabsWrapperComponenet>
-      <TabsList>
-        {items.map(({ id, title, count }) => (
-          <Tab
-            key={id}
-            description={count}
-            isSelected={selectedTab === id}
-            onClick={() => setSelectedTab(id)}
-          >
-            {title}
-          </Tab>
-        ))}
-      </TabsList>
-    </TabsWrapperComponenet>
-  );
-};
-
-TabsWrapper.args = {
-  items: [
-    { id: 'agents', title: 'Agents', count: 1 },
-    { id: 'groups', title: 'Groups', count: 3 },
-  ],
-} as ITabArgs;

package/src/components/Tab/TabsWrapper.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import styles from './TabsWrapper.module.scss';
-
-const baseClass = 'tabs';
-
-export const TabsWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  children,
-}) => {
-  return <div className={cx(styles[baseClass], className)}>{children}</div>;
-};
-
-export const TabsList: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  children,
-}) => {
-  return (
-    <div className={cx(styles[`${baseClass}__list`], className)}>
-      {children}
-    </div>
-  );
-};