HOV-31 | Adds Stepper component

docs/docs/components/stepper.mdx

@@ -0,0 +1,124 @@
+# Stepper
+
+### Quick start
+
+Here's a quick start guide to get started with the Stepper component.
+
+### Importing Component
+
+import "@hover-design/react/dist/style.css";
+import { Stepper, StepperStep, Card } from "@hover-design/react";
+
+export const StepperContainer = ({ children }) => (
+  <Card variant="shadow">{children}</Card>
+);
+
+```jsx
+import { Stepper, StepperStep } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Simple Stepper
+
+```jsx
+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));
+
+  return (
+    <div>
+      <Stepper onStepClick={setActive} activeStep={active}>
+        <StepperStep>
+          <label>Step 1</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 2</label>
+        </StepperStep>
+        <StepperStep>
+          <label>Step 3</label>
+        </StepperStep>
+      </Stepper>
+    </div>
+  );
+};
+```
+
+### Stepper Props Reference
+
+| Key              |              type               | Optional? |
+| :--------------- | :-----------------------------: | --------: |
+| activeStep       |            `number`             |        No |
+| children         |        `React.ReactNode`        |        No |
+| onStepClick      |  `(stepIndex: number) => void`  |       Yes |
+| orientation      |     `verticle` `horizontal`     |       Yes |
+| labelOrientation |     `verticle` `horizontal`     |       Yes |
+| size             | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| borderRadius     | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| baseStyles       |       `baseStyles object`       |       Yes |
+| completedStyles  |    `completedStyles object`     |       Yes |
+| progressStyles   |     `progressStyles object`     |       Yes |
+| icon             |        `React.ReactNode`        |       Yes |
+| progressIcon     |        `React.ReactNode`        |       Yes |
+| completedIcon    |        `React.ReactNode`        |       Yes |
+| dividerProps     |     `dividerStyles object`      |       Yes |
+| ref              | `RefObject<HTMLButtonElement>;` |       Yes |
+
+### StepperStep Props Reference
+
+| Key              |              type               | Optional? |
+| :--------------- | :-----------------------------: | --------: |
+| children         |        `React.ReactNode`        |       Yes |
+| orientation      |     `verticle` `horizontal`     |       Yes |
+| labelOrientation |     `verticle` `horizontal`     |       Yes |
+| size             | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| borderRadius     | `xs` `sm` `md` `lg` `xl` string |       Yes |
+| baseStyles       |       `baseStyles object`       |       Yes |
+| completedStyles  |    `completedStyles object`     |       Yes |
+| progressStyles   |     `progressStyles object`     |       Yes |
+| icon             |        `React.ReactNode`        |       Yes |
+| progressIcon     |        `React.ReactNode`        |       Yes |
+| completedIcon    |        `React.ReactNode`        |       Yes |
+| dividerProps     |     `dividerStyles object`      |       Yes |
+| ref              | `RefObject<HTMLButtonElement>;` |       Yes |
+
+##### Customizing Stepper Base, Progress, Completed and Divider Styles.
+
+You can customize the base, progress, completed and divider styles of the Stepper by passing in the baseStyles, progressStyles, completedStyles and dividerProps props. Refer below Spec for this:
+
+baseStyles
+
+| Property        | Description | Default |
+| --------------- | ----------- | ------- |
+| backgroundColor | Background  | #ebf0f5 |
+| color           | Color       | #495057 |
+| border          | Border      | none    |
+
+progressStyles
+
+| Property        | Description | Default           |
+| --------------- | ----------- | ----------------- |
+| backgroundColor | Background  | #ebf0f5           |
+| color           | Color       | #495057           |
+| border          | Border      | 2px solid #2eb85c |
+
+completedStyles
+
+| Property        | Description | Default |
+| --------------- | ----------- | ------- |
+| backgroundColor | Background  | #2eb85c |
+| color           | Color       | #fff    |
+| border          | Border      | none    |
+
+dividerProps
+
+| Property |               Description               | Default Value | Optional ? |
+| :------- | :-------------------------------------: | :-----------: | ---------: |
+| type     | `solid` &#124; `dashed` &#124; `dotted` |    `solid`    |        Yes |
+| size     |                `string`                 |     `2px`     |        Yes |
+| color    |                `string`                 |   `#2eb85c`   |        Yes |

examples/vanilla-extract-react/package.json

@@ -7,13 +7,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hover-design/react": "*",
     "@vanilla-extract/css": "^1.6.8",
     "@vanilla-extract/vite-plugin": "^3.1.2",
     "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "vite-tsconfig-paths": "^3.3.17",
-    "@hover-design/react": "*"
+    "react-icons": "^4.4.0",
+    "vite-tsconfig-paths": "^3.3.17"
   },
   "devDependencies": {
     "@types/react": "^18.0.6",

lib/src/components/Divider/Divider.tsx

@@ -6,7 +6,7 @@ import {
   dividerThemeVar,
   dividerVertical,
   labelHorizontal,
-  labelVertical,
+  labelVertical
 } from "./divider.css";
 import { DividerProps } from "./divider.types";
 
@@ -21,27 +21,31 @@ export const Divider = ({
   className,
   style,
   size = "1px",
+  minHeight = "40px",
+  minWidth = "40px",
   ...nativeProps
 }: DividerProps) => {
   const dividerClass =
     orientation === "horizontal"
       ? dividerHorizontal({
-          type,
+          type
         })
       : dividerVertical({
-          type,
+          type
         });
   const labelClass =
     orientation === "horizontal"
       ? labelHorizontal({
-          labelPosition,
+          labelPosition
         })
       : labelVertical({
-          labelPosition,
+          labelPosition
         });
   const dividerStyles = assignInlineVars({
     [dividerThemeVar.dividerColor]: color,
     [dividerThemeVar.dividerSize]: size,
+    [dividerThemeVar.dividerStyleMinHeight]: minHeight,
+    [dividerThemeVar.dividerStyleMinWidth]: minWidth
   });
 
   Object.assign(dividerStyles, style);
@@ -65,7 +69,7 @@ export const Divider = ({
           style={assignInlineVars({
             [dividerThemeVar.labelColor]: labelColor,
             [dividerThemeVar.labelBackground]:
-              typeof label === "string" ? labelBackground : "transparent",
+              typeof label === "string" ? labelBackground : "transparent"
           })}
           className={`${labelClass}`} //If label has to be customized then user is supposed to add JSX element
         >

lib/src/components/Divider/divider.css.ts

@@ -8,24 +8,26 @@ export const [dividerThemeClass, dividerThemeVar]: DividerTheme = createTheme({
   labelColor: "#000",
   labelBackground: "#fff",
   dividerSize: "1px",
+  dividerStyleMinHeight: "40px",
+  dividerStyleMinWidth: "40px"
 });
 
 export const dividerContainerHorizontal = style({
   position: "relative",
   width: "100%",
-  height: "fit-content",
+  height: "fit-content"
 });
 
 export const dividerContainerVertical = style({
   position: "relative",
   height: "100%",
-  width: "fit-content",
+  width: "fit-content"
 });
 
 const dividerBaseStyles = style({
   position: "relative",
   background: "none",
-  backgroundPosition: "center",
+  backgroundPosition: "center"
 });
 
 export const dividerHorizontal = recipe({
@@ -35,7 +37,8 @@ export const dividerHorizontal = recipe({
       backgroundRepeat: "repeat-x",
       height: `${dividerThemeVar.dividerSize}`,
       width: "100%",
-    },
+      minWidth: dividerThemeVar.dividerStyleMinWidth
+    }
   ],
 
   variants: {
@@ -48,7 +51,7 @@ export const dividerHorizontal = recipe({
         )`,
         backgroundSize: `${calc.multiply(dividerThemeVar.dividerSize, 5)} ${
           dividerThemeVar.dividerSize
-        }`,
+        }`
       },
       dotted: {
         backgroundImage: `linear-gradient(
@@ -58,13 +61,13 @@ export const dividerHorizontal = recipe({
         )`,
         backgroundSize: `${calc.multiply(dividerThemeVar.dividerSize, 3)} ${
           dividerThemeVar.dividerSize
-        }`,
+        }`
       },
       solid: {
-        background: dividerThemeVar.dividerColor,
-      },
-    },
-  },
+        background: dividerThemeVar.dividerColor
+      }
+    }
+  }
 });
 
 export const dividerVertical = recipe({
@@ -74,7 +77,8 @@ export const dividerVertical = recipe({
       backgroundRepeat: "repeat-y",
       height: "100%",
       width: `${dividerThemeVar.dividerSize}`,
-    },
+      minHeight: dividerThemeVar.dividerStyleMinHeight
+    }
   ],
 
   variants: {
@@ -88,7 +92,7 @@ export const dividerVertical = recipe({
         backgroundSize: `${dividerThemeVar.dividerSize} ${calc.multiply(
           dividerThemeVar.dividerSize,
           5
-        )}`,
+        )}`
       },
       dotted: {
         backgroundImage: `linear-gradient(
@@ -99,20 +103,20 @@ export const dividerVertical = recipe({
         backgroundSize: `${dividerThemeVar.dividerSize} ${calc.multiply(
           dividerThemeVar.dividerSize,
           3
-        )}`,
+        )}`
       },
       solid: {
-        background: dividerThemeVar.dividerColor,
-      },
-    },
-  },
+        background: dividerThemeVar.dividerColor
+      }
+    }
+  }
 });
 
 const labelBaseStyles = style({
   background: dividerThemeVar.labelBackground,
   color: dividerThemeVar.labelColor,
   padding: "4px 8px",
-  position: "absolute",
+  position: "absolute"
 });
 
 export const labelHorizontal = recipe({
@@ -121,18 +125,18 @@ export const labelHorizontal = recipe({
     labelPosition: {
       start: {
         left: 0,
-        right: "auto",
+        right: "auto"
       },
       center: {
         left: "50%",
-        transform: "translate(-50%,-50%)",
+        transform: "translate(-50%,-50%)"
       },
       end: {
         left: "auto",
-        right: 0,
-      },
-    },
-  },
+        right: 0
+      }
+    }
+  }
 });
 
 export const labelVertical = recipe({
@@ -141,16 +145,16 @@ export const labelVertical = recipe({
     labelPosition: {
       start: {
         top: 0,
-        bottom: "auto",
+        bottom: "auto"
       },
       center: {
         top: "50%",
-        transform: "translate(-50%,-50%)",
+        transform: "translate(-50%,-50%)"
       },
       end: {
         top: "auto",
-        bottom: 0,
-      },
-    },
-  },
+        bottom: 0
+      }
+    }
+  }
 });

lib/src/components/Divider/divider.types.ts

@@ -7,6 +7,8 @@ export type DividerProps = JSX.IntrinsicElements["div"] & {
   labelColor?: string;
   labelBackground?: string;
   labelPosition?: "start" | "end" | "center";
+  minHeight?: string;
+  minWidth?: string;
 };
 
 export type DividerTheme = [
@@ -16,5 +18,7 @@ export type DividerTheme = [
     labelColor: string;
     labelBackground: string;
     dividerSize: string;
+    dividerStyleMinHeight: string;
+    dividerStyleMinWidth: string;
   }
 ];

lib/src/components/Divider/index.ts

@@ -1,2 +1,3 @@
-export * from "./Divider"
-export * from "./divider.css"
+export * from "./Divider";
+export * from "./divider.css";
+export * from "./divider.types";

lib/src/components/Flex/Flex.tsx

@@ -9,6 +9,7 @@ export const FlexComponent: ForwardRefRenderFunction<
   {
     alignContent = "normal",
     alignItems = "flex-start",
+    alignSelf = "auto",
     flexDirection = "row",
     flexWrap = "nowrap",
     justifyContent = "normal",
@@ -27,6 +28,7 @@ export const FlexComponent: ForwardRefRenderFunction<
     display,
     alignContent,
     alignItems,
+    alignSelf,
     flexDirection,
     flexWrap,
     justifyContent,