@onewelcome/react-lib-components 0.1.0-alpha

package/src/Icon/Icon.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Icon, Props, Icons } from './Icon';
+import { render } from '@testing-library/react';
+
+const initParams: Props = {
+  icon: Icons.Calendar,
+  color: 'rgb(26, 153, 60)',
+};
+
+const createIcon = (params = initParams) => {
+  const queries = render(
+    <Icon {...params} data-testid="icon-component" color={params.color} icon={params.icon} />
+  );
+  const icon = queries.getByTestId('icon-component');
+
+  return {
+    ...queries,
+    icon,
+  };
+};
+
+describe('Icon', () => {
+  it('renders without crashing', () => {
+    const { icon } = createIcon();
+
+    expect(icon).toBeDefined();
+    expect(icon).toHaveClass('icon-calendar');
+    expect(icon.tagName.toLowerCase()).toBe('span');
+    expect(icon.getAttribute('style')).toBe('color: rgb(26, 153, 60);');
+  });
+
+  it('should render icon with within div tag', () => {
+    const tag = 'div';
+    const { icon } = createIcon({ ...initParams, tag });
+
+    expect(icon).toBeDefined();
+    expect(icon.tagName.toLowerCase()).toBe(tag);
+  });
+});

package/src/Icon/Icon.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import classes from './Icon.module.scss';
+import { HTMLAttributes } from '../interfaces';
+
+export enum Icons {
+  Bell = 'bell',
+  BellAlt = 'bell-alt',
+  Bookmark = 'bookmark',
+  BookmarkAlt = 'bookmark-alt',
+  Build = 'build',
+  Calendar = 'calendar',
+  Change = 'change',
+  Checkmark = 'checkmark',
+  CheckmarkCircle = 'checkmark-circle',
+  CheckmarkCircleAlt = 'checkmark-circle-alt',
+  CheckmarkCircleBreakout = 'checkmark-circle-breakout',
+  CheckmarkSquare = 'checkmark-square',
+  ChevronUp = 'chevron-up',
+  ChevronDown = 'chevron-down',
+  ChevronLeft = 'chevron-left',
+  ChevronRight = 'chevron-right',
+  Circle = 'circle',
+  Clock = 'clock',
+  Copy = 'copy',
+  Edit = 'edit',
+  Ellipsis = 'ellipsis',
+  EllipsisAlt = 'ellipsis-alt',
+  Equal = 'equal',
+  Eye = 'eye',
+  Filter = 'filter',
+  FilterAlt = 'filter-alt',
+  FilterAltArrow = 'filter-alt-arrow',
+  FilterAltTimes = 'filter-alt-times',
+  Forbidden = 'forbidden',
+  Fullscreen = 'fullscreen',
+  FullscreenExit = 'fullscreen-exit',
+  Gearwheel = 'gearwheel',
+  Grid = 'grid',
+  Hamburger = 'hamburger',
+  Heart = 'heart',
+  Image = 'image',
+  InfoBell = 'info-bell',
+  InfoCircle = 'info-circle',
+  Link = 'link',
+  MinusSquare = 'minus-square',
+  NavigationFirst = 'navigation-first',
+  NavigationLast = 'navigation-last',
+  Plus = 'plus',
+  Radio = 'radio',
+  Refresh = 'refresh',
+  Search = 'search',
+  Share = 'share',
+  Square = 'square',
+  Star = 'star',
+  StarAlt = 'star-alt',
+  Times = 'times',
+  TimesCircle = 'times-circle',
+  TimesCircleAlt = 'times-circle-alt',
+  TimesThin = 'times-thin',
+  Trash = 'trash',
+  TriangleDown = 'triangle-down',
+  TriangleDownCircle = 'triangle-down-circle',
+  TriangleLeft = 'triangle-left',
+  TriangleRight = 'triangle-right',
+  TriangleUp = 'triangle-up',
+  Undo = 'undo',
+  Warning = 'warning',
+}
+
+type Tag = 'span' | 'div' | 'i';
+
+export interface Props extends Omit<HTMLAttributes<HTMLOrSVGElement>, 'size'> {
+  icon: Icons;
+  color?: string;
+  size?: string;
+  tag?: Tag;
+}
+
+export const Icon = React.forwardRef(
+  ({ icon, color, className, style, size, tag = 'span', ...rest }: Props, ref) => {
+    const Component = tag;
+
+    return (
+      <Component
+        {...rest}
+        ref={ref as React.LegacyRef<HTMLDivElement>}
+        style={{ color: color, ...style, fontSize: size }}
+        data-icon
+        aria-hidden="true"
+        className={`${classes['icon']} ${classes['icon-' + icon]} ${className ? className : ''}`}
+      />
+    );
+  }
+);

package/src/Link/Link.module.scss

@@ -0,0 +1,46 @@
+.link {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1.5;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: 0;
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.125rem;
+    outline: 0;
+  }
+
+  &.primary {
+    color: var(--color-primary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.secondary {
+    color: var(--color-secondary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.tertiary {
+    color: var(--color-tertiary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+}

package/src/Link/Link.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Link, Props } from './Link';
+import { render } from '@testing-library/react';
+import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+
+const defaultParams: Props = {
+  type: 'external',
+  to: 'https://www.google.com',
+};
+
+const createLink = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Link {...parameters} data-testid="link">
+      link content
+    </Link>
+  );
+  const link = queries.getByTestId('link');
+
+  return {
+    ...queries,
+    link,
+  };
+};
+
+describe('Link should render', () => {
+  it('renders without crashing', () => {
+    const { link } = createLink();
+
+    expect(link).toBeTruthy();
+  });
+
+  it('is an external link with the right attributes', () => {
+    const { link } = createLink();
+
+    expect(link).toHaveAttribute('aria-disabled', 'false');
+    expect(link).toHaveAttribute('rel', 'noopener noreferer');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('is an internal link with the right attributes', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      type: 'internal',
+      to: '/home',
+    }));
+
+    expect(link).toHaveAttribute('aria-disabled', 'false');
+    expect(link).not.toHaveAttribute('rel', 'noopener noreferer');
+    expect(link).not.toHaveAttribute('target', '_blank');
+  });
+
+  it('is a download link with the right attributes', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      type: 'download',
+      to: '/test.png',
+    }));
+
+    expect(link).toHaveAttribute('aria-disabled', 'false');
+    expect(link).not.toHaveAttribute('rel', 'noopener noreferer');
+    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('download');
+  });
+
+  it('should set the correct target', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, target: '_parent' }));
+
+    expect(link).toHaveAttribute('target', '_parent');
+  });
+
+  it('should accept this React Router Link prop and render as such', () => {
+    const queries = render(
+      <BrowserRouter>
+        <Link to="/contact" component={RouterLink} children="Routerlink" />
+      </BrowserRouter>
+    );
+
+    const routerLink = queries.getByText('Routerlink');
+
+    expect(routerLink).toBeTruthy();
+    expect(routerLink).toHaveClass('link');
+    expect(routerLink).toHaveAttribute('href', '/contact');
+  });
+
+  it('should be disabled', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, disabled: true }));
+
+    expect(link).not.toHaveAttribute('href');
+    expect(link).toHaveClass('disabled');
+    expect(link).toHaveStyle({ color: 'var(--greyed-out)' });
+  });
+
+  it('should have a className added', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, className: 'classname' }));
+
+    expect(link).toHaveClass('classname');
+  });
+});
+
+describe('colors', () => {
+  it('should be color primary', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'primary' }));
+
+    expect(link).toHaveStyle({ color: 'var(--color-primary)' });
+  });
+
+  it('should be color secondary', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'secondary' }));
+
+    expect(link).toHaveStyle({ color: 'var(--color-secondary)' });
+  });
+
+  it('should be color tertiary', () => {
+    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'tertiary' }));
+
+    expect(link).toHaveStyle({ color: 'var(--color-tertiary)' });
+  });
+});

package/src/Link/Link.tsx

@@ -0,0 +1,80 @@
+import React, { ForwardRefExoticComponent, Ref, RefAttributes } from 'react';
+import { HTMLProps } from '../interfaces';
+import classes from './Link.module.scss';
+import { LinkProps } from './types';
+
+type AnchorType = 'external' | 'internal' | 'download';
+
+export interface Props extends HTMLProps<HTMLAnchorElement> {
+  children?: string;
+  color?: 'primary' | 'secondary' | 'tertiary';
+  type?: AnchorType;
+  to: string;
+  disabled?: boolean;
+  component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+  ref?: Ref<HTMLAnchorElement>;
+}
+
+export const Link = React.forwardRef(
+  (
+    {
+      children,
+      className,
+      disabled = false,
+      to,
+      color = 'primary',
+      type = 'internal',
+      component,
+      ...rest
+    }: Props,
+    ref: Ref<HTMLAnchorElement>
+  ) => {
+    const determineTarget = () => {
+      if (rest.target) {
+        return rest.target;
+      }
+
+      if (type === 'external') {
+        return '_blank';
+      }
+
+      return '';
+    };
+
+    const classNames = [classes['link'], classes[color]];
+    disabled && classNames.push(classes['disabled']);
+    className && classNames.push(className);
+
+    if (component) {
+      return React.createElement(component, {
+        ...rest,
+        ref: ref,
+        to: to,
+        className: classNames.join(' '),
+        'aria-disabled': disabled,
+        style: {
+          ...rest.style,
+        },
+        children: children,
+      });
+    }
+
+    return (
+      <a
+        {...rest}
+        ref={ref}
+        download={type === 'download'}
+        rel={type === 'external' ? 'noopener noreferer' : undefined}
+        href={!disabled ? to : undefined}
+        className={classNames.join(' ')}
+        aria-disabled={disabled}
+        target={determineTarget()}
+        style={{
+          ...rest.style,
+        }}
+      >
+        {children}
+      </a>
+    );
+  }
+);

package/src/Link/types.d.ts

@@ -0,0 +1,9 @@
+import * as H from 'history';
+
+export interface LinkProps<S = H.LocationState>
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  component?: React.ComponentType<any> | undefined;
+  to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
+  replace?: boolean | undefined;
+  innerRef?: React.Ref<HTMLAnchorElement> | undefined;
+}

package/src/Modal/Modal.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Modal } from './Modal';
+
+describe('Modal', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(
+      <Modal id="modal" open={true} onClose={() => {}}>
+        test
+      </Modal>,
+      div
+    );
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

package/src/Modal/Modal.tsx

@@ -0,0 +1 @@
+export { BaseModal as Modal, Props } from '../BaseModal/BaseModal';

package/src/Modal/ModalActions/ModalActions.tsx

@@ -0,0 +1,4 @@
+export {
+  BaseModalActions as ModalActions,
+  Props,
+} from '../../BaseModal/BaseModalActions/BaseModalActions';

package/src/Modal/ModalContent/ModalContent.tsx

@@ -0,0 +1,4 @@
+export {
+  BaseModalContent as ModalContent,
+  Props,
+} from '../../BaseModal/BaseModalContent/BaseModalContent';

package/src/Modal/ModalHeader/ModalHeader.tsx

@@ -0,0 +1,4 @@
+export {
+  BaseModalHeader as ModalHeader,
+  Props,
+} from '../../BaseModal/BaseModalHeader/BaseModalHeader';

package/src/Popover/Popover.module.scss

@@ -0,0 +1,18 @@
+.popover {
+  position: fixed;
+  pointer-events: none;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.29);
+  opacity: 0;
+  transform: scale(0.5);
+  transition-property: transform, opacity;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+
+  &.show {
+    transform: scale(1);
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

package/src/Popover/Popover.test.tsx

@@ -0,0 +1,84 @@
+import React, { useRef } from 'react';
+import { Popover, Props } from './Popover';
+import { render } from '@testing-library/react';
+import { usePosition } from '../hooks/usePosition';
+
+const createPopover = (params?: (defaultParams: Props) => Props) => {
+  const Component = () => {
+    const relativeElement = useRef<HTMLButtonElement>(null);
+    const elementToBePositioned = useRef<HTMLDivElement>(null);
+
+    const defaultParams: Props = {
+      children: (
+        <ul>
+          <li>Test</li>
+          <li>Test</li>
+          <li>Test</li>
+        </ul>
+      ),
+      show: false,
+      placement: { vertical: 'top', horizontal: 'left' },
+    };
+    let parameters: Props = defaultParams;
+
+    if (params) {
+      parameters = params(defaultParams);
+    }
+
+    const { top, left, bottom, right, calculatePosition } = usePosition({
+      elementToBePositioned: elementToBePositioned,
+      relativeElement: relativeElement,
+      ...parameters,
+    });
+
+    return (
+      <>
+        <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
+          Test
+        </button>
+        <Popover
+          {...defaultParams}
+          data-testid="popover"
+          style={{ top: top, left: left, bottom: bottom, right: right }}
+          ref={elementToBePositioned}
+        >
+          Test
+        </Popover>
+      </>
+    );
+  };
+
+  const queries = render(<Component />);
+  const button = queries.getByTestId('button');
+  const popover = queries.getByTestId('popover');
+
+  /** Let the hacking begin */
+  Object.defineProperty(button, 'offsetHeight', { configurable: true, value: 500 });
+  Object.defineProperty(button, 'offsetWidth', { configurable: true, value: 500 });
+
+  Object.defineProperty(window, 'innerHeight', {
+    configurable: true,
+    value: 1000,
+  });
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: 1000,
+  });
+
+  Object.defineProperty(popover, 'offsetHeight', { configurable: true, value: 100 });
+  Object.defineProperty(popover, 'offsetWidth', { configurable: true, value: 100 });
+
+  return {
+    ...queries,
+    popover,
+    button,
+  };
+};
+
+describe('Popover should render', () => {
+  it('renders without crashing and has default left and top attributes', () => {
+    const { popover } = createPopover();
+
+    expect(popover).toBeTruthy();
+  });
+});

package/src/Popover/Popover.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef, HTMLProps, ReactNode, RefObject, useEffect, useRef } from 'react';
+import { usePosition, Offset, Placement } from '../hooks/usePosition';
+import classes from './Popover.module.scss';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  show?: boolean;
+  anchorEl?: RefObject<HTMLOrSVGElement>;
+  placement?: Placement;
+  offset?: Offset;
+  transformOrigin?: Placement;
+}
+
+export const Popover = forwardRef<HTMLDivElement, Props>(
+  ({ children, className, show, placement, offset, transformOrigin, anchorEl, ...rest }, ref) => {
+    const elToBePositioned = useRef<HTMLDivElement>(null);
+
+    if (show === undefined) {
+      throw new Error('Please make sure to define the "show" property on your Popover component');
+    }
+
+    const { top, left, right, bottom, calculatePosition } = usePosition({
+      elementToBePositioned: elToBePositioned,
+      relativeElement: anchorEl,
+      offset: offset,
+      placement: placement,
+      transformOrigin: transformOrigin,
+    });
+
+    useEffect(() => {
+      calculatePosition();
+    }, [show]);
+
+    return (
+      <div ref={ref} {...rest}>
+        <div
+          ref={elToBePositioned}
+          className={`${classes.popover} ${className ?? ''} ${show ? classes.show : ''}`}
+          style={{ top: top, left: left, right: right, bottom: bottom }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);

package/src/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -0,0 +1,35 @@
+.snackbars {
+  position: fixed;
+  z-index: 20;
+  width: 100%;
+
+  &.bottom {
+    bottom: 3.5rem;
+  }
+
+  &.top {
+    top: 3.5rem;
+  }
+
+  &.start {
+    left: 0;
+  }
+
+  &.center {
+    left: 0;
+  }
+
+  &.end {
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 37.5rem) {
+  .snackbars {
+    width: initial;
+
+    &.center {
+      left: calc(50% - 18.75rem);
+    }
+  }
+}

package/src/Snackbar/SnackbarContainer/SnackbarContainer.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SnackbarContainer, Props } from './SnackbarContainer';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  placement: { vertical: 'top', horizontal: 'center' },
+  children: <span>children</span>,
+};
+
+const createSnackbarContainer = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<SnackbarContainer {...parameters} data-testid="snackbarcontainer" />);
+  const snackbarcontainer = queries.getByTestId('snackbarcontainer');
+  return { ...queries, snackbarcontainer };
+};
+
+describe('SnackbarContainer should render', () => {
+  it('renders without crashing', () => {
+    const { snackbarcontainer, getByText } = createSnackbarContainer();
+    expect(snackbarcontainer).toHaveClass('top');
+    expect(snackbarcontainer).toHaveClass('center');
+    expect(snackbarcontainer).toHaveStyle({ zIndex: '' });
+    expect(getByText('children')).toBeDefined();
+    expect(snackbarcontainer).toBeDefined();
+  });
+
+  it('renders with zIndex', () => {
+    const { snackbarcontainer } = createSnackbarContainer((defaultParams) => ({
+      ...defaultParams,
+      zIndex: 1,
+    }));
+    expect(snackbarcontainer).toHaveStyle({ zIndex: '1' });
+  });
+});

package/src/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classes from './SnackbarContainer.module.scss';
+
+export interface Placement {
+  vertical: 'top' | 'bottom';
+  horizontal: 'start' | 'center' | 'end';
+}
+
+export interface Props {
+  placement: Placement;
+  children?: React.ReactNode;
+  zIndex?: number;
+  className?: string;
+}
+
+export const SnackbarContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      style={{ zIndex }}
+      className={`${classes['snackbars']} ${classes[placement.horizontal]} ${
+        classes[placement.vertical]
+      } ${className ?? ''}`}
+    >
+      {children}
+    </div>
+  );
+};