[Product Block Editor]: Introduce AdviceCard component (#43082)

* introduce AdviceCard component

* import advice card styles

* add onDismiss() prop

* tweak border style

* implement dashed border

* log the onDismiss function

* changelog

* tweak layout

* tweak card border style

packages/js/product-editor/changelog/update-product-editor-introduce-collapsible-advice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: Introduce AdviceCard component

packages/js/product-editor/src/components/advice-card/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+} from '@wordpress/components';
+import { close } from '@wordpress/icons';
+
+export interface AdviceCardProps {
+	tip?: string;
+	isDismissible?: boolean;
+	onDismiss?: () => void;
+	image?: React.ReactNode;
+}
+
+export const AdviceCard: React.FC< AdviceCardProps > = ( {
+	tip,
+	image = null,
+	isDismissible = false,
+	onDismiss = () => {},
+} ) => {
+	return (
+		<Card className="woocommerce-advice-card">
+			{ isDismissible && (
+				<CardHeader>
+					<Button
+						className="woocommerce-advice-card__dismiss-button"
+						onClick={ onDismiss }
+						icon={ close }
+						label={ __( 'Dismiss', 'woocommerce' ) }
+					/>
+				</CardHeader>
+			) }
+			<CardBody>{ image }</CardBody>
+			{ tip && tip.length > 0 && <CardFooter>{ tip }</CardFooter> }
+		</Card>
+	);
+};

packages/js/product-editor/src/components/advice-card/stories/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { AdviceCard, AdviceCardProps } from '..';
+import { ShoppingBags } from '../../../images/shopping-bugs';
+
+export default {
+	title: 'Product Editor/components/AdviceCard',
+	component: AdviceCard,
+	args: {
+		tip: __(
+			'Tip: Upsells are typically products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
+			'woocommerce'
+		),
+		image: <ShoppingBags />,
+		isDismissible: true,
+	},
+};
+
+export const Default = ( args: AdviceCardProps ) => <AdviceCard { ...args } />;
+
+Default.args = {
+	// @todo: use an addon
+	onDismiss: console.log, // eslint-disable-line no-console
+};

packages/js/product-editor/src/components/advice-card/style.scss

@@ -0,0 +1,41 @@
+$card-border-color: $gray-400;
+$card-border-width: 2px;
+
+.woocommerce-advice-card {
+	&.components-card {
+		box-shadow: none;
+		background-image: url( "data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23" + str-slice( '#{ $card-border-color }', 2 ) + "' stroke-width='#{ $card-border-width }' stroke-dasharray='4 4' stroke-dashoffset='46' stroke-linecap='butt'/%3e%3c/svg%3e" );
+		border-radius: 4px;
+
+		.components-card__body {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.components-card {
+		&__header {
+			text-align: center;
+			padding: $gap $gap 0;
+			border-bottom: 0;
+			justify-content: right;
+		}
+
+		&__body {
+			padding: calc( 1.5 * $gap ) $gap;
+		}
+
+		&__footer {
+			text-align: center;
+			font-weight: 400;
+			color: $gray-700;
+			border-top: 0;
+			padding: 0 $gap calc( 3 * $gap );
+		}
+	}
+
+	.woocommerce-advice-card__dismiss-button {
+		color: $gray-700;
+	}
+}

packages/js/product-editor/src/images/shopping-bugs/index.tsx

@@ -8,6 +8,7 @@ export function ShoppingBags( {
 	colorOne = '#E0E0E0',
 	colorTwo = '#F0F0F0',
 	size = '88',
+	style = {},
 } ) {
 	return (
 		<SVG
@@ -16,6 +17,7 @@ export function ShoppingBags( {
 			viewBox="0 0 88 88"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
+			style={ style }
 		>
 			<Path
 				d="M59.5299 29.3511H6.48494C4.38544 44.6382 0.74386 74.8826 0.105058 79.5685C-0.505262 84.0386 1.48031 87.9998 7.72592 87.9998H58.293C64.5386 87.9998 66.5241 84.0386 65.9138 79.5685C65.275 74.8826 61.6294 44.6382 59.534 29.3511H59.5299Z"

packages/js/product-editor/src/style.scss

@@ -39,6 +39,7 @@
 @import "components/attribute-control/attribute-skeleton.scss";
 @import "components/checkbox-control/style.scss";
 @import "components/add-products-modal/style.scss";
+@import "components/advice-card/style.scss";
 
 /* Field Blocks */