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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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/Link/Link.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import cx from 'clsx';
+
+import styles from './Link.module.scss';
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  bold: boolean;
+}
+
+const baseClass = 'link';
+
+/**
+ * Simple component which renders an `<a>` element.
+ *
+ * Place the `<Link>` inside a `<Text>` component or pass a custom className to set the typography styles.
+ *
+ * Use `<Button kind="link">` to act as a `<button>` - <a target="_self" href="/story/components-button--kinds">see the story</a>.
+ *
+ * Use `<Button href="">` to display as a `<Button>` - <a target="_self" href="/story/components-button--link">see the story</a>.
+ */
+export const Link: React.FC<LinkProps> = ({
+  bold = false,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <a
+      className={cx(
+        styles[baseClass],
+        bold && styles[`${baseClass}--bold`],
+        className
+      )}
+      {...rest}
+    />
+  );
+};

package/src/components/Link/index.ts

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

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

@@ -0,0 +1,66 @@
+@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;
+  }
+}

package/src/components/Loader/Loader.spec.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { render } from 'test-utils';
+
+import { Loader } from './Loader';
+import styles from './Loader.module.scss';
+
+describe('<Loader> component', () => {
+  function renderLoader(props = {}) {
+    const result = render(<Loader {...props} />);
+    return {
+      ...result,
+      loaderEl: result.container.firstChild,
+      spinnerEl: result.container.querySelector(
+        `.${styles['loader__spinner']}`
+      ),
+      circleEl: result.container.querySelector(
+        `.${styles['loader__spinner-circle']}`
+      ),
+      labelEl: result.container.querySelector(`.${styles['loader__label']}`),
+    };
+  }
+
+  it('should have default set of classNames', () => {
+    const { loaderEl, spinnerEl, circleEl } = renderLoader();
+
+    expect(loaderEl).toHaveClass(styles['loader']);
+    expect(spinnerEl).toBeVisible();
+    expect(spinnerEl).toHaveClass(styles['loader__spinner--medium']);
+    expect(circleEl).toBeVisible();
+  });
+
+  it('should allow for custom className', () => {
+    const { loaderEl } = renderLoader({ className: 'my-loader-class' });
+
+    expect(loaderEl).toHaveClass('my-loader-class');
+  });
+
+  it('should not display "label" by default', () => {
+    const { labelEl } = renderLoader();
+
+    expect(labelEl).not.toBeInTheDocument();
+  });
+
+  it('should display label passed via "label" prop', () => {
+    const { labelEl } = renderLoader({ label: 'my custom label' });
+
+    expect(labelEl).toBeVisible();
+    expect(labelEl).toHaveTextContent('my custom label');
+  });
+
+  it('should allow for change colors of loader', () => {
+    const { circleEl } = renderLoader({
+      primaryColor: 'red',
+      secondaryColor: 'blue',
+    });
+
+    const { borderColor, borderTopColor } = getComputedStyle(
+      circleEl as HTMLElement
+    );
+
+    expect(borderColor).toBe('blue');
+    expect(borderTopColor).toBe('red');
+  });
+});

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { Loader, LoaderProps } from './Loader';
+
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+} as ComponentMeta<typeof Loader>;
+
+export const sizes = (): React.ReactElement => (
+  <div className="spacer">
+    <Loader size="small" />
+    <Loader size="medium" />
+    <Loader size="large"></Loader>
+  </div>
+);
+
+export const labeled = (args: LoaderProps): React.ReactElement => (
+  <Loader size="small" label="Loading..." {...args} />
+);
+
+export const customColors = (args: LoaderProps): React.ReactElement => (
+  <Loader primaryColor="#d64646" secondaryColor="#eec4c5" {...args} />
+);

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import cx from 'clsx';
+
+import { Text } from '../Typography';
+
+import styles from './Loader.module.scss';
+
+const baseClass = 'loader';
+const spinnerClass = `${baseClass}__spinner`;
+
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'small' | 'medium' | 'large';
+  label?: string;
+  /** Fragment circle color */
+  primaryColor?: string;
+  /** Main circle color */
+  secondaryColor?: string;
+}
+
+export const Loader: React.FC<LoaderProps> = ({
+  primaryColor,
+  secondaryColor,
+  label,
+  className,
+  size = 'medium',
+}) => {
+  return (
+    <div className={cx(styles[baseClass], className)}>
+      <div
+        className={cx(styles[spinnerClass], styles[`${spinnerClass}--${size}`])}
+      >
+        <div
+          className={styles['loader__spinner-circle']}
+          style={{
+            /* stylelint-disable */
+            borderColor: secondaryColor,
+            borderTopColor: primaryColor,
+          }}
+        />
+      </div>
+      {label && (
+        <Text as="div" size="md" className={styles['loader__label']}>
+          {label}
+        </Text>
+      )}
+    </div>
+  );
+};

package/src/components/Loader/index.ts

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

package/src/components/Modal/ActionModal.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { ModalBaseProps, ModalBase } from './ModalBase';
+
+import styles from './Modal.module.scss';
+
+export interface ActionModalProps extends ModalBaseProps {
+  icon?: React.ReactNode;
+  heading?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+const baseClass = 'action-modal';
+
+export const ActionModal: React.FC<ActionModalProps> = ({
+  children,
+  className = '',
+  icon,
+  heading,
+  actions,
+  ...props
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className);
+
+  return (
+    <ModalBase className={mergedClassNames} {...props}>
+      {icon && <div className={styles[`${baseClass}__icon`]}>{icon}</div>}
+      {heading && (
+        <div className={styles[`${baseClass}__heading`]}>{heading}</div>
+      )}
+      <div className={styles[`${baseClass}__content`]}>{children}</div>
+      {actions && (
+        <div className={styles[`${baseClass}__actions`]}>{actions}</div>
+      )}
+    </ModalBase>
+  );
+};

package/src/components/Modal/Modal.module.scss

@@ -0,0 +1,131 @@
+.modal-base {
+  background-color: var(--surface-basic-default);
+  border-radius: 4px;
+  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.3);
+  color: var(--content-default);
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+  max-width: 800px;
+  min-width: 400px;
+  overflow: hidden;
+  position: relative;
+
+  &__overlay {
+    align-items: center;
+    background-color: var(--surface-overlay);
+    display: none;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 13000;
+
+    &--visible {
+      display: flex;
+    }
+  }
+
+  &__close {
+    align-items: center;
+    background-color: transparent;
+    border-style: none;
+    box-shadow: none;
+    color: var(--content-subtle);
+    cursor: pointer;
+    display: flex;
+    height: 24px;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    right: 18px;
+    top: 18px;
+    width: 24px;
+    z-index: 1;
+
+    &:hover {
+      color: var(--content-default);
+    }
+  }
+}
+
+.modal {
+  &__header {
+    background-color: var(--surface-basic-default);
+    box-shadow: inset 0 -1px 0 var(--border-subtle);
+    box-sizing: border-box;
+    color: var(--content-default);
+    padding: 20px;
+    width: 100%;
+  }
+
+  &__heading {
+    color: var(--content-default);
+    margin: 0;
+    max-width: calc(100% - 32px);
+    padding: 0;
+    text-align: left;
+  }
+
+  &__body {
+    background-color: var(--surface-basic-default);
+    box-sizing: border-box;
+    color: var(--content-default);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 20px;
+    position: relative;
+    width: 100%;
+  }
+
+  &__footer {
+    box-shadow: inset 0 1px 0 var(--border-subtle);
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: 20px;
+    width: 100%;
+  }
+}
+
+.action-modal {
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  padding: 52px 20px;
+
+  &__heading {
+    color: var(--content-default);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.33;
+    margin: 0 0 20px;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__content {
+    color: var(--content-default);
+    font-size: 15px;
+    line-height: 1.33;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__actions {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+    width: 100%;
+  }
+
+  &__icon {
+    margin-bottom: 20px;
+  }
+}