From 62734c23bf558d1b818b42e31b29f7ed58142405 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 19:21:12 -0500 Subject: [PATCH 1/9] Make progress bar skeleton --- .../Views/StepProgressBar/StepProgressBar.jsx | 94 +++++++++++++++++++ .../StepProgressBar/StepProgressBar.scss | 17 ++++ app/hub/Views/StepProgressBar/index.js | 36 +++++++ app/hub/index.jsx | 3 +- app/scss/hub.scss | 1 + 5 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 app/hub/Views/StepProgressBar/StepProgressBar.jsx create mode 100644 app/hub/Views/StepProgressBar/StepProgressBar.scss create mode 100644 app/hub/Views/StepProgressBar/index.js diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx new file mode 100644 index 000000000..8112e79ea --- /dev/null +++ b/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 => ( +
{`Completed Step: ${value}`}
+ ); + + const renderCurrentStep = value => ( +
{`Current Step: ${value}`}
+ ); + + const renderIncompleteStep = value => ( +
{`Incomplete Step: ${value}`}
+ ); + + const renderProgressBar = () => ( + stepLabels.map((value, index) => ( +
+ {(index + 1 < currentStep) && ( + renderCompletedStep(index) + )} + {(index + 1 === currentStep) && ( + renderCurrentStep(index) + )} + {(index + 1 > currentStep) && ( + renderIncompleteStep(index) + )} +
+ )) + ); + + return ( +
+ {renderProgressBar()} +
+ ); +}; + +// 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; diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.scss b/app/hub/Views/StepProgressBar/StepProgressBar.scss new file mode 100644 index 000000000..5a2f52a73 --- /dev/null +++ b/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; + } diff --git a/app/hub/Views/StepProgressBar/index.js b/app/hub/Views/StepProgressBar/index.js new file mode 100644 index 000000000..0e305b26f --- /dev/null +++ b/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)); diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 7e3a19a3c..845653916 100644 --- a/app/hub/index.jsx +++ b/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 = () => ( - + diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 759692615..e94eb2bf6 100644 --- a/app/scss/hub.scss +++ b/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'; From ec8aca71beb5da25e6768a0d58eef2079ca31f42 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 20:54:09 -0500 Subject: [PATCH 2/9] Add ghosty images and sass to display them --- .../Views/StepProgressBar/StepProgressBar.jsx | 15 +++--- .../StepProgressBar/StepProgressBar.scss | 49 ++++++++++++++++++- .../hub/step-progress-bar/step-1-current.svg | 1 + .../hub/step-progress-bar/step-2-current.svg | 1 + .../step-progress-bar/step-2-incomplete.svg | 1 + .../hub/step-progress-bar/step-3-current.svg | 1 + .../step-progress-bar/step-3-incomplete.svg | 12 +++++ .../hub/step-progress-bar/step-4-current.svg | 1 + .../step-progress-bar/step-4-incomplete.svg | 1 + .../hub/step-progress-bar/step-completed.svg | 1 + 10 files changed, 73 insertions(+), 10 deletions(-) create mode 100644 app/images/hub/step-progress-bar/step-1-current.svg create mode 100644 app/images/hub/step-progress-bar/step-2-current.svg create mode 100644 app/images/hub/step-progress-bar/step-2-incomplete.svg create mode 100644 app/images/hub/step-progress-bar/step-3-current.svg create mode 100644 app/images/hub/step-progress-bar/step-3-incomplete.svg create mode 100644 app/images/hub/step-progress-bar/step-4-current.svg create mode 100644 app/images/hub/step-progress-bar/step-4-incomplete.svg create mode 100644 app/images/hub/step-progress-bar/step-completed.svg diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index 8112e79ea..98394aeb3 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -1,5 +1,5 @@ /** - * Upgrade Plan View Component + * Step Progress Bar Component * * Ghostery Browser Extension * https://www.ghostery.com/ @@ -30,28 +30,28 @@ const StepProgressBar = (props) => { const totalSteps = stepLabels.length; const renderCompletedStep = value => ( -
{`Completed Step: ${value}`}
+
); const renderCurrentStep = value => ( -
{`Current Step: ${value}`}
+
); const renderIncompleteStep = value => ( -
{`Incomplete Step: ${value}`}
+
); const renderProgressBar = () => ( stepLabels.map((value, index) => (
{(index + 1 < currentStep) && ( - renderCompletedStep(index) + renderCompletedStep(index + 1) )} {(index + 1 === currentStep) && ( - renderCurrentStep(index) + renderCurrentStep(index + 1) )} {(index + 1 > currentStep) && ( - renderIncompleteStep(index) + renderIncompleteStep(index + 1) )}
)) @@ -63,7 +63,6 @@ const StepProgressBar = (props) => {
); }; - // PropTypes ensure we pass required props of the correct type StepProgressBar.propTypes = { // currentStep: PropTypes.number.isRequired diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.scss b/app/hub/Views/StepProgressBar/StepProgressBar.scss index 5a2f52a73..a37c8ad2f 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.scss +++ b/app/hub/Views/StepProgressBar/StepProgressBar.scss @@ -11,7 +11,52 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ - .StepProgressBarContainer { +.StepProgressBarContainer { display: flex; justify-content: space-around; - } +} + +.StepProgressBar__Step { + height: 34px; + width: 32px; + &.step-1 { + &.current { + background: url('/app/images/hub/step-progress-bar/step-1-current.svg'); + background-repeat: no-repeat; + } + } + &.step-2 { + &.current { + background: url('/app/images/hub/step-progress-bar/step-2-current.svg'); + background-repeat: no-repeat; + } + &.incomplete { + background: url('/app/images/hub/step-progress-bar/step-2-incomplete.svg'); + background-repeat: no-repeat; + } + } + &.step-3 { + &.current { + background: url('/app/images/hub/step-progress-bar/step-3-current.svg'); + background-repeat: no-repeat; + } + &.incomplete { + background: url('/app/images/hub/step-progress-bar/step-3-incomplete.svg'); + background-repeat: no-repeat; + } + } + &.step-4 { + &.current { + background: url('/app/images/hub/step-progress-bar/step-4-current.svg'); + background-repeat: no-repeat; + } + &.incomplete { + background: url('/app/images/hub/step-progress-bar/step-4-incomplete.svg'); + background-repeat: no-repeat; + } + } + &.step-completed { + background: url('/app/images/hub/step-progress-bar/step-completed.svg'); + background-repeat: no-repeat; + } +} diff --git a/app/images/hub/step-progress-bar/step-1-current.svg b/app/images/hub/step-progress-bar/step-1-current.svg new file mode 100644 index 000000000..9fb8c8dad --- /dev/null +++ b/app/images/hub/step-progress-bar/step-1-current.svg @@ -0,0 +1 @@ +1 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-2-current.svg b/app/images/hub/step-progress-bar/step-2-current.svg new file mode 100644 index 000000000..7d8819a59 --- /dev/null +++ b/app/images/hub/step-progress-bar/step-2-current.svg @@ -0,0 +1 @@ +2 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-2-incomplete.svg b/app/images/hub/step-progress-bar/step-2-incomplete.svg new file mode 100644 index 000000000..1dc3fef5f --- /dev/null +++ b/app/images/hub/step-progress-bar/step-2-incomplete.svg @@ -0,0 +1 @@ +2 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-3-current.svg b/app/images/hub/step-progress-bar/step-3-current.svg new file mode 100644 index 000000000..060d61018 --- /dev/null +++ b/app/images/hub/step-progress-bar/step-3-current.svg @@ -0,0 +1 @@ +3 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-3-incomplete.svg b/app/images/hub/step-progress-bar/step-3-incomplete.svg new file mode 100644 index 000000000..de1957611 --- /dev/null +++ b/app/images/hub/step-progress-bar/step-3-incomplete.svg @@ -0,0 +1,12 @@ + + + + + + + 3 + + + + + diff --git a/app/images/hub/step-progress-bar/step-4-current.svg b/app/images/hub/step-progress-bar/step-4-current.svg new file mode 100644 index 000000000..019e8c5a5 --- /dev/null +++ b/app/images/hub/step-progress-bar/step-4-current.svg @@ -0,0 +1 @@ +4 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-4-incomplete.svg b/app/images/hub/step-progress-bar/step-4-incomplete.svg new file mode 100644 index 000000000..73db72f1b --- /dev/null +++ b/app/images/hub/step-progress-bar/step-4-incomplete.svg @@ -0,0 +1 @@ +4 \ No newline at end of file diff --git a/app/images/hub/step-progress-bar/step-completed.svg b/app/images/hub/step-progress-bar/step-completed.svg new file mode 100644 index 000000000..f4320607c --- /dev/null +++ b/app/images/hub/step-progress-bar/step-completed.svg @@ -0,0 +1 @@ + \ No newline at end of file From 48633b03967713a0fa19fbf925ab20c070f8d585 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 21:11:28 -0500 Subject: [PATCH 3/9] Add labels --- .../Views/StepProgressBar/StepProgressBar.jsx | 41 +++++++++++++++---- .../StepProgressBar/StepProgressBar.scss | 11 ++++- 2 files changed, 42 insertions(+), 10 deletions(-) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index 98394aeb3..41a4c7c09 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -29,29 +29,52 @@ const StepProgressBar = (props) => { const currentStep = 2; const totalSteps = stepLabels.length; - const renderCompletedStep = value => ( -
+ const getStepLabel = (step) => { + switch (step) { + case 1: + return t('sign_in'); + case 2: + return t('privacy'); + case 3: + return t('search'); + case 4: + return t('plan'); + default: return ''; + } + }; + + const renderCompletedStep = label => ( +
+
{label}
+
+
); - const renderCurrentStep = value => ( -
+ const renderCurrentStep = (label, value) => ( +
+
{label}
+
+
); - const renderIncompleteStep = value => ( -
+ const renderIncompleteStep = (label, value) => ( +
+
{label}
+
+
); const renderProgressBar = () => ( stepLabels.map((value, index) => (
{(index + 1 < currentStep) && ( - renderCompletedStep(index + 1) + renderCompletedStep(getStepLabel(index + 1), index + 1) )} {(index + 1 === currentStep) && ( - renderCurrentStep(index + 1) + renderCurrentStep(value, index + 1) )} {(index + 1 > currentStep) && ( - renderIncompleteStep(index + 1) + renderIncompleteStep(value, index + 1) )}
)) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.scss b/app/hub/Views/StepProgressBar/StepProgressBar.scss index a37c8ad2f..2a6f99027 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.scss +++ b/app/hub/Views/StepProgressBar/StepProgressBar.scss @@ -15,7 +15,6 @@ display: flex; justify-content: space-around; } - .StepProgressBar__Step { height: 34px; width: 32px; @@ -60,3 +59,13 @@ background-repeat: no-repeat; } } +.StepProgressBar__column { + display: flex; + flex-direction: column; + align-items: center; +} +.StepProgressBar__label { + margin-bottom: 14px; + font-size: 12px; + color: $tundora; +} From eab6428e5f7b6b01e156a5c0710d81e767b626c4 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 21:19:13 -0500 Subject: [PATCH 4/9] Refactor labels --- _locales/en/messages.json | 9 ++++++++ .../Views/StepProgressBar/StepProgressBar.jsx | 22 ++++--------------- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 041d0b141..34572809f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1734,6 +1734,15 @@ "hub_create_account_toast_error": { "message": "That email address is already in use. Please choose another." }, + "hub_onboarding_privacy": { + "message": "Privacy" + }, + "hub_onboarding_search": { + "message": "Search" + }, + "hub_onboarding_plan": { + "message": "Plan" + }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." }, diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index 41a4c7c09..1de2d7462 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -18,7 +18,7 @@ import { NavLink } from 'react-router-dom'; import QueryString from 'query-string'; import globals from '../../../../src/classes/Globals'; -const stepLabels = ['Sign In', 'Privacy', 'Search', 'Plan']; +const stepLabels = [t('sign_in'), t('hub_onboarding_privacy'), t('hub_onboarding_search'), t('hub_onboarding_plan')]; /** * A React function component for rendering the Step Progress bar @@ -29,20 +29,6 @@ const StepProgressBar = (props) => { const currentStep = 2; const totalSteps = stepLabels.length; - const getStepLabel = (step) => { - switch (step) { - case 1: - return t('sign_in'); - case 2: - return t('privacy'); - case 3: - return t('search'); - case 4: - return t('plan'); - default: return ''; - } - }; - const renderCompletedStep = label => (
{label}
@@ -68,13 +54,13 @@ const StepProgressBar = (props) => { stepLabels.map((value, index) => (
{(index + 1 < currentStep) && ( - renderCompletedStep(getStepLabel(index + 1), index + 1) + renderCompletedStep(stepLabels[index]) )} {(index + 1 === currentStep) && ( - renderCurrentStep(value, index + 1) + renderCurrentStep(stepLabels[index], index + 1) )} {(index + 1 > currentStep) && ( - renderIncompleteStep(value, index + 1) + renderIncompleteStep(stepLabels[index], index + 1) )}
)) From f9b0732cb315c2be8e14077567dbf58906f981ef Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 22:12:38 -0500 Subject: [PATCH 5/9] Add dotted border after incomplete steps except last --- .../Views/StepProgressBar/StepProgressBar.jsx | 24 ++++++++++++++---- .../StepProgressBar/StepProgressBar.scss | 25 +++++++++++++++++++ 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index 1de2d7462..a64f3c138 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -38,7 +38,7 @@ const StepProgressBar = (props) => { const renderCurrentStep = (label, value) => (
-
{label}
+
{label}
); @@ -52,17 +52,31 @@ const StepProgressBar = (props) => { const renderProgressBar = () => ( stepLabels.map((value, index) => ( -
+ {(index + 1 < currentStep) && ( renderCompletedStep(stepLabels[index]) )} {(index + 1 === currentStep) && ( - renderCurrentStep(stepLabels[index], index + 1) + + {renderCurrentStep(stepLabels[index], index + 1)} + )} {(index + 1 > currentStep) && ( - renderIncompleteStep(stepLabels[index], index + 1) + + {renderIncompleteStep(stepLabels[index], index + 1)} + + )} + {(index + 1 !== totalSteps) && ( + + {(index + 1 < currentStep) && ( +
+ )} + {(index + 1 >= currentStep) && ( +
+ )} + )} -
+ )) ); diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.scss b/app/hub/Views/StepProgressBar/StepProgressBar.scss index 2a6f99027..2aec7c35d 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.scss +++ b/app/hub/Views/StepProgressBar/StepProgressBar.scss @@ -14,6 +14,7 @@ .StepProgressBarContainer { display: flex; justify-content: space-around; + align-items: center; } .StepProgressBar__Step { height: 34px; @@ -63,9 +64,33 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; + width: 45px; } .StepProgressBar__label { margin-bottom: 14px; + width: 38px; font-size: 12px; color: $tundora; + &.currentStep { + font-weight: 700; + } +} +.StepProgressBar__line { + margin-top: 27px; + width: 100%; + &.completed { + border: solid 2px $ghosty-blue; + } + &.incompleted { + padding: 1em; + background-image: + radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), + radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), + radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), + radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px); + background-position: top, right, bottom, left; + background-size: 14px 25px, 0px 0px; + background-repeat: repeat-x, repeat-y; + } } From 3f16d9bd9511c8c8c5a1337a645f596b1ea554fc Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 22:41:12 -0500 Subject: [PATCH 6/9] Make labels and ghosties navLinks --- .../Views/StepProgressBar/StepProgressBar.jsx | 91 ++++++++++--------- .../StepProgressBar/StepProgressBar.scss | 5 +- app/hub/index.jsx | 2 +- 3 files changed, 52 insertions(+), 46 deletions(-) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index a64f3c138..a767e33aa 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -11,59 +11,80 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React, { Fragment, useRef, useEffect } from 'react'; -import ClassNames from 'classnames'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; -import QueryString from 'query-string'; -import globals from '../../../../src/classes/Globals'; -const stepLabels = [t('sign_in'), t('hub_onboarding_privacy'), t('hub_onboarding_search'), t('hub_onboarding_plan')]; +// Refactor to pass in as props +const steps = [ + { + label: t('sign_in'), + route: 'onboarding-step-1' + }, + { + label: t('hub_onboarding_privacy'), + route: 'onboarding-step-2' + }, + { + label: t('hub_onboarding_search'), + route: 'onboarding-step-3' + }, + { + label: t('hub_onboarding_plan'), + route: 'onboarding-step-4' + } +]; /** * 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 + * @return {JSX} JSX for rendering the Step Progress bar of the ghostery-browser-intro-hub app * @memberof HubComponents */ const StepProgressBar = (props) => { - const currentStep = 2; - const totalSteps = stepLabels.length; + const { currentStep } = props; // Add in steps as prop + const totalSteps = steps.length; - const renderCompletedStep = label => ( + const renderCompletedStep = step => (
-
{label}
-
+ +
{step.label}
+
+
); - const renderCurrentStep = (label, value) => ( + const renderCurrentStep = (step, value) => (
-
{label}
-
+ +
{step.label}
+
+
); - const renderIncompleteStep = (label, value) => ( + const renderIncompleteStep = (step, value) => (
-
{label}
-
+ +
{step.label}
+
+
); const renderProgressBar = () => ( - stepLabels.map((value, index) => ( + steps.map((value, index) => ( {(index + 1 < currentStep) && ( - renderCompletedStep(stepLabels[index]) + renderCompletedStep(steps[index]) )} {(index + 1 === currentStep) && ( - {renderCurrentStep(stepLabels[index], index + 1)} + {renderCurrentStep(steps[index], index + 1)} )} {(index + 1 > currentStep) && ( - {renderIncompleteStep(stepLabels[index], index + 1)} + {renderIncompleteStep(steps[index], index + 1)} )} {(index + 1 !== totalSteps) && ( @@ -88,29 +109,11 @@ const StepProgressBar = (props) => { }; // 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, - // }, + steps: PropTypes.shape({ + label: PropTypes.string.isRequired, + route: PropTypes.string.isRequired, + }).isRequired, + currentStep: PropTypes.number.isRequired, }; export default StepProgressBar; diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.scss b/app/hub/Views/StepProgressBar/StepProgressBar.scss index 2aec7c35d..d5908215e 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.scss +++ b/app/hub/Views/StepProgressBar/StepProgressBar.scss @@ -19,6 +19,8 @@ .StepProgressBar__Step { height: 34px; width: 32px; + margin-left: 3px; + &.step-1 { &.current { background: url('/app/images/hub/step-progress-bar/step-1-current.svg'); @@ -66,6 +68,7 @@ align-items: center; justify-content: center; width: 45px; + text-align: center; } .StepProgressBar__label { margin-bottom: 14px; @@ -90,7 +93,7 @@ radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px); background-position: top, right, bottom, left; - background-size: 14px 25px, 0px 0px; + background-size: 12px 25px, 0px 0px; background-repeat: repeat-x, repeat-y; } } diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 845653916..8754552b0 100644 --- a/app/hub/index.jsx +++ b/app/hub/index.jsx @@ -44,7 +44,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false; */ const Hub = () => ( - + } /> From 7c64022d90c9cb911bbf0cf6c4877698cb26730d Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 22:44:28 -0500 Subject: [PATCH 7/9] Reset default view, done with testing --- app/hub/Views/StepProgressBar/StepProgressBar.jsx | 4 ++++ app/hub/index.jsx | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index a767e33aa..4afe0f8b4 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -35,6 +35,10 @@ const steps = [ } ]; +/** Example of usage: + * +*/ + /** * A React function component for rendering the Step Progress bar * @return {JSX} JSX for rendering the Step Progress bar of the ghostery-browser-intro-hub app diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 8754552b0..1aa9dc9a0 100644 --- a/app/hub/index.jsx +++ b/app/hub/index.jsx @@ -31,7 +31,6 @@ 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(); @@ -44,7 +43,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false; */ const Hub = () => ( - } /> + From d711569609cb3e1c7294242cdfaa27d2caa50617 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 22:48:26 -0500 Subject: [PATCH 8/9] Update propTypes and add comments --- .../Views/StepProgressBar/StepProgressBar.jsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/app/hub/Views/StepProgressBar/StepProgressBar.jsx b/app/hub/Views/StepProgressBar/StepProgressBar.jsx index 4afe0f8b4..fd0e4e051 100644 --- a/app/hub/Views/StepProgressBar/StepProgressBar.jsx +++ b/app/hub/Views/StepProgressBar/StepProgressBar.jsx @@ -15,37 +15,33 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; -// Refactor to pass in as props +// TODO: Change routes const steps = [ { label: t('sign_in'), - route: 'onboarding-step-1' + route: 'LINK_TO_STEP_1' }, { label: t('hub_onboarding_privacy'), - route: 'onboarding-step-2' + route: 'LINK_TO_STEP_2' }, { label: t('hub_onboarding_search'), - route: 'onboarding-step-3' + route: 'LINK_TO_STEP_3' }, { label: t('hub_onboarding_plan'), - route: 'onboarding-step-4' + route: 'LINK_TO_STEP_4' } ]; -/** Example of usage: - * -*/ - /** * A React function component for rendering the Step Progress bar * @return {JSX} JSX for rendering the Step Progress bar of the ghostery-browser-intro-hub app * @memberof HubComponents */ const StepProgressBar = (props) => { - const { currentStep } = props; // Add in steps as prop + const { currentStep } = props; const totalSteps = steps.length; const renderCompletedStep = step => ( @@ -113,10 +109,6 @@ const StepProgressBar = (props) => { }; // PropTypes ensure we pass required props of the correct type StepProgressBar.propTypes = { - steps: PropTypes.shape({ - label: PropTypes.string.isRequired, - route: PropTypes.string.isRequired, - }).isRequired, currentStep: PropTypes.number.isRequired, }; From e4265fa05c90c47f2d611c914e371592a7687908 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 6 Dec 2020 23:06:06 -0500 Subject: [PATCH 9/9] Change back to default view --- app/hub/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 1aa9dc9a0..7e3a19a3c 100644 --- a/app/hub/index.jsx +++ b/app/hub/index.jsx @@ -43,7 +43,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false; */ const Hub = () => ( - +