refactor: remove ability to navigate through steps and re-style navig…

…ation bar

assets/src/js/admin/onboarding-wizard/components/step-link/index.js

@@ -1,49 +1,46 @@
 // Import vendor dependencies
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 // Import store dependencies
-import { useStoreValue } from '../../app/store';
+import {useStoreValue} from '../../app/store';
 
 // Import utilities
-import { goToStep } from '../../app/store/actions';
-
 // Import components
 import Checkmark from '../checkmark';
 
 // Import styles
 import './style.scss';
 
-const StepLink = ( { title, stepNumber } ) => {
-	const [ { currentStep }, dispatch ] = useStoreValue();
-	const progressBarStyle = {
-		width: currentStep <= stepNumber ? '0%' : '100%',
-	};
-
-	return (
-		<div className="give-obw-step-link" data-givewp-test="navigation-step">
-			<button className="give-obw-step-button" onClick={ () => dispatch( goToStep( stepNumber ) ) }>
-				<div className={ `give-obw-step-icon${ currentStep >= stepNumber ? ' give-obw-step-icon--green' : '' }` }>
-					{ currentStep <= stepNumber ? stepNumber : <Checkmark index={ stepNumber } /> }
-				</div>
-				<div className="give-obw-step-title">
-					{ title }
-				</div>
-			</button>
-			<div className="give-obw-step-progress">
-				<div className="give-obw-step-progress-bar" style={ progressBarStyle }></div>
-			</div>
-		</div>
-	);
+const StepLink = ({title, stepNumber}) => {
+    const [{currentStep}, dispatch] = useStoreValue();
+    const progressBarStyle = {
+        width: currentStep <= stepNumber ? '0%' : '100%',
+    };
+
+    return (
+        <div className="give-obw-step-link" data-givewp-test="navigation-step">
+            <div className={cx('give-obw-step-button', {'give-obw-step-button--current': currentStep === stepNumber})}>
+                <div className={cx('give-obw-step-icon', {'give-obw-step-icon--done': currentStep > stepNumber})}>
+                    {currentStep <= stepNumber ? stepNumber : <Checkmark index={stepNumber} />}
+                </div>
+                <div className="give-obw-step-title">{title}</div>
+            </div>
+            <div className="give-obw-step-progress">
+                <div className="give-obw-step-progress-bar" style={progressBarStyle}></div>
+            </div>
+        </div>
+    );
 };
 
 StepLink.propTypes = {
-	title: PropTypes.string.isRequired,
-	stepNumber: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
+    stepNumber: PropTypes.number.isRequired,
 };
 
 StepLink.defaultProps = {
-	title: null,
-	stepNumber: null,
+    title: null,
+    stepNumber: null,
 };
 
 export default StepLink;

assets/src/js/admin/onboarding-wizard/components/step-link/style.scss

@@ -2,6 +2,7 @@
 	flex: 1;
 	display: inline-flex;
 	align-items: center;
+    gap: 20px;
 
 	&:last-of-type {
 		flex: 0;
@@ -11,26 +12,29 @@
 .give-obw-step-button {
 	display: inline-flex;
 	align-items: center;
-
 	border: none;
 	border-radius: 3px;
 	background: none;
+    gap: 20px;
 	padding: 10px 0;
-
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
 	transition: box-shadow 0.2s ease;
 
-	cursor: pointer;
+    &--current {
+        gap: 10px;
 
-	&:focus {
-		box-shadow: 0 0 0 2px #7ec980, 0 0 0 3px #4fa651;
-		outline: none;
-	}
+        .give-obw-step-icon {
+            color: #4fa651;
+            outline: 1px solid #4fa651;
+        }
+
+        .give-obw-step-title {
+            font-weight: 800;
+        }
+    }
 }
 
 .give-obw-step-icon {
-	margin: 0 10px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -47,14 +51,12 @@
 	background: linear-gradient(180deg, #f7fafc 0%, #edf2f7 100%);
 	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
 
-	&.give-obw-step-icon--green {
-		background: #4fa651;
-		color: #fff;
-	}
+    &.give-obw-step-icon--done {
+        background: #4fa651;
+    }
 }
 
 .give-obw-step-title {
-	margin: 0 10px;
 	letter-spacing: 1px;
 	font-family: Montserrat, Arial, Helvetica, sans-serif;
 	font-size: 16px;
@@ -64,7 +66,6 @@
 }
 
 .give-obw-step-progress {
-	margin: 0 10px;
 	flex: 1;
 	height: 1px;
 	background: #c4c4c4;

assets/src/js/admin/onboarding-wizard/components/step-navigation/style.scss

@@ -13,4 +13,5 @@
 	display: flex;
 	align-items: center;
 	margin: 10px 40px;
+    gap: 20px;
 }