Fix font problems in Idea Hub widget

[felixarntz]

Bug Description

There are two problems with the title of the Idea Hub widget, one pointed out in #3810 (comment). In addition, the title font here is Google Sans, which was like that in the original Figma file, but this should actually use Roboto like we do elsewhere.

---

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

Acceptance criteria

• Both the Idea Hub widget title and the experimental label (in general, not only for the Idea Hub widget) should use our regular Roboto font instead of Google Sans.
• When the experimental label breaks into a new line, it shouldn't appear as if it was indented.

Implementation Brief

• Inside assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js:
  • Add the class .googlesitekit-subheading-1 to the h3.googlesitekit-idea-hub__title. This will change the font-family to Roboto.
  • Wrap the text inside h3.googlesitekit-idea-hub__title in a <span>, with a className such as .googlesitekit-idea-hub__title-text.
  • In other words the h3 should now have two children: the new span and the <Badge>.

Inside assets/sass/components/global/_googlesitekit-badge.scss:

• Remove the margin from .googlesitekit-badge. This margin is the reason for the indentation.

Inside assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss:

• Increase the line-height of .googlesitekit-idea-hub__title to 1.5. This will create a bit more space between the lines when the badge wraps.
• Create a new rule for the new span.googlesitekit-idea-hub__title-text, and give it a padding-right of 12px. This will create the space that the margin on the badge provided, but will not indent the badge when it wraps.

Test Coverage

• No new tests required.

Visual Regression Changes

• Images dealing with the Idea Hub dashboard widget might need updating.

QA Brief

• Verify that the ACs above have been met

Changelog entry

• Fix font problems in the Idea Hub widget.

[eugene-manuilov]

Using createInterpolateElement, wrap the text inside h3.googlesitekit-idea-hub__title in a , with a className such as .googlesitekit-idea-hub__title-text.

@johnPhillips we don't need to use the createInterpolateElement function here. Nothing blocks us from wrapping the translated text directly:

<h3 className="googlesitekit-idea-hub__title">
-	{ __(
+	<span>{ __(
		'Ideas to write about, from actual questions people asked on Search',
		'google-site-kit'
-	) }
+	) }</span>

	<Badge
		label={ __( 'Experimental', 'google-site-kit' ) }
	/>
</h3>

[johnPhillips]

Thanks @eugene-manuilov - IB amended.

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ❌

@johnPhillips unfortunately, there's one place where the experimental label font is still Google Sans. When you have connected Idea hub, go to the settings, and you will see the label as per screenshot.

[johnPhillips]

@felixarntz Just to check before I address the QA feedback: I was operating under the assumption that this issue was about the dashboard widget only?
Happy to change the Badge to Roboto on the settings page as well, just let me know.
CC @wpdarren

[johnPhillips]

@felixarntz disregard, sorry. It's in the ACs 🤦

[aaemnnosttv]

Ready for another pass @wpdarren 👍

[wpdarren]

QA Update: ✅

Verified:

• Both the Idea Hub widget title and the experimental label should use our regular Roboto font instead of Google Sans. -- Screenshot 1 - Screenshot 2

• When the experimental label breaks into a new line, it shouldn't appear as if it was indented. - Screenshot

• The issue reported here is fixed.