@onewelcome/react-lib-components 5.1.0 → 5.2.0

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),