@onewelcome/react-lib-components 0.1.0-alpha

package/src/Tiles/Tile.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Tile, Props } from './Tile';
+import { render, getByRole } from '@testing-library/react';
+import { Icon, Icons } from '../Icon/Icon';
+import { ContextMenu } from '../ContextMenu/ContextMenu';
+import { IconButton } from '../Button/IconButton';
+import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
+import userEvent from '@testing-library/user-event';
+
+const onShow = jest.fn();
+const onClose = jest.fn();
+const contextMenuItemOnClick = jest.fn();
+const iconClick = jest.fn();
+
+const contextMenu = (
+  <ContextMenu
+    id="context_menu"
+    data-testid="contextmenu"
+    onShow={onShow}
+    onClose={onClose}
+    trigger={
+      <IconButton data-testid="contextmenu-trigger" title="context menu">
+        <Icon icon={Icons.EllipsisAlt} />
+      </IconButton>
+    }
+  >
+    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
+      Item 1
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
+      Item 2
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
+      Item 3
+    </ContextMenuItem>
+  </ContextMenu>
+);
+
+const defaultParams: Props = {
+  title: 'tile',
+  iconProps: { icon: Icons.Bell, onClick: iconClick, 'data-testid': 'icon' },
+  menu: contextMenu,
+};
+
+const createTile = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Tile {...parameters} data-testid="tile">
+      tile content
+    </Tile>
+  );
+  const tile = queries.getByTestId('tile');
+  const menutrigger = queries.getByTestId('contextmenu-trigger');
+  const icon = queries.getByTestId('icon');
+
+  return {
+    ...queries,
+    tile,
+    menutrigger,
+    icon,
+  };
+};
+
+describe('Tile should render', () => {
+  it('renders without crashing', () => {
+    const { tile, icon } = createTile();
+
+    userEvent.click(icon);
+
+    expect(iconClick).toHaveBeenCalled();
+    expect(tile).toBeDefined();
+  });
+});
+
+describe("should throw errors since we don't pass props", () => {
+  it('throws because of missing id', () => {
+    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
+    const err = console.error;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      render(<Tile imageProps={{ src: 'test', alt: 'test' }} />);
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = 'Please make sure to pass a title prop to your Tile component.';
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+});
+
+describe('contextmenu', () => {
+  it('should render everything correctly', () => {
+    const { menutrigger, getByTestId } = createTile();
+
+    const contextMenu = getByTestId('contextmenu');
+    const menuitem1 = getByTestId('item1');
+    const menuitem2 = getByTestId('item2');
+    const menuitem3 = getByTestId('item3');
+    const popover = document.querySelector('.popover');
+
+    expect(popover).toHaveStyle({ opacity: '0;' });
+    expect(menutrigger).toBeTruthy();
+    expect(contextMenu).toBeTruthy();
+    expect(menuitem1).toBeTruthy();
+    expect(menuitem2).toBeTruthy();
+    expect(menuitem3).toBeTruthy();
+
+    userEvent.click(menutrigger);
+    expect(onShow).toHaveBeenCalled();
+    expect(popover).toHaveClass('show');
+    expect(popover).toHaveStyle({ opacity: '1;' });
+
+    userEvent.click(getByRole(menuitem1, 'button'));
+    userEvent.click(getByRole(menuitem2, 'button'));
+    userEvent.click(getByRole(menuitem3, 'button'));
+
+    expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
+  });
+});

package/src/Tiles/Tile.tsx

@@ -0,0 +1,48 @@
+import React, { HTMLProps, ReactElement } from 'react';
+import { Icon, Icons, Props as IconProps } from '../Icon/Icon';
+import classes from './Tile.module.scss';
+
+import { Props as ContextMenuProps } from '../ContextMenu/ContextMenu';
+
+interface ImageProps {
+  src: string;
+  alt: string;
+}
+
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'contextMenu'> {
+  title: string;
+  imageProps?: ImageProps;
+  iconProps?: IconProps;
+  loading?: boolean;
+  menu?: ReactElement<ContextMenuProps>;
+}
+
+export const Tile = ({
+  title,
+  imageProps,
+  iconProps,
+  className,
+  loading,
+  menu,
+  ...rest
+}: Props) => {
+  if (!title) {
+    throw new Error('Please make sure to pass a title prop to your Tile component.');
+  }
+
+  return (
+    <div {...rest} className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}>
+      <header>
+        {iconProps && <Icon {...iconProps} className={`${classes['icon']} ${className ?? ''}`} />}
+        {menu ?? null}
+      </header>
+      <div className={classes['content']}>
+        {imageProps && imageProps.src && imageProps.alt && (
+          <figure className={classes['image']}>{!loading && <img {...imageProps} />}</figure>
+        )}
+        {!imageProps && <Icon className={classes['placeholder']} icon={Icons.Image} />}
+        <span className={classes['title']}>{title}</span>
+      </div>
+    </div>
+  );
+};

package/src/Tiles/Tiles.module.scss

@@ -0,0 +1,11 @@
+.tiles {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (min-width: 30em) {
+  .tiles {
+    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
+  }
+}

package/src/Tiles/Tiles.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Tiles, Props } from './Tiles';
+import { Tile } from './Tile';
+import { render } from '@testing-library/react';
+import { Icon, Icons } from '../Icon/Icon';
+import { ContextMenu } from '../ContextMenu/ContextMenu';
+import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
+import { IconButton } from '../Button/IconButton';
+
+const onShow = jest.fn();
+const onClose = jest.fn();
+const contextMenuItemOnClick = jest.fn();
+
+const contextMenu = (
+  <ContextMenu
+    id="context_menu"
+    onShow={onShow}
+    onClose={onClose}
+    trigger={
+      <IconButton title="context menu">
+        <Icon icon={Icons.EllipsisAlt} />
+      </IconButton>
+    }
+  >
+    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
+      Item 1
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
+      Item 2
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
+      Item 3
+    </ContextMenuItem>
+  </ContextMenu>
+);
+
+const defaultParams: Props = {
+  children: [
+    <Tile
+      data-testid="tile"
+      key="tile1"
+      title="Tile1"
+      imageProps={{
+        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        alt: 'OneWelcome logo',
+      }}
+      iconProps={{ icon: Icons.Checkmark }}
+      menu={contextMenu}
+    />,
+    <Tile
+      data-testid="tile"
+      key="tile2"
+      title="Tile2"
+      imageProps={{
+        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        alt: 'OneWelcome logo',
+      }}
+      iconProps={{ icon: Icons.Forbidden }}
+      menu={contextMenu}
+    />,
+    <Tile
+      data-testid="tile"
+      key="tile3"
+      title="Tile3"
+      imageProps={{
+        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        alt: 'OneWelcome logo',
+      }}
+      iconProps={{ icon: Icons.Checkmark }}
+      menu={contextMenu}
+    />,
+  ],
+  className: 'example-classname',
+};
+
+const createTiles = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tiles {...parameters} data-testid="tiles" />);
+  const tiles = queries.getByTestId('tiles');
+
+  let individualTiles;
+
+  if (!parameters.loading) {
+    individualTiles = queries.getAllByTestId('tile');
+  }
+
+  return {
+    ...queries,
+    tiles,
+    individualTiles,
+  };
+};
+
+describe('Tiles should render', () => {
+  it('renders without crashing', () => {
+    const { tiles, individualTiles } = createTiles();
+
+    individualTiles?.forEach((tile, index) => {
+      expect(tile.querySelector('.title')).toHaveTextContent('Tile' + (index + 1).toFixed(0));
+      expect(tile.querySelector('img')).toBeTruthy();
+    });
+
+    expect(tiles).toHaveClass('example-classname');
+    expect(tiles).toBeDefined();
+  });
+});
+
+describe('loading state should be handled properly', () => {
+  it('is loading', () => {
+    const { tiles } = createTiles((defaultParams) => ({ ...defaultParams, loading: true }));
+
+    expect(tiles).toHaveAttribute('aria-busy', 'true');
+    expect(tiles.querySelectorAll('.tile.loading').length).toBe(3);
+  });
+});

package/src/Tiles/Tiles.tsx

@@ -0,0 +1,48 @@
+import React, { HTMLProps, ReactNode } from 'react';
+import classes from './Tiles.module.scss';
+import { Tile } from './Tile';
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  loading?: boolean;
+}
+
+export const Tiles = ({ children, className, loading = false, ...rest }: Props) => {
+  const renderChildren = () => {
+    if (loading) {
+      return [
+        <Tile
+          key="placeholder1"
+          title="placeholder"
+          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder2"
+          title="placeholder"
+          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder3"
+          title="placeholder"
+          imageProps={{ src: 'placeholder', alt: 'placeholder' }}
+          loading={true}
+        />,
+      ];
+    }
+
+    return children;
+  };
+
+  return (
+    <div
+      {...rest}
+      className={`${classes['tiles']} ${className ?? ''}`}
+      aria-live="polite"
+      aria-busy={loading}
+    >
+      {renderChildren()}
+    </div>
+  );
+};

package/src/Tooltip/Tooltip.module.scss

@@ -0,0 +1,42 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.tooltip-wrapper {
+  .icon {
+    margin-left: 0.5rem;
+    transition: all 0.2s ease-in-out;
+    color: var(--greyed-out);
+
+    &:hover {
+      color: var(--default);
+    }
+  }
+}
+
+.tooltip {
+  position: fixed;
+  background-color: var(--default);
+  padding: 0.1875rem 0.5rem;
+  color: #fff;
+  max-width: 330px;
+  opacity: 0;
+  transform: scale(0);
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, transform;
+  transform-origin: center left;
+  pointer-events: none;
+
+  &.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.label {
+  &:focus-visible {
+    outline: 0.5px dashed var(--color-primary);
+  }
+}

package/src/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tooltip, Props } from './Tooltip';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  children: 'This is a test message',
+  label: 'Label',
+};
+
+const createTooltip = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tooltip {...parameters} data-testid="tooltip" />);
+  const tooltip = queries.getByTestId('tooltip');
+
+  return {
+    ...queries,
+    tooltip,
+  };
+};
+
+describe('Tooltip should render', () => {
+  it('renders without crashing', () => {
+    const { tooltip, getByText } = createTooltip((defaultParams) => ({
+      ...defaultParams,
+      className: 'testing',
+    }));
+
+    const tooltipText = getByText('This is a test message');
+    const label = getByText('Label');
+
+    expect(tooltip).toHaveClass('testing');
+    expect(tooltipText).toHaveStyle({ top: '0px', left: '16px' });
+    expect(label).toBeTruthy();
+    expect(tooltipText).toBeTruthy();
+    expect(tooltip).toBeTruthy();
+  });
+
+  it('should override the default placement and offset values', () => {
+    const { tooltip, getByText } = createTooltip((defaultParams) => ({
+      ...defaultParams,
+      placement: { horizontal: 'center', vertical: 'center' },
+      offset: { top: 0, right: 16, left: 0, bottom: 16 },
+      transformOrigin: { horizontal: 'right', vertical: 'bottom' },
+    }));
+
+    const tooltipText = getByText('This is a test message');
+    expect(tooltipText).toHaveStyle({ right: '1024px', bottom: '768px' });
+    expect(tooltip).toBeTruthy();
+  });
+});
+
+describe('It opens the tooltip', () => {
+  it('opens', () => {
+    const { tooltip, getByText } = createTooltip();
+
+    const icon = tooltip.querySelector('.icon')!;
+    const tooltipHover = getByText('This is a test message');
+    userEvent.hover(icon);
+
+    expect(tooltipHover).toHaveClass('visible');
+    expect(tooltipHover).toHaveAttribute('aria-hidden', 'false');
+
+    userEvent.keyboard('{escape}');
+
+    expect(tooltipHover).not.toHaveClass('visible');
+    expect(tooltipHover).toHaveAttribute('aria-hidden', 'true');
+  });
+});

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,130 @@
+import React, { HTMLProps, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Icon, Icons } from '../Icon/Icon';
+import classes from './Tooltip.module.scss';
+import { generateID } from '../util/helper';
+import { Offset, Placement, usePosition } from '../hooks/usePosition';
+import { createPortal } from 'react-dom';
+
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'label'> {
+  label: string | ReactNode;
+  children: string;
+  placement?: Placement;
+  offset?: Offset;
+  transformOrigin?: Placement;
+  domRoot?: HTMLElement;
+}
+
+interface DefaultPosition {
+  placement: Placement;
+  offset: Offset;
+  transformOrigin: Placement;
+}
+
+const defaultPosition: DefaultPosition = {
+  placement: { horizontal: 'right', vertical: 'center' },
+  offset: { left: 16, right: 0, top: 0, bottom: 0 },
+  transformOrigin: { horizontal: 'left', vertical: 'center' },
+};
+
+export const Tooltip = ({
+  children,
+  className,
+  placement = defaultPosition.placement,
+  offset = defaultPosition.offset,
+  transformOrigin = defaultPosition.transformOrigin,
+  domRoot = document.body,
+  label,
+  ...rest
+}: Props) => {
+  const [identifier] = useState(generateID());
+  const [visible, setVisible] = useState(false);
+
+  const relativeElement = useRef<HTMLOrSVGElement>(null);
+  const elementToBePositioned = useRef<HTMLDivElement>(null);
+
+  const { top, bottom, right, left, calculatePosition } = usePosition({
+    relativeElement: relativeElement,
+    elementToBePositioned: elementToBePositioned,
+    placement: placement,
+    offset: offset,
+    transformOrigin: transformOrigin,
+  });
+
+  useEffect(() => {
+    if (!visible) return;
+
+    function escapePressHandler(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setVisible(false);
+      }
+    }
+
+    document.addEventListener('keyup', escapePressHandler);
+
+    return () => {
+      document.removeEventListener('keyup', escapePressHandler);
+    };
+  }, [visible]);
+
+  useLayoutEffect(() => {
+    calculatePosition();
+  }, [visible]);
+
+  const renderChildren = () => {
+    if (React.isValidElement(label)) {
+      return React.cloneElement(label, {
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+        'aria-describedby': identifier,
+        tabIndex: 0,
+        className: classes['label'],
+      });
+    }
+
+    return (
+      <span
+        className={classes['label']}
+        tabIndex={0}
+        onFocus={() => setVisible(true)}
+        onBlur={() => setVisible(false)}
+        aria-describedby={identifier}
+      >
+        {label}
+      </span>
+    );
+  };
+
+  return (
+    <div {...rest} className={`${classes.wrapper} ${className ?? ''}`}>
+      {renderChildren()}
+      <div className={`${classes['tooltip-wrapper']}`}>
+        <Icon
+          ref={relativeElement}
+          tag="div"
+          onMouseEnter={() => setVisible(true)}
+          onMouseLeave={() => setVisible(false)}
+          icon={Icons.InfoCircle}
+          className={classes.icon}
+        />
+        {createPortal(
+          <div
+            ref={elementToBePositioned}
+            style={{
+              ...rest.style,
+              top: top,
+              left: left,
+              right: right,
+              bottom: bottom,
+            }}
+            aria-hidden={!visible}
+            id={identifier}
+            className={`${classes.tooltip} ${visible ? classes.visible : ''}`}
+          >
+            {children}
+          </div>,
+          domRoot
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Typography/Typography.module.scss

@@ -0,0 +1,46 @@
+@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  font-style: normal;
+  font-variant: normal;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--default);
+  margin: 0 0 1rem 0;
+}
+
+.typography_style_ {
+  &h1 {
+    @include fontProperties(var(--font-family), var(--font-size-h1), 700, 1.2);
+  }
+
+  &h2 {
+    @include fontProperties(var(--font-family), var(--font-size-h2), 700, 1.42857);
+  }
+
+  &h3 {
+    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
+  }
+
+  &h4 {
+    @include fontProperties(var(--font-family), var(--font-size-h4), 700, 1.2);
+  }
+
+  &body {
+    @include fontProperties(var(--font-family), var(--font-size), 400, 1.5);
+  }
+
+  &body-bold {
+    @include fontProperties(var(--font-family), var(--font-size), 700, 1.5);
+  }
+
+  &sub-text {
+    @include fontProperties(var(--font-family), var(--font-size-sub), 400, 1.333);
+  }
+
+  &code {
+    @include fontProperties(var(--font-family-code), var(--font-size-code), 400, 1.5);
+  }
+}