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

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Error } from '@livechat/design-system-icons/react/material';
+
+import {
+  Modal as ModalComponent,
+  ModalProps,
+  ActionModal as ActionModalComponent,
+  ActionModalProps,
+  ModalPortal as ModalPortalComponent,
+  ModalPortalProps,
+  ModalBase,
+} from './index';
+import { Button } from '../Button';
+import { Icon, IconSizeName } from '../Icon';
+
+export default {
+  title: 'Components/Modal',
+  component: ModalComponent,
+} as ComponentMeta<typeof ModalComponent>;
+
+export const Modal = ({
+  children,
+  ...args
+}: ModalProps): React.ReactElement => (
+  <ModalComponent {...args}>{children}</ModalComponent>
+);
+
+Modal.args = {
+  heading: 'Modal',
+  children: 'Modal content',
+  closeOnEscPress: true,
+  style: { width: '600px', height: '400px' },
+  footer: (
+    <React.Fragment>
+      <Button size="medium" kind="secondary" style={{ marginRight: '8px' }}>
+        Secondary
+      </Button>
+      <Button kind="primary" size="medium">
+        Primary
+      </Button>
+    </React.Fragment>
+  ),
+} as ModalProps;
+
+export const ActionModal = ({
+  children,
+  ...args
+}: ActionModalProps): React.ReactElement => (
+  <ActionModalComponent {...args}>{children}</ActionModalComponent>
+);
+
+ActionModal.args = {
+  heading: 'Danger! Danger!',
+  style: { width: '410px' },
+  closeOnEscPress: true,
+  children:
+    'You’re about to do something that cannot be undone. Are you sure you want to continue?',
+  actions: (
+    <React.Fragment>
+      <Button size="medium" kind="secondary" style={{ marginRight: '8px' }}>
+        Wait, go back
+      </Button>
+      <Button kind="destructive" size="medium">
+        Yes, delete
+      </Button>
+    </React.Fragment>
+  ),
+  icon: <Icon source={Error} size={IconSizeName.XLarge} />,
+} as ActionModalProps;
+
+export const ModalPortal = ({
+  children,
+  ...args
+}: ModalPortalProps): React.ReactElement => (
+  <ModalPortalComponent {...args}>{children}</ModalPortalComponent>
+);
+
+ModalPortal.args = {
+  children: (
+    <ModalBase onClose={() => ({})} style={{ width: '600px', height: '400px' }}>
+      <div style={{ margin: 'auto' }}>Modal Portal content</div>
+    </ModalBase>
+  ),
+} as ModalPortalProps;

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { ModalBaseProps, ModalBase } from './ModalBase';
+import { Heading } from '../Typography';
+
+import styles from './Modal.module.scss';
+
+export interface ModalProps extends ModalBaseProps {
+  heading?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+const baseClass = 'modal';
+
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  className = '',
+  heading,
+  footer,
+  ...props
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className);
+
+  return (
+    <ModalBase className={mergedClassNames} {...props}>
+      {heading && (
+        <div className={styles[`${baseClass}__header`]}>
+          <Heading
+            size="sm"
+            as="div"
+            className={styles[`${baseClass}__heading`]}
+          >
+            {heading}
+          </Heading>
+        </div>
+      )}
+      <div className={styles[`${baseClass}__body`]}>{children}</div>
+      {footer && <div className={styles[`${baseClass}__footer`]}>{footer}</div>}
+    </ModalBase>
+  );
+};

package/src/components/Modal/ModalBase.spec.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, vi } from 'test-utils';
+import { ModalBase } from './ModalBase';
+
+describe('<ModalBase /> component', () => {
+  it('should allow for custom class', () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <ModalBase onClose={onClose} className="my-css-class">
+        test
+      </ModalBase>
+    );
+    expect(container.firstChild?.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should call onClose method on overlay click', () => {
+    const onClose = vi.fn();
+    const { queryByTestId } = render(
+      <ModalBase onClose={onClose}>test</ModalBase>
+    );
+
+    const overlay = queryByTestId('lc-modal-overlay');
+
+    if (overlay) {
+      userEvent.click(overlay);
+    }
+    expect(onClose).toBeCalledTimes(1);
+  });
+
+  it('should call onClose method on close modal button press', () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(<ModalBase onClose={onClose}>test</ModalBase>);
+
+    userEvent.click(getByRole('button'));
+    expect(onClose).toBeCalledTimes(1);
+  });
+
+  it('should call onClose on escape button pressed by default', () => {
+    const onClose = vi.fn();
+    render(<ModalBase onClose={onClose}>test</ModalBase>);
+
+    userEvent.keyboard('[Escape]');
+    expect(onClose).toBeCalledTimes(1);
+  });
+
+  it('should not call onClose on escape button pressed when closeOnEscPress is disabled', () => {
+    const onClose = vi.fn();
+    render(
+      <ModalBase onClose={onClose} closeOnEscPress={false}>
+        test
+      </ModalBase>
+    );
+
+    userEvent.keyboard('[Escape]');
+    expect(onClose).not.toBeCalled();
+  });
+});

package/src/components/Modal/ModalBase.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { ModalCloseButton } from './ModalCloseButton';
+import { KeyCodes } from '../../utils/keyCodes';
+
+import styles from './Modal.module.scss';
+
+export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose(): void;
+  closeOnEscPress?: boolean;
+}
+
+const baseClass = 'modal-base';
+
+export const ModalBase: React.FC<ModalBaseProps> = ({
+  children,
+  className = '',
+  onClose,
+  closeOnEscPress = true,
+  ...props
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className);
+
+  React.useEffect(() => {
+    if (!closeOnEscPress) {
+      return;
+    }
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.key === KeyCodes.esc) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keyup', onKeyUp, true);
+    return () => document.removeEventListener('keyup', onKeyUp, true);
+  }, [closeOnEscPress]);
+
+  const onOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  const onCloseButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <div
+      data-testid="lc-modal-overlay"
+      onMouseDown={onOverlayClick}
+      className={cx(
+        styles[`${baseClass}__overlay`],
+        styles[`${baseClass}__overlay--visible`]
+      )}
+    >
+      <div className={mergedClassNames} {...props}>
+        <ModalCloseButton onClick={onCloseButtonClick} />
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Modal/ModalCloseButton.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Close } from '@livechat/design-system-icons/react/material';
+import { Icon, IconSizeName } from '../Icon';
+
+import styles from './Modal.module.scss';
+
+export type ModalCloseButtonProps = React.HTMLAttributes<HTMLButtonElement>;
+
+export const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
+  onClick,
+}) => (
+  <button
+    title="Close modal"
+    className={styles['modal-base__close']}
+    onClick={onClick}
+    type="button"
+  >
+    <Icon source={Close} size={IconSizeName.Large} />
+  </button>
+);

package/src/components/Modal/ModalPortal.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  zIndex: number;
+  parentElementName: string;
+}
+
+export const ModalPortal: React.FC<ModalPortalProps> = ({
+  children,
+  className = '',
+  parentElementName = 'body',
+  zIndex,
+}) => {
+  const [container] = React.useState(() => document.createElement('div'));
+
+  if (className) {
+    container.classList.add(className);
+  }
+
+  if (zIndex) {
+    container.style.zIndex = zIndex.toString();
+  }
+
+  React.useEffect(() => {
+    document.querySelector(parentElementName)?.appendChild(container);
+    return () => {
+      document.querySelector(parentElementName)?.removeChild(container);
+    };
+  }, []);
+
+  // Fragment added to fix TS complaining about createPortal any type
+  return <>{ReactDOM.createPortal(children, container)}</>;
+};

package/src/components/Modal/index.ts

@@ -0,0 +1,11 @@
+export { ActionModal } from './ActionModal';
+export { Modal } from './Modal';
+export { ModalBase } from './ModalBase';
+export { ModalCloseButton } from './ModalCloseButton';
+export { ModalPortal } from './ModalPortal';
+
+export type { ActionModalProps } from './ActionModal';
+export type { ModalProps } from './Modal';
+export type { ModalBaseProps } from './ModalBase';
+export type { ModalCloseButtonProps } from './ModalCloseButton';
+export type { ModalPortalProps } from './ModalPortal';

package/src/components/NumericInput/NumericInput.module.scss

@@ -0,0 +1,110 @@
+.numeric-input {
+  display: inline-block;
+  height: 36px;
+  position: relative;
+  width: 64px;
+
+  &__increment,
+  &__decrement {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-left: 1px solid var(--border-default);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    height: 50%;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    width: 23px;
+
+    &:hover,
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  & &__increment {
+    &:disabled {
+      border-color: var(--border-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  & &__decrement {
+    border-top: 1px solid var(--border-default);
+    bottom: 1px;
+    top: auto;
+
+    &:disabled {
+      border-color: var(--border-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  input {
+    appearance: textfield;
+    background-clip: padding-box;
+    border: 1px solid var(--border-default);
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: var(--content-default);
+    height: 100%;
+    line-height: 36px;
+    padding: 0 28px 0 4px;
+    text-align: right;
+    transition: border 0.25s ease-in-out;
+    width: 100%;
+    will-change: border-color;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    &:hover {
+      border-color: var(--border-hover);
+      outline: 0;
+    }
+
+    &:focus {
+      border-color: var(--color-action-default);
+      outline: 0;
+    }
+
+    &:disabled {
+      color: var(--content-disabled);
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: var(--border-disabled);
+      }
+    }
+  }
+
+  &--disabled {
+    background-color: var(--surface-basic-disabled);
+    color: var(--content-default);
+    cursor: not-allowed;
+  }
+
+  &.numeric-input--no-controls {
+    input {
+      padding: 0 4px;
+    }
+  }
+
+  &.numeric-input--error {
+    input {
+      &,
+      &:hover,
+      &:focus {
+        border-color: var(--color-negative-default);
+      }
+    }
+  }
+}

package/src/components/NumericInput/NumericInput.spec.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { render, fireEvent, vi } from 'test-utils';
+import noop from '../../utils/noop';
+import { NumericInputProps, NumericInput } from './NumericInput';
+
+const renderComponent = (props: Partial<NumericInputProps>) => {
+  const finalProps = Object.assign(
+    {},
+    { onChange: noop },
+    props
+  ) as NumericInputProps;
+  return render(<NumericInput {...finalProps} className="my-css-class" />);
+};
+
+describe('<NumericInput> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = renderComponent({
+      value: '0',
+    });
+
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should display buttons by default', () => {
+    const { queryByRole } = renderComponent({
+      value: '0',
+    });
+
+    expect(
+      queryByRole('button', {
+        name: /Increment value/i,
+      })
+    ).toBeVisible();
+
+    expect(
+      queryByRole('button', {
+        name: /Decrement value/i,
+      })
+    ).toBeVisible();
+  });
+
+  it('should not display buttons', () => {
+    const { queryByRole } = renderComponent({
+      value: '0',
+      noControls: true,
+    });
+
+    expect(
+      queryByRole('button', {
+        name: /Increment value/i,
+      })
+    ).toBeFalsy();
+
+    expect(
+      queryByRole('button', {
+        name: /Decrement value/i,
+      })
+    ).toBeFalsy();
+  });
+
+  it('all elements should be disabled', () => {
+    const { queryByRole } = renderComponent({
+      value: '0',
+      disabled: true,
+    });
+
+    expect(queryByRole('textbox')).toBeDisabled();
+
+    expect(
+      queryByRole('button', {
+        name: /Increment value/i,
+      })
+    ).toBeDisabled();
+
+    expect(
+      queryByRole('button', {
+        name: /Decrement value/i,
+      })
+    ).toBeDisabled();
+  });
+
+  it('should call onChange when button click', () => {
+    const onChange = vi.fn();
+    const { getByRole } = renderComponent({
+      value: '0',
+      onChange,
+    });
+
+    fireEvent.click(
+      getByRole('button', {
+        name: /Increment value/i,
+      })
+    );
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(
+      getByRole('button', {
+        name: /Decrement value/i,
+      })
+    );
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('should disable Increment button when limit reached', () => {
+    const { getByRole } = renderComponent({
+      value: '10',
+      max: 10,
+    });
+
+    expect(
+      getByRole('button', {
+        name: /Increment value/i,
+      })
+    ).toBeDisabled();
+  });
+
+  it('should disable Decrement button when limit reached', () => {
+    const { getByRole } = renderComponent({
+      value: '-10',
+      min: -10,
+    });
+
+    expect(
+      getByRole('button', {
+        name: /Decrement value/i,
+      })
+    ).toBeDisabled();
+  });
+});

package/src/components/NumericInput/NumericInput.stories.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import {
+  NumericInputProps,
+  NumericInput as NumericInputComponent,
+} from './NumericInput';
+
+export default {
+  title: 'Forms (WIP)/NumericInput',
+  component: NumericInputComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof NumericInputComponent>;
+
+const StoryTemplate: Story<NumericInputProps> = (args: NumericInputProps) => {
+  const [value, setValue] = React.useState('0');
+  return (
+    <div>
+      <NumericInputComponent
+        {...args}
+        value={value}
+        onChange={(v) => setValue(v as string)}
+      />
+    </div>
+  );
+};
+
+export const NumericInput = StoryTemplate.bind({});
+NumericInput.args = {};
+
+export const NumericInputWithMinAndMaxValues = StoryTemplate.bind({});
+NumericInputWithMinAndMaxValues.args = {
+  min: -10,
+  max: 10,
+};
+
+export const NumericInputWithNoControls = StoryTemplate.bind({});
+NumericInputWithNoControls.args = {
+  noControls: true,
+};
+
+export const NumericInputWithDisabled = StoryTemplate.bind({});
+NumericInputWithDisabled.args = {
+  disabled: true,
+};
+
+export const NumericInputWithError = StoryTemplate.bind({});
+NumericInputWithError.args = {
+  error: 'Error',
+};