Update the design of the Key Metrics setup CTA banner.

[techanvil]

Feature Description

The current Key Metrics setup CTA banner looks like this:

But the dismiss CTA is in the bottom of the banner, which isn’t consistent with our new banners.

We have a new Figma design for the Key Metrics setup CTA banner:

This design should be applied to the banner in the plugin.

---

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

Acceptance criteria

• The

  site-kit-wp/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js

  Line 57 in dc89f6c

  function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {

  should be updated to match the new design in the Figma mockups for mobile, tablet, and desktop views.
• Note that the "I'll pick metrics myself" secondary CTA should be moved to the footer of the new CTA, and the "Maybe later" in the current CTA should be moved to the secondary CTA next to "Get tailored metrics".

Implementation Brief

• Edit assets/js/components/KeyMetrics/KeyMetricsCTAContent.js and assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js
  • Adapt the markup for new design - swapping the CTA's, adding new text in the footer, replacing the SVG image with the one in figma, etc.
  • Note that mobile version has different SVG, which should be rendered conditionally based on the breakpoint , instead of the main one
  • New footer layout might need some tweaks in layout
• Update assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss
  • Adjust the styling to match new design - areas like font size, new footer section, position of the graphic, etc
• Figma link in AC for desktop is opening the whole overview of the screens, so I am attaching the selected design link

Test Coverage

• Update VRT's

QA Brief

• Setup Site Kit with Analytics module
• Verify that setup key metrics widget is showing as per new figma designs across the screens
• Select 2 key metrics, then disconnect Analytics module
• Verify that small connect GA4 CTA is showing correctly (there is no new design for this, it should look correctly across the screens)
• Setup Analytics module and select 4 GA4 key metrics
• Disconnect the module
• Verify that big Analytics disconnected CTA is showing correctly across the screens - it follows same layout as default setup CTA just with different content, and footer CTA should be maybe later instead of select your own metrics

Changelog entry

[tofumatt]

As mentioned in Slack, this needs mobile designs/guidance before we can move it to IB, so leaving it in AC for now.

[tofumatt]

Mobile designs are ready so moved this to IB 👍🏻

[eugene-manuilov]

IB ✔️

[zutigrm]

Parking it in the meantime until it gets a sprint number, since I picked it up by mistake