Enhance the splash screen's Analytics section

[techanvil]

Feature Description

The splash screen will be updated to make the Analytics section more prominent, and the external link icon will be removed from the "Learn more" link. This includes the following changes to the section:

• Add a header containing the Analytics logo, title, and “recommended” badge.
• Set the background colour to grey and remove the divider line.
• Remove the external link icon from the “Learn more” link.

For reference, see splash screen section in the design doc, and the Figma design.

---

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

Acceptance criteria

• The splash screen's Analytics section is updated to meet the Figma design:
  • It has a header containing the Analytics logo, title, and “recommended” badge.
  • Its background colour is grey, and there's no divider line below it.
  • The “Learn more” link no longer has an external link icon.
• These changes are gated behind the setupFlowRefresh feature flag.

Implementation Brief

• In assets/js/components/setup/SetupUsingProxyWithSignIn/:
  • Extract the div.googlesitekit-setup__analytics-opt-in-wrapper element from the SplashContent component to a new component, AnalyticsOptIn, in its own file named AnalyticsOptIn.tsx.
  • Update the AnalyticsOptIn component as follows:
    • Add a header div to contain the Analytics logo, title, and “recommended” badge, with class .googlesitekit-setup__analytics-opt-in-wrapper-header.
      • In this div, render the Analytics logo (assets/svg/graphics/analytics.svg), a Typography component for the service name, and a Badge component with the label "Recommended", with appropriate props to meet the Figma design.
    • Remove the "Recommended" badge from the checkbox description.
    • Remove the external prop from the "Learn more" link.
• In assets/sass/components/setup/_googlesitekit-splash.scss:
  • Update the styling for the .googlesitekit-setup__analytics-opt-in-wrapper class:
    • Remove the ::after pseudo-element, which was used to add a divider line.
    • Set the background colour and border radius to meet the design.
  • Add the .googlesitekit-setup__analytics-opt-in-wrapper-header class, with necessary styling to meet the design.

Test Coverage

• Fix any failing tests.

QA Brief

• Ensure that the Splash screen snalytics section matches the Figma design.
• The “Learn more” link no longer has an external link icon.

Changelog entry

• Update the splash screen to make the Analytics section more prominent in the new setup flow.

[nfmohit]

Thank you for drafting the IB, @techanvil!

The IB looks great. I just have one minor suggestion. WDYT about porting the opt-in to its own component? SplashContent is gradually getting complicated, and having this in its own place would be great!

Thanks!

[techanvil]

Thanks @nfmohit, that's a good suggestion. I've updated the IB, please see what you think.

[nfmohit]

Thanks @techanvil !

IB ✅