finalized design system tour

Author: [email protected]

src/components/guided-modal-tour/editor.scss

@@ -72,14 +72,19 @@
 	}
 
 	.ugb-tour-modal__help {
+		position: relative;
 		background: #f4fbff;
 		padding: 8px 12px;
+		padding-inline-start: 30px;
 		border-radius: 8px;
 		border: 1px solid rgba(0, 0, 0, 0.1);
 		margin-block: 16px;
 		svg {
 			vertical-align: text-top;
 			margin-inline-end: 8px;
+			margin-top: 1px;
+			position: absolute;
+			inset-inline-start: 9px;
 		}
 	}
 

src/components/guided-modal-tour/index.js

@@ -153,6 +153,10 @@ const ModalTour = props => {
 
 		// If at the last step, just close
 		if ( currentStep === steps.length - 1 ) {
+			steps[ currentStep ]?.postStep?.( currentStep )
+			if ( hasConfetti ) {
+				throwConfetti()
+			}
 			onClose()
 			return
 		}
@@ -185,7 +189,7 @@ const ModalTour = props => {
 		setTimeout( () => {
 			setForceRefresh( forceRefresh => forceRefresh + 1 )
 		}, 650 )
-	}, [ currentStep, steps ] )
+	}, [ currentStep, steps, hasConfetti ] )
 
 	const handleBackEvent = useCallback( () => {
 		// Hide modal during transition
@@ -465,41 +469,7 @@ const ModalTour = props => {
 				{ showNext && (
 					<Button
 						variant="primary"
-						onClick={ () => {
-							if ( currentStep === steps.length - 1 ) {
-								if ( hasConfetti ) {
-									confetti( {
-										particleCount: 50,
-										angle: 60,
-										spread: 70,
-										origin: { x: 0 },
-										zIndex: 100000,
-										disableForReducedMotion: true,
-									} )
-									confetti( {
-										particleCount: 50,
-										angle: 120,
-										spread: 70,
-										origin: { x: 1 },
-										zIndex: 100000,
-										disableForReducedMotion: true,
-									} )
-									setTimeout( () => {
-										confetti( {
-											particleCount: 50,
-											angle: -90,
-											spread: 90,
-											origin: { y: -0.3 },
-											zIndex: 100000,
-											disableForReducedMotion: true,
-										} )
-									}, 150 )
-								}
-								onClose()
-							} else {
-								handleNextEvent()
-							}
-						} }
+						onClick={ handleNextEvent }
 					>
 						{ currentStep === steps.length - 1 ? (
 							__( 'Finish', i18n )
@@ -517,6 +487,35 @@ const ModalTour = props => {
 	)
 }
 
+const throwConfetti = () => {
+	confetti( {
+		particleCount: 50,
+		angle: 60,
+		spread: 70,
+		origin: { x: 0 },
+		zIndex: 100000,
+		disableForReducedMotion: true,
+	} )
+	confetti( {
+		particleCount: 50,
+		angle: 120,
+		spread: 70,
+		origin: { x: 1 },
+		zIndex: 100000,
+		disableForReducedMotion: true,
+	} )
+	setTimeout( () => {
+		confetti( {
+			particleCount: 50,
+			angle: -90,
+			spread: 90,
+			origin: { y: -0.3 },
+			zIndex: 100000,
+			disableForReducedMotion: true,
+		} )
+	}, 150 )
+}
+
 const Steps = props => {
 	const {
 		numSteps = 3,

src/components/guided-modal-tour/tour-steps.js

@@ -144,6 +144,14 @@ export const TOUR_STEPS = {
 					if ( document.querySelector( '.ugb-global-typography__panel:not(.is-opened)' ) ) {
 						document.querySelector( '.ugb-global-typography__panel .components-panel__body-title' )?.click()
 					}
+					const el = document.querySelector( '.ugb-global-settings-font-pair__container' )
+					if ( el ) {
+						// Scroll this to the top.
+						el.scrollTo( {
+							top: 0,
+							behavior: 'instant',
+						} )
+					}
 				},
 			},
 			{
@@ -166,7 +174,7 @@ export const TOUR_STEPS = {
 			},
 			{
 				title: __( 'Share Your Style Guide', i18n ),
-				description: __( 'Lastly, you can easily share your design system with others by exporting your Style Guide as an image. This is perfect for sharing with clients, teammates, or for documentation.', i18n ),
+				description: __( 'You can easily share your design system with others by exporting your Style Guide as an image. This is perfect for sharing with clients, teammates, or for documentation.', i18n ),
 				anchor: '.ugb-style-guide__print-button',
 				position: 'bottom',
 				glowTarget: '.ugb-style-guide__print-button',
@@ -181,6 +189,17 @@ export const TOUR_STEPS = {
 					}
 				},
 			},
+			{
+				title: __( 'You Did It!', i18n ),
+				description: __( 'That\'s it for the tour! Click the X to close the Style Guide. Your new styles are now live on your site. 🎉', i18n ),
+				anchor: '.ugb-style-guide-popover__close-button',
+				position: 'bottom',
+				glowTarget: '.ugb-style-guide-popover__close-button',
+				nextEventTarget: '.ugb-style-guide-popover__close-button',
+				postStep: () => {
+					document.querySelector( '.ugb-style-guide-popover__close-button' )?.click()
+				},
+			},
 		],
 	},
 	'design-library': {