hub home and side navigation

_locales/en/messages.json

@@ -1593,6 +1593,60 @@
 	"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 analytics and Human Web data to improve Ghostery’s performance. "
+	},
+	"hub_home_header_checkbox_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"
 	},

app/hub/components/App.jsx → app/hub/App.jsx

@@ -14,7 +14,7 @@
  */
 
 import React, { Component } from 'react';
-import SideNavigation from './SideNavigation';
+import SideNavigation from './Views/SideNavigationView';
 
 /**
  * @class Implements the container App for the Ghostery Hub
@@ -33,10 +33,10 @@ class App extends Component {
 						location: 'list', type: 'link', href: '/', icon: 'home', text: 'Home'
 					},
 					{
-						location: 'list', type: 'link', href: '/setup/1', icon: 'home', text: 'Customize Setup'
+						location: 'list', type: 'link', href: '/setup', icon: 'home', text: 'Customize Setup'
 					},
 					{
-						location: 'list', type: 'link', href: '/tutorial/1', icon: 'home', text: 'Visit Tutorial'
+						location: 'list', type: 'link', href: '/tutorial', icon: 'home', text: 'Visit Tutorial'
 					},
 					{
 						location: 'list', type: 'link', href: '/supporter', icon: 'home', text: 'Become a Ghostery Supporter'

app/hub/Views/HomeView/HomeView.jsx

@@ -9,42 +9,137 @@
  * 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_human_web,
+		changeHumanWeb,
+		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 flex-container align-middle">
+							<ToggleCheckbox
+								checked={enable_human_web}
+								onChange={changeHumanWeb}
+							/>
+							<div>
+								<span>{t('hub_home_header_checkbox_label')}</span>
+								<NavLink to="/faq">
+									{t('hub_home_header_checkbox_link')}
+								</NavLink>
+							</div>
+						</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_human_web: PropTypes.bool.isRequired,
+	changeHumanWeb: 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,121 @@
+/**
+ * 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__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);
+}
+.HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconWandCheck(#4a4a4a);
+}
+.HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
+	background-image: buildIconClipboard(#4a4a4a);
+}
+.HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconClipboardCheck(#4a4a4a);
+}
+.HomeView__featureIcon.feature-supporter {
+	background-image: buildIconFlag(#4a4a4a);
+}
+.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;
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1.3;
+	text-transform: uppercase;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+}
+.HomeView__onboarding .HomeView__featureButton {
+	margin-top: 26px;
+	min-width: 130px;
+}