@onewelcome/react-lib-components 0.1.0-alpha

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@onewelcome/react-lib-components",
+  "version": "0.1.0-alpha",
+  "license": "Apache-2.0",
+  "author": "OneWelcome B.V.",
+  "main": "dist/index.js",
+  "module": "dist/react-lib-components.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "size-limit --why",
+    "build": "dts build",
+    "build-storybook": "build-storybook",
+    "lint": "dts lint",
+    "prepare": "husky install && dts build",
+    "size": "size-limit",
+    "start": "dts watch",
+    "prettier": "prettier --write --ignore-path .gitignore \"**/*.+(ts|tsx|scss|mdx)\"",
+    "storybook": "start-storybook -p 6006",
+    "test": "dts test --passWithNoTests"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "size-limit": [
+    {
+      "path": "dist/react-lib-components.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-lib-components.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addons": "^6.4.17",
+    "@storybook/builder-webpack5": "^6.4.17",
+    "@storybook/manager-webpack5": "^6.4.18",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.13",
+    "@testing-library/dom": "^8.12.0",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@tsconfig/create-react-app": "^1.0.2",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/mdx": "^2.0.1",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "babel-loader": "^8.2.4",
+    "dts-cli": "^1.4.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-junit": "^13.0.0",
+    "lint-staged": "^12.3.7",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-router": "^6.3.0",
+    "rollup-plugin-styles": "^4.0.0",
+    "sass": "^1.49.10",
+    "size-limit": "^7.0.8",
+    "tslib": "^2.3.1",
+    "typescript": "^4.6.3"
+  }
+}

package/src/BaseModal/BaseModal.module.scss

@@ -0,0 +1,58 @@
+$zIndex: 10;
+$marginTop: 3.125rem;
+
+.modal {
+  position: fixed;
+  z-index: $zIndex;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+
+  visibility: hidden;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+
+  .backdrop {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: transparent;
+    transition: background-color 0.5s ease;
+  }
+
+  &.visible {
+    visibility: visible;
+
+    .backdrop {
+      background-color: var(--default);
+      opacity: 0.75;
+    }
+  }
+}
+
+.container {
+  background-color: var(--modal-background-color);
+  z-index: $zIndex + 1;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (min-width: 50rem) {
+  .container {
+    margin-top: $marginTop;
+    width: 50rem;
+    height: auto;
+    max-height: calc(90% - $marginTop);
+    border-radius: 8px;
+    box-shadow: 0 30px 50px var(--modal-shadow-color);
+  }
+}

package/src/BaseModal/BaseModal.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BaseModal, Props } from './BaseModal';
+import {
+  render,
+  getByRole,
+  getByText,
+  queryByText,
+  queryByRole,
+  fireEvent,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const classNames = ['class11', 'class12'];
+const containerClassNames = ['class21', 'class22'];
+
+const initParams: Props = {
+  id: 'modal',
+  open: true,
+  onClose: jest.fn(),
+  className: classNames.join(' '),
+  containerClassName: containerClassNames.join(' '),
+  children: 'This is example dialog content.',
+};
+
+describe('BaseModal', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<BaseModal {...initParams} />);
+    const dialog = getByRole(container, 'dialog');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-label');
+    expect(dialog).toHaveAttribute('aria-describedby', 'modal-description');
+    expect(dialog).toHaveAttribute('data-hidden', 'false');
+    expect(dialog).toHaveAttribute('aria-hidden', 'false');
+    expect(getByText(dialog, initParams.children as string)).toBeDefined();
+    expect(document.body).toHaveStyle('overflow: hidden');
+  });
+
+  it('should render close modal without content', () => {
+    const { container } = render(<BaseModal {...initParams} open={false} />);
+    const dialogByRole = queryByRole(container, 'dialog');
+    const dialog = container.children[0] as HTMLElement;
+    expect(dialogByRole).toBeNull();
+    expect(dialog).toHaveAttribute('aria-hidden', 'true');
+    expect(queryByText(dialog, initParams.children as string)).toBeNull();
+  });
+
+  it('should handle clicking on backdrop & ESC key', () => {
+    const { container } = render(<BaseModal {...initParams} />);
+    const modal = getByRole(container, 'dialog');
+    const backdrop = modal.querySelector('.backdrop') as HTMLElement;
+    expect(initParams.onClose).toHaveBeenCalledTimes(0);
+
+    userEvent.click(backdrop);
+    expect(initParams.onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(modal, { key: 'Escape' });
+    expect(initParams.onClose).toHaveBeenCalledTimes(2);
+  });
+});

package/src/BaseModal/BaseModal.tsx

@@ -0,0 +1,113 @@
+import React, { HTMLAttributes, useEffect, useRef } from 'react';
+import classes from './BaseModal.module.scss';
+import { labelId, descriptionId } from './BaseModalContext';
+
+const SCROLL_PROPERTY_NAME = 'overflow';
+const SCROLL_PROPERTY_VALUE = 'hidden';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  id: string;
+  children: React.ReactNode;
+  open: boolean;
+  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
+  className?: string;
+  containerClassName?: string;
+  labelledby?: string;
+  describedby?: string;
+  disableEscapeKeyDown?: boolean;
+  disableBackdrop?: boolean;
+  zIndex?: number;
+}
+
+const useBackdropOnCloseClick = (
+  disableBackdrop: boolean,
+  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown
+) => {
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const onBackdropClick = () => onClose && onClose();
+
+  useEffect(() => {
+    !disableBackdrop && backdropRef.current?.addEventListener('click', onBackdropClick);
+    return () => {
+      !disableBackdrop && backdropRef.current?.removeEventListener('click', onBackdropClick);
+    };
+  }, []);
+
+  return {
+    backdropRef,
+  };
+};
+
+export const useSetBodyScroll = (open: boolean) => {
+  const hideBodyScroll = () => {
+    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
+  };
+
+  const showBodyScroll = () => {
+    const allModalsClosed =
+      document.querySelectorAll('[role=dialog][data-hidden=false]').length === 0;
+    if (allModalsClosed) {
+      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      hideBodyScroll();
+    } else {
+      showBodyScroll();
+    }
+  }, [open]);
+};
+
+export const BaseModal = ({
+  id,
+  children,
+  open,
+  onClose,
+  className = '',
+  containerClassName = '',
+  labelledby,
+  describedby,
+  disableEscapeKeyDown = false,
+  disableBackdrop = false,
+  zIndex,
+  ...restProps
+}: Props) => {
+  const { backdropRef } = useBackdropOnCloseClick(disableBackdrop, onClose);
+  useSetBodyScroll(open);
+
+  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!disableEscapeKeyDown && event.key === 'Escape') {
+      event.stopPropagation();
+      onClose && onClose();
+    }
+  };
+
+  return (
+    <div
+      {...restProps}
+      id={id}
+      className={`${classes['modal']} ${open && classes['visible']} ${className}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={labelledby || labelId(id)}
+      aria-describedby={describedby || descriptionId(id)}
+      aria-hidden={!open}
+      tabIndex={-1}
+      data-hidden={!open}
+      onKeyDown={handleEscKeyPress}
+      style={{ zIndex }}
+    >
+      <div ref={backdropRef} className={classes['backdrop']}></div>
+      {open && (
+        <div
+          style={{ zIndex: zIndex && zIndex + 1 }}
+          className={`${classes['container']} ${containerClassName}`}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/BaseModal/BaseModalActions/BaseModalActions.module.scss

@@ -0,0 +1,9 @@
+.actions {
+  margin: 1.875rem 1.25rem 1.875rem 1.25rem;
+  display: flex;
+  justify-content: flex-end;
+
+  & * + * {
+    margin-left: 1.25rem;
+  }
+}

package/src/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BaseModalActions } from './BaseModalActions';
+import { render } from '@testing-library/react';
+
+describe('BaseModalActions', () => {
+  it('renders without crashing', () => {
+    const children = 'Content';
+    const classNames = ['class1', 'class2'];
+    const { container } = render(
+      <BaseModalActions className={classNames.join(' ')}>{children}</BaseModalActions>
+    );
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass('actions', classNames[0], classNames[1]);
+    expect(dialogActionsContainer).toHaveTextContent(children);
+  });
+});

package/src/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import classes from './BaseModalActions.module.scss';
+
+export interface Props extends HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const BaseModalActions = ({ children, className = '', ...restProps }: Props) => {
+  return (
+    <footer {...restProps} className={`${classes['actions']} ${className}`}>
+      {children}
+    </footer>
+  );
+};

package/src/BaseModal/BaseModalContent/BaseModalContent.module.scss

@@ -0,0 +1,6 @@
+.content {
+  padding: 1.5rem 1.25rem 0;
+  overflow-y: auto;
+  flex: 1;
+  outline: none;
+}

package/src/BaseModal/BaseModalContent/BaseModalContent.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BaseModalContent, Props } from './BaseModalContent';
+import { render } from '@testing-library/react';
+import { descriptionId } from '../BaseModalContext';
+
+const classNames = ['class1', 'class2'];
+const initParams: Props = {
+  id: descriptionId('modal'),
+  className: classNames.join(' '),
+  children: 'This is example dialog content.',
+};
+
+describe('BaseModalContent', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<BaseModalContent {...initParams} />);
+
+    const dialogContentContainer = container.children[0];
+    expect(dialogContentContainer).toHaveClass('content', classNames[0], classNames[1]);
+    expect(dialogContentContainer).toHaveTextContent(initParams.children as string);
+    expect(dialogContentContainer).toEqual(document.activeElement);
+  });
+
+  it('should renders not focused div', () => {
+    const { container } = render(<BaseModalContent {...initParams} disableAutoFocus />);
+
+    const dialogContentContainer = container.children[0];
+    expect(dialogContentContainer).not.toEqual(document.activeElement);
+  });
+});

package/src/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes, useEffect, useRef } from 'react';
+import classes from './BaseModalContent.module.scss';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  children: React.ReactNode;
+  className?: string;
+  disableAutoFocus?: boolean;
+}
+
+export const BaseModalContent = ({
+  id,
+  children,
+  className = '',
+  disableAutoFocus = false,
+  ...restProps
+}: Props) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    !disableAutoFocus && contentRef.current?.focus();
+  }, []);
+
+  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
+  return (
+    <div
+      {...restProps}
+      ref={contentRef}
+      id={id}
+      className={`${classes['content']} ${className}`}
+      tabIndex={-1}
+    >
+      {children}
+    </div>
+  );
+};

package/src/BaseModal/BaseModalContext.ts

@@ -0,0 +1,2 @@
+export const labelId = (id: string) => `${id}-label`;
+export const descriptionId = (id: string) => `${id}-description`;

package/src/BaseModal/BaseModalHeader/BaseModalHeader.module.scss

@@ -0,0 +1,17 @@
+.header {
+  min-width: 80px;
+  padding: 1rem 1.25rem;
+  background-color: var(--modal-header-background-color);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  flex: 1;
+  margin: 0 0 0 1.25rem;
+}

package/src/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BaseModalHeader, Props } from './BaseModalHeader';
+import { render, getByRole, getByTestId, getByText } from '@testing-library/react';
+import { labelId } from '../BaseModalContext';
+import userEvent from '@testing-library/user-event';
+
+const additionalContent = 'Additional content';
+const initParams: Props = {
+  id: labelId('modal'),
+  title: 'Example title',
+  onClose: jest.fn(),
+  children: <div data-testid="additional-content">{additionalContent}</div>,
+};
+
+describe('BaseModalHeader', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<BaseModalHeader {...initParams} />);
+    const closeBtn = getByRole(container, 'button');
+    expect(initParams.onClose).toBeCalledTimes(0);
+
+    userEvent.click(closeBtn);
+
+    const dialogContentContainer = container.children[0];
+    const titleContainer = getByText(container, initParams.title);
+    expect(dialogContentContainer).toHaveClass('header');
+    expect(titleContainer).toHaveAttribute('id', 'modal-label');
+    expect(getByTestId(container, 'additional-content')).toHaveTextContent(additionalContent);
+    expect(initParams.onClose).toBeCalledTimes(1);
+  });
+});

package/src/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes } from 'react';
+import classes from './BaseModalHeader.module.scss';
+import { IconButton } from '../../Button/IconButton';
+import { Icon, Icons } from '../../Icon/Icon';
+import { Typography } from '../../Typography/Typography';
+
+export interface Props extends HTMLAttributes<HTMLElement> {
+  id: string;
+  title: string;
+  children?: React.ReactNode;
+  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BaseModalHeader = ({ id, title, children, onClose, ...restProps }: Props) => {
+  return (
+    <header {...restProps} className={classes['header']}>
+      <div className={classes['headline']}>
+        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+          {title}
+        </Typography>
+        <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
+          <Icon icon={Icons.Times} />
+        </IconButton>
+      </div>
+      {children}
+    </header>
+  );
+};

package/src/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,14 @@
+.breadcrumbs {
+  .last {
+    color: var(--greyed-out);
+    margin: 0;
+  }
+
+  .icon {
+    color: var(--greyed-out);
+    font-size: 0.75rem;
+    line-height: 1.5rem;
+    margin-left: 0.375rem;
+    margin-right: 0.375rem;
+  }
+}

package/src/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Breadcrumbs, Props } from './Breadcrumbs';
+import { render } from '@testing-library/react';
+import { Link } from '../Link/Link';
+
+const defaultParams: Props = {
+  'aria-label': 'Breadcrumbs',
+  children: [
+    <Link key="0" to="#1" data-testid="link">
+      Test1
+    </Link>,
+    <Link key="1" to="#2" data-testid="link">
+      Test2
+    </Link>,
+  ],
+};
+
+const createBreadcrumbs = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Breadcrumbs {...parameters} data-testid="breadcrumbs"></Breadcrumbs>);
+  const breadcrumbs = queries.getByTestId('breadcrumbs');
+
+  return {
+    ...queries,
+    breadcrumbs,
+  };
+};
+
+describe('Breadcrumbs should render', () => {
+  it('renders without crashing', () => {
+    const { breadcrumbs } = createBreadcrumbs();
+
+    expect(breadcrumbs).toBeDefined();
+    expect(breadcrumbs.firstChild).not.toHaveAttribute('aria-current');
+    expect((breadcrumbs.firstChild as HTMLElement).tagName).toEqual('A');
+    expect(breadcrumbs.lastChild).toHaveAttribute('aria-current', 'page');
+    expect((breadcrumbs.lastChild as HTMLElement).tagName).toEqual('SPAN');
+  });
+});

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,48 @@
+import React, { Fragment, HTMLProps, ReactElement } from 'react';
+import { Icon, Icons } from '../Icon/Icon';
+import { Link, Props as LinkProps } from '../Link/Link';
+import { Typography } from '../Typography/Typography';
+import classes from './Breadcrumbs.module.scss';
+
+type ChildrenType = ReactElement<LinkProps, typeof Link>;
+
+export interface Props extends HTMLProps<HTMLElement> {
+  children: ChildrenType | ChildrenType[];
+  'aria-label': string;
+}
+
+export const Breadcrumbs = ({
+  children,
+  'aria-label': ariaLabel,
+  className = '',
+  ...rest
+}: Props) => {
+  const items = React.Children.map(children, (child, index) => {
+    const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
+    if (isLastElement) {
+      return (
+        <Typography
+          key={child.key}
+          variant="body"
+          tag="span"
+          className={classes['last']}
+          aria-current="page"
+        >
+          {child.props.children}
+        </Typography>
+      );
+    } else {
+      return (
+        <Fragment key={child.key}>
+          {React.cloneElement(child)}
+          <Icon icon={Icons.ChevronRight} className={classes['icon']} />
+        </Fragment>
+      );
+    }
+  });
+  return (
+    <nav {...rest} aria-label={ariaLabel} className={`${classes['breadcrumbs']} ${className}`}>
+      {items}
+    </nav>
+  );
+};

package/src/Button/BaseButton.module.scss

@@ -0,0 +1,20 @@
+.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);
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+  min-height: 2.5rem;
+  cursor: pointer;
+  transition-property: color, background-color, border-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  font-family: var(--font-family);
+
+  &:disabled {
+    color: var(--greyed-out);
+    cursor: not-allowed;
+  }
+}