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

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,100 @@
+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/Switch/index.ts

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

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

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

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

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

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

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

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

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

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

package/src/components/Tab/index.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './TabsWrapper';

package/src/components/Tag/Tag.module.scss

@@ -0,0 +1,131 @@
+.tag {
+  align-items: center;
+  background-color: var(--surface-secondary-default);
+  border-color: var(--border-default);
+  border-radius: 4px;
+  border-style: none;
+  border-width: 1px;
+  box-sizing: border-box;
+  color: var(--content-default);
+  display: inline-flex;
+  position: relative;
+
+  /* TODO: Replace colors below with decor tokens when ready */
+  &--success {
+    background-color: #d1f4d5;
+    border-color: #005321;
+    color: #005321;
+
+    .tag__remove {
+      color: #005321;
+    }
+  }
+
+  &--error {
+    background-color: var(--surface-feedback-negative);
+    border-color: var(--color-negative-active);
+    color: var(--color-negative-active);
+
+    .tag__remove {
+      color: var(--color-negative-active);
+    }
+  }
+
+  &--warning {
+    background-color: #ffe9bc;
+    border-color: #755b00;
+    color: #755b00;
+
+    .tag__remove {
+      color: #755b00;
+    }
+  }
+
+  &--info {
+    background-color: var(--surface-feedback-info);
+    border-color: var(--color-action-active);
+    color: var(--color-action-active);
+
+    .tag__remove {
+      color: var(--color-action-active);
+    }
+  }
+
+  &--medium {
+    padding: 1px 8px;
+  }
+
+  &--large {
+    padding: 5px 12px;
+  }
+
+  &--outline {
+    background-color: transparent;
+    border-style: solid;
+
+    &.tag--medium {
+      padding: 0 7px;
+    }
+    &.tag--large {
+      padding: 4px 11px;
+    }
+
+    .icon {
+      background-color: transparent;
+    }
+  }
+
+  &--text-white {
+    color: #fff;
+  }
+
+  &--text-black {
+    color: #000;
+  }
+
+  &--with-icon {
+    &.tag--medium {
+      padding-left: 4px;
+    }
+    &.tag--large {
+      padding-left: 6px;
+    }
+  }
+
+  &--dismissible {
+    &.tag--medium {
+      padding-right: 4px;
+    }
+    &.tag--large {
+      padding-right: 6px;
+    }
+  }
+
+  &__icon {
+    margin-right: 4px;
+  }
+
+  &__avatar {
+    border-radius: 50%;
+    height: 20px;
+    margin-right: 4px;
+    width: 20px;
+  }
+
+  &__remove {
+    align-items: center;
+    background-color: transparent;
+    border-style: none;
+    box-shadow: none;
+    color: var(--content-subtle);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    outline: none;
+    padding: 0 0 0 4px;
+
+    &:hover {
+      color: var(--content-default);
+    }
+  }
+}

package/src/components/Tag/Tag.spec.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { render, userEvent, vi } from 'test-utils';
+import noop from '../../utils/noop';
+import { Tag } from './Tag';
+
+import styles from './Tag.module.scss';
+
+const baseClass = 'tag';
+const tagIndex = 0;
+const props = {
+  onRemove: noop,
+  index: tagIndex,
+};
+
+describe('<Tag> component', () => {
+  it('should have error class when error occurs', () => {
+    const { container } = render(
+      <Tag {...props} kind="error">
+        tag1
+      </Tag>
+    );
+    expect(container.firstChild).toHaveClass(styles[`${baseClass}--error`]);
+  });
+
+  it('should show remove button when dismissible props is enabled', () => {
+    const { getByRole } = render(
+      <Tag {...props} dismissible>
+        tag1
+      </Tag>
+    );
+    expect(getByRole('button')).toBeTruthy();
+  });
+
+  it('should apply specific CSS class for black custom color', () => {
+    const { container } = render(
+      <Tag {...props} customColor="#000000">
+        tag1
+      </Tag>
+    );
+    expect(container.firstChild).toHaveClass(styles['tag--text-white']);
+  });
+
+  it('should apply specific CSS class for white custom color', () => {
+    const { container } = render(
+      <Tag {...props} customColor="#FFFFFF">
+        tag1
+      </Tag>
+    );
+    expect(container.firstChild).toHaveClass(styles['tag--text-black']);
+  });
+
+  it('should have proper background color for red custom color', () => {
+    const { container } = render(
+      <Tag {...props} customColor="#ff0000">
+        tag1
+      </Tag>
+    );
+    expect(container.firstChild).toHaveStyle(`background-color: #ff0000`);
+  });
+
+  it('should apply specific CSS styling for red custom color with outline', () => {
+    const { container } = render(
+      <Tag {...props} outline customColor="#ff0000">
+        tag1
+      </Tag>
+    );
+    expect(container.firstChild).toHaveStyle(`background-color: transparent`);
+    expect(container.firstChild).toHaveStyle(`color: #ff0000`);
+    expect(container.firstChild).toHaveStyle(`border-color: #ff0000`);
+  });
+
+  it('should show avatar when both avatar and icon are provided', () => {
+    const { getByTestId, queryByTestId } = render(
+      <Tag {...props} avatar="http://test.img" icon="arrow-left">
+        tag1
+      </Tag>
+    );
+    expect(getByTestId('lc-tag-avatar')).toBeDefined();
+    expect(queryByTestId('lc-tag-icon')).not.toBeInTheDocument();
+  });
+
+  it('should call remove method on remove button press', () => {
+    const onRemove = vi.fn();
+    const { getByRole } = render(
+      <Tag {...props} onRemove={onRemove} dismissible>
+        tag1
+      </Tag>
+    );
+    const removeButton = getByRole('button');
+    userEvent.click(removeButton);
+    expect(onRemove).toBeCalledTimes(1);
+  });
+});