GH-339 HomeView and SideNavigation for Ghostery Hub

_locales/en/messages.json

@@ -1599,6 +1599,63 @@
 	"setup_upgrade_button_go": {
 		"message": "Set Me Up"
 	},
+	"hub_home_page_title": {
+		"message": "Ghostery Hub - Home"
+	},
+	"hub_home_header_text": {
+		"message": "Ghostery is ready!"
+	},
+	"hub_home_header_tagline": {
+		"message": "You are now protected with our default settings."
+	},
+	"hub_home_header_tagline_2": {
+		"message": "Start Browsing!"
+	},
+	"hub_home_header_checkbox_label": {
+		"message": "Share additional anonymous analytics data to improve Ghostery’s performance."
+	},
+	"hub_home_header_info": {
+		"message": "New users are opted in to participating in Human Web and Ghostery Rewards. You may change these settings in custom setup or in the extension. "
+	},
+	"hub_home_header_info_link": {
+		"message": "Learn More."
+	},
+	"hub_home_subheader_optimize": {
+		"message": "Optimize your Ghostery experience"
+	},
+	"hub_home_subheader_create_account": {
+		"message": "Create Account"
+	},
+	"hub_home_feature_tutorial_title": {
+		"message": "Take a Tutorial"
+	},
+	"hub_home_feature_tutorial_text": {
+		"message": "Walk through Ghostery's main features."
+	},
+	"hub_home_feature_tutorial_button": {
+		"message": "Start"
+	},
+	"hub_home_feature_tutorial_button_alt": {
+		"message": "Tutorial Complete"
+	},
+	"hub_home_feature_setup_title": {
+		"message": "Customize Setup"
+	},
+	"hub_home_feature_setup_text": {
+		"message": "Edit your settings and blocking preferences."
+	},
+	"hub_home_feature_setup_button": {
+		"message": "Edit Setup"
+	},
+	"hub_home_feature_setup_button_alt": {
+		"message": "Custom Setup Complete"
+	},
+	"hub_home_feature_supporter_text": {
+		"message": "Become a Ghostery Supporter and unlock special features."
+	},
+	"hub_home_feature_supporter_button": {
+		"message": "Become a Supporter"
+	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Setup"
 	},
@@ -1710,7 +1767,7 @@
 		"message": "We use anonymous Human Web data to improve Ghostery’s performance. No personal data is ever collected. $LINK_LM_START$Learn More$LINK_LM_END$",
 		"placeholders": {
 			"link_lm_start": {
-				"content": "<a href=\"https://www.ghostery.com/faqs/human-web-data-collected/\" target=\"_blank\">"
+				"content": "<a href=\"https://www.ghostery.com/faqs/human-web-data-collected/\" target=\"_blank\" rel=\"noopener noreferrer\">"
 			},
 			"link_lm_end": {
 				"content": "</a>"

app/hub/App.jsx

@@ -0,0 +1,33 @@
+/**
+ * App Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ *
+ * ToDo: Update this file.
+ */
+
+import React from 'react';
+import SideNavigation from './Views/SideNavigationView';
+
+/**
+ * A Functional React Component for rendering the Ghostery Hub App
+ * @return {JSX} JSX for rendering the Ghostery Hub App
+ * @memberof HubComponents
+ */
+const App = props => (
+	<div className="App full-height full-width flex-container">
+		<SideNavigation />
+		<div className="App__mainContent full-height flex-child-grow">
+			{props.children}
+		</div>
+	</div>
+);
+
+export default App;

app/hub/Views/HomeView/HomeView.jsx

@@ -9,42 +9,142 @@
  * 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
- *
- * ToDo: Update this file.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
+import ClassNames from 'classnames';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { ToggleCheckbox } from '../../../shared-components';
 
 /**
- * @class Implement the Home View for the Ghostery Hub
- * @extends Component
+ * A Functional React component for rendering the Home View
+ * @return {JSX} JSX for rendering the Home View of the Hub app
  * @memberof HubComponents
  */
-class HomeView extends Component {
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			title: ''
-		};
-	}
+const HomeView = (props) => {
+	const {
+		justInstalled,
+		setup_complete,
+		tutorial_complete,
+		enable_metrics,
+		changeMetrics,
+		account_text,
+		account_link,
+	} = props;
+	const tutorialFeatureClassNames = ClassNames('HomeView__onboardingFeature columns flex-container align-middle flex-dir-column', {
+		'feature-tutorial-complete': tutorial_complete,
+		'feature-tutorial': !tutorial_complete,
+	});
+	const tutorialButtonClassNames = ClassNames('HomeView__featureButton button primary', {
+		hollow: tutorial_complete,
+	});
+	const setupFeatureClassNames = ClassNames('HomeView__onboardingFeature columns flex-container align-middle flex-dir-column', {
+		'feature-setup-complete': setup_complete,
+		'feature-setup': !setup_complete,
+	});
+	const setupButtonClassNames = ClassNames('HomeView__featureButton button primary', {
+		hollow: setup_complete,
+	});
 
-	/**
-	 * Lifecycle Event
-	 */
-	componentWillMount() {
-		const { title } = this.state;
-		window.document.title = title;
-	}
+	return (
+		<div className="HomeView row align-center">
+			<div className="columns small-12 medium-10 large-8">
+				<div className="HomeView__header row align-center-middle">
+					<img className="columns" src="/app/images/hub/home/ghosty-bubble-heart.svg" />
+					<div className="HomeView__title columns">
+						<h1>
+							{t('hub_home_header_text')}
+						</h1>
+						{justInstalled && (
+							<div className="HomeView__headerTagline">
+								{t('hub_home_header_tagline')}
+							</div>
+						)}
+						<div className="HomeView__headerTagline HomeView--bolded">
+							{t('hub_home_header_tagline_2')}
+						</div>
+						<div className="HomeView__supportContainer HomeView--pad-left">
+							<span>
+								{t('hub_home_header_info')}
+							</span>
+							<a href="https://www.ghostery.com/faqs/" alt={t('hub_home_header_info_link')} target="_blank" rel="noopener noreferrer">
+								{t('hub_home_header_info_link')}
+							</a>
+						</div>
+						<div className="HomeView__supportContainer flex-container align-middle">
+							<ToggleCheckbox
+								checked={enable_metrics}
+								onChange={changeMetrics}
+							/>
+							<span className="clickable" onClick={changeMetrics}>
+								{t('hub_home_header_checkbox_label')}
+							</span>
+						</div>
+					</div>
+				</div>
+				<div className="HomeView__subHeader row align-justify">
+					<div>
+						{t('hub_home_subheader_optimize')}
+					</div>
+					<NavLink to={account_link}>
+						{account_text}
+					</NavLink>
+				</div>
+				<div className="HomeView__onboarding row">
+					<div className={tutorialFeatureClassNames}>
+						<div className="HomeView__featureIcon" />
+						<div className="HomeView__featureTitle">
+							{t('hub_home_feature_tutorial_title')}
+						</div>
+						<div className="HomeView__featureText flex-child-grow">
+							{t('hub_home_feature_tutorial_text')}
+						</div>
+						<NavLink to="/tutorial" className={tutorialButtonClassNames}>
+							{tutorial_complete ? t('hub_home_feature_tutorial_button_alt') : t('hub_home_feature_tutorial_button')}
+						</NavLink>
+					</div>
+					<div className="HomeView__onboardingFeatureDivider column shrink" />
+					<div className={setupFeatureClassNames}>
+						<div className="HomeView__featureIcon" />
+						<div className="HomeView__featureTitle">
+							{t('hub_home_feature_setup_title')}
+						</div>
+						<div className="HomeView__featureText flex-child-grow">
+							{t('hub_home_feature_setup_text')}
+						</div>
+						<NavLink to="/setup" className={setupButtonClassNames}>
+							{setup_complete ? t('hub_home_feature_setup_button_alt') : t('hub_home_feature_setup_button')}
+						</NavLink>
+					</div>
+				</div>
+				<div className="HomeView__supporter row">
+					<div className="HomeView__supporterFeature columns flex-container align-middle">
+						<div className="HomeView__featureText columns">
+							{t('hub_home_feature_supporter_text')}
+						</div>
+						<div className="HomeView__featureIcon columns shrink feature-supporter" />
+						<div className="columns flex-container align-center-middle">
+							<NavLink to="/supporter" className="HomeView__featureButton button primary">
+								{t('hub_home_feature_supporter_button')}
+							</NavLink>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
 
-	/**
-	 * React's required render function. Returns JSX
-	 * @return {JSX} JSX for rendering the Home View of the Hub app
-	 */
-	render() {
-		const { title } = this.state;
-		return <div>{title}</div>;
-	}
-}
+// PropTypes ensure we pass required props of the correct type
+HomeView.propTypes = {
+	justInstalled: PropTypes.bool.isRequired,
+	setup_complete: PropTypes.bool.isRequired,
+	tutorial_complete: PropTypes.bool.isRequired,
+	enable_metrics: PropTypes.bool.isRequired,
+	changeMetrics: PropTypes.func.isRequired,
+	account_text: PropTypes.string.isRequired,
+	account_link: PropTypes.string.isRequired,
+};
 
 export default HomeView;

app/hub/Views/HomeView/HomeView.scss

@@ -0,0 +1,119 @@
+/**
+ * Home View Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+// Home View
+.HomeView {
+	padding-top: 45px;
+	padding-bottom: 25px;
+	color: #4a4a4a;
+}
+.HomeView--bolded {
+	font-weight: 700;
+}
+.HomeView--pad-left {
+	padding-left: 12px;
+}
+.HomeView__header img {
+	max-width: 156px;
+	margin-right: 23px;
+}
+.HomeView__header h1 {
+	color: #4a4a4a;
+	margin-bottom: 19px;
+}
+.HomeView__headerTagline {
+	font-size: 20px;
+	line-height: 38px;
+	color: #4a4a4a;
+}
+.HomeView__supportContainer {
+	margin-top: 12px;
+	margin-left: -12px;
+}
+.HomeView__subHeader {
+	margin-top: 12px;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 32px;
+}
+.HomeView__subHeader a {
+	text-decoration: underline;
+}
+.HomeView__onboarding {
+	margin-top: 7px;
+	padding: 27px 12px 30px;
+	border-radius: 4px;
+	background-color: #f0f3f4;
+}
+.HomeView__onboardingFeature {
+	margin: 0 8px;
+	padding: 0 36px;
+}
+.HomeView__onboardingFeatureDivider {
+	margin: 7px 0 4px;
+	width: 1px;
+	padding: 0;
+	background-color: #979797;
+}
+.HomeView__supporter {
+	margin-top: 22px;
+	padding: 22px 12px;
+	background-color: #f0f3f4;
+	border-radius: 4px;
+}
+.HomeView__supporterFeature {
+	padding: 0 36px;
+}
+.HomeView__featureIcon {
+	height: 50px;
+	width: 50px;
+	margin: 0 24px;
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon {
+	background-image: buildIconWand(#4a4a4a, #daf4ff);
+}
+.HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconWandCheck(#4a4a4a, #daf4ff, #1dafed);
+}
+.HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
+	background-image: buildIconClipboard(#4a4a4a, #daf4ff);
+}
+.HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed);
+}
+.HomeView__featureIcon.feature-supporter {
+	background-image: buildIconFlag(#4a4a4a, #daf4ff);
+}
+.HomeView__featureTitle {
+	text-align: center;
+	font-size: 18px;
+	padding: 22px 0 10px;
+}
+.HomeView__featureText {
+	text-align: center;
+	font-size: 14px;
+	line-height: 27px;
+}
+.HomeView__featureButton {
+	margin: 0;
+}
+.HomeView__onboarding .HomeView__featureButton {
+	margin-top: 26px;
+	min-width: 130px;
+}