@onewelcome/react-lib-components 0.1.0-alpha

package/src/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -0,0 +1,135 @@
+@import '../../readyclasses.module.scss';
+
+.snackbar {
+  padding: 1rem 1.25rem;
+  border-radius: var(--snackbar-border-radius);
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+
+  &.info {
+    background-color: var(--snackbar-info-background-color);
+  }
+
+  &.success {
+    background-color: var(--snackbar-success-background-color);
+  }
+
+  &.error {
+    background-color: var(--snackbar-error-background-color);
+  }
+
+  & + & {
+    margin-top: 0.5rem;
+  }
+
+  .container {
+    flex: 1;
+  }
+
+  .headline {
+    display: flex;
+    color: var(--snackbar-text-color);
+
+    .close-btn {
+      color: var(--snackbar-text-color);
+
+      &:hover,
+      &:focus {
+        border-color: var(--snackbar-text-color);
+      }
+
+      &:active {
+        border-color: transparent;
+
+        &:after {
+          top: 0;
+          height: 100%;
+          background-color: var(--snackbar-text-color);
+        }
+      }
+    }
+  }
+
+  .icon {
+    color: var(--snackbar-text-color);
+    margin-top: 0.5rem;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+
+  .title {
+    color: var(--snackbar-text-color);
+    flex: 1;
+    margin: calc(0.5rem - 0.125rem) 1.25rem 0 0.75rem;
+  }
+
+  .content {
+    margin: 0.25rem 0.75rem 0 0.75rem;
+    color: var(--snackbar-text-color);
+  }
+
+  .actions {
+    margin: 0.5rem 0.75rem 0 0.75rem;
+    text-align: right;
+  }
+
+  .action-button {
+    border-width: var(--button-border-width);
+    border-style: var(--button-border-style);
+    border-radius: var(--button-border-radius);
+    font-size: var(--button-font-size);
+    line-height: var(--button-font-size);
+    font-weight: 700;
+    margin: 0;
+    padding: 0.625rem 1.25rem;
+    cursor: pointer;
+    transition: color, background-color, border-color 0.2s ease-in-out;
+    font-family: var(--font-family);
+    color: var(--snackbar-text-color);
+    background-color: transparent;
+    border-color: transparent;
+
+    &:disabled {
+      color: var(--greyed-out);
+      cursor: not-allowed;
+    }
+
+    @include focusOutline(var(--snackbar-text-color));
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      border-color: var(--snackbar-text-color);
+    }
+
+    &:active {
+      position: relative;
+      border-color: transparent;
+      border: 0;
+      padding: calc(0.625rem + var(--button-border-width))
+        calc(1.25rem + var(--button-border-width));
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--snackbar-text-color);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+
+    & + .action-button {
+      margin-left: 1rem;
+    }
+  }
+}
+
+@media only screen and (min-width: 37.5rem) {
+  .snackbar {
+    width: 37.5rem;
+  }
+}

package/src/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, getByRole, waitFor } from '@testing-library/react';
+import { SnackbarItem, Props } from './SnackbarItem';
+import userEvent from '@testing-library/user-event';
+
+const initParams: Props = {
+  id: 'id',
+  title: 'title',
+  duration: 1,
+  variant: 'success',
+  closeButtonTitle: 'close',
+  onClose: jest.fn(),
+};
+
+describe('SnackbarItem', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<SnackbarItem {...initParams} />);
+
+    expect(container).toHaveTextContent(initParams.title);
+    const contentDiv = container.querySelector('.content');
+    expect(contentDiv).toBeNull();
+    const actionsDiv = container.querySelector('.actions');
+    expect(actionsDiv).toBeNull();
+    expect(getByRole(container, 'button')).toBeDefined();
+  });
+
+  it('clicking close button call callback function', () => {
+    const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
+
+    expect(initParams.onClose).not.toBeCalled();
+    userEvent.click(getByRole(container, 'button'));
+    waitFor(() => {
+      expect(initParams.onClose).toBeCalledTimes(1);
+      expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
+    });
+  });
+
+  it('call close callback after provided duration', () => {
+    render(<SnackbarItem {...initParams} />);
+
+    expect(initParams.onClose).not.toBeCalled();
+    waitFor(() => {
+      expect(initParams.onClose).toBeCalledTimes(1);
+      expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
+    });
+  });
+});

package/src/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from 'react';
+import { IconButton } from '../../Button/IconButton';
+import { Icon, Icons } from '../../Icon/Icon';
+import { Variant, Actions } from '../interfaces';
+import classes from './SnackbarItem.module.scss';
+import readyclasses from '../../readyclasses.module.scss';
+import { useAnimation } from '../../hooks/useAnimation';
+import { Typography } from '../../Typography/Typography';
+
+const textColor = 'var(--snackbar-text-color)';
+
+export interface Props {
+  id: string;
+  title: string;
+  duration: number;
+  variant: Variant;
+  onClose: (key: string) => void;
+  closeButtonTitle: string;
+  content?: string;
+  actions?: Actions;
+}
+
+export const SnackbarItem = ({
+  id,
+  title,
+  duration,
+  variant,
+  content,
+  actions = [],
+  onClose,
+  closeButtonTitle,
+}: Props) => {
+  const timerHandler = useRef<ReturnType<typeof setTimeout>>();
+  const onAnimationEnd = () => onClose(id);
+  const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+
+  useEffect(() => {
+    timerHandler.current = setTimeout(() => startAnimation(), duration);
+    return () => {
+      timerHandler.current && clearTimeout(timerHandler.current);
+    };
+  }, []);
+
+  const onMouseEnter = () => {
+    timerHandler.current && clearTimeout(timerHandler.current);
+  };
+
+  const onMouseLeave = () => {
+    timerHandler.current = setTimeout(() => startAnimation(), duration);
+  };
+
+  const getVariantIcon = () => {
+    if (variant === 'error') {
+      return Icons.TimesCircleAlt;
+    }
+    return variant === 'success' ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+  };
+
+  const actionButtons = actions.map((actionProp, index) => (
+    <button
+      key={index}
+      {...actionProp}
+      onClick={(e) => {
+        onClose(id);
+        actionProp.onClick && actionProp.onClick(e);
+      }}
+      children={actionProp.label}
+      className={classes['action-button']}
+    ></button>
+  ));
+
+  return (
+    <div
+      ref={ref}
+      className={`${classes['snackbar']} ${classes[variant]} ${
+        animationStarted ? readyclasses['slide-out'] : readyclasses['slide-in']
+      }`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <Icon icon={getVariantIcon()} className={classes['icon']} />
+      <div className={classes['container']}>
+        <div className={classes['headline']}>
+          <Typography className={classes['title']} variant="h4" tag="span">
+            {title}
+          </Typography>
+          <IconButton
+            onClick={() => startAnimation()}
+            className={classes['close-btn']}
+            title={closeButtonTitle}
+          >
+            <Icon icon={Icons.Times} color={textColor} />
+          </IconButton>
+        </div>
+        {/* @TODO: change it to Typography*/}
+        {!!content && (
+          <Typography className={classes['content']} variant="body">
+            {content}
+          </Typography>
+        )}
+        {actionButtons.length > 0 && <div className={classes['actions']}>{actionButtons}</div>}
+      </div>
+    </div>
+  );
+};

package/src/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import {
+  render,
+  getByTestId,
+  getAllByText,
+  waitFor,
+  getAllByRole,
+  getByText,
+  findByText,
+  findAllByText,
+  queryByText,
+} from '@testing-library/react';
+import { SnackbarProvider, Props } from './SnackbarProvider';
+import { useSnackbar } from '../useSnackbar';
+import userEvent from '@testing-library/user-event';
+
+const successProps = {
+  title: 'success title',
+};
+
+const errorProps = {
+  title: 'error title',
+};
+
+const infoProps = {
+  title: 'info title',
+  content: 'test content',
+  options: {
+    actions: [
+      { label: 'Contact support', onClick: jest.fn() },
+      { label: 'Contact Onewelcome', onClick: jest.fn() },
+    ],
+  },
+};
+
+const renderSnackbarProvider = (props?: Partial<Props>) => {
+  const AppComponent = () => {
+    const { enqueueSuccessSnackbar, enqueueErrorSnackbar, enqueueSnackbar } = useSnackbar();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            enqueueSuccessSnackbar(successProps.title + index);
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            enqueueErrorSnackbar(errorProps.title + index);
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+        <button
+          data-testid="show-info"
+          onClick={() => {
+            enqueueSnackbar(infoProps.title + index, infoProps.content, infoProps.options);
+            setIndex(index + 1);
+          }}
+        >
+          Info
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider {...props} closeButtonTitle="close">
+      <AppComponent />
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, 'show-success');
+  const showErrorSnackbarBtn = getByTestId(queries.container, 'show-error');
+  const showInfoSnackbarBtn = getByTestId(queries.container, 'show-info');
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn,
+    showInfoSnackbarBtn,
+  };
+};
+
+describe('SnackbarProvider', () => {
+  it('renders without crashing', () => {
+    const { container } = renderSnackbarProvider();
+
+    expect(container).toHaveTextContent('content');
+  });
+
+  it('should stack 3 snackbars at one time', () => {
+    const { showSuccessSnackbarBtn } = renderSnackbarProvider();
+
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+
+    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+  });
+
+  it('should render 3 variants of snackbars', () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, showInfoSnackbarBtn } =
+      renderSnackbarProvider();
+
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showErrorSnackbarBtn);
+    userEvent.click(showInfoSnackbarBtn);
+
+    expect(getByText(document.body, new RegExp(successProps.title))).toBeDefined();
+    expect(getByText(document.body, new RegExp(errorProps.title))).toBeDefined();
+    expect(getByText(document.body, new RegExp(infoProps.title))).toBeDefined();
+    expect(getByText(document.body, infoProps.content)).toBeDefined();
+    const infoSnackbarActions = getAllByRole(document.body, 'button', { name: /Contact/i });
+    expect(infoSnackbarActions).toHaveLength(2);
+
+    userEvent.click(infoSnackbarActions[0]);
+    userEvent.click(infoSnackbarActions[1]);
+
+    expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
+    waitFor(() => expect(infoProps.options.actions[1].onClick).toBeCalledTimes(1));
+  });
+
+  it('should stack 3 snackbars at one time and then after 3 disapear show the fourth one', () => {
+    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
+      autoHideDuration: { long: 1, short: 1 },
+    });
+
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+
+    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+
+    /** Looking for fourth one to be shown */
+    waitFor(() => expect(getAllByText(document.body, successProps.title + '3')).toHaveLength(1));
+
+    /** There shouldn't be any other snackbars */
+    waitFor(() =>
+      expect(getAllByText(document.body, new RegExp(successProps.title))).not.toBeDefined()
+    );
+  });
+
+  it('should close snackbar after clicking X button', async () => {
+    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
+      autoHideDuration: { long: 1_000_000, short: 1_000_000 },
+    });
+
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+    userEvent.click(showSuccessSnackbarBtn);
+
+    const closeButtons = getAllByRole(document.body, 'button', { name: 'close' });
+
+    expect(closeButtons).toHaveLength(3);
+    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+
+    userEvent.click(closeButtons[0]);
+    expect(
+      await findAllByText(document.body, new RegExp(successProps.title + '[12]+'))
+    ).toHaveLength(2);
+
+    userEvent.click(closeButtons[1]);
+    expect(await findByText(document.body, successProps.title + '2')).toBeDefined();
+
+    userEvent.click(closeButtons[2]);
+    waitFor(() => expect(queryByText(document.body, new RegExp(successProps.title))).toBeNull());
+  });
+});

package/src/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -0,0 +1,127 @@
+import React, { ReactNode, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { SnackbarContextProvider } from './SnackbarStateProvider';
+import { Actions, SnackbarOptionsProps, Variant } from '../interfaces';
+import { Placement, SnackbarContainer } from '../SnackbarContainer/SnackbarContainer';
+import { generateID } from '../../util/helper';
+import { SnackbarItem } from '../SnackbarItem/SnackbarItem';
+
+/** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
+interface Duration {
+  long: number;
+  short: number;
+}
+
+export interface Props {
+  closeButtonTitle: string;
+  children?: ReactNode | ReactNode[];
+  placement?: Placement;
+  stackSize?: number;
+  domRoot?: HTMLElement;
+  autoHideDuration?: Duration;
+  className?: string;
+}
+
+interface Item {
+  id: string;
+  title: string;
+  duration: number;
+  variant: Variant;
+  content?: string;
+  actions?: Actions;
+}
+
+export const SnackbarProvider = (
+  {
+    closeButtonTitle,
+    placement = { vertical: 'bottom', horizontal: 'center' },
+    autoHideDuration = { long: 8000, short: 4000 },
+    stackSize = 3,
+    domRoot = document.body,
+    children,
+    className,
+  }: Props = { closeButtonTitle: '' }
+) => {
+  const [snackbars, setSnackbars] = useState<Item[]>([]);
+
+  const addSnackbar = (item: Item) => {
+    setSnackbars((items) => [...items, item]);
+  };
+
+  const getDuration = (variant: Variant, actions?: Actions, content?: string) => {
+    const hasError = variant === 'error';
+    const hasContentOrActions = content || actions;
+    if (hasError || hasContentOrActions) {
+      return autoHideDuration.long;
+    }
+    return autoHideDuration.short;
+  };
+
+  const enqueueSnackbar = (
+    title: string,
+    content?: string,
+    options: SnackbarOptionsProps = {}
+  ): void => {
+    const {
+      variant = 'info',
+      actions,
+      duration = getDuration(variant, actions, content),
+    } = options;
+    const item: Item = {
+      title,
+      content,
+      variant,
+      actions,
+      duration,
+      id: generateID(15, title),
+    };
+    addSnackbar(item);
+  };
+
+  const enqueueSuccessSnackbar = (
+    title: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: 'success' });
+  };
+
+  const enqueueErrorSnackbar = (
+    title: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: 'error' });
+  };
+
+  const onItemClosed = (id: string) => {
+    setSnackbars((items) => [...items].filter((item) => item.id !== id));
+  };
+
+  const snackbarList = snackbars.map((item, index) =>
+    index < stackSize ? (
+      <SnackbarItem
+        {...item}
+        key={item.id}
+        onClose={onItemClosed}
+        closeButtonTitle={closeButtonTitle}
+      />
+    ) : null
+  );
+
+  const snackbarPortal = createPortal(
+    <SnackbarContainer placement={placement} className={className}>
+      {snackbarList}
+    </SnackbarContainer>,
+    domRoot
+  );
+
+  return (
+    <SnackbarContextProvider
+      initialState={{ enqueueSnackbar, enqueueSuccessSnackbar, enqueueErrorSnackbar }}
+    >
+      {children}
+      {snackbarPortal}
+    </SnackbarContextProvider>
+  );
+};

package/src/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -0,0 +1,25 @@
+import React, { createContext } from 'react';
+import { SnackbarOptionsProps } from '../interfaces';
+
+interface SnackbarContextProps {
+  enqueueSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSuccessSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueErrorSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextProps>({
+  enqueueSnackbar: () => null,
+  enqueueSuccessSnackbar: () => null,
+  enqueueErrorSnackbar: () => null,
+});
+
+interface Props {
+  initialState: SnackbarContextProps;
+  children?: React.ReactNode;
+}
+
+const SnackbarContextProvider = ({ children, initialState }: Props) => {
+  return <SnackbarContext.Provider value={initialState}>{children}</SnackbarContext.Provider>;
+};
+
+export { SnackbarContextProvider, SnackbarContext, SnackbarContextProps };

package/src/Snackbar/interfaces.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export type Variant = 'info' | 'success' | 'error';
+
+export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
+
+export interface SnackbarOptionsProps {
+  actions?: Actions;
+  variant?: Variant;
+  duration?: number;
+}

package/src/Snackbar/useSnackbar.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { SnackbarContext } from './SnackbarProvider/SnackbarStateProvider';
+
+export const useSnackbar = () => useContext(SnackbarContext);

package/src/Tiles/Tile.module.scss

@@ -0,0 +1,72 @@
+@import '../readyclasses.module.scss';
+
+.tile {
+  border: 1px solid #e9e9eb;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 0 0 2rem;
+  background-color: #fff;
+  transition: box-shadow 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .icon {
+      padding: 0 1rem;
+    }
+  }
+
+  figure {
+    margin: 0 0 1rem;
+    height: 3rem;
+
+    img {
+      vertical-align: top;
+      height: 3rem;
+      width: auto;
+    }
+  }
+
+  .placeholder {
+    font-size: 3rem;
+    margin: 0 0 1rem;
+    color: var(--greyed-out);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    padding: 0 1rem;
+  }
+
+  &.loading {
+    header {
+      display: none;
+    }
+
+    .image {
+      margin-top: 2.5rem;
+      @include skeletonLoading();
+      border-radius: 0.5rem;
+      width: 3rem;
+      height: 3rem;
+    }
+
+    .title {
+      @include skeletonLoading();
+      color: transparent;
+      display: inline-block;
+      width: 70%;
+      border-radius: 0.5rem;
+    }
+  }
+}