Increase Banner Notification space between Title and Description

[jimmymadon]

Feature Description

When testing the Ad Blocking Recovery epic, we noticed that the space between the title and description in our Banner Notification is too low compared to the Figma mocks and looks cramped.

---

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

Acceptance criteria

• The space between the title and description in all Banner Notifications should be as per the Figma Mock.
• The Image Illustration should be vertically centred with the Text and Button (comment).

Implementation Brief

• Update assets/sass/components/global/_googlesitekit-publisher-wins.scss adding the following CSS:

  .googlesitekit-publisher-win__desc > p {
  margin: 5px 0 26px;
  }

• Update the .googlesitekit-publisher-win__image-small class in assets/sass/components/adsense/_googlesitekit-adsense-ad-blocking-recovery.scss, removing the existing text-align attribute, replacing it with:

  display: flex;
  align-items: center;
  justify-content: center;

• Add a new story to the BannerNotification in story book called With Win Image that shows the component when a WinImageSVG is set such as WinImageSVG={ () => <SuccessSVG /> }

Test Coverage

• Add a new VRT for the BannerNotification when a WinImageSVG is set.

QA Brief

• Test the Ad Blocking Recovery success banner for both the ACs.
  • Connect AdSense (use the tester plugin to mock site and account status to ready if required). Then activate Ad Blocking recovery by going to Settings -> AdSense and going through the Ad Blocking recovery steps. Once successful, the banner will appear.
• Smoke test other plugin module setups to ensure other banner notification messages (success notifications) are displayed correctly (the right side image, if exists, will now be vertically centred instead of aligned to the top).
• Smoke test the plugin in general by clearing all browser cache and site data so that other notification banners (gathering data, zero data, etc) are rendered correctly.

Changelog entry

• Update banner notifications to have more space between title and description.

[mxbclang]

@sigal-teller @marrrmarrr Curious for your thoughts here – we pulled this out of the ABR Bug Bash because it's the case for all notification banners, not just the one for that feature. Thanks!

[jimmymadon]

@bethanylang I think we can safely update the spacing on all banner notifications with a title and description. The new Figma mocks for these notifications gives us a good idea of the actual spacing. Should we still wait for UX input here?

[mxbclang]

@jimmymadon Yes, just to be extra safe!

@sigal-teller @marrrmarrr Could I ask you to please confirm that you're okay with updating the spacing on the banner notifications based upon the Figma mock? Thanks!

[sigal-teller]

@bethanylang @jimmymadon Yes let's update the banner based on the Figma mocks. In addition to spaces, note that the illustration should be vertically centered with the text+button. Currently the illustration is aligned to the top I think.

[techanvil]

AC :white_check_mark:

[benbowler]

Completed IB and added an estimate of 7 to allow for QA/UX review.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that ABR set up notification updated as per AC's.
• Done smoke testing and verified that all notifications are showing and updated as per AC.