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 1 commit
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
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next

Add ghosty images and sass to display them

  • Loading branch information
@benstrumeyer
benstrumeyer committed Dec 7, 2020
commit ec8aca71beb5da25e6768a0d58eef2079ca31f42
15 app/hub/Views/StepProgressBar/StepProgressBar.jsx
View file
Open in desktop
@@ -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 => (
<div>{`Completed Step: ${value}`}</div>
<div className="StepProgressBar__Step step-completed" />
);

const renderCurrentStep = value => (
<div>{`Current Step: ${value}`}</div>
<div className={`StepProgressBar__Step step-${value} current`} />
);

const renderIncompleteStep = value => (
<div>{`Incomplete Step: ${value}`}</div>
<div className={`StepProgressBar__Step step-${value} incomplete`} />
);

const renderProgressBar = () => (
stepLabels.map((value, index) => (
<div key={value}>
{(index + 1 < currentStep) && (
renderCompletedStep(index)
renderCompletedStep(index + 1)
)}
{(index + 1 === currentStep) && (
renderCurrentStep(index)
renderCurrentStep(index + 1)
)}
{(index + 1 > currentStep) && (
renderIncompleteStep(index)
renderIncompleteStep(index + 1)
)}
</div>
))
@@ -63,7 +63,6 @@ const StepProgressBar = (props) => {
</div>
);
};

// PropTypes ensure we pass required props of the correct type
StepProgressBar.propTypes = {
// currentStep: PropTypes.number.isRequired
49 app/hub/Views/StepProgressBar/StepProgressBar.scss
View file
Open in desktop
@@ -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;
}
}
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>
ProTip! Use n and p to navigate between commits in a pull request.