Enhance `BannerNotification` to better support an elemental `description`

Feature Description

The BannerNotification component currently allows for a non-scalar description to be provided in the form of a React element. If provided it allows for more control over that part of the output but currently somewhat enforces that the given element is a valid child of a p tag since the entire description is always rendered within one. This undermines the purpose of the prop’s flexibility and requires consumers to do odd things (e.g. if multiple paragraphs were desired instead of one) to work around it.

https://github.com/google/site-kit-wp/blob/da8f2f9d312a71f0806888968fed60190a6d7bf9/assets/js/components/notifications/BannerNotification/index.js#L287-L292

---

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

Acceptance criteria

• BannerNotification should be updated such that if a valid element is provided for its description, the given description is rendered as-is (without an added wrapper).
  • The case for when a non-element is provided should be updated to render the p tag with inner HTML set as it is now on the span tag
• Consuming use of BannerNotification should be updated to preserve the current styling where needed although exceptions can me made on a case-by-case basis.

Implementation Brief

• In assets/js/components/notifications/BannerNotification/index.js:
  • In the inlineMarkup variable assignment, locate the <p> tag inside the .googlesitekit-publisher-win__desc element.
  • Remove this wrapping <p> tag preserving all its internal contents.
  • In the condition where the description prop is not a valid element, wrap the existing <span> tag with a new <p> tag.
  • Wrap the adjacent elements, i.e. the “learn more” link and the “page index” in a new <p> tag.
• In assets/js/components/notifications/ThankWithGoogleSupporterWallNotification.js:
  • In the rendered <BannerNotification> component, update the description prop so that its contents are wrapped with a <p> tag instead of a <Fragment>.
• In assets/js/components/ErrorHandler/index.js:
  • In the rendered <BannerNotification> (imported as <Notification>) component, update the description prop so that its contents are wrapped with a <p> tag instead of a <Fragment>.

Test Coverage

• No tests need to be added/updated. Optionally/time-permitting: add a few tests to cover this behaviour.
• Update VRT references if required.

QA Brief

• Check notification banners to appear and function correctly on a page and no Warning (from AC) appears on the page. (Eg. ActivationBanner, ThankWithGoogleSupporterWallNotification, SetupSuccessBannerNotification, AdSenseAlerts etc…)
• Description part of a banner should always appear inside single <p> as per the screenshot below:

( This ticket is technical and brings no updates to UI/UX. All functionality should remain the same )

Changelog entry

• Enhance the BannerNotification component to better support a description which is a React element.

[tofumatt]

@techanvil pointed out that some questions around layout weren’t 100% answered here, but we shouldn’t change the visual layout of the “Learn more” link in this example.

It’s okay to change the markup here to something a bit more semantic (a <p> link @nfmohit proposed, or even a <div>), but visually the “Learn more” link or other text that would accompany that content should—by default—be inline and not on a new line.

Eg. This is the correct visual layout:

[tofumatt]

Looks good, but this is probably a 7 estimate, as a fair number of components are affected and should be reviewed/QA’d.

Plus: it’d be good to add a test or two for this new behaviour to make sure it’s preserved. I added mention of this to the IB, but otherwise looks good.

IB ✅