feat: onboarding tour with name changes

interactions.php

@@ -135,3 +135,4 @@ function interact_require_types() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/rest-api/class-rest-location-rules.php' );
 
 require_once( plugin_dir_path( __FILE__ ) . 'src/editor/interaction-library/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/editor/getting-started.php' );

src/editor/components/guided-modal-tour/README.MD

@@ -0,0 +1,37 @@
+# How to create new tours
+
+## 1. Create a unique tourID for the tour
+
+Let's say the tourId is `interaction-library`
+
+## 2. Add the GuidedModalTour component
+
+Add the GuidedModalTour component to where we want to show the tour. This tour
+will be visible only once when the component is rendered.
+
+For example in `interaction-library` tour, we can add it in the actual interaction library
+modal render:
+
+```js
+<GuidedModalTour tourId="interaction-library" />
+```
+
+## 3. Add initialization code to trigger the tour if needed
+
+Since the `GuidedModalTour` component is only rendered when the tour is actually
+shown, if we are coming from the Getting Started screen, and we want to force
+the tour to open and need to perform any code for this, then we can add them in:
+
+`src/editor/components/guided-modal-tour/index.js`
+
+## 4. Add the show condition for the tour
+
+By default, `GuidedModalTour` only shows once. When it's finished, it will not
+show again. We can change this behavior e.g. stop the tour from showing, by
+adding a condition in `./tour-conditions.js`.
+
+## 5. Create the tour steps
+
+Create the tour steps in `src/editor/components/modal-tour/tours/`, refer to
+`src/editor/components/modal-tour/tours/README.md` for more details
+

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

@@ -0,0 +1,269 @@
+.interact-tour-modal--overlay {
+	z-index: 1000002;
+	background-color: transparent !important;
+	pointer-events: none;
+}
+
+.interact-tour-modal {
+	pointer-events: all;
+	position: absolute;
+	--offset-x: 0;
+	--offset-y: 0;
+	--left: 50%;
+	--top: 50%;
+	left: var(--left);
+	top: var(--top);
+	margin-left: var(--offset-x);
+	margin-top: var(--offset-y);
+	overflow: visible;
+	border-radius: 16px;
+
+	--wp-admin-theme-color: #05f;
+	--wp-admin-theme-color-darker-10: #04c;
+	--wp-admin-theme-color-darker-20: #0036a1;
+
+	/* Smoothly transition moving top & left. */
+	transition:
+		max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+		left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		margin-top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		opacity 0.4s ease-in-out,
+		transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		box-shadow 0.2s ease-in-out;
+	will-change: left, top, max-width;
+
+	display: none;
+
+	&.interact-tour-modal--visible {
+		display: block !important;
+		opacity: 0 !important;
+		transform: scale(0.4);
+	}
+
+	&.interact-tour-modal--visible-delayed {
+		opacity: 1 !important;
+		transform: scale(1);
+	}
+
+	.components-modal__header-heading {
+		line-height: 1.2;
+	}
+
+	.components-button {
+		border-radius: 4px;
+	}
+
+	.components-modal__content {
+		padding: 2em;
+		margin: 0;
+		position: relative;
+		overflow: visible;
+		z-index: 1;
+		box-shadow: 0 22px 200px 4px #0005;
+		border-radius: 16px;
+
+		/* border: 1px solid #f00069ad; */
+	}
+
+	.components-modal__header {
+		position: relative;
+		padding: 0;
+		margin-bottom: 8px;
+		height: auto;
+		line-height: 1.2;
+	}
+
+	.interact-tour-modal__footer {
+		margin-top: 16px;
+		justify-content: flex-end;
+	}
+
+	.interact-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;
+		}
+	}
+
+	.interact-tour-modal__cta {
+		width: 100%;
+		justify-content: center;
+		margin: 16px 0 8px;
+	}
+
+	&.interact-tour-modal--right,
+	&.interact-tour-modal--left,
+	&.interact-tour-modal--top,
+	&.interact-tour-modal--bottom {
+
+		.components-modal__content {
+			box-shadow: rgba(0, 0, 0, 0.2) -20px 22px 60px -4px;
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: -10px;
+				width: 30px;
+				height: 30px;
+				transform: translateY(-50%) rotate(45deg);
+				border-radius: 4px;
+				background-color: #fff;
+				z-index: -1;
+			}
+		}
+	}
+
+	&.interact-tour-modal--left {
+
+		.components-modal__content {
+			box-shadow: rgba(0, 0, 0, 0.2) 20px 22px 60px -4px;
+
+			&::after {
+				left: auto;
+				right: -10px;
+			}
+		}
+	}
+
+	&.interact-tour-modal--left-top {
+
+		.components-modal__content {
+
+			&::after {
+				top: 30px;
+			}
+		}
+	}
+
+	&.interact-tour-modal--top {
+
+		.components-modal__content {
+			box-shadow: rgba(0, 0, 0, 0.2) 0 22px 60px -4px;
+
+			&::after {
+				top: auto;
+				left: 50%;
+				bottom: -10px;
+				transform: translateX(-50%) rotate(45deg);
+			}
+		}
+	}
+
+	&.interact-tour-modal--top-right {
+
+		.components-modal__content {
+
+			&::after {
+				left: auto;
+				right: 16px;
+			}
+		}
+	}
+
+	&.interact-tour-modal--bottom {
+
+		.components-modal__content {
+			box-shadow: rgba(0, 0, 0, 0.2) 0 -22px 60px -4px;
+
+			&::after {
+				left: 50%;
+				top: -10px;
+				transform: translateX(-50%) rotate(45deg);
+			}
+		}
+	}
+}
+
+.interact-tour-modal__steps {
+	display: flex;
+	gap: 6px;
+	margin-inline-end: auto;
+}
+
+.interact-tour-modal__step {
+	width: 8px;
+	height: 8px;
+	border-radius: 20px;
+	background-color: #e1e1e1;
+
+	/* cursor: pointer; */
+	padding: 0 !important;
+	margin: 0 !important;
+
+	&--active {
+		background: #05f;
+		width: 24px;
+		border-radius: 20px;
+	}
+
+	/* &:hover {
+		    background-color: #aaa;
+		} */
+}
+
+.interact-tour-modal__glow {
+	--interact-tour-glow-color: #05f;
+	--interact-tour-glow-color-dark: #0036a1;
+
+	position: absolute;
+	z-index: 1000001;
+	box-shadow: 0 0 20px var(--interact-tour-glow-color);
+	border-radius: 8px;
+	pointer-events: none;
+	animation: interact-tour-modal-glow 0.7s infinite alternate;
+	mix-blend-mode: multiply;
+	will-change: transform, box-shadow;
+	transition: opacity 0.2s ease-in-out;
+	opacity: 1;
+
+	&.interact-tour-modal__glow--hidden {
+		opacity: 0;
+	}
+}
+
+.interact-tour-modal__glow--medium,
+.interact-tour-modal__glow--large {
+	animation: interact-tour-modal-glow-small 0.7s infinite alternate;
+}
+
+/* Animation keyframes to grow the box-shadow like it's glowing */
+@keyframes interact-tour-modal-glow {
+
+	0% {
+		box-shadow: 0 0 20px var(--interact-tour-glow-color), 0 0 5px var(--interact-tour-glow-color-dark);
+		transform: scaleX(1) scaleY(1);
+	}
+
+	100% {
+		box-shadow: 0 0 50px var(--interact-tour-glow-color), 0 0 5px var(--interact-tour-glow-color-dark);
+		transform: scaleX(1.05) scaleY(1.12);
+	}
+}
+
+/* Animation keyframes for small glow */
+@keyframes interact-tour-modal-glow-small {
+
+	0% {
+		box-shadow: 0 0 20px var(--interact-tour-glow-color), 0 0 5px var(--interact-tour-glow-color-dark);
+		transform: scaleX(1) scaleY(1);
+	}
+
+	100% {
+		box-shadow: 0 0 50px var(--interact-tour-glow-color), 0 0 5px var(--interact-tour-glow-color-dark);
+		transform: scaleX(1.02) scaleY(1.02);
+	}
+}