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

package/src/components/Card/Card.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text, Heading } from '../Typography';
-import styles from './Card.module.scss';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  img?: string;
-}
-
-export const Card: React.FC<CardProps> = ({
-  img,
-  title,
-  children,
-  className,
-  ...restProps
-}) => {
-  return (
-    <Text
-      as="div"
-      size="md"
-      className={cx(styles['card'], className)}
-      {...restProps}
-    >
-      {(img || title) && (
-        <Heading as="div" size="sm" className={styles['card__title']}>
-          {img && <img src={img} className={styles['card__img']} />}
-          {title && <div className={styles['card__text']}>{title}</div>}
-        </Heading>
-      )}
-      {children}
-    </Text>
-  );
-};

package/src/components/Checkbox/Checkbox.module.scss

@@ -1,99 +0,0 @@
-.checkbox {
-  display: inline-block;
-
-  &__label {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 1 auto;
-    width: 100%;
-  }
-
-  &__square {
-    align-items: center;
-    background-color: var(--surface-basic-default);
-    border: 1px solid var(--border-default);
-    border-radius: 4px;
-    box-sizing: border-box;
-    display: flex;
-    height: 16px;
-    justify-content: center;
-    margin-right: 8px;
-    position: relative;
-    transition: all 0.2s ease;
-    width: 16px;
-  }
-
-  &__checkmark {
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.2s ease;
-  }
-
-  &--selected {
-    .checkbox__square {
-      background-color: var(--color-action-default);
-      border-color: var(--color-action-default);
-    }
-
-    .checkbox__checkmark {
-      opacity: 1;
-    }
-
-    &:hover {
-      .checkbox__input:checked + .checkbox__square {
-        background-color: var(--color-action-hover);
-        border-color: var(--color-action-hover);
-      }
-    }
-  }
-
-  &__text {
-    color: var(--content-default);
-    flex: 1 0 auto;
-  }
-
-  &__input {
-    display: none;
-    height: 100%;
-    width: 100%;
-
-    &:checked + .checkbox__square {
-      background-color: var(--color-action-default);
-      border-color: var(--color-action-default);
-
-      .checkbox__checkmark {
-        opacity: 1;
-      }
-    }
-
-    &:focus {
-      + .checkbox__square {
-        box-shadow: 0 0 1px 2px rgba(66, 132, 245, 0.7); // TODO use shadow token
-      }
-    }
-  }
-
-  &--disabled {
-    .checkbox {
-      &__square {
-        background-color: var(--surface-basic-disabled);
-        border-color: var(--border-disabled);
-        opacity: 0.4;
-      }
-
-      &__label,
-      &__input,
-      &__helper,
-      &__text {
-        color: var(--content-disabled);
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &__helper {
-    cursor: default;
-    margin-left: 24px;
-  }
-}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Check } from '@livechat/design-system-icons/react/material';
-import { Icon, IconSizeName, IconTypeName } from '../Icon';
-
-import styles from './Checkbox.module.scss';
-
-export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-  className?: string;
-  checked?: boolean;
-  disabled?: boolean;
-}
-
-const baseClass = 'checkbox';
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  className = '',
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[`${baseClass}__square`], className);
-
-  return (
-    <div>
-      <input
-        {...props}
-        className={styles[`${baseClass}__input`]}
-        type="checkbox"
-      />
-      <div className={mergedClassNames}>
-        <Icon
-          source={Check}
-          iconType={IconTypeName.Inverted}
-          size={IconSizeName.XSmall}
-          className={styles[`${baseClass}__checkmark`]}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/Checkbox/CheckboxField.spec.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { render, userEvent, vi } from 'test-utils';
-import { CheckboxField } from './CheckboxField';
-
-import styles from './Checkbox.module.scss';
-
-const baseClass = 'checkbox';
-
-describe('<CheckboxField> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = render(
-      <CheckboxField className="my-css-class">test</CheckboxField>
-    );
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should not have been checked or disabled by default', () => {
-    const { container } = render(<CheckboxField>test</CheckboxField>);
-    expect(container.firstChild).not.toHaveClass(
-      styles[`${baseClass}--selected`]
-    );
-    expect(container.firstChild).not.toHaveClass(
-      styles[`${baseClass}--disabled`]
-    );
-  });
-
-  it('should have checked and disabled classes when mentioned props are applied', () => {
-    const { container } = render(
-      <CheckboxField checked disabled>
-        test
-      </CheckboxField>
-    );
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--selected`]);
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--disabled`]);
-  });
-
-  it('should call onChange method', () => {
-    const onChange = vi.fn();
-
-    const { getByRole } = render(
-      <CheckboxField onChange={onChange}>test</CheckboxField>
-    );
-    userEvent.click(getByRole('checkbox'));
-    expect(onChange).toBeCalledTimes(1);
-  });
-
-  it('should not call onChange method when disabled', () => {
-    const onChange = vi.fn();
-
-    const { getByRole } = render(
-      <CheckboxField disabled onChange={onChange}>
-        test
-      </CheckboxField>
-    );
-    userEvent.click(getByRole('checkbox'));
-    expect(onChange).not.toBeCalled();
-  });
-});

package/src/components/Checkbox/CheckboxField.stories.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  CheckboxField as CheckboxFieldComponent,
-  ICheckboxFieldProps,
-} from './CheckboxField';
-
-export default {
-  title: 'Forms (WIP)/Checkbox Field',
-  component: CheckboxFieldComponent,
-  parameters: {
-    componentSubtitle: `
-    Use checkboxes when there is a short list of options and the user can select multiple options, all or none.
-    `,
-  },
-} as ComponentMeta<typeof CheckboxFieldComponent>;
-
-export const CheckboxField = (
-  args: ICheckboxFieldProps
-): React.ReactElement => {
-  return <CheckboxFieldComponent {...args} />;
-};
-
-CheckboxField.args = {
-  checked: false,
-  disabled: false,
-  description: 'Help text',
-  children: 'Checkbox label',
-} as ICheckboxFieldProps;

package/src/components/Checkbox/CheckboxField.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text } from '../Typography';
-import { FieldDescription } from '../FieldDescription';
-import { Checkbox } from './Checkbox';
-
-import styles from './Checkbox.module.scss';
-
-export interface ICheckboxFieldProps
-  extends React.HTMLAttributes<HTMLInputElement> {
-  description?: string;
-  checked?: boolean;
-  disabled?: boolean;
-}
-
-const baseClass = 'checkbox';
-
-export const CheckboxField: React.FC<ICheckboxFieldProps> = ({
-  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`]}>
-        <Checkbox {...props} checked={checked} disabled={disabled} />
-        <Text as="div" size="md" className={styles[`${baseClass}__text`]}>
-          {children}
-        </Text>
-      </label>
-      {description && (
-        <FieldDescription className={styles[`${baseClass}__helper`]}>
-          {description}
-        </FieldDescription>
-      )}
-    </div>
-  );
-};

package/src/components/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox } from './Checkbox';
-export { CheckboxField } from './CheckboxField';

package/src/components/FieldDescription/FieldDescription.module.scss

@@ -1,5 +0,0 @@
-.field-description {
-  color: var(--content-subtle);
-  display: block;
-  margin: 4px 0 0;
-}

package/src/components/FieldDescription/FieldDescription.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text } from '../Typography';
-
-import styles from './FieldDescription.module.scss';
-
-export type FieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
-
-const baseClass = 'field-description';
-
-export const FieldDescription: React.FC<FieldDescriptionProps> = ({
-  children,
-  className = '',
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  return (
-    <Text as="span" size="sm" {...props} className={mergedClassNames}>
-      {children}
-    </Text>
-  );
-};

package/src/components/FieldError/FieldError.module.scss

@@ -1,5 +0,0 @@
-.field-error {
-  color: var(--color-negative-default);
-  display: block;
-  margin: 4px 0 0;
-}

package/src/components/FieldError/FieldError.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text } from '../Typography';
-
-import styles from './FieldError.module.scss';
-
-export type FieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
-
-const baseClass = 'field-error';
-
-export const FieldError: React.FC<FieldErrorProps> = ({
-  children,
-  className = '',
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className);
-
-  return (
-    <Text as="span" size="sm" {...props} className={mergedClassNames}>
-      {children}
-    </Text>
-  );
-};

package/src/components/FieldGroup/FieldGroup.module.scss

@@ -1,25 +0,0 @@
-.field-group {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  margin: -8px 0;
-
-  > * {
-    padding: 0 0 8px;
-  }
-
-  &--inline {
-    flex-direction: row;
-    margin: 0 -8px;
-
-    > * {
-      padding: 0 8px;
-    }
-  }
-
-  &--stretched {
-    > * {
-      width: 100%;
-    }
-  }
-}

package/src/components/FieldGroup/FieldGroup.spec.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { FieldGroup } from './FieldGroup';
-
-import styles from './FieldGroup.module.scss';
-
-const baseClass = 'field-group';
-
-describe('<FieldGroup> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = render(
-      <FieldGroup className="my-css-class">test</FieldGroup>
-    );
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should have inline class when inline prop is applied', () => {
-    const { container } = render(<FieldGroup inline>test</FieldGroup>);
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--inline`]);
-  });
-
-  it('should have stretched class when stretched prop is applied', () => {
-    const { container } = render(<FieldGroup stretch>test</FieldGroup>);
-    expect(container.firstChild).toHaveClass(styles[`${baseClass}--stretched`]);
-  });
-
-  it('should render error text', () => {
-    const errorText = 'Error test text';
-    const { queryByText } = render(
-      <FieldGroup error={errorText}>test</FieldGroup>
-    );
-    expect(queryByText(errorText)).toBeVisible();
-  });
-
-  it('should render description text', () => {
-    const descriptionText = 'Description test text';
-    const { queryByText } = render(
-      <FieldGroup description={descriptionText}>test</FieldGroup>
-    );
-    expect(queryByText(descriptionText)).toBeVisible();
-  });
-});

package/src/components/FieldGroup/FieldGroup.stories.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import {
-  FieldGroup as FieldGroupComponent,
-  FieldGroupProps,
-} from './FieldGroup';
-import { RadioButton } from '../RadioButton';
-
-export default {
-  title: 'Forms (WIP)/Field Group',
-  component: FieldGroupComponent,
-  parameters: {
-    componentSubtitle: `
-    Use FieldGroup component to group elements and display it in nice layout (inline or stacked).
-    `,
-  },
-} as ComponentMeta<typeof FieldGroupComponent>;
-
-export const FieldGroup = ({
-  ...args
-}: FieldGroupProps): React.ReactElement => (
-  <FieldGroupComponent {...args}>
-    <RadioButton id="field-group-example-1">Radio button label</RadioButton>
-    <RadioButton id="field-group-example-2">Radio button label</RadioButton>
-  </FieldGroupComponent>
-);
-
-FieldGroup.args = {
-  description: 'Field group description',
-  error: '',
-  stretch: false,
-  inline: false,
-} as FieldGroupProps;

package/src/components/FieldGroup/FieldGroup.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { FieldError } from '../FieldError';
-import { FieldDescription } from '../FieldDescription';
-
-import styles from './FieldGroup.module.scss';
-
-export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  description?: React.ReactNode;
-  error?: string;
-  inline?: boolean;
-  stretch?: boolean;
-}
-
-const baseClass = 'field-group';
-
-export const FieldGroup: React.FC<FieldGroupProps> = ({
-  className = '',
-  children,
-  description,
-  error,
-  inline,
-  stretch,
-  ...props
-}) => {
-  const mergedClassNames = cx(styles[baseClass], className, {
-    [styles[`${baseClass}--inline`]]: inline,
-    [styles[`${baseClass}--stretched`]]: stretch,
-  });
-
-  return (
-    <div {...props} className={mergedClassNames}>
-      {children}
-      {error && <FieldError>{error}</FieldError>}
-      {description && <FieldDescription>{description}</FieldDescription>}
-    </div>
-  );
-};

package/src/components/Form/Form.module.scss

@@ -1,22 +0,0 @@
-.form {
-  border: 0;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-
-  &__header,
-  &__footer {
-    margin-bottom: 32px;
-  }
-
-  &__label {
-    color: var(--content-default);
-    margin: 0;
-    margin-bottom: 16px;
-  }
-
-  &__helper {
-    color: var(--content-default);
-    margin: 0;
-  }
-}

package/src/components/Form/Form.spec.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-import { render } from 'test-utils';
-import noop from '../../utils/noop';
-import { Form } from './Form';
-
-describe('<Form /> component', () => {
-  it("should render 'labelText' heading", () => {
-    const { getByRole } = render(<Form labelText="Hello" />);
-    const heading = getByRole('heading');
-    expect(heading).toBeVisible();
-    expect(heading).toHaveTextContent('Hello');
-  });
-
-  it("should render 'helperText'", () => {
-    const { getByText } = render(<Form helperText="Hello" />);
-    expect(getByText('Hello')).toBeVisible();
-  });
-
-  it("should render nested elements as 'formFooter'", () => {
-    const { getByRole } = render(<Form formFooter={<button>Submit</button>} />);
-    const button = getByRole('button');
-    expect(button).toBeVisible();
-    expect(button).toHaveTextContent('Submit');
-  });
-
-  it("should render nested elements as 'children'", () => {
-    const { getByRole } = render(
-      <Form>
-        <input type="text" value="Hello" onChange={noop} />
-      </Form>
-    );
-
-    const input = getByRole('textbox');
-    expect(input).toBeVisible();
-    expect(input).toHaveValue('Hello');
-  });
-});

package/src/components/Form/Form.stories.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import { Form as FormComponenet, FormProps } from '../Form';
-import { Button } from '..//Button';
-import { RadioButton } from '../RadioButton';
-
-export default {
-  title: 'Forms (WIP)/Form',
-  component: FormComponenet,
-} as ComponentMeta<typeof FormComponenet>;
-
-export const Form: Story<FormProps> = (args) => {
-  return <FormComponenet {...args} />;
-};
-
-Form.args = {
-  labelText: 'Settings',
-  helperText:
-    'Use form layout to arrange fields within a form using standard spacing. We recomme stacking fields vertically for easier scanning and faster completion, but you can also arrange them vertically.',
-  formFooter: (
-    <Button kind="primary" type="button">
-      Save changes
-    </Button>
-  ),
-  children: (
-    //   TODO: Expand the example with FormGroup, FieldGroup and InputField components
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        marginBottom: '32px',
-        gap: '16px',
-      }}
-    >
-      <RadioButton checked id="gender-radio">
-        Male
-      </RadioButton>
-      <RadioButton id="gender-radio">Female</RadioButton>
-    </div>
-  ),
-} as FormProps;

package/src/components/Form/Form.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import { Text, Heading } from '../Typography';
-
-import styles from './Form.module.scss';
-
-export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
-  labelText?: string;
-  helperText?: string;
-  formFooter?: React.ReactNode;
-}
-
-const baseClass = 'form';
-
-export const Form: React.FC<FormProps> = ({
-  className,
-  children,
-  labelText,
-  helperText,
-  formFooter,
-  ...restProps
-}) => {
-  return (
-    <form className={cx(styles[baseClass], className)} {...restProps}>
-      {(labelText || helperText) && (
-        <div className={styles[`${baseClass}__header`]}>
-          {labelText && (
-            <Heading size="sm" className={styles[`${baseClass}__label`]}>
-              {labelText}
-            </Heading>
-          )}
-          {helperText && (
-            <Text as="p" size="sm" className={styles[`${baseClass}__helper`]}>
-              {helperText}
-            </Text>
-          )}
-        </div>
-      )}
-      {children}
-      {formFooter && (
-        <div className={styles[`${baseClass}__footer`]}>{formFooter}</div>
-      )}
-    </form>
-  );
-};

package/src/components/FormGroup/FormGroup.module.scss

@@ -1,20 +0,0 @@
-.form-group {
-  border-style: none;
-  margin: 0 0 32px;
-  min-width: auto;
-  padding: 0;
-
-  &__header {
-    margin-bottom: 16px;
-  }
-
-  &__label {
-    color: var(--content-default);
-    display: block;
-    margin-bottom: 4px;
-  }
-
-  &__helper {
-    color: var(--content-subtle);
-  }
-}