initial commit

packages/woocommerce-blocks/assets/js/editor-components/feedback-prompt/index.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import { Icon, comment, external } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Component to render a Feedback prompt in the sidebar.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.text
+ * @param {string} props.url
+ */
+const FeedbackPrompt = ( {
+	text,
+	url = 'https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=384565',
+} ) => {
+	return (
+		<div className="wc-block-feedback-prompt">
+			<Icon srcElement={ comment } />
+			<h2 className="wc-block-feedback-prompt__title">
+				{ __( 'Feedback?', 'woocommerce' ) }
+			</h2>
+			<p className="wc-block-feedback-prompt__text">{ text }</p>
+			<a
+				href={ url }
+				className="wc-block-feedback-prompt__link"
+				rel="noreferrer noopener"
+				target="_blank"
+			>
+				{ __(
+					'Give us your feedback.',
+					'woocommerce'
+				) }
+				<Icon srcElement={ external } size={ 16 } />
+			</a>
+		</div>
+	);
+};
+
+FeedbackPrompt.propTypes = {
+	text: PropTypes.string,
+	url: PropTypes.string,
+};
+
+export default FeedbackPrompt;
+
+export const CartCheckoutFeedbackPrompt = () => (
+	<FeedbackPrompt
+		text={ __(
+			'We are currently working on improving our cart and checkout blocks to provide merchants with the tools and customization options they need.',
+			'woocommerce'
+		) }
+		url="https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?template=--cart-checkout-feedback.md"
+	/>
+);

packages/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss

@@ -0,0 +1,19 @@
+.wc-block-feedback-prompt {
+	background-color: #f7f7f7;
+	border-top: 1px solid $gray-200;
+	margin: 0 -16px 0;
+	padding: $gap-large;
+	text-align: center;
+
+	.wc-block-feedback-prompt__title {
+		margin: 0 0 $gap-small;
+	}
+
+	.wc-block-feedback-prompt__link {
+		color: inherit;
+
+		> .gridicon {
+			vertical-align: text-bottom;
+		}
+	}
+}