Introduce <Notice> component for WooCommerce Admin

[corsonr]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR is part of the Sale banner project p9h1Lv-bHt-p2

Closes https://github.com/Automattic/woocommerce.com/issues/19573

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Checkout this branch
2. Open plugins/woocommerce-admin/client/marketplace/components/content/content.tsx and import the <Notice> component with import Notice from '../notice/notice';
3. At line 141 add the component with

			<Notice
				id="notice-test"
				variant="info"
				description="This is a <strong>test</strong>."
				icon="info"
				isDismisible
			/>
			<Notice
				id="notice-test-2"
				variant="warning"
				description="This is a test."
				icon="info"
				isDismisible
			/>
			<Notice
				id="notice-test-3"
				variant="success"
				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna magna, cursus eget orci convallis, ullamcorper tincidunt urna. Pellentesque blandit hendrerit risus, in mattis tellus. Nulla faucibus metus rutrum, commodo nunc non, pretium eros. Curabitur libero sapien, accumsan nec ullamcorper eu, rutrum vel odio. Aliquam in nisi augue. Vestibulum sit amet auctor mi. Praesent ligula nisi, dignissim ac nisi vitae, ullamcorper porttitor lacus. Mauris quis lacinia lacus. Sed id magna sed odio rhoncus sagittis ut vitae leo. Aliquam laoreet mollis adipiscing. Vivamus viverra, dui eget fringilla consequat, tellus felis ornare orci, sit amet hendrerit diam nibh et diam. Quisque metus arcu, tristique at ultricies id, venenatis sit amet risus. Fusce et tempus nulla. Aliquam vitae sem quis enim varius auctor lacinia at mi. Nulla facilisi."
				icon="check"
				isDismisible={ false }
			/>

4. run pnpm build
5. visit the in-app marketplace page
6. confirm you see the notices

7. confirm mobile view is working as expected
8. Close one of the two dismissible notices, and confirm in the Application > Local Storage section of your browser console that an entry is saved for that notice. Refresh the page and confirm the hidden notice doesn't show anymore.
9. test various combinations of props as per the README file

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi @lsinger, @mcliwanow,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 7420e78

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	316	0	0	24	0	340	8m 36s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[corsonr]

Regularising the spelling of isDismissible.
Using sanitizeHTML to sanitize the notice description.

Good catch @andfinally thanks!

[andfinally]

Looks great, thanks! I just had a few styling suggestions.

The margin between notices should be 32px on mobile.

I'd add a right margin of 12px on .components-button within a notice to keep buttons clear of each other.

I'd suggest we remove the 3px top margin from .woocommerce-marketplace__notice-icon and add align-self: flex-start to .woocommerce-marketplace__notice-close to make sure these elements align with the top of the text when the content is more than one line.

The close button looks especially odd centred when there is a lot of content.

[mcliwanow]

The component itself looks great 🎉 I left a couple of comments that could improve the code though - things like changing prop types and using CSS class names more consistent with the rest of the codebase.

[andfinally]

Looks 👌, thanks! I took the liberty of pushing 7420e78 with some small changes, hope that's OK!

• Using the --{$variant} pattern for the notices classnames also.
• Added height: 24px; on the icons to ensure they're nicely vertically centred.
• Restored 40px bottom margin to notices on viewports 600px and above.