@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/src/Tiles/Tile.tsx

@@ -1,48 +1,82 @@
-import React, { HTMLProps, ReactElement } from 'react';
-import { Icon, Icons, Props as IconProps } from '../Icon/Icon';
+import React, { ComponentPropsWithRef, ReactElement, useState } from 'react';
+import { Icon, Icons } from '../Icon/Icon';
 import classes from './Tile.module.scss';
+import readyClasses from '../readyclasses.module.scss';
 
 import { Props as ContextMenuProps } from '../ContextMenu/ContextMenu';
+import { generateID } from '../util/helper';
+import { Props as IconButtonProps } from '../Button/IconButton';
 
 interface ImageProps {
   src: string;
-  alt: string;
 }
 
-export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'contextMenu'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   title: string;
   imageProps?: ImageProps;
-  iconProps?: IconProps;
+  enabled?: boolean;
   loading?: boolean;
-  menu?: ReactElement<ContextMenuProps>;
+  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
 }
 
-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.');
-  }
+export const Tile = React.forwardRef<HTMLDivElement, Props>(
+  ({ title, imageProps, enabled, className, loading, tileAction, ...rest }: Props, ref) => {
+    const [tileDescriptionID] = useState(generateID(20));
+
+    if (!title) {
+      throw new Error('Please make sure to pass a title prop to your Tile component.');
+    }
+
+    const statusMessage = () => {
+      if (enabled) {
+        return 'Status: enabled';
+      }
 
-  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>
-  );
-};
+      return 'Status: disabled';
+    };
+
+    return (
+      <article
+        {...rest}
+        tabIndex={0}
+        aria-labelledby={tileDescriptionID}
+        ref={ref}
+        className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}
+      >
+        <header style={{ justifyContent: enabled === undefined ? 'flex-end' : 'space-between' }}>
+          {enabled === true && (
+            <Icon
+              color="var(--success)"
+              icon={Icons.Checkmark}
+              className={`${classes['icon']} ${className ?? ''}`}
+            />
+          )}
+          {enabled === false && (
+            <Icon
+              color="var(--greyed-out)"
+              icon={Icons.Forbidden}
+              className={`${classes['icon']} ${className ?? ''}`}
+            />
+          )}
+          {enabled !== undefined && (
+            <span id={tileDescriptionID} className={readyClasses['sr-only']}>
+              {`${title}. ${statusMessage()}`}
+            </span>
+          )}
+          {tileAction ?? null}
+        </header>
+        <div className={classes['content']}>
+          {imageProps && imageProps.src.length > 0 && (
+            <figure className={classes['image']}>
+              {!loading && <img {...imageProps} alt="" />}
+            </figure>
+          )}
+          {(!imageProps || imageProps.src.length === 0) && (
+            <Icon className={classes['placeholder']} icon={Icons.Image} />
+          )}
+          <span className={classes['title']}>{title}</span>
+        </div>
+      </article>
+    );
+  }
+);

package/src/Tiles/Tiles.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tiles, Props } from './Tiles';
 import { Tile } from './Tile';
 import { render } from '@testing-library/react';
@@ -34,6 +34,12 @@ const contextMenu = (
   </ContextMenu>
 );
 
+const addToFavoriteButton = (
+  <IconButton title="Add to favorite">
+    <Icon icon={Icons.Star} />
+  </IconButton>
+);
+
 const defaultParams: Props = {
   children: [
     <Tile
@@ -42,10 +48,9 @@ const defaultParams: Props = {
       title="Tile1"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Checkmark }}
-      menu={contextMenu}
+      enabled={true}
+      tileAction={contextMenu}
     />,
     <Tile
       data-testid="tile"
@@ -53,10 +58,9 @@ const defaultParams: Props = {
       title="Tile2"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Forbidden }}
-      menu={contextMenu}
+      enabled={false}
+      tileAction={addToFavoriteButton}
     />,
     <Tile
       data-testid="tile"
@@ -64,10 +68,8 @@ const defaultParams: Props = {
       title="Tile3"
       imageProps={{
         src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
-        alt: 'OneWelcome logo',
       }}
-      iconProps={{ icon: Icons.Checkmark }}
-      menu={contextMenu}
+      tileAction={contextMenu}
     />,
   ],
   className: 'example-classname',
@@ -116,3 +118,29 @@ describe('loading state should be handled properly', () => {
     expect(tiles.querySelectorAll('.tile.loading').length).toBe(3);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tiles {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Tiles/Tiles.tsx

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

package/src/Tooltip/Tooltip.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tooltip, Props } from './Tooltip';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -70,3 +70,29 @@ describe('It opens the tooltip', () => {
     expect(tooltipHover).toHaveAttribute('aria-hidden', 'true');
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tooltip {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Tooltip/Tooltip.tsx

@@ -1,11 +1,18 @@
-import React, { HTMLProps, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  ComponentPropsWithRef,
+  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'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   label: string | ReactNode;
   children: string;
   placement?: Placement;
@@ -26,105 +33,110 @@ const defaultPosition: DefaultPosition = {
   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);
+export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      className,
+      placement = defaultPosition.placement,
+      offset = defaultPosition.offset,
+      transformOrigin = defaultPosition.transformOrigin,
+      domRoot = document.body,
+      label,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [identifier] = useState(generateID());
+    const [visible, setVisible] = useState(false);
 
-  const relativeElement = useRef<HTMLOrSVGElement>(null);
-  const elementToBePositioned = useRef<HTMLDivElement>(null);
+    const relativeElement = useRef<HTMLDivElement>(null);
+    const elementToBePositioned = useRef<HTMLDivElement>(null);
 
-  const { top, bottom, right, left, calculatePosition } = usePosition({
-    relativeElement: relativeElement,
-    elementToBePositioned: elementToBePositioned,
-    placement: placement,
-    offset: offset,
-    transformOrigin: transformOrigin,
-  });
+    const { top, bottom, right, left, calculatePosition } = usePosition({
+      relativeElement: relativeElement,
+      elementToBePositioned: elementToBePositioned,
+      placement: placement,
+      offset: offset,
+      transformOrigin: transformOrigin,
+    });
 
-  useEffect(() => {
-    if (!visible) return;
+    useEffect(() => {
+      if (!visible) return;
 
-    function escapePressHandler(event: KeyboardEvent) {
-      if (event.key === 'Escape') {
-        setVisible(false);
+      function escapePressHandler(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+          setVisible(false);
+        }
       }
-    }
 
-    document.addEventListener('keyup', escapePressHandler);
+      document.addEventListener('keyup', escapePressHandler);
 
-    return () => {
-      document.removeEventListener('keyup', escapePressHandler);
-    };
-  }, [visible]);
+      return () => {
+        document.removeEventListener('keyup', escapePressHandler);
+      };
+    }, [visible]);
 
-  useLayoutEffect(() => {
-    calculatePosition();
-  }, [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'],
-      });
-    }
+    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 (
+        <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
-        )}
+    return (
+      <div {...rest} ref={ref} 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>
-    </div>
-  );
-};
+    );
+  }
+);

package/src/Typography/Typography.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Typography, Props } from './Typography';
 import { render } from '@testing-library/react';
 import { Spacing } from '../hooks/useSpacing';
@@ -112,3 +112,29 @@ describe('Should override styling', () => {
     expect(typography.style).toHaveProperty('margin', '1rem 1rem 2rem 1rem');
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Typography variant="body" data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});