Design Key metrics Setup CTA

[jimmymadon]

Feature Description

The Key metrics Setup CTA placeholder component created in #6209 should be designed fully in this issue.

---

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

Acceptance criteria

• The Key metrics Setup CTA component created in Scaffold Key metrics Setup CTA on Main Dashboard #6209 should be designed as per the Figma mock.
• Clicking on the Get tailored metrics Primary Button should begin the User Input v2 questionnaire.
• Clicking on the Secondary button and Footer links should do nothing as part of this issue.

Implementation Brief

• Wait until Scaffold Key metrics Setup CTA on Main Dashboard #6209 is merged.
• We will replace the placeholder widget created in Scaffold Key metrics Setup CTA on Main Dashboard #6209 (mentioned in its ACs):
  • Note that the component will no longer be in use on SettingsAdmin once Enhance/6261 key metrics settings toggle #6718 is merged.
    • So, it makes sense to give it a more context-aware name KeyMetricsCTA instead of the current UserInputSettings
    • remove isDismissible prop.
    • See this comment thread for more context on it.
  • Start off with a <section> element having the class .googlesitekit-plugin .googlesitekit-setup__wrapper.
  • Inside the <section> component, construct a <Grid /> component having two <Row /> components, one for content and the other for the footer Maybe later action.
    • In the first <Row /> component, place two <Cell /> components, each having half width of their container.
      • The first <Cell /> component should have the text content and the actions (Get tailored metrics <Button /> and I'll pick metrics myself <Link />). Style the elements matching the Figma design.
        • The Get tailored metrics <Button /> component should take the user to the User Input questionnaire. The URL for it can be obtained using the getAdminURL selector of the core/site store, passing googlesitekit-user-input to it.
        • The I'll pick metrics myself <Link /> component should do nothing at this point.
      • Export the Ghost cards element from the Figma design, and place it in the second <Cell /> component. To ensure this SVG placement is graceful, you can follow the implementation in assets/js/modules/idea-hub/components/common/IdeaHubPromptSVG.js.
    • In the second <Row /> component, place the Maybe later <Link /> component inside a full-width <Cell /> component. It should do nothing at this point, its action will be implemented as a part of Implement Key metrics CTA dismissal #6232.
• Add a Storybook story for the CTA widget.

Test Coverage

• Add a new test suite for the CTA widget, where test cases can be added gradually. Start by adding a test case for clicking on the Get tailored metrics <Button /> component.

QA Brief

• Enable the userInput feature flag and set up Site Kit.
• Don't answer User Input Questions.
• Ensure the GA4 module is connected.
• Go to the Site Kit dashboard; ensure the old User Input Settings banner notification doesn't appear.
• Ensure new Key Metrics Setup CTA appears on the dashboard as per the Figma designs.
• Ensure that clicking the Get tailored metrics button navigates the user to the user input questionnaire screen.

Verify the layout in the following viewports

Upto 600px

---

601px - 960px

---

961px - 1280px

---

1281px and above

Changelog entry

• Implement the design for the Key Metrics Setup CTA widget.

[tofumatt]

IB ✅

[mohitwp]

QA Update ⚠️

@hussain-t

• Tested on dev environment.
• Verified KM set up CTA with Figma.
• Verified CTA in different view ports as mentioned under Figma.
• Verified that Clicking on the Get tailored metrics Primary Button begin the User Input v2 questionnaire.
• Note : Clicking on the Secondary button and Footer links should do nothing as part of this issue.

Question 1>
CTA title and content font and font size is different from Figma. It is similar to other CTA banner but different from Figma. Is this intentional for maintaining consistency ?

Question 2> In view ports having width between 601- 960 px space is inconsistent and lot of space appears below buttons. Can we do some improvement in mobile design ? Should I create a new ticket for this ?

[nfmohit]

@mohitwp Just FYI, for Question 1, we have noticed these differences and included a fix for them in the PR for #6265. Thanks!

CC: @hussain-t

[hussain-t]

Thanks, @mohitwp. Regarding your questions:

CTA title and content font and font size is different from Figma. It is similar to other CTA banner but different from Figma. Is this intentional for maintaining consistency ?

Yes, this is expected to be consistent with other banners. It will be fixed in #6265 as @nfmohit mentioned.

Question 2> In view ports having width between 601- 960 px space is inconsistent and lot of space appears below buttons. Can we do some improvement in mobile design ? Should I create a new ticket for this ?

This is due to the SVG image height. I will create a follow-up PR to fix it shortly. We don't need to create a new ticket.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified KM set up CTA with Figma.
• Verified CTA in different view ports as mentioned under Figma.
• Verified that Clicking on the Get tailored metrics Primary Button begin the User Input v2 questionnaire.
• Note :
  Clicking on the Secondary button and Footer links should do nothing as part of this issue.
  Figma's difference reported above will be fix through Implement “Connect GA” CTA after Key Metrics widget setup with GA4 disconnected/unavailable #6265