initial commit

packages/woocommerce-blocks/assets/js/base/context/providers/validation/components/index.js

@@ -0,0 +1 @@
+export * from './validation-input-error';

packages/woocommerce-blocks/assets/js/base/context/providers/validation/components/validation-input-error/index.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { useValidationContext } from '../../context';
+import './style.scss';
+
+export const ValidationInputError = ( {
+	errorMessage = '',
+	propertyName = '',
+	elementId = '',
+} ) => {
+	const { getValidationError, getValidationErrorId } = useValidationContext();
+
+	if ( ! errorMessage || typeof errorMessage !== 'string' ) {
+		const error = getValidationError( propertyName ) || {};
+		if ( error.message && ! error.hidden ) {
+			errorMessage = error.message;
+		} else {
+			return null;
+		}
+	}
+
+	return (
+		<div className="wc-block-components-validation-error" role="alert">
+			<p id={ getValidationErrorId( elementId ) }>{ errorMessage }</p>
+		</div>
+	);
+};
+
+ValidationInputError.propTypes = {
+	errorMessage: PropTypes.string,
+	propertyName: PropTypes.string,
+	elementId: PropTypes.string,
+};
+
+export default ValidationInputError;

packages/woocommerce-blocks/assets/js/base/context/providers/validation/components/validation-input-error/style.scss

@@ -0,0 +1,15 @@
+.wc-block-components-validation-error {
+	@include font-size(smaller);
+	color: $alert-red;
+	max-width: 100%;
+	white-space: normal;
+
+	> p {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.wc-block-components-select + .wc-block-components-validation-error {
+	margin-bottom: $gap-large;
+}