Add interactivity to course steps

assets/admin/tour/components/sensei-tour-kit/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { WpcomTourKit } from '@automattic/tour-kit';
 import _ from 'lodash';
 
 /**
@@ -15,6 +14,8 @@
  */
 import { SENSEI_TOUR_STORE } from '../../data/store';
 import { TourStep } from '../../types';
+import { performStepAction, removeHighlightClasses } from '../../helper';
+import { WpcomTourKit } from '@automattic/tour-kit';
 
 /**
  * Renders a tour kit component for Sensei.
@@ -69,11 +70,31 @@
 				},
 			},
 			callbacks: {
-				onNextStep: () => {},
-				onPreviousStep: () => {},
-				onGoToStep: () => {},
-				onMaximize: () => {},
-				onStepViewOnce: trackTourStepView,
+				onNextStep: ( index ) => {
+					performStepAction( index + 1, steps );
+				},
+				onPreviousStep: ( index ) => {
+					performStepAction( index - 1, steps );
+				},
+				onGoToStep: ( index ) => {
+					if ( index === steps.length - 1 ) {
+						performStepAction( 0, steps );
+					} else {
+						removeHighlightClasses();
+					}
+				},
+				onMaximize: ( index ) => {
+					performStepAction( index, steps );
+				},
+				onMinimize: () => {
+					removeHighlightClasses();
+				},
+				onStepViewOnce: ( index ) => {
+					if ( index === 0 ) {
+						performStepAction( index, steps );
+					}
+					trackTourStepView( index );
+				},
 			},
 		},
 		placement: 'bottom-start',
@@ -83,7 +104,12 @@
 		return null;
 	}
 
-	return <WpcomTourKit config={ _.merge( config, extraConfig ) } />;
+	return (
+		<WpcomTourKit
+			__temp__className={ 'wpcom-tour-kit' }
+			config={ _.merge( config, extraConfig ) }
+		/>
+	);
 }
 
 export default SenseiTourKit;

assets/admin/tour/components/sensei-tour-kit/index.test.js

@@ -3,13 +3,13 @@
  */
 import SenseiTourKit from './index';
 import getTourSteps from '../../course-tour/steps';
+import { when } from 'jest-when';
 /**
  * External dependencies
  */
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { WpcomTourKit } from '@automattic/tour-kit';
-import { when } from 'jest-when';
 /**
  * WordPress dependencies
  */