component renamed and added main component

Author: [email protected]

src/components/modal-tour/editor.scss …components/guided-modal-tour/editor.scsssrc/components/modal-tour/editor.scss renamed to src/components/guided-modal-tour/editor.scss src/components/modal-tour/editor.scss renamed to src/components/guided-modal-tour/editor.scss

@@ -1,4 +1,7 @@
-import { i18n } from 'stackable'
+import {
+	i18n,
+	guidedTourStates, // TODO: This doesn't exist yet. The state should be loaded here from localize values, this should be an object with the tour ID as the key and the state as the value.
+} from 'stackable'
 import classNames from 'classnames'
 
 import {
@@ -41,6 +44,29 @@ const STEPS = [
 
 const NOOP = () => {}
 
+// The main tour component.
+const GuidedModalTour = props => {
+	const {
+		steps = STEPS,
+		tourId = '', // This is the ID of the tour, this will be used to store the tour state in the database.
+	} = props
+
+	// On mount, check if the tour has been completed, if so, don't show it.
+	const [ isDone, setIsDone ] = useState( guidedTourStates?.[ tourId ] )
+
+	if ( isDone ) {
+		return null
+	}
+
+	return <ModalTour
+		steps={ steps }
+		onClose={ () => {
+			// TODO: Save the tour state to the database that we finished it.
+			setIsDone( true )
+		} }
+	/>
+}
+
 const ModalTour = props => {
 	const {
 		steps = STEPS,
@@ -56,16 +82,16 @@ const ModalTour = props => {
 	const {
 		title,
 		description,
-		ctaLabel = null,
-		ctaOnClick = NOOP,
-		size = 'small',
+		ctaLabel = null, // If provided, a button will be shown with this label.
+		ctaOnClick = NOOP, // This will be called when the button is clicked, we will move to the next step after.
+		size = 'small', // Size of the modal. Can be 'small', 'medium', 'large'.
 		anchor = null, // This is a selector for the element to anchor the modal to. Defaults to middle of the screen.
 		position = 'center', // This is the position to place the modal relative to the anchor. Can be 'left', 'right', 'top', 'bottom', 'center'.
-		offsetX = 0,
-		offsetY = 0,
-		showNext = true,
-		nextEvent = 'click',
-		nextEventTarget = null, // This is a selector for the element to trigger the next event if there is one.
+		offsetX = 0, // This is the X offset of the modal relative to the anchor.
+		offsetY = 0, // This is the Y offset of the modal relative to the anchor.
+		showNext = true, // If true, a "Next" button will be shown.
+		nextEventTarget = null, // If provided, this is a selector for the element to trigger the next event if there is one.
+		nextEvent = 'click', // This is the event to listen for to trigger the next step.
 	} = steps[ currentStep ]
 
 	// Create a stable function reference for the event listener
@@ -234,8 +260,6 @@ const ModalTour = props => {
 	)
 }
 
-export default ModalTour
-
 const Steps = props => {
 	const {
 		numSteps = 3,
@@ -262,3 +286,5 @@ const Steps = props => {
 		</div>
 	)
 }
+
+export default GuidedModalTour

src/components/modal-tour/index.js src/components/guided-modal-tour/index.jssrc/components/modal-tour/index.js renamed to src/components/guided-modal-tour/index.js

@@ -56,7 +56,7 @@ export { default as AdminSelectSetting } from './admin-select-setting'
 export { default as TaxonomyControl } from './taxonomy-control'
 export { default as Tooltip } from './tooltip'
 export { default as BlockStyles } from './block-styles'
-export { default as ModalTour } from './modal-tour'
+export { default as GuidedModalTour } from './guided-modal-tour'
 
 // V2 only Components, for deprecation
 export { default as BlockContainer } from './block-container'

src/components/index.js

@@ -6,7 +6,7 @@ import BlockList from './block-list'
 import Button from '../button'
 // import AdvancedToolbarControl from '../advanced-toolbar-control'
 import DesignLibraryList from '~stackable/components/design-library-list'
-import { ModalTour } from '~stackable/components'
+import { GuidedModalTour } from '~stackable/components'
 import { getDesigns, filterDesigns } from '~stackable/design-library'
 
 /**
@@ -217,8 +217,7 @@ export const ModalDesignLibrary = props => {
 		>
 			<div className="ugb-modal-design-library__wrapper">
 
-				{ /* DEV NOTE: this is just a test */ }
-				<ModalTour />
+				<GuidedModalTour tourId="design-library-welcome" />
 
 				<aside className="ugb-modal-design-library__sidebar">
 					<div className="ugb-modal-design-library__filters">