diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 42c00d1fb..a7fdf9b82 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1749,6 +1749,15 @@ "ghostery_browser_hub_onboarding_header_title_plan_choices": { "message": "Ghostery Browser Hub - Plan Choices" }, + "ghostery_browser_hub_onboarding_privacy": { + "message": "Privacy" + }, + "ghostery_browser_hub_onboarding_search": { + "message": "Search" + }, + "ghostery_browser_hub_onboarding_plan": { + "message": "Plan" + }, "ghostery_browser_hub_onboarding_welcome": { "message": "Welcome to Ghostery Browser" }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx new file mode 100644 index 000000000..bff59d29d --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -0,0 +1,115 @@ +/** + * Step Progress Bar 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 } from 'react'; +import PropTypes from 'prop-types'; +import { NavLink } from 'react-router-dom'; + +// TODO: Change routes +const steps = [ + { + label: t('sign_in'), + route: 'LINK_TO_STEP_1' + }, + { + label: t('ghostery_browser_hub_onboarding_privacy'), + route: 'LINK_TO_STEP_2' + }, + { + label: t('ghostery_browser_hub_onboarding_search'), + route: 'LINK_TO_STEP_3' + }, + { + label: t('ghostery_browser_hub_onboarding_plan'), + route: 'LINK_TO_STEP_4' + } +]; + +/** + * 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; + const totalSteps = steps.length; + + const renderCompletedStep = step => ( +
+ +
{step.label}
+
+ +
+ ); + + const renderCurrentStep = (step, value) => ( +
+ +
{step.label}
+
+ +
+ ); + + const renderIncompleteStep = (step, value) => ( +
+ +
{step.label}
+
+ +
+ ); + + const renderProgressBar = () => ( + steps.map((value, index) => ( + + {(index + 1 < currentStep) && ( + renderCompletedStep(steps[index]) + )} + {(index + 1 === currentStep) && ( + + {renderCurrentStep(steps[index], index + 1)} + + )} + {(index + 1 > currentStep) && ( + + {renderIncompleteStep(steps[index], index + 1)} + + )} + {(index + 1 !== totalSteps) && ( + + {(index + 1 < currentStep) && ( +
+ )} + {(index + 1 >= currentStep) && ( +
+ )} + + )} + + )) + ); + + return ( +
+ {renderProgressBar()} +
+ ); +}; +// PropTypes ensure we pass required props of the correct type +StepProgressBar.propTypes = { + currentStep: PropTypes.number.isRequired, +}; + +export default StepProgressBar; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss new file mode 100644 index 000000000..d5908215e --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -0,0 +1,99 @@ +/** + * 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; + align-items: center; +} +.StepProgressBar__Step { + height: 34px; + width: 32px; + margin-left: 3px; + + &.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; + } +} +.StepProgressBar__column { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 45px; + text-align: center; +} +.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: 12px 25px, 0px 0px; + background-repeat: repeat-x, repeat-y; + } +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js new file mode 100644 index 000000000..21d943533 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js @@ -0,0 +1,16 @@ +/** + * Point of entry index.js file for Ghostery Browser Hub Step Progress Bar + * + * 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 StepProgressBar from './StepProgressBar'; + +export default StepProgressBar; 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 diff --git a/app/scss/hub.scss b/app/scss/hub.scss index b5e5780fb..d64c67291 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 '../ghostery-browser-hub/Views/OnboardingViews/StepProgressbar/StepProgressbar.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss';