Add "Beta" Badge to First-Party Mode Toggle

[hussain-t]

Feature Description

Add a "Beta" badge next to the First-party mode toggle label to indicate the feature is in beta.

For details, refer to the Design Doc and the Figma design.

---

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

Acceptance criteria

• A "Beta" badge should be displayed next to the First-party mode toggle label to indicate that the feature is in beta.
• The badge should be styled according to the specifications in the Figma design.
• The badge should be non-interactive and serve as a visual indicator of the feature's beta status.

Implementation Brief

• In FirstPartyModeToggle component in assets/js/components/first-party-mode/
  • Import the Badge component from /assets/js/components.
  • Add the Badge component beside Switch component with label prop passed as Beta and className as googlesitekit-beta-badge.
  • Make sure to conform to the style as per the Figma design. Any styling rules should be added in assets/sass/components/first-party-mode/_googlesitekit-first-party-mode.scss

Test Coverage

• Update tests for FirstPartyModeToggle component.

QA Brief

• Open the Components -> First Party Mode -> FirstPartyModeToggle stories in Storybook and verify that the "Beta" badge appears as expected in the ACs.

Changelog entry

• Add a "Beta" badge to the First-party mode toggle.

[techanvil]

AC ✅

[techanvil]

Hi @ankitrox, thanks for drafting this IB. However, I think it should take a slightly different approach.

We don't tend to interpolate badges into translated strings like that and in fact there's an existing component with a badge next to a switch and it simply renders it after the switch:

site-kit-wp/assets/js/modules/adsense/components/common/UseSnippetSwitch.js

Lines 82 to 92 in 3fe82ad

	<Switch
	label={ label }
	onClick={ onChange }
	checked={ useSnippet }
	disabled={ isDoingSaveUseSnippet }
	hideLabel={ false }
	/>{ ' ' }
	<Badge
	className="googlesitekit-badge--primary"
	label={ __( 'Recommended', 'google-site-kit' ) }
	/>

I'd suggest we take the same approach here.

[ankitrox]

Thank you @techanvil .

I updated the IB to simply add the Badge beside Switch component in FirstPartyModeToggle component.

[techanvil]

Thanks @ankitrox!

IB ✅

[wpdarren]

QA Update: ✅

Verified:

We're unable to test this on a site right now so as per the QAB, I checked Storybook.

• A "Beta" badge is displayed next to the First-party mode toggle label to indicate that the feature is in beta.
• The badge is styled according to the specifications in the Figma design.
• The badge is non-interactive and serve as a visual indicator of the feature's beta status.

I compared the beta badge for SiWG and checked that the font size, style and dimensions were the same.