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

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

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

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

package/src/components/Tag/Tag.stories.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import * as MaterialIcons from '@livechat/design-system-icons/react/material';
-
-import { Tag as TagComponent, TagProps } from './Tag';
-
-const iterator = Object.keys(MaterialIcons);
-
-export default {
-  title: 'Components/Tag',
-  component: TagComponent,
-  argTypes: {
-    icon: {
-      options: iterator,
-      mapping: MaterialIcons,
-      control: {
-        type: 'select',
-        labels: iterator,
-      },
-    },
-  },
-} as ComponentMeta<typeof TagComponent>;
-
-export const Tag = ({ children, ...args }: TagProps): React.ReactElement => {
-  return <TagComponent {...args}>{children}</TagComponent>;
-};
-
-Tag.args = {
-  kind: 'default',
-  outline: false,
-  size: 'medium',
-  children: 'Example tag',
-  dismissible: false,
-} as TagProps;
-
-const avatar =
-  'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200';
-
-export const kinds = ({ children, ...args }: TagProps): React.ReactElement => {
-  return (
-    <div className="spacer" style={{ display: 'flex' }}>
-      <TagComponent {...args} kind="default">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="info">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="warning">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="success">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="error">
-        {children}
-      </TagComponent>
-    </div>
-  );
-};
-
-kinds.args = {
-  children: 'Example tag',
-};
-
-export const kindsWithOutline = ({
-  children,
-  ...args
-}: TagProps): React.ReactElement => {
-  return (
-    <div className="spacer" style={{ display: 'flex' }}>
-      <TagComponent {...args} kind="default" outline>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="info" outline>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="warning" outline>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="success" outline>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="error" outline>
-        {children}
-      </TagComponent>
-    </div>
-  );
-};
-
-kindsWithOutline.args = {
-  children: 'Example tag',
-};
-
-export const kindsWithIcon = ({
-  children,
-  ...args
-}: TagProps): React.ReactElement => {
-  return (
-    <div className="spacer" style={{ display: 'flex' }}>
-      <TagComponent {...args} kind="default">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="info">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="warning">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="success">
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="error">
-        {children}
-      </TagComponent>
-    </div>
-  );
-};
-
-kindsWithIcon.args = {
-  children: 'Example tag',
-  icon: MaterialIcons.Smiles,
-};
-
-export const kindsWithAvatar = ({
-  children,
-  ...args
-}: TagProps): React.ReactElement => {
-  return (
-    <div className="spacer" style={{ display: 'flex' }}>
-      <TagComponent {...args} kind="default" avatar={avatar}>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="info" avatar={avatar}>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="warning" avatar={avatar}>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="success" avatar={avatar}>
-        {children}
-      </TagComponent>
-      <TagComponent {...args} kind="error" avatar={avatar}>
-        {children}
-      </TagComponent>
-    </div>
-  );
-};
-
-kindsWithAvatar.args = {
-  children: 'Example tag',
-};

package/src/components/Tag/Tag.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { Close } from '@livechat/design-system-icons/react/material';
-import cx from 'clsx';
-import { getContrast } from 'polished';
-
-import { Text } from '../Typography';
-import { Icon, IconSizeName } from '../Icon';
-
-import styles from './Tag.module.scss';
-
-const baseClass = 'tag';
-
-export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
-  kind?: 'default' | 'info' | 'warning' | 'success' | 'error';
-  size?: 'medium' | 'large';
-  customColor?: string;
-  dismissible?: boolean;
-  outline?: boolean;
-  onRemove?(): void;
-  icon?: React.FC<React.SVGProps<SVGSVGElement>> | string;
-  avatar?: string;
-}
-
-const getCustomTextClass = (customColor?: string) => {
-  if (!customColor) {
-    return '';
-  }
-  return getContrast(customColor, '#FFFFFF') > 4.5
-    ? 'text-white'
-    : 'text-black';
-};
-
-export const Tag: React.FC<TagProps> = ({
-  className = '',
-  children,
-  dismissible = false,
-  size = 'medium',
-  kind = 'default',
-  onRemove,
-  outline = false,
-  icon,
-  avatar,
-  customColor,
-  ...restProps
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    className,
-    styles[`${baseClass}--${size}`],
-    styles[`${baseClass}--${kind}`],
-    {
-      [styles[`${baseClass}--dismissible`]]: dismissible,
-      [styles[`${baseClass}--outline`]]: outline,
-      [styles[`${baseClass}--with-icon`]]: !!icon || !!avatar,
-      [styles[`${baseClass}--${getCustomTextClass(customColor)}`]]:
-        !!customColor,
-    }
-  );
-
-  const getCustomColorStyles = () => {
-    if (!customColor) {
-      return {};
-    }
-    if (outline) {
-      return {
-        style: {
-          backgroundColor: 'transparent',
-          color: customColor,
-          borderColor: customColor,
-        },
-      };
-    }
-    return { style: { backgroundColor: customColor } };
-  };
-
-  const getIconCustomColor = () => {
-    if (!customColor) {
-      return undefined;
-    }
-    if (outline) {
-      return customColor;
-    }
-    return getContrast(customColor, '#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000';
-  };
-
-  return (
-    <Text
-      className={mergedClassNames}
-      {...restProps}
-      {...getCustomColorStyles()}
-      as="div"
-      size="md"
-    >
-      {avatar && (
-        <img
-          className={styles[`${baseClass}__avatar`]}
-          src={avatar}
-          alt="tag-avatar"
-          data-testid="lc-tag-avatar"
-        />
-      )}{' '}
-      {/*TODO replace with Avatar component*/}
-      {icon && !avatar && (
-        <Icon
-          data-testid="lc-tag-icon"
-          className={styles[`${baseClass}__icon`]}
-          source={icon}
-          size={IconSizeName.Small}
-          customColor={getIconCustomColor()}
-        />
-      )}
-      {children}
-      {dismissible && (
-        <button
-          title="Remove"
-          onClick={onRemove}
-          type="button"
-          className={styles[`${baseClass}__remove`]}
-        >
-          <Icon
-            source={Close}
-            size={IconSizeName.Medium}
-            customColor={getIconCustomColor()}
-          />
-        </button>
-      )}
-    </Text>
-  );
-};

package/src/components/TagInput/EditableTag.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { EditableTagContent } from './EditableTagContent';
-import { Tag } from '../Tag';
-
-import styles from './TagInput.module.scss';
-
-const baseClass = 'tag-input__tag';
-
-export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
-  inputRef: React.RefObject<HTMLInputElement>;
-  index: number;
-  update: (idx: number, value: string) => void;
-  remove: (idx: number) => void;
-  validator?: (val: string) => boolean;
-  children: string;
-  size: 'medium' | 'large';
-}
-
-export const EditableTag: React.FC<EditableTagProps> = ({
-  children,
-  index,
-  remove,
-  validator,
-  inputRef,
-  update,
-  size,
-}) => {
-  const isValid = React.useMemo(() => {
-    return validator !== undefined ? validator(children) : true;
-  }, [children, validator]);
-
-  const innerEditableRef = React.useRef<HTMLInputElement>(null);
-
-  const removeTag = () => remove(index);
-
-  return (
-    <Tag
-      kind={isValid ? 'default' : 'error'}
-      dismissible
-      size={size}
-      onRemove={removeTag}
-    >
-      <EditableTagContent
-        value={children}
-        inputRef={inputRef}
-        innerEditableRef={innerEditableRef}
-        className={styles[`${baseClass}__content`]}
-        change={(newValue) => update(index, newValue)}
-        remove={removeTag}
-        validator={validator}
-      />
-    </Tag>
-  );
-};

package/src/components/TagInput/EditableTagContent.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { KeyCodes } from '../../utils/keyCodes';
-import escape from 'lodash.escape';
-
-export interface EditableTagContentProps {
-  value: string;
-  className?: string;
-  innerEditableRef: React.RefObject<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  change: (value: string) => void;
-  remove: () => void;
-  validator?: (value: string) => boolean;
-}
-
-export const EditableTagContent: React.FC<EditableTagContentProps> = ({
-  className = '',
-  innerEditableRef,
-  inputRef,
-  change,
-  remove,
-  value,
-}) => {
-  const [removed, setRemoved] = React.useState(false);
-
-  const getRef = () => innerEditableRef.current;
-
-  const getValue = () => {
-    const ref = getRef();
-    return ref ? ref.innerText : '';
-  };
-
-  const focusInputRef = () => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === KeyCodes.enter) {
-      e.preventDefault();
-      focusInputRef();
-      return;
-    }
-
-    if (e.key === KeyCodes.backspace && getValue() === '') {
-      setRemoved(true);
-      remove();
-      focusInputRef();
-    }
-  };
-
-  const onBlur = () => {
-    const ref = getRef();
-    if (removed || !ref) {
-      return;
-    }
-    if (ref.innerText === '') {
-      remove();
-      return;
-    }
-    change(ref.innerText);
-  };
-
-  const onPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
-    document.execCommand('insertHTML', false, escape(text));
-  };
-
-  return (
-    <div
-      ref={innerEditableRef}
-      className={className}
-      contentEditable={true}
-      onPaste={onPaste}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      dangerouslySetInnerHTML={{ __html: escape(value) }}
-    />
-  );
-};

package/src/components/TagInput/EmailTagInput.tsx

@@ -1,31 +0,0 @@
-import { TagInputProps, TagInput } from './TagInput';
-import * as React from 'react';
-
-export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
-
-export const emailRegex =
-  /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/i; // eslint-disable-line no-control-regex
-
-const defaultPlaceholder = 'name@company.com';
-const emailValidator = (value: string) => {
-  return emailRegex.test(value);
-};
-
-export const EmailTagInput: React.FC<EmailTagInputProps> = ({
-  tags,
-  onChange,
-  error,
-  placeholder = defaultPlaceholder,
-  size,
-}) => {
-  return (
-    <TagInput
-      tags={tags}
-      error={error}
-      onChange={onChange}
-      placeholder={placeholder}
-      validator={emailValidator}
-      size={size}
-    />
-  );
-};