Experimental label on Idea Hub module

Feature Description

Addition of a label/tag on the Idea Hub module/widget on the Site Kit dashboard to indicate it is ‘Experimental’ once Idea Hub is activated.

Additional consideration is required for other places this label/tag or additional copy is required throughout the SK dashboard and WordPress, for active and inactive states of Idea Hub, such as:

• CTA banner/notification in SK dashboard header (when Idea Hub is inactive)
• Widget CTA on SK dashboard (next to Top Keywords widget) (when Idea Hub is inactive)
• SK settings page (both when Idea Hub is active and inactive)
• WP dashboard SK widget (when Idea Hub is active)
• WP posts screen (when Idea Hub is active)

We may not require all of the above, but ACs to consider each.

---

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

Acceptance criteria

1. Widget CTA on the main dashboard
   • update heading to: “Get new topics to write about”
   • add text (same font size as the current “learn more”, but in regular text color) after the lightbulb : “Idea Hub is an experimental new feature that shows you suggestions to write about based on the content of your site”
   • keep the “learn more” link in blue after the text
2. Setup screen (with tracking opt-in checkbox)
   • add “experimental” in small caps after the Idea Hub name
   • update the opt-in checkbox sentence so all verbs are in the same form: “creating a draft; saving/dismissing ideas”
3. Connected Services screen in Settings (after setup is complete and the service is connected)
   • add “experimental” in small caps after the Idea Hub name
4. Connect More Services screen in Settings (if the feature is not activated)
   • add “experimental” in small caps after the Idea Hub name
5. Main dashboard widget (once the feature is activated)
   • add “experimental” in small caps after “Ideas to write about based on unanswered searches”

A new Badge React component should be introduced to render the “experimental” label from the points 2-5 above with consistent markup and styling.

Implementation Brief

• Create assets/js/components/Badge.js which exports the Badge functional component.
  • It should accept the label prop which is a required string.
  • It should render the label between span tags and having the googlesitekit__badge class name.
• Create assets/sass/components/global/_googlesitekit-badge.scss which contains the styling for the Badge component. Refer to the following Figma designs for styling directions.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardCTA.js,
  • Update the text in the heading from Get new topics based on what people are searching for with Idea Hub to the one defined in the AC.
  • Remove the small light bulb and the corresponding SVG file
  • Before the “Learn More” text, include the text as per the AC having the same font size as “Learn More” but in regular text color.
• Using assets/js/modules/idea-hub/components/setup/SetupMain.js,
  • Render Badge after the module title but within the module title tag.
• Using assets/js/modules/idea-hub/components/setup/SetupForm.js,
  • Update creating a draft; saving/dismiss ideas to the text defined in the AC.
• Using assets/js/components/settings/SetupModule.js and assets/js/components/settings/SettingsActiveModule/Header.js,
  • Display Badge after the module name if the module being displayed is Idea Hub by checking for the slug.
• Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js,
  • Include Badge after “Ideas to write about based on unanswered searches”
• In all the above bullet points, the label prop should be passed to the Badge component, with the translated Experimental string as value.

Draft PR:

https://github.com/google/site-kit-wp/pull/3900

Test Coverage

• No tests to be added

Visual Regression Changes

N/A

QA Brief

• Follow the acceptance criteria above, and verify that the text and / or badge is correct on the various Idea Hub screens mentioned.
• In addition, note the discussion below regarding the removal of the bulb icon from the dashboard CTA.

Changelog entry

• Add “Experimental” badge to Idea Hub UI.

[alex-moulin]

@felixarntz @aaemnnosttv @marrrmarrr following the request on yesterday’s call, I put together a mockup to illustrate where the badge should be positioned according to the Acceptance Criteria above.

You can review the mockup here - https://www.figma.com/file/YB79eKcGOwyUjlWG8mjDZA/?node-id=21114%3A4117

Any questions/comments, please let me know.

[tofumatt]

@wpdarren It looks like the hideExternalIndicator flag has been on that component for some time, but I don’t see why it should be using that style.

I’ll file an issue to remove it, but I think it should still pass QA here. Thanks! 👍🏻

(Filed #3961 as a follow-up.)