Fix font problems in Idea Hub widget

Bug Description

There are two problems with the title of the Idea Hub widget, one pointed out in https://github.com/google/site-kit-wp/issues/3810#issuecomment-916170914. 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.

[johnPhillips]

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

[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.