🚧 👷🏼‍♀️ Welcome Tour Animations

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/index.js

@@ -3,4 +3,4 @@
  */
 import './src/store';
 import './src/disable-core-nux';
-import './src/wpcom-nux';
+import './src/tour-launch';

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/icons/maximize.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const minimize = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.086 5.412l3.476-.015c-.627.625-1.225 1.22-1.82 1.81l-.03.031c-.977.971-1.944 1.934-3.015 3.004l1.06 1.061c1.07-1.07 2.036-2.03 3.013-3.002l.03-.03 1.817-1.808-.03 3.448 1.5.013.046-5.28.007-.759-.76.003-5.301.024.007 1.5zM9.914 18.587l-3.476.016c.627-.625 1.225-1.22 1.82-1.81l.03-.031c.977-.971 1.944-1.934 3.015-3.004l-1.06-1.061c-1.07 1.069-2.036 2.03-3.012 3.001l-.001.001-.03.03-1.817 1.808.03-3.448-1.5-.013-.046 5.279-.007.76.76-.003 5.301-.024-.007-1.5z"
+			fill="#50575E"
+		/>
+	</SVG>
+);
+
+export default minimize;

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/icons/minimize.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const minimize = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M18.514 9.988l-3.476.016c.627-.626 1.225-1.22 1.82-1.811l.03-.03v-.001c.977-.971 1.944-1.933 3.015-3.004l-1.06-1.06c-1.07 1.069-2.037 2.03-3.013 3.001l-.03.03-1.818 1.809.03-3.449-1.5-.013-.045 5.28-.007.76.76-.004 5.301-.024-.007-1.5zM5.486 14.012l3.477-.016-1.82 1.811-.03.03c-.977.972-1.945 1.934-3.015 3.005l1.06 1.06c1.07-1.068 2.035-2.03 3.012-3V16.9l.03-.03 1.818-1.809-.03 3.449 1.5.013.046-5.28.006-.76-.76.004-5.3.024.006 1.5z"
+			fill="#fff"
+		/>
+	</SVG>
+);
+
+export default minimize;

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/pagination.js

@@ -0,0 +1,54 @@
+/*** THIS MUST BE THE FIRST THING EVALUATED IN THIS SCRIPT *****/
+import './public-path';
+
+/**
+ * External dependencies
+ */
+import { times } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { SVG, Circle } from '@wordpress/primitives';
+import { Button } from '@wordpress/components';
+
+/*
+ * Copied from the Guide Component: https://github.com/WordPress/gutenberg/blob/4bbfbc13603d28fcc45368c529954164bf8581de/packages/components/src/guide/page-control.js#L3
+ * Note that it is styled by .components-guide-* styling that already exists from using the Guide package elsewhere
+ * TODO: make this into WP package?
+ */
+export default function PaginationControl( { currentPage, numberOfPages, setCurrentPage } ) {
+	return (
+		<ul
+			className="components-guide__page-control"
+			aria-label={ __( 'Guide controls', 'full-site-editing' ) }
+		>
+			{ times( numberOfPages, ( page ) => (
+				<li
+					key={ page }
+					// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
+					aria-current={ page === currentPage ? 'step' : undefined }
+				>
+					<Button
+						key={ page }
+						icon={ <DotIcon isSelected={ page === currentPage } /> }
+						aria-label={ sprintf(
+							/* translators: 1: current page number 2: total number of pages */
+							__( 'Page %1$d of %2$d', 'full-site-editing' ),
+							page + 1,
+							numberOfPages
+						) }
+						onClick={ () => setCurrentPage( page ) }
+					/>
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+const DotIcon = ( { isSelected } ) => (
+	<SVG width="6" height="6" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Circle cx="3" cy="3" r="3" fill={ isSelected ? '#419ECD' : '#E1E3E6' } />
+	</SVG>
+);

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/style-tour-animation.scss

@@ -0,0 +1,57 @@
+$animation-frame: 100px;
+
+.animation-frame {
+	height: $animation-frame;
+	position: fixed;
+	width: $animation-frame;
+}
+.inserter-pulse {
+	border: 1px solid var( --color-primary );
+	border-radius: 50%;
+	height: $animation-frame - 2;
+	transform: scale( 0, 0 );
+	width: $animation-frame - 2;
+
+	animation: pulse 1s infinite ease-out;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale( 0, 0 );
+	}
+
+	50% {
+		transform: scale( 0.7, 0.7 );
+	}
+
+	90% {
+		transform: scale( 0.96, 0.96 );
+		border: 2px solid var( --color-primary-light );
+	}
+
+	94% {
+		transform: scale( 0.97, 0.97 );
+		border: 2px solid var( --color-primary-light );
+	}
+
+	96% {
+		transform: scale( 0.98, 0.98 );
+		border: 3px solid var( --color-primary-light );
+	}
+
+	100% {
+		transform: scale( 1.1, 1.1 );
+		border: 3px solid transparent;
+	}
+}
+
+// @keyframes pulse2 {
+// 	0% {
+// 		transform: scale( 0, 0 );
+// 	}
+
+// 	100% {
+// 		transform: scale( 1, 1 );
+// 		border: 2px solid var( --color-primary-light );
+// 	}
+// }

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/style-tour.scss

@@ -0,0 +1,91 @@
+@import '~@wordpress/base-styles/colors';
+@import '~@wordpress/base-styles/mixins';
+@import '~@wordpress/base-styles/variables';
+@import '~@wordpress/base-styles/z-index';
+
+.wpcom-editor-welcome-tour-frame {
+	background-color: $white;
+	border-radius: 4px;
+	bottom: 40px;
+	display: inline;
+	left: 40px;
+	position: fixed;
+}
+
+.welcome-tour-card__heading {
+	font-size: 1.25rem;
+	margin: 0.5rem 0;
+}
+
+.welcome-tour-card__description {
+	font-size: 0.875rem;
+	line-height: 1.5rem;
+}
+
+.wpcom-editor-welcome-tour__resume-btn {
+	border-radius: 4px;
+	box-shadow: 0 2px 6px rgba( 60, 66, 87, 0.08 ), 0 0 0 1px rgba( 60, 66, 87, 0.16 ),
+		0 1px 1px rgba( 0, 0, 0, 0.08 );
+	background-color: $white;
+	color: $black;
+
+	&.components-button {
+		height: 44px;
+	}
+}
+
+.wpcom-editor-welcome-tour-card-frame {
+	position: relative;
+
+	// TODO update markup/css  if this isn't ok
+	.components-guide__page-control {
+		bottom: 0;
+		left: $grid-unit-20;
+		margin: 0;
+		position: absolute;
+
+		li {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.welcome-tour-card {
+	max-width: 400px;
+
+	.components-card__body,
+	.components-card__footer {
+		border-top: none;
+		padding: $grid-unit-15 !important;
+	}
+
+	.components-guide__page-control {
+		margin: 0;
+
+		.components-button {
+			min-width: auto;
+			&.has-icon {
+				padding: 3px;
+			}
+		}
+
+		li {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.welcome-tour-card__overlay-controls {
+	left: 0;
+	padding: $grid-unit-15;
+	position: absolute;
+	right: 0;
+
+	.components-button {
+		background: $dark-gray-700;
+	}
+}
+
+.welcome-tour-card__next-btn {
+	margin-left: $grid-unit-15;
+}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/tour-animation.js

@@ -0,0 +1,49 @@
+/*** THIS MUST BE THE FIRST THING EVALUATED IN THIS SCRIPT *****/
+import './public-path';
+
+/**
+ * Internal dependencies
+ */
+import './style-tour.scss';
+import './style-tour-animation.scss';
+
+/**
+ * External dependencies
+ */
+
+/**
+ * This is a very loose proof of concept for inserting an animation over the block inserter button.
+ * Manipulating the DOM as has been done below, is not very robust
+ */
+
+export default function TourAnimation( { cardAnimation } ) {
+	if ( ! cardAnimation ) {
+		return null;
+	}
+	// The DOM is still rendering when this code runs for first slide, [+] inserter button is NOT in final position
+	// The ETK Sidenav (W) button pushes the nav items to the right.
+	// const wpIconBtnWidth = 60;
+	const animationFrame = 100;
+
+	// Get the [+] block editor inserter button node
+	const body = document.body;
+	const inserter = body.getElementsByClassName( 'edit-post-header-toolbar__inserter-toggle' )[ 0 ];
+
+	if ( ! inserter ) {
+		return null;
+	}
+
+	// Find the position in the viewport where the top left corner of the animation frame will be positioned
+	// TODO: handle case where user resizes viewport
+	const inserterRect = inserter.getBoundingClientRect();
+	const animationPosition = {
+		left: inserterRect.left + inserterRect.width / 2 - animationFrame / 2,
+		top: inserterRect.top + inserterRect.height / 2 - animationFrame / 2,
+	};
+
+	return (
+		<div className="animation-frame" style={ animationPosition }>
+			<div className="inserter-pulse"></div>
+		</div>
+	);
+}

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/tour-card.js

@@ -0,0 +1,96 @@
+/*** THIS MUST BE THE FIRST THING EVALUATED IN THIS SCRIPT *****/
+import './public-path';
+
+/**
+ * Internal dependencies
+ */
+import './style-tour.scss';
+import PaginationControl from './pagination';
+import minimize from './icons/minimize';
+
+/**
+ * External dependencies
+ */
+import { Button, Card, CardBody, CardFooter, CardMedia, Flex } from '@wordpress/components';
+import { close } from '@wordpress/icons';
+
+// import { useEffect, useState } from '@wordpress/element';
+
+function WelcomeTourCard( {
+	cardContent,
+	cardIndex,
+	lastCardIndex,
+	onMinimize,
+	onDismiss,
+	setCurrentCard,
+} ) {
+	const { description, heading, imgSrc } = cardContent;
+
+	return (
+		<Card className="welcome-tour-card" isElevated>
+			<CardOverlayControls onDismiss={ onDismiss } onMinimize={ onMinimize } />
+			<CardMedia>
+				<img alt="Editor Welcome Tour" src={ imgSrc } />
+			</CardMedia>
+			<CardBody>
+				<h2 className="welcome-tour-card__heading">{ heading }</h2>
+				<p className="welcome-tour-card__description">{ description }</p>
+				{ /* TODO: add conditional "Restart tour" functionality for last slide" */ }
+			</CardBody>
+			<CardFooter>
+				<PaginationControl
+					className=""
+					currentPage={ cardIndex }
+					numberOfPages={ lastCardIndex + 1 }
+					setCurrentPage={ setCurrentCard }
+				/>
+				<div>
+					{ cardIndex === 0 ? (
+						<Button isTertiary={ true } onClick={ () => onDismiss() }>
+							No thanks
+						</Button>
+					) : (
+						<Button isTertiary={ true } onClick={ () => setCurrentCard( cardIndex - 1 ) }>
+							Back
+						</Button>
+					) }
+					{ cardIndex < lastCardIndex ? (
+						<Button
+							className="welcome-tour-card__next-btn"
+							isPrimary={ true }
+							onClick={ () => setCurrentCard( cardIndex + 1 ) }
+						>
+							{ cardIndex === 0 ? "Let's start" : 'Next' }
+						</Button>
+					) : (
+						<Button
+							className="welcome-tour-card__next-btn"
+							isPrimary={ true }
+							onClick={ () => onDismiss() }
+						>
+							Done
+						</Button>
+					) }
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
+
+function CardOverlayControls( { onMinimize, onDismiss } ) {
+	return (
+		<div className="welcome-tour-card__overlay-controls">
+			<Flex>
+				<Button
+					isPrimary
+					icon={ minimize }
+					iconSize={ 24 }
+					onClick={ () => onMinimize( true ) }
+				></Button>
+				<Button isPrimary icon={ close } iconSize={ 24 } onClick={ () => onDismiss() }></Button>
+			</Flex>
+		</div>
+	);
+}
+
+export default WelcomeTourCard;