My plan: Add checklist progress banner UI (#12277)

Adds components and styles necessary for the checklist.

Checklist will not be visible because no data is included.

_inc/client/components/data/query-checklist-progress.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import { isLoading } from 'state/checklist/selectors';
+import { requestSiteChecklist } from 'state/checklist/actions';
+
+class QuerySiteChecklist extends Component {
+	static propTypes = {
+		requestSiteChecklist: PropTypes.func,
+		isLoading: PropTypes.bool,
+	};
+
+	componentDidMount() {
+		if ( ! this.props.isLoading ) {
+			this.props.requestSiteChecklist();
+		}
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default connect(
+	state => ( {
+		isLoading: isLoading( state ),
+	} ),
+	{ requestSiteChecklist }
+)( QuerySiteChecklist );

_inc/client/components/screen-reader-text/index.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Relies on WordPress core styling via "screen-reader-text" class:
+ * https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
+ */
+
+export default function ScreenReaderText( { children } ) {
+	return <span className="screen-reader-text">{ children }</span>;
+}

_inc/client/my-plan/checklist-progress-card/index.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { translate as __ } from 'i18n-calypso';
+import React from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import Card from 'components/card';
+import ProgressBar from './progress-bar';
+import QueryChecklistProgress from 'components/data/query-checklist-progress';
+import { getSiteRawUrl } from 'state/initial-state';
+import { getChecklistCompletion } from 'state/checklist/selectors';
+
+function ChecklistProgressCard( { completed, total, siteSlug } ) {
+	return (
+		<>
+			<QueryChecklistProgress />
+			{ completed && total && (
+				<Card compact className="checklist__header">
+					<div className="checklist__header-main">
+						<div className="checklist__header-progress">
+							<span className="checklist__header-progress-text">
+								{ __( 'Your Jetpack setup progress', {
+									comment: 'Onboarding task list progress',
+								} ) }
+							</span>
+							<span className="checklist__header-progress-number">{ `${ completed }/${ total }` }</span>
+						</div>
+						<ProgressBar total={ total } value={ completed } />
+					</div>
+					<div className="checklist__header-secondary">
+						<Button compact primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }>
+							{ __( 'Complete Jetpack Setup', {
+								comment: 'Text on link to list of onboarding tasks',
+							} ) }
+						</Button>
+					</div>
+				</Card>
+			) }
+		</>
+	);
+}
+
+export default connect( state => {
+	return {
+		siteSlug: getSiteRawUrl( state ),
+		...getChecklistCompletion( state ), // add completed and total
+	};
+} )( ChecklistProgressCard );

_inc/client/my-plan/checklist-progress-card/progress-bar/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import ScreenReaderText from 'components/screen-reader-text';
+
+export default class ProgressBar extends PureComponent {
+	static defaultProps = {
+		total: 100,
+	};
+
+	static propTypes = {
+		value: PropTypes.number.isRequired,
+		total: PropTypes.number,
+		title: PropTypes.string,
+		className: PropTypes.string,
+	};
+
+	render() {
+		const classes = classnames( this.props.className, 'checklist-header-progress-bar' );
+		const percentage = Math.min( Math.ceil( ( this.props.value / this.props.total ) * 100 ), 100 );
+		const title = this.props.title ? (
+			<ScreenReaderText>{ this.props.title }</ScreenReaderText>
+		) : null;
+
+		return (
+			<div className={ classes }>
+				<div
+					className="checklist-header-progress-bar__progress"
+					style={ { width: percentage + '%' } }
+				>
+					{ title }
+				</div>
+			</div>
+		);
+	}
+}

_inc/client/my-plan/checklist-progress-card/progress-bar/style.scss

@@ -0,0 +1,52 @@
+.progress-bar {
+	width: 100%;
+	display: inline-block;
+	position: relative;
+	height: 9px;
+	background-color: $muriel-gray-100;
+	border-radius: 4.5px;
+
+	&.is-compact {
+		height: 4px;
+	}
+}
+
+.progress-bar__progress {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	background-color: $muriel-blue-500;
+	border-radius: 4.5px;
+	transition: width 200ms;
+}
+
+.progress-bar.is-pulsing .progress-bar__progress {
+	animation: jetpack_progress-bar-animation 3300ms infinite linear;
+
+	background-size: 50px 100%;
+	background-image: linear-gradient(
+		-45deg,
+		$muriel-blue-500 28%,
+		$muriel-blue-300 28%,
+		$muriel-blue-300 72%,
+		$muriel-blue-500 72%
+	);
+}
+
+@keyframes jetpack_progress-bar-animation {
+	0% {
+		background-position: 100px 0;
+	}
+}
+
+/* Percentage bar */
+.percentage-bar {
+	border-radius: 0;
+	height: 8px;
+	width: 150px;
+	.progress-bar__progress {
+		border-radius: 0;
+	}
+}

_inc/client/my-plan/checklist-progress-card/style.scss

@@ -0,0 +1,122 @@
+.checklist__header {
+	display: flex;
+	flex-direction: row;
+
+	&-main {
+		display: flex;
+		flex: 1 1;
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	&-secondary {
+		display: flex;
+		flex: 2 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	&-progress {
+		display: flex;
+		flex-direction: row;
+		font-size: 14px;
+		white-space: nowrap;
+		margin-bottom: 5px;
+	}
+
+	&-progress-text {
+		display: flex;
+		flex: 1 1;
+		margin: 0;
+		color: $muriel-gray-500;
+	}
+
+	&-progress-number {
+		display: flex;
+		color: $muriel-gray-500;
+		padding-left: 1em;
+	}
+
+	&-summary {
+		font-size: 12px;
+		line-height: 24px;
+		color: $muriel-gray-500;
+		cursor: pointer;
+	}
+
+	&-action {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 48px;
+		height: 100%;
+		border-left: 1px solid $muriel-gray-0;
+		cursor: pointer;
+
+		.gridicon {
+			fill: $muriel-gray-300;
+			vertical-align: middle;
+			align-items: center;
+			transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), color 0.2s ease-in;
+		}
+
+		.checklist.is-expanded & {
+			.gridicon {
+				transform: rotate( 180deg );
+			}
+		}
+
+		.accessible-focus &:focus {
+			box-shadow: inset 0 0 0 2px $muriel-blue-300;
+		}
+	}
+
+	.checklist.is-expanded &-action {
+		.gridicon {
+			transform: rotate( 180deg );
+		}
+	}
+
+	.dops-button.is-primary {
+		margin-right: 0;
+		background: $green-primary;
+		border-color: $green-secondary;
+
+		&:focus {
+			box-shadow: 0 0 0 2px lighten( $green-secondary, 20% );
+		}
+	}
+}
+
+@media ( max-width: 600px ) {
+	.checklist__header {
+		display: block;
+
+		&-secondary {
+			display: block;
+			text-align: left;
+			padding-top: 15px;
+		}
+	}
+}
+
+.checklist-header-progress-bar {
+	width: 100%;
+	display: inline-block;
+	position: relative;
+	background-color: $muriel-gray-100;
+	border-radius: 4.5px;
+	height: 4px;
+}
+
+.checklist-header-progress-bar__progress {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	background-color: $muriel-hot-green-400;
+	border-radius: 4.5px;
+	transition: width 200ms;
+}

_inc/client/my-plan/my-plan-header.jsx

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
  */
 import { imagePath } from 'constants/urls';
 import { getUpgradeUrl, showBackups } from 'state/initial-state';
+import ChecklistProgress from './checklist-progress-card';
 
 class MyPlanHeader extends React.Component {
 	trackLearnMore = () => {
@@ -135,7 +136,12 @@ class MyPlanHeader extends React.Component {
 				);
 				break;
 		}
-		return <div>{ planCard }</div>;
+		return (
+			<>
+				<div>{ planCard }</div>
+				<ChecklistProgress />
+			</>
+		);
 	}
 }
 export default connect( state => {

_inc/client/scss/style.scss

@@ -12,6 +12,7 @@
 @import 'functions/rem';
 
 // Variables
+@import '../../../node_modules/@automattic/calypso-color-schemes/src/__color-studio/color-variables.scss';
 @import 'variables/colors';
 @import 'variables/layout';
 
@@ -46,6 +47,7 @@
 @import '../components/apps-card/style';
 @import '../components/jetpack-dialogue/style';
 @import '../components/about-page/style';
+@import '../my-plan/checklist-progress-card/style.scss';
 
 // Page Templates
 @import '../at-a-glance/style';