Update the `TourTooltip` component to reflect the new design.

[techanvil]

Feature Description

Update the TourTooltip component to reflect the new design.

See the design in Figma and the dashboard tour section in the Design Doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The TourTooltip component is updated to reflect the new design in Figma:
  • The progress dots in the bottom left are replaced with the X/Y step indicator, where X is the current step and Y is the total number of steps.
  • The styling of the tooltip is updated to match the new design.
• The change is gated behind the setupFlowRefresh feature flag.

Implementation Brief

See the implementation guide in the Design Doc for guidelines on how to implement this issue.

• [ ] In assets/js/components/TourTooltips.js
  • [ ] Check if setupFlowRefresh feature flag is enabled. If it's enabled:
    • [ ] The shadow in floatProps.floater.filter should be changed to drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 16px).
    • [ ] The showProgress prop of Joyride should be false
• [ ] In assets/js/components/TourTooltip.js
  • [ ] Check if setupFlowRefresh feature flag is enabled. If it's enabled:
    • [ ] Add googlesitekit-tour-tooltip--setupFlowRefresh class to the main container
    • [ ] Set the width and height of the CloseIcon to 10
    • [ ] Add googlesitekit-tooltip-button--primary class to primary button
    • [ ] Hide the indicators (div with class googlesitekit-tooltip-indicators)
    • [ ] Replace the indicators with a simple p having ${ index + 1 } / ${ size } inside. Add the class googlesitekit-tooltip-steps to it so we can style it later
• [ ] In assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss, override the tooltip's styles using the googlesitekit-tour-tooltip--setupFlowRefresh class
  • [ ] Override the .googlesitekit-tooltip-title styles to match the Figma design
    • [ ] Typography (font family, weight, line height, letter spacing etc.)
    • [ ] margin-bottom should become 8px
  • [ ] Override the .googlesitekit-tooltip-content styles to match the Figma design
    • [ ] Typography (font family, weight, line height, letter spacing etc.)
  • [ ] Override .googlesitekit-tooltip-body styles
    • [ ] Set padding to 32px 16px 0px 16px
    • [ ] Set max-width to 332px
  • [ ] Override .googlesitekit-tooltip-close styles
    • [ ] Set top and right to 16px
  • [ ] Update the common button styles .googlesitekit-tooltip-button
    • [ ] Set border-radius to 100px
    • [ ] Set line-height to 20px
    • [ ] Also, the current focus outline looks a bit off, so we'll fix it by:
      • [ ] targeting &:focus and setting outline to none
      • [ ] targeting &:focus:not(:active) and setting outline to 2px solid $c-interactive-inverse-focus
  • [ ] Style the primary button .googlesitekit-tooltip-button--pimrary
    • [ ] Set background-color to $c-site-kit-sk-300
    • [ ] Set the padding to 6px 16px
  • [ ] Style the steps indicator .googlesitekit-tooltip-steps
    • [ ] Typography (font family, weight, line height, letter spacing etc.)
    • [ ] Set margin to 0
  • [ ] Override .googlesitekit-tooltip-actions styles
    • [ ] Set padding to 16px
• [ ] Add a new story to assets/js/components/TourTooltips.stories.js to showcase the SFR version

Test Coverage

• Update failing snapshots/VRTs if any.

QA Brief

• View the new Setup Flow Refresh story at:
  • Develop branch story (available once merged).
  • PR build story (available until merged).
• Compare it with the default story at:
  • Develop story.
  • PR build story (available until merged).
• Verify the Setup Flow Refresh version matches the Figma design:
  • Progress dots in the bottom left are replaced with "X / Y" step indicator (e.g., "1 / 4")
• Test tour navigation:
  • Click "Next" to advance through steps
  • Click "Back" to go to previous steps
  • Verify step counter updates correctly (1/4, 2/4, 3/4, 4/4)
  • Click "Got it" on the last step to complete the tour
  • Click the close (X) button to dismiss the tour
• To manually trigger a feature tour in the Site Kit dashboard, run the following code snippet in the browser console with and without the setupFlowRefresh feature flag enabled:

// 1. First, ensure the tour is not already dismissed
googlesitekit.data.dispatch('core/user').receiveGetDismissedTours([]);

// 2. Create a custom tour object
const customTour = {
    slug: 'test-tour',
    contexts: ['googlesitekit-dashboard'],
    version: '1.0.0',
    gaEventCategory: 'test_tour',
    steps: [
        {
            target: '.googlesitekit-header',
            title: 'Welcome to the Tour',
            content: 'This is the first step of our custom tour.',
            placement: 'bottom'
        },
        {
            target: '.googlesitekit-navigation',
            title: 'Navigation Menu',
            content: 'This is the navigation menu.',
            placement: 'right'
        }
    ]
};

// 3. Trigger the custom tour
await googlesitekit.data.dispatch('core/user').triggerTour(customTour);

Changelog entry

[nfmohit]

Thank you for drafting the IB, @abdelmalekkkkk.

Could you kindly complete the test coverage section? Also, I feel the estimate could be a notch higher, as this involves a good number of style changes, which will also be verified during CR and QA.

Let me know what you think, thanks!

[abdelmalekkkkk]

Thanks @nfmohit! That makes perfect sense. I bumped up the estimate and completed the Test Coverage section. Thanks!

[nfmohit]

IB ✅