@onewelcome/react-lib-components 0.1.1-alpha → 0.1.2-alpha

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} />);
+  });
+});

package/src/Typography/Typography.tsx

@@ -1,84 +1,82 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import classes from './Typography.module.scss';
 import { Spacing, useSpacing } from '../hooks/useSpacing';
 
 const validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'] as const;
 export type Variant = typeof validVariants[number];
 
-export interface Props extends HTMLAttributes<HTMLElement> {
+type Tags =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'p'
+  | 'div'
+  | 'code'
+  | 'span'
+  | 'sup'
+  | 'sub'
+  | 'strong'
+  | 'em'
+  | 'small'
+  | 'mark'
+  | 'del'
+  | 'ins'
+  | 'blockquote';
+
+/** I couldn't find anything on the internet that indicated that ComponentPropsWithRef can take multiple tags. Since the TagName can be many different things I have to use any here. Using a mix of tags (like the Tags type) will throw an error. */
+export interface Props extends ComponentPropsWithRef<any> {
   children: ReactNode;
   variant: Variant;
-  tag?:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'p'
-    | 'div'
-    | 'code'
-    | 'span'
-    | 'sup'
-    | 'sub'
-    | 'strong'
-    | 'em'
-    | 'small'
-    | 'mark'
-    | 'del'
-    | 'ins'
-    | 'blockquote';
+  tag?: Tags;
   spacing?: Spacing;
 }
 
-export const Typography = ({
-  children,
-  variant,
-  tag,
-  style,
-  spacing,
-  className = '',
-  ...rest
-}: Props) => {
-  if (!validVariants.includes(variant)) {
-    throw new Error(
-      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
-    );
-  }
+export const Typography = React.forwardRef<any, Props>(
+  ({ children, variant, tag, style, spacing, className = '', ...rest }: Props, ref) => {
+    if (!validVariants.includes(variant)) {
+      throw new Error(
+        `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
+      );
+    }
 
-  const styleWithSpacing = useSpacing(spacing, style);
+    const styleWithSpacing = useSpacing(spacing, style);
 
-  if (!tag) {
-    switch (variant) {
-      case 'h1':
-      case 'h2':
-      case 'h3':
-      case 'h4':
-      case 'code':
-        tag = variant;
-        break;
-      case 'body':
-        tag = 'p';
-        break;
-      case 'body-bold':
-        tag = 'p';
-        break;
-      case 'sub-text':
-        tag = 'span';
-        break;
-      default:
-        tag = 'div';
-        break;
+    if (!tag) {
+      switch (variant) {
+        case 'h1':
+        case 'h2':
+        case 'h3':
+        case 'h4':
+        case 'code':
+          tag = variant;
+          break;
+        case 'body':
+          tag = 'p';
+          break;
+        case 'body-bold':
+          tag = 'p';
+          break;
+        case 'sub-text':
+          tag = 'span';
+          break;
+        default:
+          tag = 'div';
+          break;
+      }
     }
-  }
 
-  let TagName = tag;
+    let TagName = tag;
 
-  return (
-    <TagName
-      {...rest}
-      style={styleWithSpacing}
-      className={`${classes['typography_style_' + variant]} ${className}`}
-    >
-      {children}
-    </TagName>
-  );
-};
+    return (
+      <TagName
+        {...rest}
+        ref={ref}
+        style={styleWithSpacing}
+        className={`${classes['typography_style_' + variant]} ${className}`}
+      >
+        {children}
+      </TagName>
+    );
+  }
+);

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { ComponentPropsWithRef, Fragment } from 'react';
 import classes from './BaseWizardSteps.module.scss';
 import readyclasses from '../../readyclasses.module.scss';
 import { Icon, Icons } from '../../Icon/Icon';
@@ -10,7 +10,7 @@ export interface Step {
   disabled?: boolean;
 }
 
-export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'onClick'> {
   steps: Step[];
   currentStepNo: number;
   onClick?: (stepNo: number) => void;
@@ -18,69 +18,74 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>
   stepScreenReaderLabel: string;
 }
 
-export const BaseWizardSteps = ({
-  steps,
-  currentStepNo,
-  onClick,
-  futureStepsClickable = false,
-  stepScreenReaderLabel,
-  ...restProps
-}: Props) => {
-  const getStepState = (stepNo: number): StepState => {
-    if (currentStepNo === stepNo) {
-      return 'current';
-    } else if (stepNo < currentStepNo) {
-      return 'finished';
-    }
-    return 'future';
-  };
+export const BaseWizardSteps = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      steps,
+      currentStepNo,
+      onClick,
+      futureStepsClickable = false,
+      stepScreenReaderLabel,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const getStepState = (stepNo: number): StepState => {
+      if (currentStepNo === stepNo) {
+        return 'current';
+      } else if (stepNo < currentStepNo) {
+        return 'finished';
+      }
+      return 'future';
+    };
+
+    const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
+      const stepNumberString = String(index + 1);
+      if (stepState === 'finished') {
+        return disabled ? null : <Icon className={classes['checkmark']} icon={Icons.Checkmark} />;
+      } else {
+        return (
+          <Fragment>
+            <span className={readyclasses['sr-only']}>{stepScreenReaderLabel} </span>
+            {stepNumberString}
+          </Fragment>
+        );
+      }
+    };
+
+    const generatedSteps = steps.map((step, index) => {
+      const stepState = getStepState(index);
+      const disabledStyleClassName = step.disabled ? classes['disabled'] : '';
+      const clickableClassName = futureStepsClickable ? classes['clickable'] : '';
 
-  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
-    const stepNumberString = String(index + 1);
-    if (stepState === 'finished') {
-      return disabled ? null : <Icon className={classes['checkmark']} icon={Icons.Checkmark} />;
-    } else {
       return (
-        <Fragment>
-          <span className={readyclasses['sr-only']}>{stepScreenReaderLabel} </span>
-          {stepNumberString}
-        </Fragment>
+        <button
+          key={step.label.toLowerCase().replace(/\s/, '-')}
+          disabled={
+            step.disabled ||
+            (stepState === 'future' && !futureStepsClickable) ||
+            stepState === 'current'
+          }
+          aria-current={stepState === 'current' ? 'step' : undefined}
+          onClick={() => onClick && onClick(index)}
+          className={`${classes['wizard-element']} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
+        >
+          <div className={classes['number-wrapper']}>
+            <span className={classes['number']}>
+              {getStepContent(stepState, index, step.disabled)}
+            </span>
+          </div>
+          <div className={classes['two-line-text-overflow']}>
+            <span className={classes['label']}>{step.label}</span>
+          </div>
+        </button>
       );
-    }
-  };
-
-  const generatedSteps = steps.map((step, index) => {
-    const stepState = getStepState(index);
-    const disabledStyleClassName = step.disabled ? classes['disabled'] : '';
-    const clickableClassName = futureStepsClickable ? classes['clickable'] : '';
+    });
 
     return (
-      <button
-        key={step.label.toLowerCase().replace(/\s/, '-')}
-        disabled={
-          step.disabled ||
-          (stepState === 'future' && !futureStepsClickable) ||
-          stepState === 'current'
-        }
-        aria-current={stepState === 'current' ? 'step' : undefined}
-        onClick={() => onClick && onClick(index)}
-        className={`${classes['wizard-element']} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
-      >
-        <div className={classes['number-wrapper']}>
-          <span className={classes['number']}>
-            {getStepContent(stepState, index, step.disabled)}
-          </span>
-        </div>
-        <div className={classes['two-line-text-overflow']}>
-          <span className={classes['label']}>{step.label}</span>
-        </div>
-      </button>
+      <div {...rest} ref={ref} className={classes['wizard']}>
+        {generatedSteps}
+      </div>
     );
-  });
-
-  return (
-    <div {...restProps} className={classes['wizard']}>
-      {generatedSteps}
-    </div>
-  );
-};
+  }
+);

package/src/Wizard/WizardSteps/WizardSteps.tsx

@@ -1,30 +1,33 @@
-import React, { useContext } from 'react';
+import React, { ComponentPropsWithRef, useContext } from 'react';
 import { WizardStateContext } from '../WizardStateProvider';
 import { BaseWizardSteps } from '../BaseWizardSteps/BaseWizardSteps';
 import { changeCurrentStepNo } from '../wizardStateReducer';
 
-export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
 }
 
-export const WizardSteps = ({ onStepClick, ...restProps }: Props) => {
-  const {
-    state: { currentStepNo, mode, stepScreenReaderLabel, steps },
-    dispatch,
-  } = useContext(WizardStateContext);
+export const WizardSteps = React.forwardRef<HTMLDivElement, Props>(
+  ({ onStepClick, ...rest }: Props, ref) => {
+    const {
+      state: { currentStepNo, mode, stepScreenReaderLabel, steps },
+      dispatch,
+    } = useContext(WizardStateContext);
 
-  const onClick = (selectedStepNo: number) => {
-    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
-  };
+    const onClick = (selectedStepNo: number) => {
+      onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
+    };
 
-  return (
-    <BaseWizardSteps
-      {...restProps}
-      onClick={onClick}
-      steps={steps}
-      currentStepNo={currentStepNo}
-      stepScreenReaderLabel={stepScreenReaderLabel}
-      futureStepsClickable={mode === 'edit'}
-    />
-  );
-};
+    return (
+      <BaseWizardSteps
+        {...rest}
+        ref={ref}
+        onClick={onClick}
+        steps={steps}
+        currentStepNo={currentStepNo}
+        stepScreenReaderLabel={stepScreenReaderLabel}
+        futureStepsClickable={mode === 'edit'}
+      />
+    );
+  }
+);