Enhancement/#11812 - Implement new designs for the TourTooltip component

assets/js/components/TourTooltip.js

@@ -33,6 +33,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { Button } from 'googlesitekit-components';
 import { createIncrementalArrayBySize } from '@/js/util/create-incremental-array-by-size';
+import { useFeature } from '@/js/hooks/useFeature';
 import CloseIcon from '@/svg/icons/close.svg';
 import Typography from './Typography';
 
@@ -45,18 +46,26 @@ export default function TourTooltip( {
 	step,
 	tooltipProps,
 } ) {
+	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 	const indicatorArray = size > 1 ? createIncrementalArrayBySize( size ) : [];
 	function getIndicatorClassName( indicatorIndex ) {
 		return classnames( 'googlesitekit-tooltip-indicator', {
 			active: indicatorIndex === index,
 		} );
 	}
 
+	// Determine close icon size based on feature flag.
+	const closeIconSize = setupFlowRefreshEnabled ? 10 : 14;
+
 	return (
 		<div
 			className={ classnames(
 				'googlesitekit-tour-tooltip',
-				step.className
+				step.className,
+				{
+					'googlesitekit-tour-tooltip--setupFlowRefresh':
+						setupFlowRefreshEnabled,
+				}
 			) }
 			{ ...tooltipProps }
 		>
@@ -75,16 +84,23 @@ export default function TourTooltip( {
 					</div>
 				</div>
 				<CardActions className="googlesitekit-tooltip-actions">
-					<ul className="googlesitekit-tooltip-indicators">
-						{ indicatorArray.map( ( indicatorIndex ) => (
-							<li
-								key={ `indicator-${ indicatorIndex }` }
-								className={ getIndicatorClassName(
-									indicatorIndex
-								) }
-							/>
-						) ) }
-					</ul>
+					{ ! setupFlowRefreshEnabled && (
+						<ul className="googlesitekit-tooltip-indicators">
+							{ indicatorArray.map( ( indicatorIndex ) => (
+								<li
+									key={ `indicator-${ indicatorIndex }` }
+									className={ getIndicatorClassName(
+										indicatorIndex
+									) }
+								/>
+							) ) }
+						</ul>
+					) }
+					{ setupFlowRefreshEnabled && (
+						<p className="googlesitekit-tooltip-steps">
+							{ index + 1 } / { size }
+						</p>
+					) }
 					<div className="googlesitekit-tooltip-buttons">
 						{ index !== 0 && (
 							<Button
@@ -98,7 +114,13 @@ export default function TourTooltip( {
 						{ step.cta }
 						{ primaryProps.title && (
 							<Button
-								className="googlesitekit-tooltip-button"
+								className={ classnames(
+									'googlesitekit-tooltip-button',
+									{
+										'googlesitekit-tooltip-button--primary':
+											setupFlowRefreshEnabled,
+									}
+								) }
 								text
 								{ ...primaryProps }
 							>
@@ -109,7 +131,12 @@ export default function TourTooltip( {
 				</CardActions>
 				<Button
 					className="googlesitekit-tooltip-close"
-					icon={ <CloseIcon width="14" height="14" /> }
+					icon={
+						<CloseIcon
+							width={ closeIconSize }
+							height={ closeIconSize }
+						/>
+					}
 					onClick={ closeProps.onClick }
 					aria-label={ __( 'Close', 'google-site-kit' ) }
 					text

assets/js/components/TourTooltips.js

@@ -35,6 +35,7 @@ import { useSelect, useDispatch, useRegistry } from 'googlesitekit-data';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { trackEvent } from '@/js/util/tracking';
+import { useFeature } from '@/js/hooks/useFeature';
 import TourTooltip from './TourTooltip';
 import useViewContext from '@/js/hooks/useViewContext';
 
@@ -98,6 +99,7 @@ export default function TourTooltips( {
 	const registry = useRegistry();
 
 	const viewContext = useViewContext();
+	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 
 	const stepIndex = useSelect(
 		( select ) => select( CORE_UI ).getValue( stepKey ) || 0
@@ -233,7 +235,7 @@ export default function TourTooltips( {
 		}
 	}
 
-	// Start tour on initial render
+	// Start tour on initial render.
 	useMount( startTour );
 
 	const parsedSteps = steps.map( ( step ) => ( {
@@ -243,20 +245,33 @@ export default function TourTooltips( {
 		...step,
 	} ) );
 
+	// Customize floater props based on feature flag.
+	const customFloaterProps = setupFlowRefreshEnabled
+		? {
+				...floaterProps,
+				styles: {
+					...floaterProps.styles,
+					floater: {
+						filter: 'drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 16px)',
+					},
+				},
+		  }
+		: floaterProps;
+
 	return (
 		<Joyride
 			callback={ handleJoyrideCallback }
-			floaterProps={ floaterProps }
+			floaterProps={ customFloaterProps }
 			locale={ joyrideLocale }
 			run={ run }
 			stepIndex={ stepIndex }
 			steps={ parsedSteps }
 			styles={ joyrideStyles }
 			tooltipComponent={ TourTooltip }
+			showProgress={ ! setupFlowRefreshEnabled }
 			continuous
 			disableOverlayClose
 			disableScrolling
-			showProgress
 		/>
 	);
 }

assets/js/components/TourTooltips.stories.js

@@ -374,50 +374,47 @@ function TourControls() {
 	);
 }
 
-function Template() {
-	const steps = [
-		{
-			target: '.step-1',
-			title: 'See where your visitors are coming from',
-			content:
-				'Click on a slice of the chart to see how it changed over time just for that source',
-			placement: 'bottom-start',
-		},
-		{
-			target: '.step-2',
-			title: "It's now easier to see your site's traffic at a glance",
-			content:
-				'Check the trend graph to see how your traffic changed over time',
-			placement: 'top-end',
-		},
-		{
-			target: '.step-3',
-			title: 'Check how your traffic changed since you last looked',
-			content:
-				'Select a time frame to see the comparison with the previous time period',
-		},
-		{
-			target: '.step-4',
-			title: 'Generic step title for the fourth step',
-			content: (
-				<div>
-					{ createInterpolateElement(
-						'This is the fourth step with an external link that should go to Google, <a>link</a>.',
-						{
-							a: <Link href="http://google.com" external />,
-						}
-					) }
-				</div>
-			),
-			floaterProps: {
-				target: '.step-4-anchor',
-			},
+const steps = [
+	{
+		target: '.step-1',
+		title: 'See where your visitors are coming from',
+		content:
+			'Click on a slice of the chart to see how it changed over time just for that source',
+		placement: 'bottom-start',
+	},
+	{
+		target: '.step-2',
+		title: "It's now easier to see your site's traffic at a glance",
+		content:
+			'Check the trend graph to see how your traffic changed over time',
+		placement: 'top-end',
+	},
+	{
+		target: '.step-3',
+		title: 'Check how your traffic changed since you last looked',
+		content:
+			'Select a time frame to see the comparison with the previous time period',
+	},
+	{
+		target: '.step-4',
+		title: 'Generic step title for the fourth step',
+		content: (
+			<div>
+				{ createInterpolateElement(
+					'This is the fourth step with an external link that should go to Google, <a>link</a>.',
+					{
+						a: <Link href="http://google.com" external />,
+					}
+				) }
+			</div>
+		),
+		floaterProps: {
+			target: '.step-4-anchor',
 		},
-	];
-	fetchMock.post( /^\/google-site-kit\/v1\/core\/user\/data\/dismiss-tour/, {
-		body: JSON.stringify( [ 'feature' ] ),
-		status: 200,
-	} );
+	},
+];
+
+function Template() {
 	function setupRegistry( registry ) {
 		registry.dispatch( CORE_USER ).receiveGetDismissedTours( [] );
 	}
@@ -437,7 +434,28 @@ function Template() {
 
 export const Default = Template.bind( {} );
 
+export const SetupFlowRefresh = Template.bind( {} );
+SetupFlowRefresh.storyName = 'Setup Flow Refresh';
+SetupFlowRefresh.parameters = {
+	features: [ 'setupFlowRefresh' ],
+};
+
 export default {
 	title: 'Components/TourTooltips',
 	component: TourTooltips,
+	decorators: [
+		( Story ) => {
+			// Set up fetchMock with overwriteRoutes to handle story switching.
+			fetchMock.post(
+				/^\/google-site-kit\/v1\/core\/user\/data\/dismiss-tour/,
+				{
+					body: JSON.stringify( [ 'feature' ] ),
+					status: 200,
+				},
+				{ overwriteRoutes: true }
+			);
+
+			return <Story />;
+		},
+	],
 };

assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss

@@ -220,3 +220,65 @@
 	margin-top: 42px !important;
 	top: 0 !important;
 }
+
+// Setup Flow Refresh variant styles.
+.googlesitekit-tour-tooltip--setupFlowRefresh {
+
+	.googlesitekit-tooltip-title {
+		font-family: $f-primary;
+		font-size: $fs-title-lg;
+		font-weight: $fw-medium;
+		letter-spacing: $ls-xxs;
+		line-height: $lh-title-lg;
+		margin-bottom: 8px;
+	}
+
+	.googlesitekit-tooltip-content {
+		font-family: $f-primary;
+		font-size: $fs-body-md;
+		font-weight: $fw-normal;
+		letter-spacing: $ls-s;
+		line-height: $lh-body-md;
+	}
+
+	.googlesitekit-tooltip-body {
+		max-width: 332px;
+		padding: 32px $grid-gap-phone 0;
+	}
+
+	.googlesitekit-tooltip-close {
+		right: $grid-gap-phone;
+		top: $grid-gap-phone;
+	}
+
+	.googlesitekit-tooltip-button {
+		border-radius: $br-lg;
+		line-height: 20px;
+
+		&:focus {
+			outline: none;
+		}
+
+		&:focus:not(:active) {
+			outline: 2px solid $c-interactive-inverse-focus;
+		}
+	}
+
+	.googlesitekit-tooltip-button--primary {
+		background-color: $c-site-kit-sk-300;
+		padding: 6px $grid-gap-phone;
+	}
+
+	.googlesitekit-tooltip-steps {
+		font-family: $f-primary;
+		font-size: $fs-label-md;
+		font-weight: $fw-medium;
+		letter-spacing: $ls-xs;
+		line-height: $lh-label-md;
+		margin: 0;
+	}
+
+	.googlesitekit-tooltip-actions {
+		padding: $grid-gap-phone;
+	}
+}