Make progress bar skeleton

app/hub/Views/StepProgressBar/StepProgressBar.jsx

@@ -0,0 +1,94 @@
+/**
+ * Upgrade Plan View Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2020 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Fragment, useRef, useEffect } from 'react';
+import ClassNames from 'classnames';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import QueryString from 'query-string';
+import globals from '../../../../src/classes/Globals';
+
+const stepLabels = ['Sign In', 'Privacy', 'Search', 'Plan'];
+
+/**
+ * A React function component for rendering the Step Progress bar
+ * @return {JSX} JSX for rendering the Progress Progress bar of the ghostery-browser-intro-hub app
+ * @memberof HubComponents
+ */
+const StepProgressBar = (props) => {
+	const currentStep = 2;
+	const totalSteps = stepLabels.length;
+
+	const renderCompletedStep = value => (
+		<div>{`Completed Step: ${value}`}</div>
+	);
+
+	const renderCurrentStep = value => (
+		<div>{`Current Step: ${value}`}</div>
+	);
+
+	const renderIncompleteStep = value => (
+		<div>{`Incomplete Step: ${value}`}</div>
+	);
+
+	const renderProgressBar = () => (
+		stepLabels.map((value, index) => (
+			<div key={value}>
+				{(index + 1 < currentStep) && (
+					renderCompletedStep(index)
+				)}
+				{(index + 1 === currentStep) && (
+					renderCurrentStep(index)
+				)}
+				{(index + 1 > currentStep) && (
+					renderIncompleteStep(index)
+				)}
+			</div>
+		))
+	);
+
+	return (
+		<div className="StepProgressBarContainer">
+			{renderProgressBar()}
+		</div>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+StepProgressBar.propTypes = {
+	// currentStep: PropTypes.number.isRequired
+	// protection_level: PropTypes.string.isRequired,
+	// show_yearly_prices: PropTypes.bool.isRequired,
+	// user: PropTypes.shape({
+	// 	email: PropTypes.string,
+	// 	plusAccess: PropTypes.bool,
+	// 	premiumAccess: PropTypes.bool,
+	// }),
+	// actions: PropTypes.shape({
+	// 	toggleMonthlyYearlyPrices: PropTypes.func.isRequired,
+	// 	setBasicProtection: PropTypes.func.isRequired,
+	// 	setPlusProtection: PropTypes.func.isRequired,
+	// 	setPremiumProtection: PropTypes.func.isRequired,
+	// }).isRequired,
+};
+
+// Default props used on the Home View
+StepProgressBar.defaultProps = {
+	// user: {
+	// 	email: '',
+	// 	plusAccess: false,
+	// 	premiumAccess: false,
+	// },
+};
+
+export default StepProgressBar;

app/hub/Views/StepProgressBar/StepProgressBar.scss

@@ -0,0 +1,17 @@
+/**
+ * Step Progress Bar Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+ .StepProgressBarContainer {
+	display: flex;
+	justify-content: space-around;
+ }

app/hub/Views/StepProgressBar/index.js

@@ -0,0 +1,36 @@
+/**
+ * Point of entry index.js file for UpgradePlanView
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2020 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withRouter } from 'react-router-dom';
+
+import StepProgressBar from './StepProgressBar';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => ({ ...state.upgrade, ...state.account });
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({});
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(StepProgressBar));

app/hub/index.jsx

@@ -31,6 +31,7 @@ import CreateAccountView from './Views/CreateAccountView';
 import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import LogInView from './Views/LogInView';
 import UpgradePlanView from './Views/UpgradePlanView';
+import StepProgressBar from './Views/StepProgressBar';
 
 const store = createStore();
 
@@ -43,7 +44,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
  */
 const Hub = () => (
 	<AppView>
-		<Route exact path="/" component={UpgradePlanView} />
+		<Route exact path="/" component={StepProgressBar} />
 		<Route exact path="/home" component={ah ? UpgradePlanView : HomeView} />
 		<Route path="/setup" component={SetupView} />
 		<Route path="/tutorial" component={TutorialView} />

app/scss/hub.scss

@@ -86,6 +86,7 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../hub/Views/StepProgressBar/StepProgressBar.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';