Audience Introductory Popup Overlay Notification (+Additional Refactoring)

[kuasha420]

Summary

Addresses issue:

• Add the Introductory Popup / Banner (Storybook) #8171

Relevant technical choices

Besides adding the overlay notification for Audience, this PR also refactors the Overlay Notification infra to support a more unified mobile, tablet and desktop design. This has been confirmed by @sigal-teller from UX side and the changes in the design for the Audience Popup has been also backported to AdSense+GA4 overlay notifications. Thank you Sigal for providing additional mobile design for the GA4+AS notifications and unifying the design across the board! ❤️

Barring any CR feedback and potentially a better name other than OverlayNotification (due to the difference in design between screen sizes, this is not always an overlay!). This should be good to go.

PR Author Checklist

• My code is tested and passes existing unit tests.
• My code has an appropriate set of unit tests which all pass.
• My code is backward-compatible with WordPress 5.2 and PHP 5.6.
• My code follows the WordPress coding standards.
• My code has proper inline documentation.
• I have added a QA Brief on the issue linked above.
• I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

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

Code Reviewer Checklist

• Run the code.
• Ensure the acceptance criteria are satisfied.
• Reassess the implementation with the IB.
• Ensure no unrelated changes are included.
• Ensure CI checks pass.
• Check Storybook where applicable.
• Ensure there is a QA Brief.

Merge Reviewer Checklist

• Ensure the PR has the correct target branch.
• Double-check that the PR is okay to be merged.
• Ensure the corresponding issue has a ZenHub release assigned.
• Add a changelog message to the issue.

[github-actions]

Build files for 325fb6f have been deleted.

[github-actions]

Size Change: +13.5 kB (+1%)

Total Size: 1.43 MB

Filename	Size	Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css	53.2 kB	+95 B (0%)
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	7.48 kB	+8 B (0%)
./dist/assets/js/32-********************.js	929 B	-1 B (0%)
./dist/assets/js/34-********************.js	3.12 kB	+1 B (0%)
./dist/assets/js/googlesitekit-activation-********************.js	23.8 kB	+25 B (0%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	57.4 kB	+49 B (0%)
./dist/assets/js/googlesitekit-adminbar-********************.js	34.2 kB	+16 B (0%)
./dist/assets/js/googlesitekit-api-********************.js	10.1 kB	+49 B (0%)
./dist/assets/js/googlesitekit-components-gm2-********************.js	5.88 kB	+2 B (0%)
./dist/assets/js/googlesitekit-components-gm3-********************.js	10 kB	-3 B (0%)
./dist/assets/js/googlesitekit-data-********************.js	2.18 kB	+1 B (0%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js	9.1 kB	+5 B (0%)
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.09 kB	+2 B (0%)
./dist/assets/js/googlesitekit-datastore-site-********************.js	19.1 kB	+31 B (0%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js	10.1 kB	+25 B (0%)
./dist/assets/js/googlesitekit-datastore-user-********************.js	24.8 kB	+536 B (+2%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	71.2 kB	+4.45 kB (+7%)	🔍
./dist/assets/js/googlesitekit-main-dashboard-********************.js	95.7 kB	+4.55 kB (+5%)	🔍
./dist/assets/js/googlesitekit-modules-********************.js	21.7 kB	+25 B (0%)
./dist/assets/js/googlesitekit-modules-ads-********************.js	19.5 kB	+2.65 kB (+16%)	⚠️
./dist/assets/js/googlesitekit-modules-adsense-********************.js	110 kB	-460 B (0%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	112 kB	+563 B (+1%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.4 kB	-33 B (0%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js	57.9 kB	-22 B (0%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	30 kB	-42 B (0%)
./dist/assets/js/googlesitekit-polyfills-********************.js	379 B	+1 B (0%)
./dist/assets/js/googlesitekit-settings-********************.js	59.7 kB	+605 B (+1%)
./dist/assets/js/googlesitekit-splash-********************.js	71.7 kB	+10 B (0%)
./dist/assets/js/googlesitekit-user-input-********************.js	46.9 kB	+46 B (0%)
./dist/assets/js/googlesitekit-vendor-********************.js	316 kB	+49 B (0%)
./dist/assets/js/googlesitekit-widgets-********************.js	33.3 kB	+56 B (0%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	60.1 kB	+156 B (0%)
./dist/assets/js/runtime-********************.js	1.3 kB	-1 B (0%)
./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css	68 B	+68 B (new file)	🆕

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.2 kB
./dist/assets/js/29-********************.js	2.8 kB
./dist/assets/js/30-********************.js	2.28 kB
./dist/assets/js/31-********************.js	3.72 kB
./dist/assets/js/33-********************.js	888 B
./dist/assets/js/analytics-advanced-tracking-********************.js	778 B
./dist/assets/js/googlesitekit-i18n-********************.js	3.92 kB

_{compressed-size-action}

[kuasha420]

Leaving some questions and thoughts for the code reviewer here!

[nfmohit]

Excellent work on this, thank you @kuasha420 !

I have left some feedback over the implementation, let me know what you think, thanks!

[nfmohit]

This looks excellent now, thank you @kuasha420 !

I have left two very minor comments above for your consideration, please let me know what you think, thanks!

[kuasha420]

Thank you @nfmohit for the amazing review here and being patient with this PR. I've addressed your last review. Please have a look. Cheers.

[nfmohit]

This looks excellent now, thanks so much for the hard work here, @kuasha420! LGTM ✅

[nfmohit]

Just to point out for future reference, this is an expected change based on the Figma designs here.