@onewelcome/react-lib-components 5.0.0 → 5.2.0

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");
   });
 });

package/src/components/Stepper/Stepper.tsx

@@ -21,16 +21,25 @@ import classes from "./Stepper.module.scss";
 export interface Props extends ComponentPropsWithRef<"div"> {
   steps: StepProps[];
   direction: "horizontal" | "vertical";
+  textPosition?: "bottom" | "right";
 }
 
-export const Stepper = ({ steps, direction = "horizontal", ...rest }: Props) => {
+export const gapBetweenStepsInRem = 0.5;
+
+export const Stepper = ({
+  steps,
+  direction = "horizontal",
+  textPosition,
+  className,
+  ...rest
+}: Props) => {
+  const additionalClasses = [];
+  direction === "horizontal" && additionalClasses.push(classes["horizontal"]);
+  textPosition === "bottom" && additionalClasses.push(classes["text-bottom"]);
+  className && additionalClasses.push(className);
+
   return (
-    <div
-      {...rest}
-      className={`${classes["stepper"]} ${
-        direction === "horizontal" ? classes["horizontal"] : classes["vertical"]
-      }`}
-    >
+    <div {...rest} className={`${classes["stepper"]} ${additionalClasses.join(" ")}`}>
       {steps.map((step, index) => (
         <Step
           {...step}
@@ -38,6 +47,7 @@ export const Stepper = ({ steps, direction = "horizontal", ...rest }: Props) =>
           index={index}
           direction={direction}
           lastStep={index + 1 === steps.length}
+          textPosition={textPosition}
         />
       ))}
     </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -157,11 +157,11 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   useEffect(() => {
     if (!visible) return;
 
-    function escapePressHandler(event: KeyboardEvent) {
+    const escapePressHandler = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setVisible(false);
       }
-    }
+    };
 
     document.addEventListener("keyup", escapePressHandler);
 

package/src/components/Wizard/Wizard.tsx

@@ -47,6 +47,9 @@ const useStepChanging = (onStepChange: (stepNo: number) => void) => {
   }, [currentStepNo]);
 };
 
+/**
+ * @deprecated
+ */
 const WizardContent = ({ steps, mode, onStepChange, children }: Props) => {
   useSetWizardState(steps, mode);
   useStepChanging(onStepChange);

package/src/components/Wizard/WizardActions/WizardActions.tsx

@@ -61,6 +61,9 @@ const useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =
 const usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
   useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
 
+/**
+ * @deprecated
+ */
 export const WizardActions = ({ actions }: Props) => {
   const {
     state: { mode, steps, currentStepNo },

package/src/components/Wizard/WizardStateProvider.tsx

@@ -30,6 +30,9 @@ export interface Props {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated
+ */
 const WizardStateProvider = ({ children, initialState }: Props) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (

package/src/components/Wizard/WizardSteps/WizardSteps.tsx

@@ -48,4 +48,7 @@ const WizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
+/**
+ * @deprecated
+ */
 export const WizardSteps = React.forwardRef(WizardStepsComponent);

package/src/index.ts

@@ -54,6 +54,7 @@ export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";
 export type { Props as StatusIndicatorProps } from "./components/StatusIndicator/StatusIndicator";
 export { Stepper } from "./components/Stepper/Stepper";
 export type { Props as StepperProps } from "./components/Stepper/Stepper";
+export type { Props as StepProps } from "./components/Stepper/Step";
 export { Pagination } from "./components/Pagination/Pagination";
 export type {
   Props as PaginationProps,

package/src/mixins.module.scss

@@ -144,6 +144,7 @@
     outline: 2px solid var(--color-focus);
     outline-offset: 2px;
     border-radius: 1px;
+    z-index: 2;
   }
 
   &:active:not(.disabled),