@onewelcome/react-lib-components 5.1.0 → 5.2.0

package/src/components/Notifications/BaseModal/BaseModal.test.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef } from "react";
 import { BaseModal, Props } from "./BaseModal";
 import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const classNames = ["class11", "class12"];
 const containerClassNames = ["class21", "class22"];
@@ -36,7 +37,17 @@ const createBaseModal = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const queries = render(
+    <BaseModal {...parameters} data-testid="BaseModal">
+      <button>Button 1</button>
+      <button>Button 2</button>
+      <button>Button 3</button>
+      <span>{defaultParams.children}</span>
+      <button>Button 4</button>
+      <button>Button 5</button>
+      <button>Button 6</button>
+    </BaseModal>
+  );
   const slideInModal = queries.getByTestId("BaseModal");
 
   return {
@@ -130,6 +141,30 @@ describe("BaseModal", () => {
     fireEvent.keyDown(modal, { key: "Escape" });
     expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
+
+  it("should repeat focus back to the first button when tabbing through the modal", async () => {
+    const { getByText } = createBaseModal();
+
+    const firstButton = getByText("Button 1");
+    const lastButton = getByText("Button 6");
+
+    await act(() => {
+      firstButton.focus();
+    });
+
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    expect(firstButton).toHaveFocus();
+
+    await userEvent.tab({ shift: true });
+
+    expect(lastButton).toHaveFocus();
+  });
 });
 
 describe("ref should work", () => {

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -19,12 +19,15 @@ import React, {
   ComponentPropsWithRef,
   useEffect,
   useRef,
-  ReactElement
+  ReactElement,
+  RefObject,
+  createRef
 } from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
+import { useRepeatFocus } from "./useRepeatFocus";
 
 const SCROLL_PROPERTY_NAME = "overflow";
 const SCROLL_PROPERTY_VALUE = "hidden";
@@ -90,6 +93,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 ) => {
   useSetBodyScroll(open);
   const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -99,9 +103,11 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  useRepeatFocus(modalRef);
+
   useEffect(() => {
     if (open) {
-      wrappingDivRef.current?.focus();
+      modalRef.current?.focus();
     }
   }, [open]);
 
@@ -122,7 +128,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       {createPortal(
         <div
           {...rest}
-          ref={ref}
+          ref={modalRef}
           id={id}
           className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
           role="dialog"
@@ -137,6 +143,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         >
           <div
             {...backdropProps}
+            aria-hidden={true}
             className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
             onClick={handleBackdropClick}
           ></div>

package/src/components/Notifications/BaseModal/useRepeatFocus.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { RefObject, useEffect } from "react";
+
+/**
+ * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,
+ * the focus will be repeated and the user will not lose their entire focusable element to an element in the background
+ * that is being blocked by the modal.
+ */
+
+export const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {
+  const getFocusableElement = (
+    element: HTMLElement,
+    position: "first" | "last"
+  ): HTMLElement | null => {
+    const focusableSelectors =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);
+
+    if (position === "first") {
+      return focusableElements[0] || null;
+    } else if (position === "last") {
+      return focusableElements[focusableElements.length - 1] || null;
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    if (!ref.current || !open) return;
+
+    const lastFocusableElement = getFocusableElement(ref.current, "last");
+    const firstFocusableElement = getFocusableElement(ref.current, "first");
+
+    if (!lastFocusableElement || !firstFocusableElement) return;
+
+    const handleTabKeyPress = (event: KeyboardEvent) => {
+      if (event.key !== "Tab") return;
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          event.preventDefault();
+          lastFocusableElement?.focus();
+        }
+      } else if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement?.focus();
+      }
+    };
+
+    lastFocusableElement.addEventListener("keydown", handleTabKeyPress);
+    firstFocusableElement.addEventListener("keydown", handleTabKeyPress);
+
+    return () => {
+      lastFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+      firstFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+    };
+  }, [ref, open]);
+};

package/src/components/Stepper/Step.module.scss

@@ -17,7 +17,7 @@
 @use "../../mixins.module.scss";
 
 @mixin stepState($status: "waiting") {
-  & .step-content .step {
+  & .step {
     color: var(--stepper-default-text-color);
 
     @if $status == "current" {
@@ -34,16 +34,14 @@
     }
   }
 
-  &:not(:last-child)::after {
-    @if $status == "current" or $status == "error" {
-      border-color: var(--stepper-line-color);
-    } @else if $status == "done" {
-      border-color: var(--stepper-line-bold-color);
+  & .stepper-line {
+    @if $status == "done" {
+      background-color: var(--stepper-line-bold-color);
     }
   }
 
   &:hover {
-    & .step-content .step {
+    & .step {
       @if $status == "current" {
         border-color: var(--stepper-current-hover-color);
         background-color: var(--stepper-current-hover-color);
@@ -61,7 +59,7 @@
   }
 
   &:active {
-    & .step-content .step {
+    & .step {
       @if $status == "current" {
         border-color: var(--stepper-current-active-color);
         background-color: var(--stepper-current-active-color);
@@ -78,10 +76,11 @@
     }
   }
 
-  &:disabled {
+  &.disabled {
     cursor: not-allowed;
 
-    & .step-content .step {
+    & .step {
+      cursor: not-allowed;
       @if $status == "current" {
         border-color: var(--stepper-current-disabled-color);
         background-color: var(--stepper-current-disabled-color);
@@ -97,7 +96,8 @@
       }
     }
 
-    & .step-content .label {
+    & .label {
+      cursor: not-allowed;
       color: var(--stepper-label-disabled-color);
 
       & .caption {
@@ -108,8 +108,8 @@
         );
       }
     }
-    &:not(:last-child)::after {
-      border-color: if(
+    & .stepper-line {
+      background-color: if(
         $status == "done",
         var(--stepper-line-bold-disabled-color),
         var(--stepper-line-disabled-color)
@@ -119,57 +119,110 @@
 }
 
 .step-wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
+  pointer-events: none; //turn off pointer-events beside .label and .step where we turn it on
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 1.875rem 1fr;
+  grid-template-rows: auto 1fr;
   background-color: transparent;
   border: 0;
   padding: 0;
   margin: 0;
-  cursor: pointer;
 
-  @include mixins.focusVisibleOutline($outlineOffset: 0px);
+  &.horizontal {
+    grid-template-columns: 1.875rem auto 1fr;
+    grid-template-rows: auto 1fr;
+    align-items: start;
+    width: 100%;
 
-  .step-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+    .stepper-line {
+      background-color: var(--stepper-line-color);
+      min-height: auto;
+      height: 2px;
+      width: 100%;
+      min-width: 1rem;
+      border-radius: 2px;
+      margin-top: 0.8125rem;
+    }
 
-  &:last-child {
-    flex-grow: 0;
-    flex-basis: fit-content;
-  }
+    .label {
+      margin-top: 0.25rem;
+    }
 
-  &:not(:last-child)::after {
-    content: "";
-    margin: 0 0.5rem;
-    flex-grow: 1;
-    min-width: 0.5rem;
-    border-bottom: 2px solid var(--stepper-line-color);
-  }
+    &.text-bottom {
+      grid-template-columns: 5rem 1fr;
+      gap: 0;
+
+      .step {
+        justify-self: center;
+      }
+
+      .label {
+        justify-self: center;
+        text-align: center;
+        grid-column-start: 1;
+        grid-column-end: 1;
+        grid-row-start: 2;
+        grid-row-end: 2;
+      }
+
+      .stepper-line {
+        margin-right: -1.125rem;
+        margin-left: -1.125rem;
+        width: calc(100% + 2.25rem);
+      }
+
+      .label-inner-wrapper {
+        display: inline;
+      }
+
+      &.last-step {
+        justify-content: center;
+        grid-template-columns: 5rem;
+        grid-template-rows: auto 1fr;
+        flex: 1 0 5rem;
+        display: grid;
 
-  &.vertical {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+        .label {
+          width: auto;
+        }
+      }
+    }
+
+    &.last-step {
+      display: flex;
+      width: max-content;
 
-    &:last-child {
-      flex-grow: 0;
-      flex-basis: fit-content;
+      .label {
+        width: max-content;
+      }
     }
 
-    &:not(:last-child)::after {
-      content: "";
-      border-bottom: none;
-      margin: 0.5rem 0 0.5rem 1.6875rem;
-      border-left: 2px solid var(--stepper-line-color);
-      min-height: 0.5rem;
-      height: 100%;
-      width: 100%;
+    .label-inner-wrapper {
+      display: flex;
     }
+
+    .stepper-line-extender {
+      display: block;
+      flex: 1;
+      margin-left: 0.4375rem;
+      margin-right: -1rem;
+      margin-top: 0.5625rem;
+    }
+  }
+
+  .stepper-line {
+    pointer-events: none;
+    justify-self: center;
+    background-color: var(--stepper-line-color);
+    min-height: 0.375rem; //on design pixes used in rounding does not count, so that's why it's not 4px but 6px
+    height: 100%;
+    width: 2px;
+    border-radius: 2px;
+  }
+
+  &.vertical.has-caption .stepper-line {
+    min-height: 1.375rem; //on design pixes used in rounding does not count, so that's why it's not 20px but 22px
   }
 
   &.waiting {
@@ -179,7 +232,7 @@
   &.current {
     @include stepState($status: "current");
 
-    & .step-content .label {
+    & .label {
       font-weight: 700;
       & .caption {
         font-weight: 400;
@@ -194,13 +247,15 @@
   &.error {
     @include stepState($status: "error");
 
-    & .step-content .label .caption {
+    & .label .caption {
       color: var(--stepper-caption-error-color);
     }
   }
 }
 
 .step {
+  pointer-events: visible;
+  cursor: pointer;
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -216,16 +271,31 @@
 }
 
 .label {
-  flex-shrink: 0;
-  position: relative;
-  margin-left: 0.5rem;
+  pointer-events: visible;
+  cursor: pointer;
+  grid-column-start: 2;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: span 2;
+  align-self: start;
+
+  margin: 0.25rem 0 0;
+  padding: 0;
+  background-color: initial;
+  border: none;
+  text-align: left;
   color: var(--stepper-label-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-form-label);
+  line-height: 1.25rem;
+
+  @include mixins.focusVisibleOutline($outlineOffset: "1px");
 }
 
 .caption {
-  position: absolute;
-  top: 1.25rem;
-  left: 0;
+  display: block;
   color: var(--stepper-caption-color);
+  font-family: var(--font-family);
   font-size: 0.75rem;
+  line-height: 1rem;
 }

package/src/components/Stepper/Step.tsx

@@ -14,19 +14,14 @@
  *    limitations under the License.
  */
 
-import React, {
-  ComponentPropsWithRef,
-  ForwardRefRenderFunction,
-  useLayoutEffect,
-  useRef,
-  useState
-} from "react";
+import React, { CSSProperties, ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 import { Icon, Icons } from "../Icon/Icon";
 import classes from "./Step.module.scss";
+import { gapBetweenStepsInRem } from "./Stepper";
 
 export type StepStatus = "waiting" | "current" | "done" | "error";
 
-export interface Props extends ComponentPropsWithRef<"button"> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
   status: StepStatus;
   label: string;
   caption?: string;
@@ -34,6 +29,8 @@ export interface Props extends ComponentPropsWithRef<"button"> {
   lastStep?: boolean;
   disabled?: boolean;
   direction?: "horizontal" | "vertical";
+  textPosition?: "bottom" | "right";
+  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 }
 
 const getStepContent = (index: number, status: StepStatus) => {
@@ -49,63 +46,69 @@ const getStepContent = (index: number, status: StepStatus) => {
   }
 };
 
-export const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { label, caption, status, index, direction, disabled, lastStep, ...rest }: Props,
+const getStepMaxWidth = (isHorizontal: boolean, lastStep: boolean, index: number) => {
+  if (isHorizontal && lastStep) {
+    const percentage = 100 / (index + 1);
+    const gapSize = index * gapBetweenStepsInRem;
+    return `calc(${percentage}% - ${gapSize}rem)`;
+  }
+};
+
+export const StepComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    label,
+    caption,
+    status,
+    index,
+    direction,
+    disabled,
+    lastStep,
+    onClick,
+    textPosition,
+    ...rest
+  }: Props,
   ref
 ) => {
   const stepIndex = index ?? 0;
   const additionalClasses = [classes[status]];
-  const [stepContentHeight, setStepContentHeight] = useState<number>(28);
-  const [stepContentWidth, setStepContentWidth] = useState<number>(28);
-  direction === "vertical" && additionalClasses.push(classes["vertical"]);
-
-  const captionRef = useRef<HTMLSpanElement>(null);
-  const labelRef = useRef<HTMLSpanElement>(null);
-  const stepContentRef = useRef<HTMLDivElement>(null);
+  const additionalStyles: CSSProperties = {};
+  const isHorizontal = direction === "horizontal";
+  const isTextBottom = textPosition === "bottom";
+  const hasCaption = !!caption;
 
-  useLayoutEffect(() => {
-    if (captionRef.current && stepContentRef.current && labelRef.current && lastStep) {
-      if (direction == "vertical") {
-        const capionHeight = captionRef.current.getBoundingClientRect().height;
-        const stepContentHeight = stepContentRef.current.getBoundingClientRect().height;
-        setStepContentHeight(capionHeight + stepContentHeight);
-      }
+  additionalClasses.push(isHorizontal ? classes["horizontal"] : classes["vertical"]);
+  disabled && additionalClasses.push(classes["disabled"]);
+  isTextBottom && additionalClasses.push(classes["text-bottom"]);
+  lastStep && additionalClasses.push(classes["last-step"]);
+  hasCaption && additionalClasses.push(classes["has-caption"]);
 
-      if (direction == "horizontal") {
-        const captionWidth = captionRef.current.getBoundingClientRect().width;
-        const labelWidth = labelRef.current.getBoundingClientRect().width;
-        setStepContentWidth(captionWidth > labelWidth ? captionWidth + 36 : labelWidth + 36);
-      }
-    }
-  }, []);
+  additionalStyles["maxWidth"] = getStepMaxWidth(isHorizontal, !!lastStep, index!);
 
   return (
-    <button
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      aria-current={status === "current" ? "step" : undefined}
+    <div
+      style={additionalStyles}
       className={`${classes["step-wrapper"]} ${additionalClasses.join(" ")}`}
+      {...rest}
     >
-      <div
-        style={{
-          height: lastStep && direction == "vertical" ? `${stepContentHeight}px` : "auto",
-          width: lastStep && direction == "horizontal" ? `${stepContentWidth}px` : "auto"
-        }}
-      >
-        <div ref={stepContentRef} className={classes["step-content"]}>
-          <div aria-hidden className={classes["step"]}>
-            {getStepContent(stepIndex, status)}
-          </div>
-          <span ref={labelRef} className={classes["label"]}>
-            {label}
-            <span ref={captionRef} className={classes["caption"]}>
-              {caption}
-            </span>
-          </span>
-        </div>
+      <div aria-hidden className={classes["step"]} onClick={onClick}>
+        {getStepContent(stepIndex, status)}
       </div>
-    </button>
+      <button
+        aria-current={status === "current" ? "step" : undefined}
+        className={classes["label"]}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <span className={classes["label-inner-wrapper"]}>
+          {label}{" "}
+          {!lastStep && isHorizontal && !isTextBottom && (
+            <div className={`${classes["stepper-line"]} ${classes["stepper-line-extender"]}`}></div>
+          )}
+        </span>
+        <span className={classes["caption"]}>{caption}</span>
+      </button>
+      {!lastStep && <div className={classes["stepper-line"]}></div>}
+    </div>
   );
 };
 

package/src/components/Stepper/Stepper.module.scss

@@ -1,13 +1,17 @@
 .stepper {
-  width: 100%;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  width: auto;
+  flex-direction: column;
 
-  &.vertical {
-    flex-direction: column;
-    justify-content: flex-start;
-    height: 100%;
-    width: auto;
+  &.horizontal {
+    justify-content: center;
+    flex-direction: row;
+    width: 100%;
+
+    &.text-bottom {
+      gap: 0;
+    }
   }
 }

package/src/components/Stepper/Stepper.test.tsx

@@ -62,13 +62,13 @@ describe("<Stepper/> should render", () => {
   });
 
   it("should render the horizontal stepper", () => {
-    const { StepperComponent, getAllByText } = createStepper(params => ({
+    const { StepperComponent } = createStepper(params => ({
       ...params,
       direction: "horizontal"
     }));
 
     expect(StepperComponent).toBeDefined();
-    expect(StepperComponent.classList.contains("horizontal")).toBe(true);
+    expect(StepperComponent.classList).toContain("horizontal");
   });
 
   it("should render the vertical stepper", () => {
@@ -78,6 +78,6 @@ describe("<Stepper/> should render", () => {
     }));
 
     expect(StepperComponent).toBeDefined();
-    expect(StepperComponent.classList.contains("vertical")).toBe(true);
+    expect(StepperComponent.classList).not.toContain("horizontal");
   });
 });