Update Idea Hub WP dashboard CTA with latest design and language

[aaemnnosttv]

Feature Description

The Idea Hub CTA in the Site Kit WP dashboard widget should be updated with the latest design and wording related to #3852

---

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

Acceptance criteria

The following all apply to the Idea Hub WP dashboard component (WPDashboardIdeaHub)

Overall the CTA should look like this:

• "Site Kit" should be removed leaving only the Google G logo as shown above
• The text should be:

  Want some inspiration for a new post?

• The CTA text should be (stylized as all caps as shown):

  View Idea Hub

• The CTA should be full-width, edge-to-edge across the widget with no added margin above
• The left edge should have a 4px colored left border (Blue 20 #72aee6 matches WP info notice)
• The colors used should match the WP core color palette
  • Background: Blue 0 #f0f6fc
  • Text/copy: Blue 80 #043959
  • Link (no change)
• Additionally, only the main text/copy should be able to wrap (e.g. for translations where it may be longer than what fits in this space) – the CTA text should not break/wrap. E.g.
  
• Also note the elements are center aligned in this case

Update: the link text is now View Ideas (see #3992 (comment))

Implementation Brief

• Finish working branch: https://github.com/google/site-kit-wp/tree/enhance/3911-wp-dashboard-cta
  • Mostly updating the text-copy color and any other final polish
  • Add stories for the WP dashboard widget showing this case (currently only one story for the CTA itself)

Test Coverage

• No changes

Visual Regression Changes

• No changes expected as this component is not included in current VRT

QA Brief

• Activate the Idea Hub module
• Save at least one idea
• Navigate to the WP dashboard
• The Idea Hub notice on the WP dashboard widget should match the ACs above.

Changelog entry

• Update WP dashboard Idea Hub CTA design and language.

[tofumatt]

IB ✅

[johnPhillips]

@aaemnnosttv Can I ask for some clarity on this:

Add stories for the WP dashboard widget showing this case (currently only one story for the CTA itself)

There does appear to be a story for this notice: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/views-wpdashboardapp--ready

However, I am not sure what is meant by 'this case', as the component only seems to handle one case... if the module isn't active, or there are no saved ideas it returns null. What additional stories need to be covered here?

Thanks!

[aaemnnosttv]

@johnPhillips I was referring to adding a story that showed the CTA in the context of the widget but looks like the only stories we have for that are not using CSF so we wouldn't be able to compose them easily. No need to add any extras for this for the moment. We probably need an issue to migrate those stories to CSF first.

[wpdarren]

QA Update: ❌

@johnPhillips this feels a little too picky 😃 but when you get screen sizes around 359 pixels, the wrap doesn't leave much space between the notice and CTA, is there anything we can do about this? When you start to reduce the screen size below this resolution, it does wrap, for smaller screens.

[aaemnnosttv]

Thanks @wpdarren – I'm not sure this is really a QA failure but we can definitely tweak this to make it a little cleaner and consistent 👍

@johnPhillips would you please add the same margin to the right of the copy that we have on the logo so that we have equal minimum space between the copy on both sides? I suppose we could just move the margin to be only on the copy but that's a bit of an implementation detail 😄

[aaemnnosttv]

@wpdarren the spacing issue has been fixed. Additionally the link text has been changed to "View Ideas" to take a little less room as well. Ready for another pass!

[wpdarren]

QA Update ✅

Verified:

• "Site Kit" is removed leaving only the Google G logo.
• The text is `Want some inspiration for a new post?
• The CTA text is stylized as all caps. View Ideas
• The CTA is full-width, edge-to-edge across the widget with no added margin above
• The left edge has a 4px colored left border #72aee6
• The colors used match the WP core color palette: Background: #F0F6FC, Text/copy: #043959 - Screenshot 1 - Screenshot 2