Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-2211: Onboarding - Status Bar #641

Merged
merged 10 commits into from Dec 7, 2020
+259 −0
Merged

GH-2211: Onboarding - Status Bar #641

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
62734c2
Make progress bar skeleton
benstrumeyer Dec 7, 2020
ec8aca7
Add ghosty images and sass to display them
benstrumeyer Dec 7, 2020
48633b0
Add labels
benstrumeyer Dec 7, 2020
eab6428
Refactor labels
benstrumeyer Dec 7, 2020
f9b0732
Add dotted border after incomplete steps except last
benstrumeyer Dec 7, 2020
3f16d9b
Make labels and ghosties navLinks
benstrumeyer Dec 7, 2020
7c64022
Reset default view, done with testing
benstrumeyer Dec 7, 2020
d711569
Update propTypes and add comments
benstrumeyer Dec 7, 2020
ef904f0
Merge branch 'ghostery-browser-intro-hub' into GH-2211
benstrumeyer Dec 7, 2020
e4265fa
Change back to default view
benstrumeyer Dec 7, 2020
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

9 _locales/en/messages.json
View file
Open in desktop
@@ -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"
},
115 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx
View file
Open in desktop
@@ -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 => (
<div className="StepProgressBar__column">
<NavLink to={step.route}>
<div className="StepProgressBar__label">{step.label}</div>
<div className="StepProgressBar__Step step-completed" />
</NavLink>
</div>
);

const renderCurrentStep = (step, value) => (
<div className="StepProgressBar__column">
<NavLink to={step.route}>
<div className="StepProgressBar__label currentStep">{step.label}</div>
<div className={`StepProgressBar__Step step-${value} current`} />
</NavLink>
</div>
);

const renderIncompleteStep = (step, value) => (
<div className="StepProgressBar__column">
<NavLink to={step.route}>
<div className="StepProgressBar__label">{step.label}</div>
<div className={`StepProgressBar__Step step-${value} incomplete`} />
</NavLink>
</div>
);

const renderProgressBar = () => (
steps.map((value, index) => (
<Fragment key={value}>
{(index + 1 < currentStep) && (
renderCompletedStep(steps[index])
)}
{(index + 1 === currentStep) && (
<Fragment>
{renderCurrentStep(steps[index], index + 1)}
</Fragment>
)}
{(index + 1 > currentStep) && (
<Fragment>
{renderIncompleteStep(steps[index], index + 1)}
</Fragment>
)}
{(index + 1 !== totalSteps) && (
<Fragment>
{(index + 1 < currentStep) && (
<div className="StepProgressBar__line completed" />
)}
{(index + 1 >= currentStep) && (
<div className="StepProgressBar__line incompleted" />
)}
</Fragment>
)}
</Fragment>
))
);

return (
<div className="StepProgressBarContainer">
{renderProgressBar()}
</div>
);
};
// PropTypes ensure we pass required props of the correct type
StepProgressBar.propTypes = {
currentStep: PropTypes.number.isRequired,
};

export default StepProgressBar;
99 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss
View file
Open in desktop
@@ -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;
}
}
16 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js
View file
Open in desktop
@@ -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;
1 app/images/hub/step-progress-bar/step-1-current.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M26.117 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C8.08 0 2.878 5.014 2.878 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(.5)"><tspan x="10" y="20">1</tspan></text></g></svg>
1 app/images/hub/step-progress-bar/step-2-current.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">2</tspan></text></g></svg>
1 app/images/hub/step-progress-bar/step-2-incomplete.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">2</tspan></text></g></svg>
1 app/images/hub/step-progress-bar/step-3-current.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">3</tspan></text></g></svg>
12 app/images/hub/step-progress-bar/step-3-incomplete.svg
View file
Open in desktop
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35" viewBox="0 0 33 35">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z" transform="translate(-554 -163) translate(556.5 165)"/>
<text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(-554 -163) translate(556.5 165)">
<tspan x="10" y="20">3</tspan>
</text>
</g>
</g>
</g>
</svg>
1 app/images/hub/step-progress-bar/step-4-current.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">4</tspan></text></g></svg>
1 app/images/hub/step-progress-bar/step-4-incomplete.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">4</tspan></text></g></svg>
1 app/images/hub/step-progress-bar/step-completed.svg
View file
Open in desktop
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="31"><defs><path id="a" d="M16.387 6.096L7.68 14.804a.717.717 0 01-.554.238.72.72 0 01-.554-.238l-3.958-3.958a.764.764 0 010-1.108.764.764 0 011.108 0l3.404 3.404 8.154-8.155a.766.766 0 011.108 0 .766.766 0 010 1.109z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><g transform="translate(5 8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" fill-rule="nonzero" xlink:href="#a"/><g fill="#4A4A4A" mask="url(#b)"><path d="M0 0h19v19H0z"/></g></g></g></svg>
1 app/scss/hub.scss
View file
Open in desktop
@@ -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';

ProTip! Use n and p to navigate between commits in a pull request.