Feature Branch: Updated Shopper Notices (#8659)

* Notice banner component

* Snackbar support

* Switch to new components

* Finish snackbar implementation

* Summary notice

* Styling issues

* Fix text wrap in shipping calculator

* Storybook entries

* Docs and tests for NoticeBanner

* Framer motion to avoid components dependency

* Snackbar list stories

* Docs for snackbar list

* Update assets/js/base/components/notice-banner/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update assets/js/base/components/notice-banner/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update assets/js/base/components/notice-banner/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update assets/js/base/components/notice-banner/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update assets/js/base/components/notice-banner/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Types/docblocks

* Docs

* Update notice type

* Use NoticeBannerProps for type of noticeProps

* Raw html to fix notice encoding

* getClassNameFromStatus is unused

* Update position text

* Clarify notice text

* Fix hover style in whisper TT3 theme

* remove div styles

* Add new templates for legacy buyer notices in WooCommerce core (#8732)

* Add templates for legacy core notices

* Update src/Domain/Services/Notices.php

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Remove debugging code

* DRY get_notices_template

* Simplify error template

* Fix padding

* Only include new notices if using block cart/checkout

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

* Fix view box tag

* Hover and focus styles

* Styling when notices added via ajax

* Remove margin change

* Implement react-transition-group instead of framer (#8920)

* Add screenshots to docs

---------

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
 			'prop-types',
 			'react',
 			'requireindex',
+			'react-transition-group',
 		],
 		'import/resolver': {
 			node: {},

assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx

@@ -4,10 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
-import {
-	ExperimentalOrderShippingPackages,
-	StoreNotice,
-} from '@woocommerce/blocks-checkout';
+import { ExperimentalOrderShippingPackages } from '@woocommerce/blocks-checkout';
 import {
 	getShippingRatesPackageCount,
 	getShippingRatesRateCount,
@@ -17,6 +14,7 @@ import {
 	useEditorContext,
 	useShippingData,
 } from '@woocommerce/base-context';
+import NoticeBanner from '@woocommerce/base-components/notice-banner';
 
 /**
  * Internal dependencies
@@ -111,7 +109,7 @@ const ShippingRatesControl = ( {
 			{ hasSelectedLocalPickup &&
 				shippingRates.length > 1 &&
 				! isEditor && (
-					<StoreNotice
+					<NoticeBanner
 						className="wc-block-components-notice"
 						isDismissible={ false }
 						status="warning"
@@ -120,7 +118,7 @@ const ShippingRatesControl = ( {
 							'Multiple shipments must have the same pickup location',
 							'woo-gutenberg-products-block'
 						) }
-					</StoreNotice>
+					</NoticeBanner>
 				) }
 			<ExperimentalOrderShippingPackages>
 				<Packages

assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.tsx

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import type { CartResponseShippingRate } from '@woocommerce/types';
+import NoticeBanner from '@woocommerce/base-components/notice-banner';
 
 /**
  * Internal dependencies
@@ -32,11 +33,18 @@ export const ShippingRateSelector = ( {
 				className="wc-block-components-totals-shipping__options"
 				noResultsMessage={
 					<>
-						{ isAddressComplete &&
-							__(
-								'There are no shipping options available. Please check your shipping address.',
-								'woo-gutenberg-products-block'
-							) }
+						{ isAddressComplete && (
+							<NoticeBanner
+								isDismissible={ false }
+								className="wc-block-components-shipping-rates-control__no-results-notice"
+								status="error"
+							>
+								{ __(
+									'There are no shipping options available. Please check your shipping address.',
+									'woo-gutenberg-products-block'
+								) }
+							</NoticeBanner>
+						) }
 					</>
 				}
 				shippingRates={ shippingRates }

assets/js/base/components/index.ts

@@ -0,0 +1,40 @@
+export * from './block-error-boundary';
+export * from './button';
+export * from './cart-checkout';
+export * from './checkbox-list';
+export * from './chip';
+export * from './combobox';
+export * from './country-input';
+export * from './drawer';
+export * from './filter-element-label';
+export * from './filter-placeholder';
+export * from './filter-reset-button';
+export * from './filter-submit-button';
+export * from './form';
+export * from './form-token-field';
+export * from './formatted-monetary-amount';
+export * from './label';
+export * from './load-more-button';
+export * from './loading-mask';
+export * from './noninteractive';
+export * from './notice-banner';
+export * from './pagination';
+export * from './price-slider';
+export * from './product-list';
+export * from './product-name';
+export * from './product-price';
+export * from './product-rating';
+export * from './quantity-selector';
+export * from './radio-control';
+export * from './radio-control-accordion';
+export * from './read-more';
+export * from './reviews';
+export * from './sidebar-layout';
+export * from './snackbar-list';
+export * from './sort-select';
+export * from './spinner';
+export * from './state-input';
+export * from './summary';
+export * from './tabs';
+export * from './textarea';
+export * from './title';

assets/js/base/components/notice-banner/README.md

@@ -0,0 +1,138 @@
+# NoticeBanner Component <!-- omit in toc -->
+
+An informational UI displayed near the top of the store pages.
+
+## Table of contents <!-- omit in toc -->
+
+-   [Design Guidelines](#design-guidelines)
+-   [Development Guidelines](#development-guidelines)
+    -   [Usage](#usage)
+    -   [Props](#props)
+        -   [`children`: `React.ReactNode`](#children-reactreactnode)
+        -   [`className`: `string`](#classname-string)
+        -   [`isDismissible`: `boolean`](#isdismissible-boolean)
+        -   [`onRemove`: `() => void`](#onremove---void)
+        -   [`politeness`: `'polite' | 'assertive'`](#politeness-polite--assertive)
+        -   [`spokenMessage`: `string`](#spokenmessage-string)
+        -   [`status`: `'success' | 'error' | 'info' | 'warning' | 'default'`](#status-success--error--info--warning--default)
+        -   [`summary`: `string`](#summary-string)
+            -   [Example](#example)
+
+## Design Guidelines
+
+Notices are informational UI displayed near the top of store pages. Notices are used to indicate the result of an action, or to draw the user’s attention to necessary information.
+
+Notices are color-coded to indicate the type of message being communicated, and also show an icon to reinforce the meaning of the message. The color and icon used for a notice are determined by the `status` prop.
+
+### Informational
+
+Blue notices used for general information for buyers that are not blocking and do not require action.
+
+![Informational notice](./screenshots/info.png)
+
+### Error
+
+Red notices to show that an error has occurred and that the user needs to take action.
+
+![Error notice](./screenshots/error.png)
+
+### Success
+
+Green notices that show an action was successful.
+
+![Success notice](./screenshots/success.png)
+
+### Warning
+
+Yellow notices that show that the user may need to take action, or needs to be aware of something important.
+
+![Warning notice](./screenshots/warning.png)
+
+### Default
+
+Gray notice, similar to info, but used for less important messaging.
+
+![Default notice](./screenshots/default.png)
+
+## Development Guidelines
+
+### Usage
+
+To display a plain notice, pass the notice message as a string:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+<NoticeBanner status="info">Your message here</NoticeBanner>;
+```
+
+For more complex markup, you can pass any JSX element:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+<NoticeBanner status="error">
+	<p>
+		An error occurred: <code>{ errorDetails }</code>.
+	</p>
+</NoticeBanner>;
+```
+
+### Props
+
+#### `children`: `React.ReactNode`
+
+The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
+
+#### `className`: `string`
+
+Additional class name to give to the notice.
+
+#### `isDismissible`: `boolean`
+
+Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.
+
+#### `onRemove`: `() => void`
+
+Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.
+
+#### `politeness`: `'polite' | 'assertive'`
+
+Determines the level of politeness for the notice for assistive technology. Acceptable values are 'polite' and 'assertive'. Default is 'polite'.
+
+#### `spokenMessage`: `string`
+
+Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.
+
+#### `status`: `'success' | 'error' | 'info' | 'warning' | 'default'`
+
+Status determines the color of the notice and the icon. Acceptable values are `success`, `error`, `info`, `warning`, and `default`.
+
+#### `summary`: `string`
+
+Optional summary text shown above notice content, used when several notices are listed together.
+
+##### Example
+
+```tsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+const errorMessages = [
+	'First error message',
+	'Second error message',
+	'Third error message',
+];
+
+<NoticeBanner
+	status="error"
+	summary="There are errors in your form submission:"
+>
+	<ul>
+		{ errorMessages.map( ( message ) => (
+			<li key={ message }>{ message }</li>
+		) ) }
+	</ul>
+</NoticeBanner>;
+```
+
+In this example, the summary prop is used to indicate to the user that there are errors in the form submission. The list of error messages is rendered within the NoticeBanner component using an unordered list (`<ul>`) and list items (`<li>`). The `status` prop is set to `error` to indicate that the notice represents an error message.

assets/js/base/components/notice-banner/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getDefaultPoliteness, getStatusIcon } from './utils';
+import Button from '../button';
+import { useSpokenMessage } from '../../hooks';
+
+export interface NoticeBannerProps {
+	// The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
+	children: React.ReactNode;
+	// Additional class name to give to the notice.
+	className?: string | undefined;
+	// Determines whether the notice can be dismissed by the user.
+	isDismissible?: boolean | undefined;
+	// Function called when dismissing the notice.
+	onRemove?: ( () => void ) | undefined;
+	// Determines the level of politeness for the notice for assistive technology.
+	politeness?: 'polite' | 'assertive' | undefined;
+	// Optionally provided to change the spoken message for assistive technology.
+	spokenMessage?: string | React.ReactNode | undefined;
+	// Status determines the color of the notice and the icon.
+	status: 'success' | 'error' | 'info' | 'warning' | 'default';
+	// Optional summary text shown above notice content, used when several notices are listed together.
+	summary?: string | undefined;
+}
+
+/**
+ * NoticeBanner: An informational UI displayed near the top of the store pages.
+ *
+ * Notices are informational UI displayed near the top of store pages. WooCommerce blocks, themes, and plugins all use
+ * notices to indicate the result of an action, or to draw the user’s attention to necessary information.
+ */
+const NoticeBanner = ( {
+	className,
+	status = 'default',
+	children,
+	spokenMessage = children,
+	onRemove = () => void 0,
+	isDismissible = true,
+	politeness = getDefaultPoliteness( status ),
+	summary,
+}: NoticeBannerProps ) => {
+	useSpokenMessage( spokenMessage, politeness );
+
+	const dismiss = ( event: React.SyntheticEvent ) => {
+		if (
+			typeof event?.preventDefault === 'function' &&
+			event.preventDefault
+		) {
+			event.preventDefault();
+		}
+		onRemove();
+	};
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-notice-banner',
+				'is-' + status,
+				{
+					'is-dismissible': isDismissible,
+				}
+			) }
+		>
+			<Icon icon={ getStatusIcon( status ) } />
+			<div className="wc-block-components-notice-banner__content">
+				{ summary && (
+					<p className="wc-block-components-notice-banner__summary">
+						{ summary }
+					</p>
+				) }
+				{ children }
+			</div>
+			{ !! isDismissible && (
+				<Button
+					className="wc-block-components-notice-banner__dismiss"
+					icon={ close }
+					label={ __(
+						'Dismiss this notice',
+						'woo-gutenberg-products-block'
+					) }
+					onClick={ dismiss }
+					showTooltip={ false }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default NoticeBanner;