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,21 +84,29 @@ 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
 								className="googlesitekit-tooltip-button"
-								text
+								text={ ! setupFlowRefreshEnabled }
+								tertiary={ setupFlowRefreshEnabled }
 								{ ...backProps }
 							>
 								{ backProps.title }
@@ -98,8 +115,14 @@ export default function TourTooltip( {
 						{ step.cta }
 						{ primaryProps.title && (
 							<Button
-								className="googlesitekit-tooltip-button"
-								text
+								className={ classnames(
+									'googlesitekit-tooltip-button',
+									{
+										'googlesitekit-tooltip-button--primary':
+											setupFlowRefreshEnabled,
+									}
+								) }
+								text={ ! setupFlowRefreshEnabled }
 								{ ...primaryProps }
 							>
 								{ primaryProps.title }
@@ -109,7 +132,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';
 
@@ -99,6 +100,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
@@ -241,7 +243,7 @@ export default function TourTooltips( {
 		}
 	}
 
-	// Start tour on initial render
+	// Start tour on initial render.
 	useMount( startTour );
 
 	const parsedSteps = steps.map( ( step ) => ( {
@@ -251,20 +253,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

@@ -375,50 +375,47 @@ function TourControls() {
 	);
 }
 
-export function Default() {
-	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( [] );
 	}
@@ -436,6 +433,8 @@ export function Default() {
 	);
 }
 
+export const Default = Template.bind( {} );
+
 function RepeatableTour() {
 	const tour = useSelect( ( select ) =>
 		select( CORE_USER ).getCurrentTour()
@@ -500,7 +499,28 @@ export function Repeatable() {
 	);
 }
 
+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 />;
+		},
+	],
 };