From fdac1602c6c44390d0cd7e5d4c732a00524f5b6c Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Fri, 3 Apr 2020 19:59:31 -0300
Subject: [PATCH] feat: added a steps indicator in the wizard component

---
 .../src/pages/Triggers/NewTriggerWizard.js    | 39 +++++++++++++--
 .../src/pages/Triggers/Triggers.styles.js     | 49 +++++++++++++++++++
 2 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
index 244c1420..8d46e6bf 100644
--- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
@@ -262,7 +262,7 @@ const SelectTriggerRequirements = () => {
   )
 }
 
-const Wizard = ({ finish, children }) => {
+const Wizard = ({ nextStepText, finalStepText, finish, children }) => {
   const [currentStepIndex, setCurrentStepIndex] = useState(0)
 
   const classes = useStyles()
@@ -278,14 +278,42 @@ const Wizard = ({ finish, children }) => {
   }
 
   const currentStep = children[currentStepIndex]
+  const finalStepIndex = children.length - 1
+  const isFinalStep = currentStepIndex === finalStepIndex
 
   return (
     <>
-      <div className={classes.topLeftAligned}>{currentStep}</div>
+      <div className={classes.topLeftAligned}>
+        <div className={classes.wizardStepsWrapper}>
+          {children.map((e, i) => {
+            const elementToRender = []
+
+            if (i < currentStepIndex)
+              elementToRender.push(
+                <div className={classes.completedStepCircle}>
+                  <div className={classes.completedStepCheck} />
+                </div>
+              )
+            else if (i === currentStepIndex)
+              elementToRender.push(<div className={classes.currentStep} />)
+            else elementToRender.push(<div className={classes.unreachedStep} />)
+
+            if (i < currentStepIndex)
+              elementToRender.push(<div className={classes.reachedStepLine} />)
+            else if (i < finalStepIndex)
+              elementToRender.push(
+                <div className={classes.unreachedStepLine} />
+              )
+
+            return elementToRender
+          })}
+        </div>
+        {currentStep}
+      </div>
       <div className={classes.bottomRightAligned}>
         <div className={classes.button}>
           <Button onClick={() => handleMoveToNextStep(currentStepIndex + 1)}>
-            Next
+            {isFinalStep ? finalStepText : nextStepText}
           </Button>
         </div>
       </div>
@@ -334,7 +362,10 @@ const NewTriggerWizard = ({ finish }) => {
         </div>
       </div>
       <div className={classes.modalBody}>
-        <Wizard finish={finish}>
+        <Wizard
+          nextStepText={'Next'}
+          finalStepText={'Add Trigger'}
+          finish={finish}>
           <SelectTriggerDirection />
           <SelectTriggerRequirements />
           <SelectTriggerType />
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index 3115111d..ec2bdaa5 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
@@ -1,5 +1,6 @@
 import baseStyles from 'src/pages/Logs.styles'
 import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
+import { disabledColor, secondaryColor } from 'src/styling/variables'
 
 const {
   titleWrapper,
@@ -89,6 +90,54 @@ const mainStyles = {
     width: 96,
     height: 40,
     marginRight: 8
+  },
+  wizardStepsWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    flex: 'wrap',
+    marginTop: 8,
+    marginBottom: 10
+  },
+  unreachedStep: {
+    width: 24,
+    height: 24,
+    border: `solid 2px ${disabledColor}`,
+    borderRadius: '50%'
+  },
+  currentStep: {
+    display: 'block',
+    width: 24,
+    height: 24,
+    borderRadius: '100%',
+    backgroundColor: secondaryColor,
+    border: `2px solid ${secondaryColor}`,
+    backgroundClip: 'content-box',
+    padding: 4
+  },
+  completedStepCircle: {
+    width: 24,
+    height: 24,
+    border: `solid 2px ${secondaryColor}`,
+    borderRadius: '50%'
+  },
+  completedStepCheck: {
+    width: 6,
+    height: 10,
+    margin: '4px 7px',
+    borderBottom: `3px solid ${secondaryColor}`,
+    borderRight: `3px solid ${secondaryColor}`,
+    transform: 'rotate(45deg)'
+  },
+  unreachedStepLine: {
+    width: 24,
+    height: 2,
+    border: `solid 1px ${disabledColor}`
+  },
+  reachedStepLine: {
+    width: 24,
+    height: 2,
+    border: `solid 1px ${secondaryColor}`
   }
 }