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

package/src/components/FormGroup/FormGroup.spec.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { FormGroup } from './FormGroup';
-
-import styles from './FormGroup.module.scss';
-
-const baseClass = 'form-group';
-
-describe('<FormGroup> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = render(
-      <FormGroup className="my-css-class">test</FormGroup>
-    );
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should render label text', () => {
-    const text = 'Label text';
-    const { queryByText } = render(
-      <FormGroup labelText={text}>test</FormGroup>
-    );
-    expect(queryByText(text)).toBeTruthy();
-    expect(queryByText(text)).toHaveClass(styles[`${baseClass}__label`]);
-  });
-
-  it('should render helper text', () => {
-    const text = 'Helper text';
-    const { queryByText } = render(
-      <FormGroup helperText={text}>test</FormGroup>
-    );
-    expect(queryByText(text)).toBeTruthy();
-    expect(queryByText(text)).toHaveClass(styles[`${baseClass}__helper`]);
-  });
-});

package/src/components/FormGroup/FormGroup.stories.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { FormGroup as FormGroupComponent, FormGroupProps } from './FormGroup';
-import { RadioButton } from '../RadioButton';
-import { FieldGroup } from '../FieldGroup';
-
-export default {
-  title: 'Forms (WIP)/Form Group',
-  component: FormGroupComponent,
-  parameters: {
-    componentSubtitle: `
-    Use FormGroup component to group related fieldsets. Component provides label for group of fields which improves accessibility of your form.
-    `,
-  },
-} as ComponentMeta<typeof FormGroupComponent>;
-
-export const FormGroup = ({ ...args }: FormGroupProps): React.ReactElement => (
-  <FormGroupComponent {...args}>
-    <FieldGroup>
-      <RadioButton id="field-group-example-1">Radio button label</RadioButton>
-      <RadioButton id="field-group-example-2">Radio button label</RadioButton>
-    </FieldGroup>
-  </FormGroupComponent>
-);
-
-FormGroup.args = {
-  labelText: 'Form Group example',
-  helperText: 'Form Group helper text',
-} as FormGroupProps;

package/src/components/FormGroup/FormGroup.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text, Heading } from '../Typography';
-
-import styles from './FormGroup.module.scss';
-
-export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  labelText?: string;
-  helperText?: string;
-}
-
-const baseClass = 'form-group';
-
-export const FormGroup: React.FC<FormGroupProps> = ({
-  className = '',
-  children,
-  labelText,
-  helperText,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  return (
-    <div
-      {...props}
-      role="group"
-      {...(labelText && { 'aria-label': labelText })}
-      className={mergedClassNames}
-    >
-      <div className={styles[`${baseClass}__header`]}>
-        <Heading as="div" size="sm" className={styles[`${baseClass}__label`]}>
-          {labelText}
-        </Heading>
-        {helperText && (
-          <Text as="div" size="sm" className={styles[`${baseClass}__helper`]}>
-            {helperText}
-          </Text>
-        )}
-      </div>
-      {children}
-    </div>
-  );
-};

package/src/components/Icon/Icon.module.scss

@@ -1,70 +0,0 @@
-.icon {
-  align-items: center;
-  display: flex;
-
-  &--primary {
-    color: var(--content-default);
-  }
-
-  &--subtle {
-    color: var(--content-subtle);
-  }
-
-  &--inverted {
-    color: var(--content-invert-default);
-  }
-
-  &--inverted-subtle {
-    color: var(--content-invert-subtle);
-  }
-
-  &--link {
-    color: var(--color-action-default);
-  }
-
-  &--success {
-    color: var(--color-positive-default);
-  }
-
-  &--warning {
-    color: var(--color-warning-default);
-  }
-
-  &--error {
-    color: var(--color-negative-default);
-  }
-
-  &--disabled {
-    &--primary {
-      color: var(--content-disabled);
-    }
-
-    &--subtle {
-      color: var(--content-disabled);
-    }
-
-    &--inverted {
-      color: var(--content-invert-disabled);
-    }
-
-    &--inverted-subtle {
-      color: var(--content-invert-disabled);
-    }
-
-    &--link {
-      color: var(--color-action-disabled);
-    }
-
-    &--success {
-      color: var(--color-positive-disabled);
-    }
-
-    &--warning {
-      color: var(--color-warning-default);
-    }
-
-    &--error {
-      color: var(--color-negative-disabled);
-    }
-  }
-}

package/src/components/Icon/Icon.stories.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import * as MaterialIcons from '@livechat/design-system-icons/react/material';
-
-import {
-  Icon as IconComponent,
-  IconSizeName,
-  IconTypeName,
-  IconProps,
-} from './Icon';
-
-const iterator = Object.keys(MaterialIcons);
-
-export default {
-  title: 'Components/Icon',
-  component: IconComponent,
-  argTypes: {
-    source: {
-      options: iterator,
-      mapping: MaterialIcons,
-      control: {
-        type: 'select',
-        labels: iterator,
-      },
-    },
-    size: {
-      table: {
-        defaultValue: {
-          summary: IconSizeName.Medium,
-        },
-      },
-    },
-    iconType: {
-      table: {
-        defaultValue: {
-          summary: IconTypeName.Primary,
-        },
-      },
-    },
-  },
-} as ComponentMeta<typeof IconComponent>;
-
-export const Icon = (args: IconProps): React.ReactElement => (
-  <div style={{ width: '300px' }}>
-    <IconComponent {...args} />
-  </div>
-);
-
-Icon.args = {
-  source: MaterialIcons.Email,
-  size: IconSizeName.Medium,
-  iconType: IconTypeName.Primary,
-};

package/src/components/Icon/Icon.tsx

@@ -1,118 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import styles from './Icon.module.scss';
-
-export enum IconSizeName {
-  XSmall = 'xsmall',
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
-  XLarge = 'xlarge',
-}
-
-export const IconSize = {
-  [IconSizeName.XSmall]: {
-    width: 12,
-    height: 12,
-  },
-  [IconSizeName.Small]: {
-    width: 16,
-    height: 16,
-  },
-  [IconSizeName.Medium]: {
-    width: 20,
-    height: 20,
-  },
-  [IconSizeName.Large]: {
-    width: 24,
-    height: 24,
-  },
-  [IconSizeName.XLarge]: {
-    width: 32,
-    height: 32,
-  },
-};
-
-export enum IconTypeName {
-  Primary = 'primary',
-  Subtle = 'subtle',
-  Inverted = 'inverted',
-  InvertedSubtle = 'inverted_subtle',
-  Link = 'link',
-  Success = 'success',
-  Warning = 'warning',
-  Error = 'error',
-}
-
-export const IconColorMapper = {
-  [IconTypeName.Primary]: 'primary',
-  [IconTypeName.Subtle]: 'subtle',
-  [IconTypeName.Inverted]: 'inverted',
-  [IconTypeName.InvertedSubtle]: 'inverted-subtle',
-  [IconTypeName.Link]: 'link',
-  [IconTypeName.Success]: 'success',
-  [IconTypeName.Warning]: 'warning',
-  [IconTypeName.Error]: 'error',
-};
-
-export const IconColorDisabledMapper = {
-  [IconTypeName.Primary]: 'disabled--primary',
-  [IconTypeName.Subtle]: 'disabled--subtle',
-  [IconTypeName.Inverted]: 'disabled--inverted',
-  [IconTypeName.InvertedSubtle]: 'disabled--inverted-subtle',
-  [IconTypeName.Link]: 'disabled--link',
-  [IconTypeName.Success]: 'disabled--success',
-  [IconTypeName.Warning]: 'disabled--warning',
-  [IconTypeName.Error]: 'disabled--error',
-};
-
-export interface IconProps {
-  source: React.FC<React.SVGProps<SVGSVGElement>> | string;
-  size?: IconSizeName;
-  iconType?: IconTypeName;
-  disabled?: boolean;
-  className?: string;
-  customColor?: string;
-}
-
-const baseClass = 'icon';
-
-export const Icon: React.FC<IconProps> = (props) => {
-  const {
-    source,
-    size = IconSizeName.Medium,
-    iconType,
-    disabled,
-    className,
-    customColor,
-    ...restProps
-  } = props;
-  let filledColor;
-
-  if (iconType) {
-    filledColor = IconColorMapper[iconType];
-
-    if (disabled) {
-      filledColor = IconColorDisabledMapper[iconType];
-    }
-  }
-
-  const GeneratedIcon = React.createElement(source, {
-    ...IconSize[size],
-    color: customColor,
-  });
-
-  const mergedClassNames = cx(
-    className,
-    styles[baseClass],
-    filledColor && styles[`${baseClass}--${filledColor}`]
-  );
-
-  return (
-    <span {...restProps} className={mergedClassNames}>
-      {GeneratedIcon}
-    </span>
-  );
-};
-
-export default Icon;

package/src/components/InputField/InputField.module.scss

@@ -1,37 +0,0 @@
-.input-field {
-  background-clip: padding-box;
-  border: 1px solid var(--border-default);
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: var(--content-default);
-  font-size: 15px;
-  line-height: 1.2;
-  padding: 8px 10px;
-  transition: border 0.25s ease-in-out;
-  width: 100%;
-  will-change: border-color;
-
-  &::placeholder {
-    color: var(--content-disabled);
-  }
-
-  &:hover {
-    border-color: var(--border-hover);
-    outline: 0;
-  }
-
-  &:focus {
-    border-color: var(--color-action-default);
-    outline: 0;
-  }
-
-  &--error,
-  &--error:focus {
-    border-color: var(--color-negative-default);
-  }
-
-  &:disabled {
-    color: var(--content-disabled);
-    cursor: not-allowed;
-  }
-}

package/src/components/InputField/InputField.spec.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, vi } from 'test-utils';
-import { InputFieldProps, InputField } from './InputField';
-
-import styles from './InputField.module.scss';
-
-const renderComponent = (props: InputFieldProps) => {
-  return render(<InputField {...props} className="my-css-class" />);
-};
-
-describe('<InputField> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = renderComponent({
-      id: 'input-field-example',
-      onChange: vi.fn(),
-    });
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should allow for field custom class', () => {
-    const { getByRole } = renderComponent({
-      id: 'input-field-example',
-      onChange: vi.fn(),
-      placeholder: 'placeholder',
-      fieldClassName: 'my-field-css-class',
-    });
-
-    expect(getByRole('textbox')).toHaveClass('my-field-css-class');
-  });
-
-  it('should have error class', () => {
-    const { getByRole } = renderComponent({
-      id: 'input-field-example',
-      onChange: vi.fn(),
-      error: 'Error',
-    });
-
-    expect(getByRole('textbox')).toHaveClass(styles['input-field--error']);
-  });
-
-  it('should call onChange when value changes', () => {
-    const mockedFunction = vi.fn();
-    const { getByRole } = renderComponent({
-      id: 'input-field-example',
-      onChange: mockedFunction,
-    });
-
-    fireEvent.change(getByRole('textbox'), { target: { value: 'test' } });
-    const event = mockedFunction.mock.calls[0][0];
-    expect(event.target.value).toEqual('test');
-  });
-});

package/src/components/InputField/InputField.stories.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import {
-  InputFieldProps,
-  InputField as InputFieldComponent,
-} from './InputField';
-import { Text } from '../Typography';
-
-export default {
-  title: 'Forms (WIP)/InputField',
-  component: InputFieldComponent,
-  parameters: {
-    componentSubtitle: `
-      InputField contains a TextField component, so most of the props are directed to 
-      handle TextField elements, e.g. label or description.
-      The InputField itself is prepared to accept props dedicated to the <input>, 
-      which we can pass by InputField.
-    `,
-  },
-} as ComponentMeta<typeof InputFieldComponent>;
-
-const StoryTemplate: Story<InputFieldProps> = (args: InputFieldProps) => (
-  <div>
-    <InputFieldComponent
-      labelText="Input Field label"
-      placeholder="Placeholder..."
-      description={
-        <div>
-          <Text as="span" size="sm">
-            Help text
-          </Text>
-        </div>
-      }
-      {...args}
-    />
-  </div>
-);
-
-export const InputField = StoryTemplate.bind({});
-InputField.args = {};
-
-export const InputFieldWithInline = StoryTemplate.bind({});
-InputFieldWithInline.args = {
-  inline: true,
-  id: 'withInline',
-};
-
-export const InputFieldWithDisabled = StoryTemplate.bind({});
-InputFieldWithDisabled.args = {
-  disabled: true,
-};
-
-export const InputFieldWithCustomInputStyles = StoryTemplate.bind({});
-InputFieldWithCustomInputStyles.args = {
-  style: {
-    width: 400,
-    height: 50,
-    borderColor: 'var(--color-positive-default)',
-  },
-};
-
-export const InputFieldWithMaxLength = StoryTemplate.bind({});
-InputFieldWithMaxLength.args = {
-  maxLength: 20,
-  id: 'withMaxLength',
-};
-
-export const InputFieldWithError = StoryTemplate.bind({});
-InputFieldWithError.args = {
-  error: 'Error text',
-  id: 'withError',
-};

package/src/components/InputField/InputField.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { TextField } from '../TextField';
-
-import styles from './InputField.module.scss';
-
-const baseClass = 'input-field';
-
-export interface InputFieldProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  id: string;
-  labelText?: string;
-  labelAdornment?: React.ReactNode;
-  className?: string;
-  inline?: boolean;
-  error?: string;
-  description?: React.ReactNode;
-  labelRightNode?: React.ReactNode;
-  fieldClassName?: string;
-  maxLength?: number;
-  onChange: () => void;
-}
-
-export const InputField: React.FC<InputFieldProps> = React.forwardRef(
-  (
-    {
-      id,
-      labelText,
-      labelAdornment,
-      className,
-      inline,
-      error,
-      description,
-      labelRightNode,
-      fieldClassName,
-      style,
-      type = 'text',
-      ...restProps
-    },
-    ref: React.Ref<HTMLInputElement>
-  ) => {
-    const mergedClassNames = cx(
-      styles[baseClass],
-      {
-        [styles[`${baseClass}--error`]]: error,
-      },
-      fieldClassName
-    );
-
-    return (
-      <TextField
-        inline={inline}
-        error={error}
-        description={description}
-        labelText={labelText}
-        labelAdornment={labelAdornment}
-        className={className}
-        labelFor={id}
-        labelRightNode={labelRightNode}
-      >
-        <input
-          {...restProps}
-          id={id}
-          ref={ref}
-          className={mergedClassNames}
-          style={style}
-          type={type}
-        />
-      </TextField>
-    );
-  }
-);

package/src/components/Link/Link.module.scss

@@ -1,18 +0,0 @@
-.link {
-  color: var(--color-action-default);
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover {
-    color: var(--color-action-hover);
-    text-decoration: underline;
-  }
-
-  &:active {
-    color: var(--color-action-active);
-  }
-
-  &--bold {
-    font-weight: 600;
-  }
-}

package/src/components/Link/Link.stories.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Link as LinkComponent, LinkProps } from './Link';
-
-export default {
-  title: 'Components/Link',
-  component: LinkComponent,
-} as ComponentMeta<typeof LinkComponent>;
-
-export const Link = ({ ...args }: LinkProps): React.ReactElement => (
-  <LinkComponent {...args}>This is a link</LinkComponent>
-);
-
-Link.args = {
-  bold: false,
-};

package/src/components/Loader/Loader.module.scss

@@ -1,66 +0,0 @@
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.loader {
-  align-items: center;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  &__spinner {
-    flex-shrink: 0;
-    height: 36px;
-    width: 36px;
-
-    &--small {
-      height: 15px;
-      width: 15px;
-
-      [class*='spinner-circle'] {
-        border-width: 2px;
-      }
-    }
-
-    &--medium {
-      height: 36px;
-      width: 36px;
-
-      [class*='spinner-circle'] {
-        border-width: 3px;
-      }
-    }
-
-    &--large {
-      height: 56px;
-      width: 56px;
-
-      [class*='spinner-circle'] {
-        border-width: 4px;
-      }
-    }
-
-    &-circle {
-      animation: rotate 1s infinite linear;
-      border-color: var(--surface-secondary-subtle);
-      border-radius: 50%;
-      border-style: solid;
-      border-top-color: var(--color-action-default);
-      border-width: 3px;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  &__label {
-    color: var(--content-subtle);
-    margin-left: 10px;
-  }
-}