Update the incompatible gateways notice design (#8365)

* Fix the alert icon's name

* Add "status" to the Alert's API

* Update the incompatible gateways notice's design

* Set the list's bullet points from CSS

assets/js/editor-components/incompatible-payment-gateways-notice/editor.scss

@@ -24,6 +24,14 @@
 	.wc-blocks-incompatible-extensions-notice__element {
 		display: flex;
 		align-items: center;
+		position: relative;
+
+		&::before {
+			content: "•";
+			position: absolute;
+			left: -13px;
+			font-size: 1.2rem;
+		}
 	}
 }
 

assets/js/editor-components/incompatible-payment-gateways-notice/index.tsx

@@ -9,7 +9,7 @@ import {
 	createInterpolateElement,
 	useEffect,
 } from '@wordpress/element';
-import { alert } from '@woocommerce/icons';
+import { Alert } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
@@ -74,7 +74,7 @@ export function IncompatiblePaymentGatewaysNotice( {
 			<div className="wc-blocks-incompatible-extensions-notice__content">
 				<Icon
 					className="wc-blocks-incompatible-extensions-notice__warning-icon"
-					icon={ alert }
+					icon={ <Alert /> }
 				/>
 				<div>
 					<p>{ noticeContent }</p>

assets/js/icons/index.js

@@ -13,7 +13,7 @@ export { default as woo } from './library/woo';
 export { default as miniCart } from './library/mini-cart';
 export { default as miniCartAlt } from './library/mini-cart-alt';
 export { default as stacks } from './library/stacks';
-export { default as alert } from './library/alert';
+export { default as Alert } from './library/alert';
 export { default as customerAccount } from './library/customer-account';
 export { default as customerAccountStyle } from './library/customer-account-style';
 export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';

assets/js/icons/library/alert.tsx

@@ -1,18 +1,36 @@
 /**
  * External dependencies
  */
+import { IconProps } from '@wordpress/icons/build-types/icon';
 import { SVG } from '@wordpress/primitives';
 
-const cart = (
-	<SVG xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+interface AlertProps {
+	status?: 'warning' | 'error' | 'success' | 'info';
+	props?: IconProps;
+}
+
+const statusToColorMap = {
+	warning: '#F0B849',
+	error: '#CC1818',
+	success: '#46B450',
+	info: '#0073AA',
+};
+
+const Alert = ( { status = 'warning', ...props }: AlertProps ) => (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		{ ...props }
+	>
 		<path
 			d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
-			stroke="#CC1818"
+			stroke={ statusToColorMap[ status ] }
 			strokeWidth="1.5"
 		/>
-		<path d="M13 7H11V13H13V7Z" fill="#CC1818" />
-		<path d="M13 15H11V17H13V15Z" fill="#CC1818" />
+		<path d="M13 7H11V13H13V7Z" fill={ statusToColorMap[ status ] } />
+		<path d="M13 15H11V17H13V15Z" fill={ statusToColorMap[ status ] } />
 	</SVG>
 );
 
-export default cart;
+export default Alert;