Successful set up banner icon is small as compare to Figma design

Asana bug bash task: https://app.asana.com/0/1202913874897532/1203046400278414

Successful set up banner icon is small as compare to Figma design. It is looking very small and cornered on big screens.

---

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

Acceptance criteria

• The image size for the Success Banner should be increased as per the Figma design.
• Additionally, the image should appear besides (and not above) the title as shown in Figma for mobile screen sizes.
• These changes should apply to all icons for every success banner, not just the Thank with Google ones. See @sashadoes’s comment below: https://github.com/google/site-kit-wp/issues/5934#issuecomment-1277966586
  • Essentially, the success banners should be consistent regarding icon size/placement, in line with what’s in the Figma design for Thank with Google.

Implementation Brief

• Inside BannerNotification https://github.com/google/site-kit-wp/blob/48952f8f09ed585bb3b6b1cf3fd4fd7f88b4fafc/assets/js/components/notifications/BannerNotification/index.js#L266-L272
• Place a new block with WinImageSVG next to the .googlesitekit-publisher-win__title wrapper (containing the title and the badge) and make it visible only on mobiles. At the same time, the “original” WinImageSVG should be hidden for mobiles. With this scenario FE will show “original” WinImageSVG on tablet+ screens and “small” WinImageSVG on mobiles.
• Wrap.googlesitekit-publisher-win__title block and WinImageSVG in a new flex container and make them inline as on design
• WinImageSVG should be styled as per the Figma designs. (105px height on tablet+ screens and 72px on mobiles)
• If there’s no WinImageSVG provided, the wrapper containing the title and the badge should expand to be 100% wide

Test Coverage

• Add a new scenario to VRT suite (if not already present)
• VRT images will need to be updated

QA Brief

• Trigger the setup success banner by setting up a new module, or access the following URL if module is already set up: /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success&slug=analytics#traffic
• Ensure the SVG within the banner is besides the title on small screens with an updated size.
• Setup all modules to ensure there are no regressions.
• Note that the dimensions in the Figma designs are incorrect based on existing SVGs we have. The height should be 75px on small screens and 105px on large ones, with the width set automatically.

Changelog entry

• Increase size of banner icons in setup notification.

[asvinb]

Thanks @sashadoes . A few more tweaks:

1. Can you update the “Test Coverage” section to remove unit tests and instead add scenarios within the VRT suite?
2. Let’s make sure that if there’s no WinImageSVG provided, the wrapper containing the title and the badge should expand to be 100% wide.
3. Can you let me know about the height of the SVG? As per my previous comment, the height is 105px, but in the IB you suggested 110px.

Thanks!

[asvinb]

@sashadoes Thanks for the IB and I suggest we make the following tweaks to it:

• Let’s avoid putting code in the IB as it can prompt the engineer working on the code to just copy and paste, and the IB reviewer will tend to CR the code at the IB stage. For e.g we are trying to avoid nesting CSS selectors within media queries.
• About the comment to implement option 2, instead having the engineer to go through the list of comments, can you copy over the approach within the IB?
• About the following:

  Inside BannerNotification put a new WinImageSVG block next to title

  • Can you be more explicit (without the code), and rather mention putting WinImageSVG next to the wrapper containing the title and the badge? Reading the IB, I thought we should put WinImageSVG next to the title variable.
• Instead of using display: inline-block, how about we use flex on the parent element and the set the googlesitekit-publisher-win__title to grow if there’s no WinImageSVG.
• Why should we set the height of WinImageSVG to 120px? 🤔 Checking at the designs, I noticed the icon is 105px. Let me know if am missing something here 😁 .
• About the tests needed, I don’t think we need unit tests, rather we should add a new scenario to our VRT suite (if not already present). Most likely since it’s a global change, VRT images will need to be updated.