#7172840 Tour Kit / Welcome Tour: WPCOM Tour Kit variant

Changes proposed in this Pull Request

Addresses #58643

We extract the Welcome Tour step and minimized views into a Tour Kit variant (WpcomTourKit). This brings the overlay controls, minimized view, tour rating, pagination controls, all styles, and content skeleton under Tour Kit to unify WPCOM tour implementations. The Welcome Tour becomes an implementation of the variant. Another variant could be a minified view of the same (down the line).

The resulting WPCOM Tour Kit config now omits renderers and the Step will ultimately contain the structure:

meta: {
	heading: string;
	description: string;
	imgSrc?: {
		src: string;
		type: string;
	};
};

Note: Everything is currently divided across desktop/mobile substructures (something we’ve planned to refactor/remove).

Usage

Same as with the plain Tour Kit component, just without the renderers. Optional tour rating can be enabled for the last step in the tour, along with optional handlers for rating side effects (see the Welcome Tour implementation or Storybook demos, or README).

import { WpcomTourKit } from '@automattic/tour-kit';

<WpcomTourKit config={ { ... , tourRating: { enabled: true, ... } } } />

Testing instructions

• Checkout branch, then yarn dev --sync from apps/editing-toolkit to sync ETK to your sandbox
• Open the Welcome Tour and ensure it runs identical to trunk (no content or structural/style changes)
• Start Storybook yarn workspace @automattic/tour-kit run storybook and ensure stories render identical as in trunk
• (once completed) Ensure WpcomTourKit stories work both with/without images
• Ensure rating is handled properly and there is no double-rating happening on click (since these send out records to Tracks).

Media

Storybook

Welcome Tour

TODO

• Fix variant styles to accommodate the optional images in the Steps’ meta.
• Update README to mention variant.
• Add storybook demos for the WpcomTourKit variant.
• Reintroduce abstracted tour rating logic (#60190).
• Reintroduce pagination control after #60327 is shipped.
• Improve or remove Error Boundary. Issue 61842
• Fix and add root level CSS class wpcom-tour-kit. This was patched with a __temp__className prop on Tour Kit, which needs cleanup. Some more general refactor can happen here i.e. the classes we currently pass to Tour Kit are added to the frame, which might be best to add on the root component instead. Issue 61843
• Sanity-check types and resulting render tree (current tree: WpcomTourKit > TourKit > TourKitStep > WpcomTourKitStep). Issue 61844
• (follow-up issue) Update types to remove mobile/desktop sub structures where relevant (Step CSS classes, Step meta). Issue 61845
• (follow-up issue) Introduce a new translation source as everything is full-site-editing still. Issue 61846
• (optional?) “Resume Welcome Tour” in the minimized view is now “Resume Tour” due to this being a more generic component now. We can introduce a tour title and reflect that maybe (and ideally communicate that in the README). Issue 61847
  

Fixes #58643