Ads new badge.

[zutigrm]

Summary

Addresses issue:

• Add "New" Badge Next To The Ads module #8448

Relevant technical choices

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 d8c8881 have been deleted.

[github-actions]

Size Change: +270 B (0%)

Total Size: 1.42 MB

Filename	Size	Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css	53 kB	+28 B (0%)
./dist/assets/js/googlesitekit-activation-********************.js	23.8 kB	+28 B (0%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	57.3 kB	-12 B (0%)
./dist/assets/js/googlesitekit-adminbar-********************.js	34.1 kB	+16 B (0%)
./dist/assets/js/googlesitekit-api-********************.js	10 kB	-23 B (0%)
./dist/assets/js/googlesitekit-components-gm2-********************.js	5.88 kB	-2 B (0%)
./dist/assets/js/googlesitekit-data-********************.js	2.17 kB	-1 B (0%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js	9.09 kB	-22 B (0%)
./dist/assets/js/googlesitekit-datastore-site-********************.js	19 kB	+7 B (0%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js	10 kB	-23 B (0%)
./dist/assets/js/googlesitekit-datastore-user-********************.js	24.3 kB	-91 B (0%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	66.7 kB	+13 B (0%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js	91.1 kB	-2 B (0%)
./dist/assets/js/googlesitekit-modules-********************.js	21.6 kB	-67 B (0%)
./dist/assets/js/googlesitekit-modules-ads-********************.js	16.8 kB	+145 B (+1%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js	111 kB	+44 B (0%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	111 kB	+42 B (0%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.4 kB	-120 B (-1%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js	57.9 kB	+74 B (0%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	30.1 kB	+37 B (0%)
./dist/assets/js/googlesitekit-settings-********************.js	59.1 kB	+317 B (+1%)
./dist/assets/js/googlesitekit-splash-********************.js	71.7 kB	-170 B (0%)
./dist/assets/js/googlesitekit-user-input-********************.js	46.8 kB	-8 B (0%)
./dist/assets/js/googlesitekit-widgets-********************.js	33.2 kB	+37 B (0%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	59.9 kB	+23 B (0%)

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.2 kB
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	7.47 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/32-********************.js	930 B
./dist/assets/js/33-********************.js	888 B
./dist/assets/js/34-********************.js	3.12 kB
./dist/assets/js/analytics-advanced-tracking-********************.js	778 B
./dist/assets/js/googlesitekit-components-gm3-********************.js	10 kB
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.09 kB
./dist/assets/js/googlesitekit-i18n-********************.js	3.92 kB
./dist/assets/js/googlesitekit-polyfills-********************.js	379 B
./dist/assets/js/googlesitekit-vendor-********************.js	316 kB
./dist/assets/js/runtime-********************.js	1.3 kB

_{compressed-size-action}

[nfmohit]

Thank you for your work here, @zutigrm!

What do you think about re-using the already existing NewBadge component here? I understand that we may need to extend it a little to make the <Tooltip> optional (i.e. wrap it with a <Tooltip> only if tooltipTitle is set), but it already has the necessary styling matching the Figma designs.

Let me know what you think, thank you!

I have prepared a quick POC describing what I'm proposing here, thanks!

[zutigrm]

@nfmohit Thanks for the suggestion. I guess it would make removal in one of the next sprints easier, as only component would be removed vs tracking few styles to remove as well. I will implement it with NewBadge component. Thanks

[nfmohit]

Thank you @zutigrm. This looks much better now. This is back with you with a few additional comments, thank you!

[nfmohit]

Thank you for addressing my feedback, @zutigrm! This looks complete, I just have two too minor comments, so minor that I've gone ahead and applied them myself. I hope that is okay with you :D

[nfmohit]

LGTM, thank you @zutigrm !