@comicrelief/component-library 7.0.2 → 7.0.3

package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -28,7 +28,8 @@ var EmailSignUpForm = function EmailSignUpForm() {
     resolver: (0, _yup.yupResolver)(validationSchema)
   });
   var handleSubmit = formMethods.handleSubmit,
-      trigger = formMethods.trigger;
+      trigger = formMethods.trigger,
+      setError = formMethods.setError;
 
   function handleSubscribe(_x) {
     return _handleSubscribe.apply(this, arguments);
@@ -50,6 +51,10 @@ var EmailSignUpForm = function EmailSignUpForm() {
               if (valid) {
                 // eslint-disable-next-line no-console
                 console.log(data);
+              } else {
+                setError('formError', {
+                  message: 'Error'
+                });
               }
 
             case 4:

package/dist/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -94,9 +94,7 @@ var EmailSignUp = function EmailSignUp(_ref) {
     loading: isSubmitting,
     loadingText: "Submitting...",
     "data-test": "subscribe-button"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.values(errors).map(function (error) {
-    return /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, error.message);
-  })), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };
 
 exports.EmailSignUp = EmailSignUp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -14,7 +14,7 @@ const EmailSignUpForm = () => {
     mode: 'onBlur',
     resolver: yupResolver(validationSchema)
   });
-  const { handleSubmit, trigger } = formMethods;
+  const { handleSubmit, trigger, setError } = formMethods;
 
   async function handleSubscribe(data) {
     const valid = await trigger([
@@ -25,6 +25,8 @@ const EmailSignUpForm = () => {
     if (valid) {
       // eslint-disable-next-line no-console
       console.log(data);
+    } else {
+      setError('formError', { message: 'Error' });
     }
   }
   const title = 'Stay in the know!';

package/src/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -100,14 +100,11 @@ const EmailSignUp = ({
       )}
       {isSubmitted && !isSubmitSuccessful && (
         <>
-          {/*
-            Field errors will prevent submission,
-            so theoretically this should just be a single error set in the submission callback
-            with with RHF's `setError` method, but will neatly display multiple errors.
-          */}
-          {Object.values(errors).map(error => (
-            <ErrorText>{error.message}</ErrorText>
-          ))}
+          {/* This error can be set as part of the submit callback using RHF's `setError` function.
+          e.g. setError('formError', { message: 'Some error message'}) */}
+          {errors.formError !== undefined && (
+            <ErrorText>{errors.formError.message}</ErrorText>
+          )}
         </>
       )}