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

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import {
+  ButtonGroup as ButtonGroupComponent,
+  ButtonGroupProps,
+} from './ButtonGroup';
+
+import { Button } from '../Button';
+
+export default {
+  title: 'Components/Button Group',
+  component: ButtonGroupComponent,
+} as ComponentMeta<typeof ButtonGroupComponent>;
+
+export const controlled = (args: ButtonGroupProps): React.ReactElement => {
+  return (
+    <ButtonGroupComponent {...args}>
+      <Button>First option</Button>
+      <Button>Second option</Button>
+    </ButtonGroupComponent>
+  );
+};
+
+controlled.args = {
+  currentIndex: 1,
+};
+
+export const uncontrolledEmptySelection = (
+  args: ButtonGroupProps
+): React.ReactElement => {
+  return (
+    <ButtonGroupComponent {...args}>
+      <Button>First option</Button>
+      <Button>Second option</Button>
+    </ButtonGroupComponent>
+  );
+};
+
+export const uncontrolledWithInitialSelection = (
+  args: ButtonGroupProps
+): React.ReactElement => {
+  return (
+    <ButtonGroupComponent {...args}>
+      <Button>First option</Button>
+      <Button>Second option</Button>
+    </ButtonGroupComponent>
+  );
+};
+
+uncontrolledWithInitialSelection.args = {
+  initialIndex: 1,
+};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import cx from 'clsx';
+
+import { ButtonSize, ButtonProps } from '../Button';
+
+import styles from './ButtonGroup.module.scss';
+
+import noop from '../../utils/noop';
+
+const baseClass = 'btn-group';
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentIndex?: number;
+  initialIndex?: number;
+  fullWidth?: boolean;
+  size?: ButtonSize;
+  children: ReadonlyArray<
+    React.ReactElement<React.PropsWithChildren<ButtonProps>>
+  >;
+  onIndexChange?: (
+    currentIndex: number,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => void;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  size = 'medium',
+  fullWidth = false,
+  onIndexChange = noop,
+  className,
+  children,
+  currentIndex,
+  initialIndex = -1,
+  ...restProps
+}) => {
+  const mergedClassName = cx(styles[baseClass], className);
+  const [currentStateIndex, setCurrentStateIndex] =
+    React.useState(initialIndex);
+
+  const isControlled = typeof currentIndex === 'number';
+
+  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
+
+  const handleClick = (index: number, event: any) => {
+    if (!isControlled) {
+      setCurrentStateIndex(index);
+    }
+
+    onIndexChange(index, event);
+  };
+
+  return (
+    <div role="group" className={mergedClassName} {...restProps}>
+      {React.Children.map(children, (child, i) =>
+        React.cloneElement(child, {
+          fullWidth,
+          size,
+          kind: 'secondary',
+          type: 'button',
+          onClick: (event: any) => {
+            handleClick(i, event);
+            if (child.props.onClick) {
+              child.props.onClick(event);
+            }
+          },
+          className: cx(
+            styles['btn'],
+            styles[`btn--${size as string}`],
+            i === _currentIndex && styles['btn--active']
+          ),
+        })
+      )}
+    </div>
+  );
+};

package/src/components/ButtonGroup/index.ts

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

package/src/components/Card/Card.module.scss

@@ -0,0 +1,31 @@
+.card {
+  background-color: var(--surface-basic-default);
+  border: solid 1px var(--border-subtle);
+  border-radius: 4px;
+  color: var(--content-default);
+  margin-top: 8px;
+  overflow: hidden;
+  padding: 16px;
+
+  &__title {
+    align-items: center;
+    display: flex;
+    margin-bottom: 14px;
+  }
+
+  &__text {
+    color: var(--content-default);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  &__img {
+    border-radius: 4px;
+    display: inline-block;
+    height: 24px;
+    margin-right: 10px;
+    width: 24px;
+  }
+}

package/src/components/Card/Card.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { render } from 'test-utils';
+import { Card } from './Card';
+
+describe('<Card /> component', () => {
+  it('should render only title if image is not provided', () => {
+    const { getByText, getByRole } = render(<Card title="Hello" />);
+    expect(getByText('Hello')).toBeVisible();
+    expect(() => getByRole('img')).toThrow();
+  });
+
+  it('should render title and image if provided', () => {
+    const { getByText, getByRole } = render(
+      <Card title="Hello" img="https://via.placeholder.com/100" />
+    );
+    expect(getByText('Hello')).toBeVisible();
+    expect(getByRole('img')).toBeVisible();
+  });
+
+  it('should render text children', () => {
+    const { getByText } = render(<Card title="Hello">Lorem ipsum</Card>);
+    expect(getByText('Lorem ipsum')).toBeVisible();
+  });
+
+  it('should render nested elements as children', () => {
+    const { getByRole } = render(
+      <Card title="Hello">
+        <div>
+          <h3>Lorem ipsum</h3>
+        </div>
+      </Card>
+    );
+
+    const heading = getByRole('heading');
+    expect(heading).toBeVisible();
+    expect(heading).toHaveTextContent('Lorem ipsum');
+  });
+});

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Card as CardComponent, CardProps } from '../Card';
+
+export default {
+  title: 'Components/Card',
+  component: CardComponent,
+} as ComponentMeta<typeof CardComponent>;
+
+type ICardArgs = CardProps;
+
+export const Card = (args: ICardArgs): React.ReactElement => {
+  return (
+    <div style={{ width: '300px' }}>
+      <CardComponent {...args} />
+    </div>
+  );
+};
+
+Card.args = {
+  title: 'Title goes here',
+  img: 'https://via.placeholder.com/100',
+  children: (
+    <p style={{ margin: 0 }}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore
+    </p>
+  ),
+} as ICardArgs;

package/src/components/Card/Card.tsx

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

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

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

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

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

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

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

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

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

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

package/src/components/FieldDescription/FieldDescription.tsx

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

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

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

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

package/src/components/FieldError/FieldError.tsx

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

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

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

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

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