Feat:Updated component to support props orientation: horizontal/vertical and label position: top/bottom/left/right wrt step node

Author: ReshmaJoshy

.gitignore

@@ -8,6 +8,7 @@
 /build
 /dist
 .rpt2_cache
+coverage
 
 # misc
 .DS_Store

CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [email protected]. All
+reported by contacting the project team at [email protected]. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Francisco Hodge
+Copyright (c) 2023 Keyvalue Software Systems
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,76 @@
+<!-- Thank you for contributing to @keyvaluesystems/react-stepper! -->
+<!-- Before submitting a pull request, please review our contributing guidelines. -->
+
+​
+
+## Pull Request Checklist
+
+​
+
+- [ ] **Read the contributing guidelines.**
+- [ ] **Linked to an issue:** Fixes # (replace with the issue number, if applicable)
+- [ ] **Branch is up-to-date with the base branch:** `main`
+- [ ] **Changes pass tests locally:** `npm test` or `yarn test`
+- [ ] **Documentation has been updated, if necessary**
+- [ ] **Code follows the style guide of the project**
+      ​
+
+## Description
+
+​
+
+<!-- Provide a brief description of your changes. -->
+
+​
+
+## Screenshots (if applicable)
+
+​
+
+<!-- Add screenshots or GIFs to help explain your changes. -->
+
+​
+
+## Additional Notes
+
+​
+
+<!-- Any additional information you want to provide that is not covered by the checklist or description. -->
+
+​
+
+## Related Issues or PRs
+
+​
+
+<!-- If your pull request is related to any issue(s) or other pull request(s), mention them here. -->
+
+​
+
+## Reviewer Guidelines
+
+​
+
+<!-- Suggest specific areas of the codebase that you would like the reviewer to focus on. -->
+
+​
+
+## Testing Instructions
+
+​
+
+<!-- Provide step-by-step instructions on how to test your changes. -->
+
+​
+
+## Checklist for Reviewers
+
+​
+
+- [ ] Code follows project conventions and style
+- [ ] Changes do not introduce new warnings or errors
+- [ ] Unit tests cover the changes
+- [ ] Documentation is updated
+      ​
+
+## By submitting this pull request, I confirm that my contribution is made under the terms of the MIT License.

README.md

@@ -1,75 +1,72 @@
+# React Stepper
 
-# React Vertical Stepper
-<a href="https://www.npmjs.com/package/@keyvaluesystems/react-vertical-stepper"><img src="https://badgen.net/npm/v/@keyvaluesystems/react-vertical-stepper?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/@keyvaluesystems/react-vertical-stepper" ><img src="https://img.shields.io/npm/dw/@keyvaluesystems/react-vertical-stepper?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-vertical-stepper"><img src="https://github.com/KeyValueSoftwareSystems/react-vertical-stepper/actions/workflows/update-and-publish.yml/badge.svg" alt="" /></a>
+<a href="https://www.npmjs.com/package/@keyvaluesystems/react-stepper"><img src="https://badgen.net/npm/v/@keyvaluesystems/react-stepper?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/@keyvaluesystems/react-stepper" ><img src="https://img.shields.io/npm/dw/@keyvaluesystems/react-stepper?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-stepper"><img src="https://github.com/KeyValueSoftwareSystems/react-stepper/actions/workflows/update-and-publish.yml/badge.svg" alt="" /></a>
 
-<div align="center">
-<img src="./src/assets/vertical-stepper-example.png" alt="" width="269" height="416"/>
+<div style="display: flex; align-items: center;">
+<div style="padding-left: 30px">
+<img src="./src/assets/vertical-stepper-example.png" alt="" width="173" height="281"/>
 </div>
-
-A fully customizable ready to use vertical stepper UI package for React.
-Try tweaking a vertical stepper using this codesandbox link <a href="https://codesandbox.io/s/vertical-stepper-demo-x24q7u" >here</a>
+<div style="padding-left: 30px">
+<img src="./src/assets/horizontal-stepper-example.png" alt="" width="576" height="132"/>
+</div>
+</div>
+A fully customizable ready to use stepper UI package for React.
+Try tweaking a stepper using this codesandbox link <a href="https://codesandbox.io/p/sandbox/react-stepper-zp2jrs?file=%2Fsrc%2FApp.js" >here</a>
 
 ## Installation
 
+The easiest way to use react-stepper-ui-component is to install it from npm and build it into your app with Webpack.
+
 ```bash
-npm install react-vertical-stepper
+npm install  @keyvaluesystems/react-stepper
 ```
 
 You’ll need to install React separately since it isn't included in the package.
 
 ## Usage
 
-React Vertical Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
+React Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
 
 ```jsx
-import  React,  {  useState  }  from  'react';
-import Stepper from 'react-vertical-stepper';
-
-function  App()  {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  
-  stepsArray = [{
-      label: 'Step 1',
-      description: 'This is Step 1',
-      status: 'completed'
-    },{
-      label: 'Step 2',
-      description: 'This is Step 2',
-      status: 'visited'
-    },{
-      label: 'Step 3',
-      description: 'This is Step 3',
-      status: 'unvisited'
-  }];
-
-  return (
-    <Stepper
-      steps={stepsArray}
-      currentStepIndex={currentStepIndex}
-    />
-  );
-}
-
-export default App;
+<Stepper
+  steps={[
+    {
+      label: "Step 1",
+      description: "This is Step 1",
+      completed: true,
+    },
+    {
+      label: "Step 2",
+      description: "This is Step 2",
+      completed: false,
+    },
+    {
+      label: "Step 3",
+      description: "This is Step 3",
+      completed: false,
+    },
+  ]}
+  currentStepIndex={1}
+/>
 ```
-The `steps` array is an array of objects with basic keys like
 
--  `label` - a string that can be shown as step label title to your step indicator
--  `description` - a string that can be show as step description below the step label
--  `status` - can be provided with any of `visited`, `unvisited`, `completed`. Will be required if you are using default styles.
+The `steps` array is an array of objects with following keys:
 
->Note:  You can also add any other keys to the step object and other statuses like `skipped` for different customizations as per requirements
+- `label` - A mandatory string representing the label/title of the step.
+- `description` - Optional extra information or description for the step.
+- `completed` -  Boolean flag for indicating step completion status.
 
-You can customize the step indicator bubble with your own DOM element using the `renderBubble` prop
+You can customize each step node  with your own DOM element using the `renderNode` prop
 
 ```jsx
 <Stepper
   steps={stepsArray}
   currentStepIndex={currentStepIndex}
-  renderBubble={(step, stepIndex) => (<div key={stepIndex}>{step.label}</div>)}
+  renderNode={(step, stepIndex) => <div key={stepIndex}>{step.label}</div>}
 />
 ```
-The `step` param provided by the `renderBubble` callback is the same object you pass as array item in `steps` prop.
+
+The `step` param provided by the `renderNode` callback is the same object you pass as array item in `steps` prop.
 
 ## Props
 
@@ -90,31 +87,52 @@ Props that can be passed to the component are listed below:
       <td><code>undefined</code></td>
     </tr>
     <tr>
-      <td><code><b>currentIndex:</b> number</code></td>
+      <td><code><b>currentStepIndex:</b> number</code></td>
       <td>The index of current active step.</td>
       <td><code>0</code></td>
     </tr>
     <tr>
       <td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
       <td>
-        A step click handler that fires each time you click on a step, its label or its description.
+        A step click handler that fires each time you click on a step.
       </td>
       <td><code>undefined</code></td>
     </tr>
     <tr>
-      <td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
+      <td><code><b>renderNode?:</b> (step: object, stepIndex: number): ReactElement</code></td>
       <td>
-        A render function to customize your step indicator with your own element.
+        A render function to customize each step node with your own element.
       </td>
       <td><code>undefined</code></td>
     </tr>
     <tr>
-      <td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
+      <td><code><b>orientation?:</b> 'horizontal' | 'vertical'</code></td>
+      <td>
+        Determines the layout of the stepper.
+      </td>
+      <td><code>vertical</code></td>
+    </tr>
+    <tr>
+      <td><code><b>labelPosition?:</b> 'left' | 'right' | 'top' | 'bottom'</code></td>
       <td>
-        Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
+        Allows you to align step label and description with respect to its node
       </td>
       <td><code>right</code></td>
     </tr>
+    <tr>
+      <td><code><b>showDescriptionsForAllSteps</b> boolean</code></td>
+      <td>
+        A boolean prop specifying whether to show descriptions for all steps within the stepper.
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td><code><b>stepContent</b>(step: object, stepIndex: number): ReactElement</code></td>
+      <td>
+        Prop that allows for dynamic content display when the step is active
+      </td>
+      <td><code>undefined</code></td>
+    </tr>
     <tr>
       <td><code><b>styles?:</b> object</code></td>
       <td>
@@ -127,44 +145,43 @@ Props that can be passed to the component are listed below:
 
 ## Style Customizations
 
-All the default styles provided by this package are overridable using the `style` prop
-the below code shows all the overridable styles:
+All the default styles provided by this package can be overridden using the `style` prop
+the below code shows all the styles that can be overridden:
 
 ```jsx
-import React from 'react';
-import Stepper from 'react-vertical-stepper';
+import React from "react";
+import Stepper from "react-stepper";
 
 function App() {
-
- const stylesOverride = {
-   LabelTitle: (step, stepIndex) => ({...styles}),
-   ActiveLabelTitle: (step, stepIndex) => ({...styles}),
-   LabelDescription: (step, stepIndex) => ({...styles}),
-   ActiveLabelDescription: (step, stepIndex) => ({...styles}),
-   LineSeparator: (step, stepIndex) => ({...styles}),
-   InactiveLineSeparator: (step, stepIndex) => ({...styles}),
-   Bubble: (step, stepIndex) => ({...styles}),
-   ActiveBubble: (step, stepIndex) => ({...styles}),
-   InActiveBubble: (step, stepIndex) => ({...styles}),
- };
- return (
-   <Stepper
+  const stylesOverride = {
+    LabelTitle: (step, stepIndex) => ({ ...styles }),
+    ActiveLabelTitle: (step, stepIndex) => ({ ...styles }),
+    LabelDescription: (step, stepIndex) => ({ ...styles }),
+    ActiveLabelDescription: (step, stepIndex) => ({ ...styles }),
+    LineSeparator: (step, stepIndex) => ({ ...styles }),
+    InactiveLineSeparator: (step, stepIndex) => ({ ...styles }),
+    Node: (step, stepIndex) => ({ ...styles }),
+    ActiveNode: (step, stepIndex) => ({ ...styles }),
+    InActiveNode: (step, stepIndex) => ({ ...styles }),
+  };
+  return (
+    <Stepper
       steps={stepsArray}
       currentStepIndex={currentStepIndex}
       styles={stylesOverride}
-   />
- );
+    />
+  );
 }
 
 export default App;
 ```
-  
--  `LabelTitle` - overrides the step label style
--  `ActiveLabelTitle` - overrides the step label style of current active step
--  `LabelDescription` - overrides the step description style
--  `ActiveLabelDescription` - overrides the step description style of current active step
--  `LineSeparator` - overrides default step connector line styles
--  `InactiveLineSeparator` - overrides styles of step connector line after current active step
--  `Bubble` - overrides default styles of step indicator
--  `ActiveBubble` - overrides default styles of step indicator of current active step
--  `InActiveBubble` - overrides default styles of step indicator that has `unvisited` step status
+
+- `LabelTitle` - overrides the step label style
+- `ActiveLabelTitle` - overrides the step label style of current active step
+- `LabelDescription` - overrides the step description style
+- `ActiveLabelDescription` - overrides the step description style of current active step
+- `LineSeparator` - overrides default step connector line styles
+- `InactiveLineSeparator` - overrides styles of step connector line after current active step
+- `Node` - overrides default styles of step indicator
+- `ActiveNode` - overrides default styles of step indicator of current active step
+- `InActiveNode` - overrides default styles of step indicator that is not completed and not active

STYLE_GUIDELINES.md

@@ -0,0 +1,23 @@
+## SCSS Style Guidelines for @keyvaluesystems/react-stepper
+
+**Introduction**
+
+As an open-source project utilizing SCSS, @keyvaluesystems/react-stepper strives to maintain a consistent and well-structured codebase. These SCSS style guidelines serve as a reference for contributors, ensuring that their SCSS code adheres to established conventions and best practices.
+
+**SCSS Coding Conventions**
+
+- Organize SCSS files into a logical structure.
+- Use meaningful and descriptive names for variables, mixins, and classes.
+- Use SCSS nesting judiciously to organize complex styles.
+- Include comments to explain non-obvious logic and complex styles.
+- Utilize SCSS variables to define reusable values.
+- Employ a SCSS linting tool.
+- Should support devices with all resolutions
+- Follow CamelCase conventions for class names that concisely convey their purpose, enhancing code organization and readability
+- Adhere to the practice of reusing style classes to improve code organization and maintainability.
+
+**Documentation Practices**
+
+- Provide clear documentation for exported mixins and variables.
+- Include a README file within the SCSS directory if necessary.
+- Add comments to SCSS files.