Full stop in sentence and convert footer messages to list items

[FlicHollis]

Link to Asana task: https://app.asana.com/0/1202913874897532/1203046088060640

All of the messages in the GA4 activation banner's "Footer messages" section appear with full-stops even when there is only one message:

When more than one message appears, this seems like the right approach because we shouldn't be writing multiple paragraphs in a row without punctuation between them:

The reason for this is that the Google styleguide says to omit the full-stop when the sentence is on its own… but that should only happen with one message.

In this case, these are marked up as <p> tags but these messages should really be converted to list items (<li>) so they can be written with optional full-stops and the messages in footerMessages inside assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js should be rendered as list items semantically. They should keep their existing styles, but be marked up as list items.

---

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

Acceptance criteria

• The full stop/period should be removed from the sentences (from the GA4 activation banner) below:
  • Every message in rendered in the GA4 Activation Banner footer with only one sentence (currently, all of them) should have the full-stop/period at the end of the sentence removed.
  • The footer messages should be rendered as list items not paragraphs in HTML, but they should retain the existing styles.

Implementation Brief

• Remove the full-stop/period from every message passed to footerMessages.push in assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js.
• Change the footer prop in BannerNotification to output null when footerMessages.length === 0 and a <ul> with <li>s for each message instead of <Fragment> with <p>s for each message when footerMessages.length > 0.
• The styling of each <li> should match the existing <p> styles; these should not look like a bulleted list, but instead exactly how they do today.

Test Coverage

• VRT tests should not fail as they should remain visually identical.

QA Brief

• Make GA4 activation banner appear
• Go through the GA4 activation flow and note messages in the footer of the activation banner. (See above for examples of the text in the footer of the banner.)
• Full stop/dot should not appear at the end of any messages in the footer, even when more than one message appears.

Changelog entry

• Adjust copy in GA4 banner to exclude full-stops/periods.

[techanvil]

IB :white_check_mark:

[tofumatt]

The original ACs for this issue were about removing the full-stop/period (eg. . character) from the end of each sentence, but that's incomplete because when the messages appear one-after-the-other, we should add punctuation between paragraphs.

(These aren't list items—they're marked up as paragraphs and when more than one exists, there should be a full-stop at the end.)

In this case it might be best to change these to <li> list items and then remove full-stops from every message.

[tofumatt]

(Leaving this as a 3 as that was the original estimate, but this is probably more of a 7 issue.)

[aaemnnosttv]

@tofumatt Bumped to a 7.

IB ✅

[mohitwp]

QA Update ⚠️

@tofumatt @sashadoes

I've noticed that in case of more than two sentences also we removed full stop. See below screenshot. Is this because messages are rendering as list items and not as paragraph ?

[wpdarren]

@mohitwp I would say that this is expected. as both sentences are on separate lines. I queried this before too. We do not include a full stop when there is only one sentence. The full stop should only appear when there are more than one sentence in the paragraph. We are adhering to the writing principles on material design.

@tofumatt is this correct? 🤔

[tofumatt]

Yes, that is correct here. These are separate list items in separate sentences; we don't want full-stops here. The QA Brief mentions this, but I've clarified it a bit. 👍🏻

[mohitwp]

QA Update ✅

Thank you @wpdarren @tofumatt

Verified on dev. Full stop/dot not appearing at the end of any messages in the footer, even when more than one message appears. The footer messages rendering as list items not paragraphs in HTML.