Fix UI for new Analytics and Tag Manager toggles in setup

#4913 and #4934 introduce a similar new kind of snippet toggle in the Analytics and Tag Manager module setup UI. However, the styling of that toggle does not follow the Figma design as it should have.

See for example the screenshots in https://github.com/google/site-kit-wp/issues/4913#issuecomment-1072353138: Comparing that to the Figma design for the toggle with its label and explanation text, we can see that the explanation needs to be in a smaller font size and it needs to be indented to the same horizontal position as the label, to make it more visually clear that it belongs together with the toggle.

---

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

Acceptance criteria

• The style for the new setup toggle (not settings toggle) for Analytics and Tag Manager should be fixed to follow the Figma design.

Implementation Brief

Note: This should be implemented based on the feature/existing-tag-simplification branch.

• Create assets/sass/components/global/_googlesitekit-use-snippet-switch.scss.
  • Target the Setup Variants of Analytics and Tag Manager UseSnippetSwitch using the .googlesitekit-analytics-usesnippet--setup and .googlesitekit-tagmanager-usesnippet--setup classes.
  • Using the above classes adjust the margin and font size of paragraphs and other tags to match Figma design.
  • Include the newly created _googlesitekit-use-snippet-switch.scss file to the assets/sass/admin.scss file.
• Update UseSnippetSwitch component of both analytics, analytics-4 and tagmanager modules:
  • Make the description prop to accept react node (PropTypes.node).
  • Additionally take another boolean prop isSetup.
  • using classnames package, add googlesitekit-analytics-usesnippet--setup/googlesitekit-tagmanager-usesnippet--setup class to the parent div based on the value of isSetup prop.
  • Render the description node below the Switch.
• Update SetupUseSnippetSwitch component of analytics, analytics-4 and tagmanager modules:
  • Construct the description nodes by breaking up the two sentences into two separate paragraphs and pass it to the description prop of UseSnippetSwitch element.
  • Additionally pass isSetup to the aforementioned element.
• Update SettingsUseSnippetSwitch component of analytics, analytics-4 and tagmanager modules:
  • Pass the description string wrapped in paragraph as react node to the UseSnippetSwitch element to account for the changes made to the element.
• Complete and merge #5115
  • The PR only has changes needed for tagmanager module so far.

Test Coverage

• VRTs may need updating

QA Brief

• Use Snippet Toggles of Analytics, Analytics 4 and Tag Manager module will match the Figma design.
  • Caveat: The font sizes will not match exactly as we use a different base font size compared to the Figma design. However they should be roughly proportional and convey the same design intent.

Changelog entry

• N/A

[wpdarren]

QA Update: ✅

Verified;

• Checked the Snippet Toggles on UA, GA4 and Tag Manager module and confirmed they match the Figma design.
• Tested on desktop and small screen sizes.

Section Title

[tofumatt]

@kuasha420 Assigning this to you since you did the IB + proof-of-concept, but if that’s wrong feel free to unassign yourself and I can grab it for this sprint 👍🏻