Hov 100 | Stepper Component Refactor

docs/docs/components/stepper.mdx

@@ -6,10 +6,13 @@ Here's a quick start guide to get started with the Stepper component.
 
 ### Importing Component
 
-import { Stepper, StepperStep, Card } from "@hover-design/react";
+import { Stepper, StepperStep, Card, Flex } from "@hover-design/react";
+import { StepperExample } from "@site/src/components/examples/StepperExample";
 
 export const StepperContainer = ({ children }) => (
-  <Card variant="shadow">{children}</Card>
+  <Flex alignItems="center" justifyContent="center">
+    <Card variant="shadow">{children}</Card>
+  </Flex>
 );
 
 ```jsx
@@ -24,15 +27,26 @@ import { Stepper, StepperStep } from "@hover-design/react";
 import { Stepper, StepperStep } from "@hover-design/react";
 
 const Demo = () => {
-  const [active, setActive] = useState(1);
-  const nextStep = () =>
-    setActive((current) => (current < 3 ? current + 1 : current));
-  const prevStep = () =>
-    setActive((current) => (current > 0 ? current - 1 : current));
+  const [activeStep, setActiveStep] = useState(1);
 
   return (
     <div>
-      <Stepper onStepClick={setActive} activeStep={active}>
+      <Stepper onStepClick={setActiveStep} activeStep={activeStep}>
+        <StepperStep>
+          <label>Step 1</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 2</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 3</label>
+        </StepperStep>
+      </Stepper>
+      <Stepper
+        onStepClick={setActiveStep}
+        activeStep={activeStep}
+        labelOrientation="vertical"
+      >
         <StepperStep>
           <label>Step 1</label>
         </StepperStep>
@@ -48,6 +62,67 @@ const Demo = () => {
 };
 ```
 
+<Flex alignItems="center" justifyContent="space-around" >
+<StepperContainer>
+  <StepperExample />
+</StepperContainer>
+
+<StepperContainer>
+  <StepperExample StepperProps={{ labelOrientation: "vertical" }} />
+</StepperContainer>
+</Flex>
+
+##### Stepper with orientation
+
+```jsx
+<div>
+  <Stepper
+    onStepClick={setActiveStep}
+    activeStep={activeStep}
+    orientation="vertical"
+  >
+    <StepperStep>
+      <label>Step 1</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 2</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 3</label>
+    </StepperStep>
+  </Stepper>
+
+  <Stepper
+    onStepClick={setActiveStep}
+    activeStep={activeStep}
+    orientation="vertical"
+    labelOrientation="vertical"
+  >
+    <StepperStep>
+      <label>Step 1</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 2</label>
+    </StepperStep>
+    <StepperStep>
+      <label>Step 3</label>
+    </StepperStep>
+  </Stepper>
+</div>
+```
+
+<Flex alignItems="center" justifyContent="space-around" >
+<StepperContainer>
+  <StepperExample StepperProps={{ orientation: "vertical" }} />
+</StepperContainer>
+
+<StepperContainer>
+  <StepperExample
+    StepperProps={{ orientation: "vertical", labelOrientation: "vertical" }}
+  />
+</StepperContainer>
+</Flex>
+
 ### Stepper Props Reference
 
 | Key              |              type               | Optional? |

docs/src/components/examples/StepperExample.tsx

@@ -0,0 +1,30 @@
+import {
+  IStepperProps,
+  IStepperStepProps,
+  Stepper,
+  StepperStep
+} from "@hover-design/react";
+
+import React, { useState } from "react";
+
+const StepperExample = ({
+  StepperProps,
+  StepperStepProps
+}: {
+  StepperProps?: Omit<IStepperProps, "ref">;
+  StepperStepProps?: Omit<IStepperStepProps, "ref">;
+}) => {
+  const [active, setActive] = useState(1);
+
+  return (
+    <div>
+      <Stepper activeStep={active} onStepClick={setActive} {...StepperProps}>
+        <StepperStep {...StepperStepProps}>Step 1</StepperStep>
+        <StepperStep {...StepperStepProps}>Step 2</StepperStep>
+        <StepperStep {...StepperStepProps}>Step 3</StepperStep>
+      </Stepper>
+    </div>
+  );
+};
+
+export { StepperExample };

packages/eslint-config/react.js

@@ -5,26 +5,25 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: "module",
-    ecmaFeatures: { jsx: true },
+    ecmaFeatures: { jsx: true }
   },
   settings: {
     react: {
-      version: "detect",
-    },
+      version: "detect"
+    }
   },
   env: {
     browser: true,
     amd: true,
-    node: true,
+    node: true
   },
   extends: [
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "./base",
+    "./base"
   ],
   rules: {
     "react/react-in-jsx-scope": OFF,
-    "jsx-a11y/accessible-emoji": ERROR,
-    "react/prop-types": OFF,
-  },
+    "react/prop-types": OFF
+  }
 };

packages/lib/src/components/Divider/Divider.tsx

@@ -58,7 +58,8 @@ export const Divider = ({
           : dividerContainerVertical
       }`}
     >
-      <hr
+      <div
+        role="separator"
         className={`${dividerClass} ${className}`}
         style={dividerStyles}
         {...nativeProps}

packages/lib/src/components/Stepper/Stepper.tsx

@@ -57,11 +57,11 @@ const StepperComponent: ForwardRefRenderFunction<
         dividerProps: item.props.dividerProps || dividerProps,
         className: item.props.className || className,
         style: item.props.style || style,
+        size: item.props.size || size,
         orientation,
         labelOrientation,
         onClick: () =>
-          allowClick && typeof onStepClick === "function" && onStepClick(index),
-        size
+          allowClick && typeof onStepClick === "function" && onStepClick(index)
       })
     );
     return acc;

packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx

@@ -1,17 +1,73 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { ForwardRefRenderFunction } from "react";
+import React, {
+  ForwardedRef,
+  ForwardRefRenderFunction,
+  ReactNode
+} from "react";
 import { Divider } from "../../Divider";
 import { Flex } from "../../Flex";
-import { eliminateUndefinedKeys } from "../../../utils/object-utils";
+import { eliminateUndefinedKeys, accessDefinedValues } from "../../../utils";
 import {
+  StepperBorderRadius,
+  StepperChildrenClass,
   StepperDividerWrapperClass,
+  StepperSizes,
   StepperStepIconClass,
   stepperThemeClass,
   stepperThemeVars
 } from "../stepper.styles.css";
 import { IStepperStepProps } from "../stepper.types";
 import { CheckIcon } from "../../_internal/Icons";
 
+const RenderDivider = ({
+  isLastChild,
+  StepperDividerWrapperStyle,
+  stepState,
+  dividerProps,
+  orientation
+}: Pick<
+  IStepperStepProps,
+  "isLastChild" | "stepState" | "dividerProps" | "orientation"
+> & { StepperDividerWrapperStyle: string }) => {
+  if (isLastChild) return <></>;
+  return (
+    <div className={StepperDividerWrapperStyle}>
+      <Divider
+        size="2px"
+        color={
+          stepState === "stepCompleted"
+            ? stepperThemeVars.completedStyles.backgroundColor
+            : stepperThemeVars.baseStyles.backgroundColor
+        }
+        {...dividerProps}
+        orientation={orientation}
+      />
+    </div>
+  );
+};
+
+const RenderIcon = ({
+  StepperStepIconStyle,
+  _Icon,
+  ref
+}: {
+  StepperStepIconStyle: string;
+  _Icon: () => ReactNode;
+  ref: ForwardedRef<HTMLDivElement>;
+}) => {
+  return (
+    <Flex
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      className={StepperStepIconStyle}
+      ref={ref}
+    >
+      {_Icon()}
+    </Flex>
+  );
+};
+
 const StepperStepComponent: ForwardRefRenderFunction<
   HTMLDivElement,
   IStepperStepProps
@@ -27,6 +83,7 @@ const StepperStepComponent: ForwardRefRenderFunction<
     completedStyles,
     progressStyles,
     dividerProps,
+    size,
     borderRadius,
     orientation,
     labelOrientation,
@@ -38,6 +95,14 @@ const StepperStepComponent: ForwardRefRenderFunction<
 ) => {
   const assignVariables = assignInlineVars(
     eliminateUndefinedKeys({
+      [stepperThemeVars.stepperStyleBorderRadius]: accessDefinedValues(
+        borderRadius,
+        StepperBorderRadius
+      ),
+      [stepperThemeVars.stepperStyleSize]: accessDefinedValues(
+        size,
+        StepperSizes
+      ),
       [stepperThemeVars.baseStyles.backgroundColor]:
         baseStyles?.backgroundColor,
       [stepperThemeVars.baseStyles.color]: baseStyles?.color,
@@ -69,38 +134,6 @@ const StepperStepComponent: ForwardRefRenderFunction<
     return icon;
   };
 
-  const renderIcon = () => {
-    return (
-      <Flex
-        display="inline-flex"
-        alignItems="center"
-        justifyContent="center"
-        className={StepperStepIconStyle}
-        ref={ref}
-      >
-        {_Icon()}
-      </Flex>
-    );
-  };
-
-  const renderDivider = () => {
-    if (isLastChild) return null;
-    return (
-      <div className={StepperDividerWrapperStyle}>
-        <Divider
-          size="2px"
-          color={
-            stepState === "stepCompleted"
-              ? stepperThemeVars.completedStyles.backgroundColor
-              : stepperThemeVars.baseStyles.backgroundColor
-          }
-          {...dividerProps}
-          orientation={orientation}
-        />
-      </div>
-    );
-  };
-
   return (
     <Flex
       display="inline-flex"
@@ -113,15 +146,25 @@ const StepperStepComponent: ForwardRefRenderFunction<
     >
       {orientation === labelOrientation ? (
         <>
-          {renderIcon()}
+          <RenderIcon
+            StepperStepIconStyle={StepperStepIconStyle}
+            _Icon={_Icon}
+            ref={ref}
+          />
           <Flex
             display="flex"
             alignItems="center"
             alignSelf="stretch"
             flexDirection={labelOrientation === "vertical" ? "column" : "row"}
           >
-            <div>{children}</div>
-            {renderDivider()}
+            <div className={StepperChildrenClass}>{children}</div>
+            <RenderDivider
+              isLastChild={isLastChild}
+              StepperDividerWrapperStyle={StepperDividerWrapperStyle}
+              stepState={stepState}
+              dividerProps={dividerProps}
+              orientation={orientation}
+            />
           </Flex>
         </>
       ) : (
@@ -132,10 +175,20 @@ const StepperStepComponent: ForwardRefRenderFunction<
             alignSelf="stretch"
             flexDirection={labelOrientation === "vertical" ? "row" : "column"}
           >
-            {renderIcon()}
-            {renderDivider()}
+            <RenderIcon
+              StepperStepIconStyle={StepperStepIconStyle}
+              _Icon={_Icon}
+              ref={ref}
+            />
+            <RenderDivider
+              isLastChild={isLastChild}
+              StepperDividerWrapperStyle={StepperDividerWrapperStyle}
+              stepState={stepState}
+              dividerProps={dividerProps}
+              orientation={orientation}
+            />
           </Flex>
-          <div>{children}</div>
+          <div className={StepperChildrenClass}>{children}</div>
         </>
       )}
     </Flex>