Onboarding: Add the task list dashboard (https://github.com/woocommerce/woocommerce-admin/pull/2654)

* Add task list dashboard page

* Add actual site URL to header

* Fix typos

* Remove app bar

* Use material icons

* Update material icons to use Google hosted font

* Localize description strings

plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js

@@ -74,11 +74,13 @@ class ProfileWizard extends Component {
 	componentDidMount() {
 		document.documentElement.classList.remove( 'wp-toolbar' );
 		document.body.classList.add( 'woocommerce-profile-wizard__body' );
+		document.body.classList.add( 'woocommerce-dashboard__body' );
 	}
 
 	componentWillUnmount() {
 		document.documentElement.classList.add( 'wp-toolbar' );
 		document.body.classList.remove( 'woocommerce-profile-wizard__body' );
+		document.body.classList.remove( 'woocommerce-dashboard__body' );
 	}
 
 	getCurrentStep() {

plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss

@@ -1,15 +1,6 @@
 /** @format */
 
 .woocommerce-profile-wizard__body {
-	background: $muriel-gray-0;
-	color: $muriel-gray-600;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-		'Helvetica Neue', sans-serif;
-
-	#wpbody-content {
-		min-height: 100vh;
-	}
-
 	.woocommerce-profile-wizard__container a {
 		color: $muriel-gray-600;
 	}
@@ -409,23 +400,10 @@
 		}
 	}
 
-	/* Hide wp-admin and WooCommerce elements when viewing the profile wizard */
+	#wpadminbar {
-	#adminmenumain,
-	#wpadminbar,
-	.woocommerce-layout__header,
-	.update-nag,
-	.woocommerce-store-alerts,
-	.woocommerce-message,
-	.notice,
-	.error,
-	.updated {
 		display: none;
 	}
 
-	#wpcontent {
-		margin-left: 0;
-	}
-
 	#wpbody {
 		padding-top: 0;
 	}

plugins/woocommerce-admin/client/dashboard/style.scss

@@ -74,3 +74,30 @@
 		padding-bottom: 10px;
 	}
 }
+
+.woocommerce-dashboard__body {
+	background: $muriel-gray-0;
+	color: $muriel-gray-600;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+		'Helvetica Neue', sans-serif;
+
+	#wpbody-content {
+		min-height: 100vh;
+	}
+
+	/* Hide wp-admin and WooCommerce elements when the dashboard body class is present */
+	#adminmenumain,
+	.woocommerce-layout__header,
+	.update-nag,
+	.woocommerce-store-alerts,
+	.woocommerce-message,
+	.notice,
+	.error,
+	.updated {
+		display: none;
+	}
+
+	#wpcontent {
+		margin-left: 0;
+	}
+}

plugins/woocommerce-admin/client/dashboard/task-list/index.js

@@ -3,31 +3,102 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
+import { noop } from 'lodash';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Card, List } from '@woocommerce/components';
 
 /**
  * Internal depdencies
  */
 import './style.scss';
-import { H } from '@woocommerce/components';
 
-export default class TaskList extends Component {
+const getTasks = () => {
+	return [
+		{
+			title: __( 'Connect your store to WooCommerce.com', 'woocommerce-admin' ),
+			description: __(
+				'Install and manage your extensions directly from your Dashboard',
+				'wooocommerce-admin'
+			),
+			before: <i class="material-icons-outlined">extension</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+		{
+			title: __( 'Add your first product', 'woocommerce-admin' ),
+			description: __(
+				'Add products manually, import from a sheet or migrate from another platform',
+				'wooocommerce-admin'
+			),
+			before: <i class="material-icons-outlined">add_box</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+		{
+			title: __( 'Personalize your store', 'woocommerce-admin' ),
+			description: __( 'Create a custom homepage and upload your logo', 'wooocommerce-admin' ),
+			before: <i class="material-icons-outlined">palette</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+		{
+			title: __( 'Set up shipping', 'woocommerce-admin' ),
+			description: __( 'Configure some basic shipping rates to get started', 'wooocommerce-admin' ),
+			before: <i class="material-icons-outlined">local_shipping</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+		{
+			title: __( 'Set up tax', 'woocommerce-admin' ),
+			description: __(
+				'Choose how to configure tax rates - manually or automatically',
+				'wooocommerce-admin'
+			),
+			before: <i class="material-icons-outlined">account_balance</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+		{
+			title: __( 'Set up payments', 'woocommerce-admin' ),
+			description: __(
+				'Select which payment providers you’d like to use and configure them',
+				'wooocommerce-admin'
+			),
+			before: <i class="material-icons-outlined">payment</i>,
+			after: <i class="material-icons-outlined">chevron_right</i>,
+			onClick: noop,
+		},
+	];
+};
+
+export default class TaskDashboard extends Component {
+	componentDidMount() {
+		document.body.classList.add( 'woocommerce-task-dashboard__body' );
+	}
+
+	componentWillUnmount() {
+		document.body.classList.remove( 'woocommerce-task-dashboard__body' );
+	}
+
 	render() {
 		return (
-			<div className="woocommerce-task-list">
+			<Fragment>
-				<div className="woocommerce-task-list__header">
+				<div className="woocommerce-task-dashboard__container">
-					<H className="woocommerce-task-list__header-title">
+					<Card
-						{ __( 'Welcome to the WooCommerce Dashboard', 'woocommerce-admin' ) }
+						title={ __( 'Set up your store and start selling', 'woocommerce-admin' ) }
-					</H>
+						description={ __(
-					<H className="woocommerce-task-list__header-subtitle">
+							'Below you’ll find a list of the most important steps to get your store up and running.',
-						{ __(
-							"Here we'll guide you through the remaining tasks " +
-								'to get your store ready for launch',
 							'woocommerce-admin'
 						) }
-					</H>
+					>
+						<List items={ getTasks() } />
+					</Card>
 				</div>
-			</div>
+			</Fragment>
 		);
 	}
 }

plugins/woocommerce-admin/client/dashboard/task-list/style.scss

@@ -1,14 +1,39 @@
 /** @format */
 
-.woocommerce-task-list__header {
+.woocommerce-task-dashboard__body {
-	text-align: center;
+	.woocommerce-card__description {
-	padding-top: $gap-large;
+		color: $muriel-gray-500;
-
-	h2 {
-		margin: $gap-small 0;
 	}
 
-	.woocommerce-task-list__header-subtitle {
+	.woocommerce-card__body {
-		font-weight: 400;
+		border-top: 1px solid $muriel-gray-50;
+		padding: 0;
+	}
+
+	.woocommerce-list {
+		margin: 0;
+
+		.woocommerce-list__item-before i {
+			width: 36px;
+			height: 36px;
+			font-size: 36px;
+			color: $muriel-hot-purple-600;
+		}
+
+		.woocommerce-list__item-after i {
+			color: $muriel-gray-600;
+		}
+	}
+
+	.woocommerce-list__item-title {
+		color: $muriel-gray-800;
+	}
+
+	.woocommerce-list__item-description {
+		color: $muriel-gray-500;
+	}
+
+	#wpbody-content {
+		position: relative;
 	}
 }

plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss

@@ -16,6 +16,9 @@ $gap-smallest: 4px;
 // Header
 $header-height: 56px;
 
+// Sidebar
+$sidebar-width: 272px;
+
 // @todo Remove this spacing variable
 $spacing: 16px;
 

plugins/woocommerce-admin/includes/class-wc-admin-loader.php

@@ -302,6 +302,13 @@ class WC_Admin_Loader {
 			self::get_file_version( "{$entry}/style.css" )
 		);
 		wp_style_add_data( WC_ADMIN_APP, 'rtl', 'replace' );
+
+		wp_register_style(
+			'wc-material-icons',
+			'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined',
+			array(),
+			self::get_file_version( 'https://fonts.googleapis.com/icon?family=Material+Icons' )
+		);
 	}
 
 	/**
@@ -314,6 +321,7 @@ class WC_Admin_Loader {
 
 		wp_enqueue_script( WC_ADMIN_APP );
 		wp_enqueue_style( WC_ADMIN_APP );
+		wp_enqueue_style( 'wc-material-icons' );
 
 		// Use server-side detection to prevent unneccessary stylesheet loading in other browsers.
 		$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok.

plugins/woocommerce-admin/packages/components/src/list/style.scss

@@ -11,6 +11,7 @@
 	}
 
 	.woocommerce-list__item-description {
+		margin-top: $gap-smallest;
 		display: block;
 		font-size: 14px;
 		line-height: 20px;
@@ -18,7 +19,7 @@
 	}
 
 	.woocommerce-list__item-before {
-		margin-right: $gap;
+		margin-right: 20px;
 		display: flex;
 		align-items: center;
 	}

plugins/woocommerce-admin/packages/date/test/index.js

@@ -77,7 +77,7 @@ describe( 'toMoment', () => {
 		expect( fn ).toThrow();
 	} );
 
-	it( 'shoud return null on invalid date', () => {
+	it( 'should return null on invalid date', () => {
 		const invalidDate = toMoment( 'YYYY', '2018-00-00' );
 		expect( invalidDate ).toBe( null );
 	} );