@@ -48,6 +62,67 @@ const Demo = () => {
};
```
+
+
+
+
+
+
+
+
+
+
+##### Stepper with orientation
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
### Stepper Props Reference
| Key | type | Optional? |
diff --git a/docs/src/components/examples/StepperExample.tsx b/docs/src/components/examples/StepperExample.tsx
new file mode 100644
index 0000000..17c43e0
--- /dev/null
+++ b/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;
+ StepperStepProps?: Omit;
+}) => {
+ const [active, setActive] = useState(1);
+
+ return (
+
+
+ Step 1
+ Step 2
+ Step 3
+
+
+ );
+};
+
+export { StepperExample };
diff --git a/packages/eslint-config/react.js b/packages/eslint-config/react.js
index 10189b2..80eac2f 100644
--- a/packages/eslint-config/react.js
+++ b/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
+ }
};
diff --git a/packages/lib/src/components/Divider/Divider.tsx b/packages/lib/src/components/Divider/Divider.tsx
index f6d5669..bd12576 100644
--- a/packages/lib/src/components/Divider/Divider.tsx
+++ b/packages/lib/src/components/Divider/Divider.tsx
@@ -58,7 +58,8 @@ export const Divider = ({
: dividerContainerVertical
}`}
>
-
- allowClick && typeof onStepClick === "function" && onStepClick(index),
- size
+ allowClick && typeof onStepClick === "function" && onStepClick(index)
})
);
return acc;
diff --git a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
index f5ecc14..c85be61 100644
--- a/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
+++ b/packages/lib/src/components/Stepper/StepperStep/StepperStep.tsx
@@ -1,10 +1,17 @@
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
@@ -12,6 +19,55 @@ import {
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 (
+
+ );
+};
+
+const RenderIcon = ({
+ StepperStepIconStyle,
+ _Icon,
+ ref
+}: {
+ StepperStepIconStyle: string;
+ _Icon: () => ReactNode;
+ ref: ForwardedRef;
+}) => {
+ return (
+
+ {_Icon()}
+
+ );
+};
+
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 (
-
- {_Icon()}
-
- );
- };
-
- const renderDivider = () => {
- if (isLastChild) return null;
- return (
-
- );
- };
-
return (
{orientation === labelOrientation ? (
<>
- {renderIcon()}
+
- {children}
- {renderDivider()}
+ {children}
+
) : (
@@ -132,10 +175,20 @@ const StepperStepComponent: ForwardRefRenderFunction<
alignSelf="stretch"
flexDirection={labelOrientation === "vertical" ? "row" : "column"}
>
- {renderIcon()}
- {renderDivider()}
+
+
- {children}
+ {children}
)}
diff --git a/packages/lib/src/components/Stepper/stepper.styles.css.ts b/packages/lib/src/components/Stepper/stepper.styles.css.ts
index 30864d7..362a686 100644
--- a/packages/lib/src/components/Stepper/stepper.styles.css.ts
+++ b/packages/lib/src/components/Stepper/stepper.styles.css.ts
@@ -1,8 +1,8 @@
-import { createTheme } from "@vanilla-extract/css";
+import { createTheme, style } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";
import { TStepperTheme } from "./stepper.types";
-export const stepperSizes: Record<
+export const StepperSizes: Record<
TStepperTheme[1]["stepperStyleSize"],
string
> = {
@@ -13,7 +13,7 @@ export const stepperSizes: Record<
xl: "48px"
};
-export const stepperBorderRadius: Record<
+export const StepperBorderRadius: Record<
TStepperTheme[1]["stepperStyleBorderRadius"],
string
> = {
@@ -26,8 +26,8 @@ export const stepperBorderRadius: Record<
export const [stepperThemeClass, stepperThemeVars]: TStepperTheme = createTheme(
{
- stepperStyleSize: stepperSizes.md,
- stepperStyleBorderRadius: stepperBorderRadius.xl,
+ stepperStyleSize: StepperSizes.md,
+ stepperStyleBorderRadius: StepperBorderRadius.xl,
baseStyles: {
color: "#495057",
backgroundColor: "#ebf0f5",
@@ -72,7 +72,8 @@ export const StepperStepIconClass = recipe({
height: stepperThemeVars.stepperStyleSize,
backgroundColor: stepperThemeVars.baseStyles.backgroundColor,
color: stepperThemeVars.baseStyles.color,
- borderRadius: stepperThemeVars.stepperStyleBorderRadius
+ borderRadius: stepperThemeVars.stepperStyleBorderRadius,
+ cursor: "pointer"
},
variants: {
stepState: {
@@ -94,3 +95,7 @@ export const StepperStepIconClass = recipe({
}
}
});
+
+export const StepperChildrenClass = style({
+ cursor: "pointer"
+});
diff --git a/packages/lib/src/components/Stepper/stepper.types.ts b/packages/lib/src/components/Stepper/stepper.types.ts
index fe81b07..c1103bfc 100644
--- a/packages/lib/src/components/Stepper/stepper.types.ts
+++ b/packages/lib/src/components/Stepper/stepper.types.ts
@@ -15,8 +15,8 @@ export interface IStepperProps
onStepClick?: (stepIndex: number) => void;
orientation?: "horizontal" | "vertical";
labelOrientation?: "horizontal" | "vertical";
- size?: string;
- borderRadius?: string;
+ size?: Partial;
+ borderRadius?: Partial;
baseStyles?: Partial;
completedStyles?: Partial;
progressStyles?: Partial;
@@ -37,7 +37,6 @@ export interface IStepperStepProps
Omit {
children?: ReactNode;
ref?: MutableRefObject;
- dividerProps?: DividerProps;
}
export type TStepperTheme = [