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

• Update tour tooltip styles as part of the new setup flow.