Merge pull request #5 from KeyValueSoftwareSystems/dev

Read me file updation and Label render logic change

Author: GokulSNath

.github/workflows/test-and-build.yml

@@ -1,10 +1,7 @@
 name: Test Suite
 
 on:
-    push:
-      branches: [main]
     pull_request:
-      # The branches below must be a subset of the branches above
       branches: [main]
 
 jobs:
@@ -17,20 +14,20 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
         with:
-          ref: ${{ if github.event_name == 'pull_request' }}${{ github.event.pull_request.head.sha }}${{ else }}${{ github.ref }}${{ endif }}
+          ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 0
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
 
-      - name: Linting
-        run: npm run eslint
-
       - name: Install dependencies
         run: npm install
 
+      - name: Linting
+        run: npm run eslint
+
       - name: Run tests
         run: npm run test
 

README.md

@@ -1,14 +1,17 @@
 
 # React Vertical Stepper
+<a href="https://www.npmjs.com/package/react-vertical-stepper"><img src="https://badgen.net/npm/v/react-vertical-stepper?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/react-vertical-stepper" ><img src="https://img.shields.io/npm/dw/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/@hodgef/ts-library-boilerplate-basic"><img src="https://badgen.net/npm/v/@hodgef/ts-library-boilerplate-basic?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/ts-library-boilerplate"><img src="https://img.shields.io/github/last-commit/hodgef/ts-library-boilerplate" alt="latest commit"></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"><img alt="Build Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Build/badge.svg?color=green" /></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"> <img alt="Publish Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Publish/badge.svg?color=green" /></a> -->
+<div align="center">
+<img src="./src/assets/vertical-stepper-example.png" alt="" width="269" height="416"/>
+</div>
 
->A fully customizable ready to use vertical stepper UI package.
+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>
 
 ## Installation
 
-```
+```bash
 npm install react-vertical-stepper
 ```
 
@@ -17,67 +20,56 @@ 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:
-```
+
+```jsx
+import  React,  {  useState  }  from  'react';
 import Stepper from 'react-vertical-stepper';
 
-<Stepper
-  steps={stepsArray}
-  currentStepIndex={currentStepIndex}
-/>
+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;
 ```
-Here the steps array is an array of objects with basic keys like
+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.
 
-> You can also add other keys to the step object and other statuses like `skipped` for different customizations as per requirements
-
-An example for steps array is shown below:
+>Note:  You can also add any other keys to the step object and other statuses like `skipped` for different customizations as per requirements
 
-```
-stepsArray = [
-  {
-    label: 'Step 1',
-    description: 'This is Step 1',
-    status: 'visited'
-  },
-  {
-    label: 'Step 2',
-    description: 'This is Step 2',
-    status: 'unvisited'
-  },
-  {
-    label: 'Step 3',
-    description: 'This is Step 3',
-    status: 'completed'
-  }
-];
-```
-You can use `onStepClick` event handler which fires each time you click on a step or its label or description
-```
-const [activeStepIndex, setActiveStepIndex] = useState(0);
-
-const handleStepClick = (step, stepIndex) => {
-  setActiveStepIndex(stepIndex);
-};
+You can customize the step indicator bubble with your own DOM element using the `renderBubble` prop
 
-<Stepper
-  steps={stepsArray}
-  currentStepIndex={activeStepIndex}
-  onStepClick={handleStepClick}
-/>
-```
-You can also customize the step indicator bubble with your own DOM element using the `renderBubble` prop
-```
+```jsx
 <Stepper
   steps={stepsArray}
   currentStepIndex={currentStepIndex}
   renderBubble={(step, stepIndex) => (<div key={stepIndex}>{step.label}</div>)}
 />
 ```
-
->Note: 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 `renderBubble` callback is the same object you pass as array item in `steps` prop.
 
 ## Props
 
@@ -94,17 +86,13 @@ Props that can be passed to the component are listed below:
   <tbody>
     <tr>
       <td><code><b>steps:</b> object[]</code></td>
-      <td>
-        An array of step objects to render.
-      </td>
+      <td>An array of step objects to render.</td>
       <td><code>undefined</code></td>
     </tr>
     <tr>
       <td><code><b>currentIndex:</b> number</code></td>
-      <td>
-        The index of current active step.
-      </td>
-      <td>0</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>
@@ -139,26 +127,38 @@ 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.
+All the default styles provided by this package are overridable using the `style` prop
 the below code shows all the overridable styles:
-```
-<Stepper
-  steps={stepsArray}
-  currentStepIndex={currentStepIndex}
-  styles={{
-    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}),
-  }}
-/>
-```
 
+```jsx
+import React from 'react';
+import Stepper from 'react-vertical-stepper';
+
+function App() {
+
+ const stylesOverrride = {
+   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
+     steps={stepsArray}
+	 currentStepIndex={currentStepIndex}
+	 styles={stylesOverrride}
+   />
+ );
+}
+
+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

src/assets/vertical-stepper-example.png

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import type { IBubbleProps } from "./types";
 import { Elements } from "../constants";
 import whiteTick from '../assets/white-tick.svg';
-import { STEP_STATUSES } from '../constants';
+import { STEP_STATUSES, LABEL_POSITION } from '../constants';
 import styles from './styles.module.scss';
 
 const Bubble: FC<IBubbleProps> = (props) => {
@@ -13,7 +13,8 @@ const Bubble: FC<IBubbleProps> = (props) => {
     currentStepIndex,
     handleStepClick = null,
     showCursor,
-    getStyles
+    getStyles,
+    labelPosition
   } = props;
 
   return (
@@ -45,6 +46,41 @@ const Bubble: FC<IBubbleProps> = (props) => {
         || index + 1}
       </>
     )}
+      <div className={`${styles.labelContainer} ${styles[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
+        {step?.label && (
+          <span
+            className={`${styles.labelTitle}
+                  ${showCursor && styles.cursorPointer}
+                  ${index === currentStepIndex && styles.activeLabelTitle}`}
+            style={{
+              ...((getStyles(Elements.LabelTitle)) || {}),
+              ...((index === currentStepIndex && getStyles(Elements.ActiveLabelTitle)) || {})
+            }}
+            onClick={(): void | null => handleStepClick && handleStepClick()}
+            role="presentation"
+            id={`stepper-label-${index}`}
+          >
+            {step.label}
+          </span>
+        )}
+        {step?.description && (
+          <span
+            className={`${styles.labelDescription}
+                  ${handleStepClick && styles.cursorPointer}
+                  ${index === currentStepIndex && styles.activeLabelDescription}`}
+            style={{
+              ...((getStyles(Elements.LabelDescription)) || {}),
+              ...((index === currentStepIndex &&
+                      getStyles(Elements.ActiveLabelDescription)) || {})
+            }}
+            onClick={(): void | null => handleStepClick && handleStepClick()}
+            role="presentation"
+            id={`stepper-desc-${index}`}
+          >
+            {step.description}
+          </span>
+        )}
+      </div>
     </div>
   );
 };

src/bubble/bubble.tsx

@@ -11,10 +11,12 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-    border: 7px solid;
+    margin: 7px;
+    position: relative;
   }
   .activeStepBubble {
     border: 7px solid #CBCBEF;
+    margin: 0;
   }
   .inactiveStepBubble {
     opacity: 0.4;
@@ -26,4 +28,35 @@
   }
   .cursorPointer {
     cursor: pointer;
+  }
+
+  .labelContainer {
+    position: absolute;
+    width: max-content;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &__right {
+      left: 44px;
+    }
+    &__left {
+      right: 44px;
+      align-items: end;
+    }
+    .labelTitle {
+      color: #4F4F4F;
+    }
+    .activeLabelTitle {
+      font-weight: 700;
+    }
+    .labelDescription {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 21px;
+      color: #929292;
+    }
+    .activeLabelDescription {
+      color: #676767;
+    }
   }

src/bubble/styles.module.scss

@@ -9,5 +9,6 @@ export type IBubbleProps = {
   currentStepIndex?: number,
   handleStepClick(): void,
   showCursor: boolean,
-  getStyles(element: Elements): object
+  getStyles(element: Elements): object,
+  labelPosition: 'left' | 'right'
 }