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

package/src/components/TagInput/TagInput.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { EditableTag } from './EditableTag';
+import { KeyCodes } from '../../utils/keyCodes';
+import { FieldError } from '../FieldError';
+
+import styles from './TagInput.module.scss';
+
+const baseClass = 'tag-input';
+
+const tagSeparatorKeys = [
+  KeyCodes.enter,
+  KeyCodes.spacebar,
+  KeyCodes.tab,
+  KeyCodes.semicolon,
+  KeyCodes.comma,
+];
+const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
+
+type Tags = string[];
+
+export interface TagInputProps {
+  error?: string;
+  tags?: Tags;
+  onChange: (tags: Tags) => void;
+  placeholder?: string;
+  validator?: (val: string) => boolean;
+  size?: 'medium' | 'large';
+}
+
+export const TagInput: React.FC<TagInputProps> = ({
+  tags,
+  onChange,
+  validator,
+  error,
+  placeholder,
+  size = 'medium',
+}) => {
+  const mergedClassNames = cx(styles[baseClass], {
+    [styles[`${baseClass}--error`]]: error,
+  });
+  const inputClassNames = cx(
+    styles[`${baseClass}__input`],
+    styles[`${baseClass}__input--${size}`]
+  );
+
+  const [inputValue, setInputValue] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const addTag = (value: string) => {
+    onChange([...(tags || []), value]);
+    setInputValue('');
+  };
+
+  const removeTag = (idx: number) => {
+    const newTags = [...(tags || [])];
+    newTags.splice(idx, 1);
+    onChange(newTags);
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setInputValue(e.target.value);
+
+  const onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (tagSeparatorKeys.includes(e.key)) {
+      e.preventDefault();
+
+      if (inputValue === '') {
+        return;
+      }
+
+      addTag(inputValue);
+    } else if (tagRemoveKeys.includes(e.key)) {
+      if (inputValue !== '' || !tags?.length) {
+        return;
+      }
+
+      removeTag(tags.length - 1);
+    }
+  };
+
+  const updateTag = (i: number, value: string) => {
+    const newTags = [...(tags || [])];
+    const numOccurrencesOfValue = newTags.reduce(
+      (prev, currentValue, index) =>
+        prev + (currentValue === value && index !== i ? 1 : 0),
+      0
+    );
+    if (numOccurrencesOfValue > 0) {
+      newTags.splice(i, 1);
+    } else {
+      newTags[i] = value;
+    }
+    onChange(newTags);
+  };
+
+  const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    const newTags = text.split(/[\s,;\n]+/);
+    onChange([...(tags || []), ...newTags]);
+  };
+
+  return (
+    <>
+      <div className={mergedClassNames}>
+        {tags?.map((tag, index) => (
+          <EditableTag
+            index={index}
+            key={`${index}${tag}`}
+            update={updateTag}
+            remove={removeTag}
+            inputRef={inputRef}
+            validator={validator}
+            size={size}
+          >
+            {tag}
+          </EditableTag>
+        ))}
+        <input
+          ref={inputRef}
+          className={inputClassNames}
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={onInputChange}
+          onKeyDown={onInputKeyDown}
+          onPaste={onPaste}
+        />
+      </div>
+      {error && <FieldError>{error}</FieldError>}
+    </>
+  );
+};

package/src/components/TagInput/index.ts

@@ -0,0 +1,4 @@
+export { TagInput } from './TagInput';
+export type { TagInputProps } from './TagInput';
+export { EmailTagInput } from './EmailTagInput';
+export type { EmailTagInputProps } from './EmailTagInput';

package/src/components/TextField/TextField.module.scss

@@ -0,0 +1,90 @@
+.text-field {
+  margin-bottom: 20px;
+
+  &--inline {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__wrapper--inline {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  &__label {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-bottom: 4px;
+
+    label {
+      margin-bottom: 0;
+    }
+
+    &--inline {
+      align-items: center;
+      height: 32px;
+      justify-content: center;
+      margin-bottom: 0;
+      margin-right: 10px;
+    }
+
+    &--no-text {
+      justify-content: flex-end;
+      margin-right: 0;
+    }
+  }
+
+  &__label-wrapper {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  &__label-adornment {
+    align-items: center;
+    align-self: flex-end;
+    display: flex;
+    flex-shrink: 0;
+    height: 20px;
+    justify-content: flex-end;
+    line-height: 20px;
+    margin-left: 4px;
+    overflow: hidden;
+    width: 20px;
+  }
+
+  &__label-right-node {
+    align-self: flex-end;
+    color: var(--content-default);
+    display: flex;
+    flex-shrink: 0;
+    font-size: 14px;
+    justify-content: flex-end;
+    line-height: 20px;
+    margin-left: 5px;
+
+    &--inline {
+      flex-grow: 1;
+      margin-bottom: 4px;
+    }
+  }
+
+  &__row-break {
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  &__content {
+    flex-grow: 1;
+  }
+}
+
+.field-label {
+  color: var(--content-default);
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}

package/src/components/TextField/TextField.spec.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { render } from 'test-utils';
+import { TextFieldProps, TextField } from './TextField';
+
+const renderComponent = (props: TextFieldProps) => {
+  return render(
+    <TextField {...props} className="my-css-class">
+      <input id="input-field-example" />
+    </TextField>
+  );
+};
+
+describe('<TextField> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = renderComponent({});
+
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should render field elements', () => {
+    const label = 'Example label text';
+    const error = 'Error text';
+    const description = <div>Description text</div>;
+    const adornment = <div>Decoration element</div>;
+    const labelRight = <div>Label right</div>;
+    const { getByText } = renderComponent({
+      labelText: label,
+      error: error,
+      description: description,
+      labelAdornment: adornment,
+      labelRightNode: labelRight,
+    });
+
+    expect(getByText(label)).toBeVisible();
+    expect(getByText(error)).toBeVisible();
+    expect(getByText('Description text')).toBeVisible();
+    expect(getByText('Decoration element')).toBeVisible();
+    expect(getByText('Label right')).toBeVisible();
+  });
+});

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import { TextFieldProps, TextField as TextFieldComponent } from './TextField';
+
+export default {
+  title: 'Forms (WIP)/TextField',
+  component: TextFieldComponent,
+  parameters: {
+    componentSubtitle: `
+      TextField is useful if you need to develop custom input field, 
+      but want to reuse the logic behind labels, descriptions and errors 
+      present in other form components like InputField, TextAreaField etc.
+    `,
+  },
+} as ComponentMeta<typeof TextFieldComponent>;
+
+const StoryTemplate: Story<TextFieldProps> = (args: TextFieldProps) => (
+  <div>
+    <TextFieldComponent {...args}>
+      <input style={{ height: 26 }} id="text-field-example" />
+    </TextFieldComponent>
+  </div>
+);
+
+export const TextField = StoryTemplate.bind({});
+TextField.args = {};
+
+export const TextFieldWithLabel = StoryTemplate.bind({});
+TextFieldWithLabel.args = {
+  labelText: 'Example label text',
+};
+
+export const TextFieldWithLabelInline = StoryTemplate.bind({});
+TextFieldWithLabelInline.args = {
+  labelText: 'Example label text',
+  inline: true,
+};
+
+export const TextFieldWithLabelAndLabelRightNode = StoryTemplate.bind({});
+TextFieldWithLabelAndLabelRightNode.args = {
+  labelText: 'Example label text',
+  labelRightNode: <img src="https://via.placeholder.com/100" />,
+};
+
+export const TextFieldWithLabelAdornment = StoryTemplate.bind({});
+TextFieldWithLabelAdornment.args = {
+  labelText: 'Example label text',
+  labelAdornment: <img src="https://via.placeholder.com/100" />,
+};
+
+export const TextFieldWithError = StoryTemplate.bind({});
+TextFieldWithError.args = {
+  error: 'Error text',
+};
+
+export const TextFieldWithDescription = StoryTemplate.bind({});
+TextFieldWithDescription.args = {
+  description: <div>Description text</div>,
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { Text } from '../Typography';
+import { FieldError } from '../FieldError';
+import { FieldDescription } from '../FieldDescription';
+
+import styles from './TextField.module.scss';
+
+const baseClass = 'text-field';
+
+export interface TextFieldProps {
+  labelText?: string;
+  labelAdornment?: React.ReactNode;
+  labelFor?: string;
+  className?: string;
+  inline?: boolean;
+  error?: string;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  labelRightNode?: React.ReactNode;
+}
+
+export const TextField: React.FC<TextFieldProps> = ({
+  inline,
+  error,
+  description,
+  labelText,
+  labelAdornment,
+  className,
+  labelFor,
+  children,
+  labelRightNode,
+}) => {
+  const mergedClassNames = cx(
+    styles[baseClass],
+    {
+      [styles[`${baseClass}--inline`]]: inline,
+    },
+    className
+  );
+
+  return (
+    <div className={mergedClassNames}>
+      {labelRightNode && inline && (
+        <React.Fragment>
+          <div
+            className={cx(
+              styles[`${baseClass}__label-right-node`],
+              styles[`${baseClass}__label-right-node--inline`]
+            )}
+          >
+            {labelRightNode}
+          </div>
+          <div className={styles[`${baseClass}__row-break`]} />
+        </React.Fragment>
+      )}
+      <div
+        className={cx(
+          styles[`${baseClass}__wrapper`],
+          inline && styles[`${baseClass}__wrapper--inline`]
+        )}
+      >
+        {(labelText || labelRightNode) && (
+          <div
+            className={cx(
+              styles[`${baseClass}__label`],
+              inline && styles[`${baseClass}__label--inline`],
+              !labelText && styles[`${baseClass}__label--no-text`]
+            )}
+          >
+            {labelText && (
+              <div className={cx(styles[`${baseClass}__label-wrapper`])}>
+                <label className="lc-field-label" htmlFor={labelFor}>
+                  <Text as="span" size="sm">
+                    {labelText}
+                  </Text>
+                </label>
+                {labelAdornment && (
+                  <div className={cx(styles[`${baseClass}__label-adornment`])}>
+                    {labelAdornment}
+                  </div>
+                )}
+              </div>
+            )}
+            {labelRightNode && !inline && (
+              <div className={cx(styles[`${baseClass}__label-right-node`])}>
+                {labelRightNode}
+              </div>
+            )}
+          </div>
+        )}
+        <div className={cx(styles[`${baseClass}__content`])}>
+          {children}
+          {error && <FieldError>{error}</FieldError>}
+          {description && <FieldDescription>{description}</FieldDescription>}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TextField/index.ts

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

package/src/components/Toast/Toast.module.scss

@@ -0,0 +1,218 @@
+$toast-appear-animation-timeout: 200ms;
+$toast-exit-animation-timeout: 200ms;
+
+.toast {
+  align-items: center;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 6px 30px -10px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 1 auto;
+  font-size: 15px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: 600;
+  justify-content: flex-start;
+  letter-spacing: normal;
+  line-height: 20px;
+  max-width: 500px;
+  min-width: 300px;
+  padding: 10px 12px;
+
+  &__content {
+    color: var(--content-default);
+    width: 100%;
+  }
+
+  &__icon,
+  &__close {
+    align-self: baseline;
+    height: 20px;
+    padding-right: 12px;
+  }
+
+  &__icon svg {
+    display: flex;
+    fill: var(--color-action-default);
+    height: 20px;
+    width: 20px;
+  }
+
+  &__actions {
+    align-items: center;
+    align-self: flex-start;
+    display: inline-flex;
+    flex: 1 0 auto;
+    flex-wrap: nowrap;
+    height: 20px;
+    margin-bottom: auto;
+    margin-left: auto;
+
+    &-close {
+      align-items: center;
+      display: flex;
+      flex: 0 1 auto;
+      height: 100%;
+      margin-left: 16px;
+      width: 100%;
+
+      svg {
+        cursor: pointer;
+        display: flex;
+        fill: var(--content-subtle);
+        height: 16px;
+        width: 16px;
+      }
+    }
+
+    &-custom {
+      background-color: transparent;
+      border: 0;
+      color: var(--content-default);
+      cursor: pointer;
+      font-weight: 600;
+      line-height: 20px;
+      margin-left: 16px;
+      outline: 0;
+      padding: 0;
+      text-decoration: underline;
+      white-space: nowrap;
+    }
+  }
+
+  &--notification {
+    background: #fff;
+  }
+
+  &--success {
+    background: var(--color-positive-default);
+  }
+
+  &--warning {
+    background: var(--color-warning-default);
+
+    .toast__content {
+      color: #424d57;
+    }
+  }
+
+  &--error {
+    background: var(--color-negative-default);
+  }
+
+  &--info {
+    background: var(--color-action-default);
+  }
+
+  &--success,
+  &--error,
+  &--info {
+    .toast__content,
+    .toast__actions-custom {
+      color: #fff;
+    }
+  }
+
+  &-wrapper {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 120;
+
+    &--fixed {
+      position: fixed;
+    }
+
+    &--block {
+      position: static;
+    }
+
+    &--horizontal-center {
+      left: calc(50%);
+      transform: translateX(-50%);
+    }
+
+    &--horizontal-left {
+      left: 5px;
+    }
+
+    &--horizontal-right {
+      right: 5px;
+    }
+
+    &--vertical-top {
+      top: 5px;
+
+      .toast {
+        margin-bottom: 10px;
+      }
+
+      .toast-appear--slide {
+        transform: translateY(-100%) !important;
+
+        &.toast-appear-active--slide {
+          transform: translateY(0) !important;
+          transition: transform $toast-appear-animation-timeout ease-in;
+        }
+      }
+
+      .toast-exit--slide {
+        transform: translateY(0) !important;
+
+        &.toast-exit-active--slide {
+          transform: translateY(-100%) !important;
+          transition: transform $toast-exit-animation-timeout ease-in;
+        }
+      }
+    }
+
+    &--vertical-bottom {
+      bottom: 5px;
+
+      .toast {
+        margin-top: 10px;
+      }
+
+      .toast-appear--slide {
+        transform: translateY(100%) !important;
+
+        &.toast-appear-active--slide {
+          transform: translateY(0) !important;
+          transition: transform $toast-appear-animation-timeout ease-in;
+        }
+      }
+
+      .toast-exit--slide {
+        transform: translateY(0) !important;
+
+        &.toast-exit-active--slide {
+          transform: translateY(100%) !important;
+          transition: transform $toast-exit-animation-timeout ease-in;
+        }
+      }
+    }
+
+    &--vertical-top,
+    &--vertical-bottom {
+      .toast-appear--fade {
+        opacity: 0;
+
+        &.toast-appear-active--fade {
+          opacity: 1;
+          transition: opacity $toast-appear-animation-timeout ease-in;
+        }
+      }
+
+      .toast-exit--fade {
+        opacity: 1;
+        transition: opacity $toast-appear-animation-timeout ease-in;
+
+        &.toast-exit-active--fade {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}