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

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import {
+  PromoBannerProps,
+  PromoBanner as PromoBannerComponent,
+  PromoBannerSize,
+} from './PromoBanner';
+
+export default {
+  title: 'Components/PromoBanner',
+  component: PromoBannerComponent,
+  parameters: {
+    componentSubtitle: `
+      Promo banner component is used to let users know about upgrade options, new features, 
+      or any other information that doesn't require immediate action. This component should be 
+      used wisely so don't overuse it too often. Remember to always specify the action that you 
+      want to promote.
+    `,
+  },
+  argTypes: { onClose: { defaultValue: null } },
+} as ComponentMeta<typeof PromoBannerComponent>;
+
+const StoryTemplate: Story<PromoBannerProps> = (args: PromoBannerProps) => (
+  <div>
+    <PromoBannerComponent {...args}>
+      <>
+        A description with a <b>maximum of 100 characters</b>. That usually
+        means only one or two sentences.
+      </>
+    </PromoBannerComponent>
+  </div>
+);
+
+export const PromoBanner = StoryTemplate.bind({});
+PromoBanner.args = {
+  header: 'This example headline has 40 characters',
+};
+
+export const PromoBannerWithButtons = StoryTemplate.bind({});
+PromoBannerWithButtons.args = {
+  header: 'This example headline has 40 characters',
+  buttonText: 'Example',
+  linkText: 'Example',
+  onButtonClick: () => {
+    alert('onButtonClick click');
+  },
+  onLinkClick: () => {
+    alert('onLinkClick click');
+  },
+};
+
+export const PromoBannerWithImage = StoryTemplate.bind({});
+PromoBannerWithImage.args = {
+  header: 'This example headline has 40 characters',
+  img: 'https://via.placeholder.com/100',
+};
+
+export const PromoBannerLight = StoryTemplate.bind({});
+PromoBannerLight.args = {
+  header: 'This example headline has 40 characters',
+  light: true,
+};
+
+export const PromoBannerWithClose = StoryTemplate.bind({});
+PromoBannerWithClose.args = {
+  header: 'This example headline has 40 characters',
+  onClose: () => {
+    alert('onClose click');
+  },
+};
+
+export const PromoBannerSmall = StoryTemplate.bind({});
+PromoBannerSmall.args = {
+  header: 'This example headline has 40 characters',
+  img: 'https://via.placeholder.com/100',
+  size: PromoBannerSize.Small,
+  buttonText: 'Example button',
+  linkText: 'Example link',
+  onClose: () => {
+    alert('onClose click');
+  },
+  onButtonClick: () => {
+    alert('onButtonClick click');
+  },
+  onLinkClick: () => {
+    alert('onLinkClick click');
+  },
+};
+
+export const PromoBannerMedium = StoryTemplate.bind({});
+PromoBannerMedium.args = {
+  header: 'This example headline has 40 characters',
+  img: 'https://via.placeholder.com/100',
+  size: PromoBannerSize.Medium,
+  buttonText: 'Example button',
+  linkText: 'Example link',
+  onClose: () => {
+    alert('onClose click');
+  },
+  onButtonClick: () => {
+    alert('onButtonClick click');
+  },
+  onLinkClick: () => {
+    alert('onLinkClick click');
+  },
+};
+
+export const PromoBannerLarge = StoryTemplate.bind({});
+PromoBannerLarge.args = {
+  header: 'This example headline has 40 characters',
+  img: 'https://via.placeholder.com/100',
+  size: PromoBannerSize.Large,
+  buttonText: 'Example button',
+  linkText: 'Example link',
+  onClose: () => {
+    alert('onClose click');
+  },
+  onButtonClick: () => {
+    alert('onButtonClick click');
+  },
+  onLinkClick: () => {
+    alert('onLinkClick click');
+  },
+};

package/src/components/PromoBanner/PromoBanner.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { Close as CloseIcon } from '@livechat/design-system-icons/react/material';
+
+import { Button } from '../Button';
+import { Icon, IconSizeName } from '../Icon';
+
+import styles from './PromoBanner.module.scss';
+
+const baseClass = 'promo-banner';
+
+export const enum PromoBannerSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export interface PromoBannerProps {
+  className?: string;
+  buttonText?: string;
+  header: string;
+  img?: string;
+  light?: boolean;
+  linkText?: string;
+  size?: PromoBannerSize;
+  onButtonClick?: () => void;
+  onClose?: () => void;
+  onLinkClick?: () => void;
+}
+
+export const PromoBanner: React.FC<PromoBannerProps> = ({
+  className,
+  buttonText,
+  children,
+  header,
+  img,
+  light = false,
+  linkText,
+  size = PromoBannerSize.Small,
+  onButtonClick,
+  onClose,
+  onLinkClick,
+}) => {
+  const mergedClassNames = cx(
+    styles[baseClass],
+    {
+      [styles[`${baseClass}--light`]]: light,
+      [styles[`${baseClass}--${size}`]]: size,
+    },
+    className
+  );
+
+  const shouldRenderLargeFooter = (buttonText || linkText) && size === 'large';
+  const shouldRenderSmallOrMediumFooter =
+    (buttonText || linkText) && size !== 'large';
+
+  const footer = (
+    <div className={styles[`${baseClass}__footer`]}>
+      {buttonText && (
+        <Button
+          kind="primary"
+          size="compact"
+          onClick={onButtonClick}
+          className={styles[`${baseClass}__button-text`]}
+        >
+          {buttonText}
+        </Button>
+      )}
+      {linkText && (
+        <Button size="compact" kind="text" onClick={onLinkClick}>
+          {linkText}
+        </Button>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={mergedClassNames}>
+      <div className={styles[`${baseClass}__content`]}>
+        {img && <img src={img} className={styles[`${baseClass}__img`]} />}
+        <div className={styles[`${baseClass}__wrapper`]}>
+          <div className={styles[`${baseClass}__header`]}>{header}</div>
+          <div>{children}</div>
+          {shouldRenderSmallOrMediumFooter && footer}
+        </div>
+        {shouldRenderLargeFooter && footer}
+      </div>
+      {onClose && (
+        <button
+          type="button"
+          className={styles[`${baseClass}__close-icon`]}
+          onClick={onClose}
+        >
+          <Icon source={CloseIcon} size={IconSizeName.Large} />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/PromoBanner/index.ts

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

package/src/components/RadioButton/RadioButton.module.scss

@@ -0,0 +1,100 @@
+.radio-button {
+  display: inline-block;
+
+  &__label {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 1 auto;
+    width: 100%;
+  }
+
+  &__circle {
+    background-color: var(--surface-basic-default);
+    border: 1px solid var(--border-default);
+    border-radius: 16px;
+    box-sizing: border-box;
+    height: 16px;
+    margin-right: 8px;
+    position: relative;
+    transition: all 0.2s ease;
+    width: 16px;
+  }
+
+  &__inner-circle {
+    background-color: var(--color-action-default);
+    border-radius: 8px;
+    height: 8px;
+    left: 3px;
+    opacity: 0;
+    position: absolute;
+    top: 3px;
+    transition: all 0.2s ease;
+    width: 8px;
+  }
+
+  &__text {
+    color: var(--content-default);
+    flex: 1 0 auto;
+  }
+
+  &__input {
+    cursor: pointer;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    width: 100%;
+  }
+
+  &__helper {
+    cursor: default;
+    margin-left: 24px;
+  }
+
+  &:focus {
+    .radio-button__circle {
+      border-radius: 20px;
+      box-shadow: 0 0 1px 1.6px rgba(67, 132, 245, 0.7); // TODO use color token
+    }
+  }
+
+  &--selected {
+    .radio-button__circle {
+      border-color: var(--color-action-default);
+    }
+
+    .radio-button__inner-circle {
+      opacity: 1;
+    }
+  }
+
+  &--selected:hover {
+    .radio-button__circle {
+      border-color: var(--color-action-hover);
+    }
+
+    .radio-button__inner-circle {
+      background-color: var(--color-action-hover);
+    }
+  }
+
+  &--disabled {
+    .radio-button__circle {
+      opacity: 0.4;
+    }
+
+    &:not(.radio-button--selected) {
+      .radio-button__circle {
+        background-color: var(--surface-basic-disabled);
+      }
+    }
+
+    .radio-button__label,
+    .radio-button__input,
+    .radio-button__text,
+    .radio-button__helper {
+      color: var(--content-disabled);
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/RadioButton/RadioButton.spec.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { render, userEvent, vi } from 'test-utils';
+import { RadioButton } from './RadioButton';
+
+import styles from './RadioButton.module.scss';
+
+const baseClass = 'radio-button';
+
+describe('<RadioButton> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = render(
+      <RadioButton className="my-css-class">test</RadioButton>
+    );
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should not have been checked or disabled by default', () => {
+    const { container } = render(<RadioButton>test</RadioButton>);
+    expect(container.firstChild).not.toHaveClass(
+      styles[`${baseClass}--selected`]
+    );
+    expect(container.firstChild).not.toHaveClass(
+      styles[`${baseClass}--disabled`]
+    );
+  });
+
+  it('should have secondary class when used with secondary prop', () => {
+    const { container } = render(
+      <RadioButton checked disabled>
+        test
+      </RadioButton>
+    );
+    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(
+      <RadioButton onChange={onChange}>test</RadioButton>
+    );
+    userEvent.click(getByRole('radio'));
+    expect(onChange).toBeCalledTimes(1);
+  });
+
+  it('should not call onChange method when checked', () => {
+    const onChange = vi.fn();
+
+    const { getByRole } = render(
+      <RadioButton checked onChange={onChange}>
+        test
+      </RadioButton>
+    );
+    userEvent.click(getByRole('radio'));
+    expect(onChange).not.toBeCalled();
+  });
+
+  it('should not call onChange method when disabled', () => {
+    const onChange = vi.fn();
+
+    const { getByRole } = render(
+      <RadioButton disabled onChange={onChange}>
+        test
+      </RadioButton>
+    );
+    userEvent.click(getByRole('radio'));
+    expect(onChange).not.toBeCalled();
+  });
+});

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import {
+  RadioButton as RadioButtonComponent,
+  RadioButtonProps,
+} from './RadioButton';
+
+export default {
+  title: 'Forms (WIP)/Radio Button',
+  component: RadioButtonComponent,
+  argTypes: { onChange: { action: 'changed' } },
+  parameters: {
+    componentSubtitle: `
+    Use radio buttons where there’s a list of two or more mutually exclusive items, and the users must select exactly one option.
+    `,
+  },
+} as ComponentMeta<typeof RadioButtonComponent>;
+
+export const RadioButton = ({
+  children,
+  ...args
+}: RadioButtonProps): React.ReactElement => (
+  <div>
+    <RadioButtonComponent {...args}>{children}</RadioButtonComponent>
+  </div>
+);
+
+RadioButton.args = {
+  checked: false,
+  disabled: false,
+  description: 'Help text',
+  children: 'Radio label',
+} as RadioButtonProps;

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { FieldDescription } from '../FieldDescription';
+import { Text } from '../Typography';
+
+import styles from './RadioButton.module.scss';
+
+export interface RadioButtonProps
+  extends React.HTMLAttributes<HTMLInputElement> {
+  description?: React.ReactNode;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+const baseClass = 'radio-button';
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  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`]}>
+        <div className={styles[`${baseClass}__circle`]}>
+          <span className={styles[`${baseClass}__inner-circle`]} />
+          <input
+            className={styles[`${baseClass}__input`]}
+            {...props}
+            type="radio"
+            checked={checked}
+            disabled={disabled}
+          />
+        </div>
+        <Text as="div" size="md" className={styles[`${baseClass}__text`]}>
+          {children}
+        </Text>
+      </label>
+      {description && (
+        <FieldDescription className={styles[`${baseClass}__helper`]}>
+          {description}
+        </FieldDescription>
+      )}
+    </div>
+  );
+};

package/src/components/RadioButton/index.ts

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

package/src/components/Switch/Switch.module.scss

@@ -0,0 +1,126 @@
+$switch-transition-duration: 300ms;
+$switch-transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+
+$base-class: 'switch';
+$basic-height: 28px;
+$basic-width: 44px;
+$basic-size: $basic-height - 4px;
+$basic-move: $basic-width - $basic-size;
+
+$compact-height: 16px;
+$compact-width: 25px;
+$compact-size: $compact-height - 2px;
+$compact-move: $compact-width - $compact-size;
+
+/* stylelint-disable max-nesting-depth */
+.#{$base-class} {
+  display: inline-block;
+  outline: none;
+  position: relative;
+
+  &:hover {
+    .#{$base-class}__track {
+      &--enabled {
+        background-color: var(--color-positive-default);
+      }
+
+      &--disabled {
+        background-color: var(--surface-secondary-default);
+      }
+    }
+  }
+
+  &--basic {
+    height: $basic-height;
+    width: $basic-width;
+  }
+
+  &--compact {
+    height: $compact-height;
+    width: $compact-width;
+  }
+
+  &__input {
+    cursor: pointer;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    width: 100%;
+  }
+
+  &__input:focus + .#{$base-class}__container {
+    .#{$base-class}__track {
+      //TODO use shadow token instead of hex color
+      box-shadow: 0 0 1px 2px rgba(#4379d6, 0.7);
+    }
+  }
+
+  &__container {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &__track {
+    border-radius: 24px;
+    flex: 1;
+    height: 100%;
+    transition-duration: $switch-transition-duration;
+    transition-property: background-color;
+    transition-timing-function: $switch-transition-timing-function;
+
+    &--enabled {
+      background-color: var(--color-positive-default);
+    }
+
+    &--disabled {
+      background-color: var(--surface-secondary-default);
+    }
+  }
+
+  &__slider {
+    background: var(--content-white-locked);
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition-duration: $switch-transition-duration;
+    transition-property: left, right;
+    transition-timing-function: $switch-transition-timing-function;
+
+    &--basic {
+      height: calc(#{$basic-size});
+      width: calc(#{$basic-size});
+
+      &--enabled {
+        left: calc(#{$basic-move} - 2px);
+        right: 2px;
+      }
+
+      &--disabled {
+        left: 2px;
+        right: calc(#{$basic-move} - 2px);
+      }
+    }
+
+    &--compact {
+      height: calc(#{$compact-size});
+      width: calc(#{$compact-size});
+
+      &--enabled {
+        left: calc(#{$compact-move} - 2px);
+        right: 2px;
+      }
+
+      &--disabled {
+        left: 2px;
+        right: calc(#{$compact-move} - 2px);
+      }
+    }
+  }
+}

package/src/components/Switch/Switch.spec.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { render, fireEvent, vi } from 'test-utils';
+import { Switch } from './Switch';
+
+describe('Switch', () => {
+  it('should call onChange without changing state when custom handler is passed', () => {
+    const toggleFn = vi.fn();
+    const { getByRole } = render(<Switch onChange={toggleFn} />);
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(false);
+    fireEvent.click(checkbox);
+    expect(toggleFn).toHaveBeenCalled();
+    expect(checkbox.checked).toEqual(false);
+  });
+
+  it('should change state to enabled when user clicks on disabled switch', () => {
+    const { getByRole } = render(<Switch />);
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(false);
+    fireEvent.click(checkbox);
+    expect(checkbox.checked).toEqual(true);
+  });
+
+  it('should change state to disabled when user clicks on enabled switch', () => {
+    const { getByRole } = render(<Switch on={true} />);
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(true);
+    fireEvent.click(checkbox);
+    expect(checkbox.checked).toEqual(false);
+  });
+
+  it('should be enabled if defaultOn is set to true', () => {
+    const { getByRole } = render(<Switch defaultOn={true} />);
+    const checkbox = getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toEqual(true);
+    fireEvent.click(checkbox);
+    expect(checkbox.checked).toEqual(false);
+  });
+});
+1;

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Switch as SwitchComponent, SwitchProps, SwitchSize } from './Switch';
+import noop from '../../utils/noop';
+
+export default {
+  title: 'Components/Switch',
+  component: SwitchComponent,
+} as ComponentMeta<typeof SwitchComponent>;
+
+export const Switch = (args: SwitchProps): React.ReactElement => {
+  return (
+    <div>
+      <SwitchComponent {...args} />
+    </div>
+  );
+};
+
+Switch.args = {
+  size: SwitchSize.Basic,
+  onChange: noop,
+};