@comicrelief/component-library 7.48.4 → 8.0.0

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

@@ -19,7 +19,9 @@ const TextInput = _ref => {
     ...rest
   } = _ref;
   const {
-    errors,
+    formState: {
+      errors
+    },
     register
   } = formContext;
   const props = {
@@ -32,9 +34,7 @@ const TextInput = _ref => {
     'aria-required': !optional,
     ...rest
   };
-  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
-    ref: register
-  }));
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
 };
 TextInput.defaultProps = {
   optional: null,

package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -312,6 +312,8 @@ exports[`renders correctly 1`] = `
               className="c13"
               id="first-name"
               name="firstName"
+              onBlur={[Function]}
+              onChange={[Function]}
               placeholder="Enter your first name"
               required={false}
               type="text"
@@ -343,6 +345,8 @@ exports[`renders correctly 1`] = `
               className="c13"
               id="last-name"
               name="lastName"
+              onBlur={[Function]}
+              onChange={[Function]}
               placeholder="Enter your last name"
               required={false}
               type="text"
@@ -375,6 +379,8 @@ exports[`renders correctly 1`] = `
             className="c13"
             id="email"
             name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
             placeholder="example@youremail.com"
             required={false}
             type="email"
@@ -388,7 +394,7 @@ exports[`renders correctly 1`] = `
         <button
           className="c15 c16"
           data-test="subscribe-button"
-          disabled={false}
+          disabled={true}
           type="submit"
         >
           <span

package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js

@@ -53,14 +53,14 @@ const CheckAnswer = _ref => {
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckContainer, null, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
     htmlFor: "".concat(name, "-yes"),
     userSelection: userSelection
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, {
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
     type: "checkbox",
     name: name,
     id: "".concat(name, "-yes"),
-    value: "yes",
-    ref: register,
+    value: "yes"
+  }, register(name), {
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
+  })), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
 };
 CheckAnswer.defaultProps = {
   userSelection: null,

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -34,7 +34,9 @@ const MarketingPreferencesDS = _ref => {
     formContext
   } = _ref;
   const {
-    errors,
+    formState: {
+      errors
+    },
     control
   } = formContext;
 

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js

@@ -66,7 +66,7 @@ const buildValidationSchema = overrideOptions => {
   // Override with any custom options supplied
   const mpValidationOptions = (0, _merge2.default)(defaultOptions, overrideOptions);
   const phoneRegex = /^(((((\+44)|(0044))\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((((\+44)|(0044))\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((((\+44)|(0044))\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\\#(\d{4}|\d{3}))?$/;
-  const mpValidationSchema = yup.object({
+  const mpValidationFields = {
     mp_email: yup.string().when('mp_permissionEmail', {
       is: val => !mpValidationOptions.mp_permissionEmail.disableOption && mpValidationOptions.mp_permissionEmail[val],
       then: yup.string().required('Please enter your email address').email('Please enter a valid email address')
@@ -98,10 +98,13 @@ const buildValidationSchema = overrideOptions => {
     /*  Non-required fields */
     mp_address2: yup.string().max(50, 'Please enter a maximum of 50 characters'),
     mp_address3: yup.string().max(50, 'Please enter a maximum of 50 characters')
-  });
+  };
+  const mpValidationSchema = yup.object(mpValidationFields);
   return {
     mpValidationSchema,
-    mpValidationOptions
+    mpValidationOptions,
+    // Return the raw fields object too, to make for easier schema-combining:
+    mpValidationFields
   };
 };
 exports.buildValidationSchema = buildValidationSchema;

package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js

@@ -17,7 +17,9 @@ const TextInput = _ref => {
     ...rest
   } = _ref;
   const {
-    errors,
+    formState: {
+      errors
+    },
     register
   } = formContext;
   const props = {
@@ -30,9 +32,7 @@ const TextInput = _ref => {
     'aria-required': !optional,
     ...rest
   };
-  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
-    ref: register
-  }));
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
 };
 TextInput.defaultProps = {
   optional: null,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.48.4",
+  "version": "8.0.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -22,7 +22,7 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@hookform/resolvers": "^1.3.4",
+    "@hookform/resolvers": "^3.9.0",
     "axios": "^1.7.2",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
@@ -33,7 +33,7 @@
     "react-canvas-confetti": "^1.4.0",
     "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^6.3.0",
+    "react-hook-form": "^7.52.1",
     "react-modal": "^3.16.1",
     "react-range-slider-input": "^3.0.7",
     "react-responsive": "^9.0.2",

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

@@ -12,7 +12,7 @@ const TextInput = ({
   formContext,
   ...rest
 }) => {
-  const { errors, register } = formContext;
+  const { formState: { errors }, register } = formContext;
 
   const props = {
     name: fieldName,
@@ -25,7 +25,7 @@ const TextInput = ({
     ...rest
   };
 
-  return <Input {...props} ref={register} />;
+  return <Input {...props} {...register(fieldName)} />;
 };
 
 TextInput.defaultProps = {

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -312,6 +312,8 @@ exports[`renders correctly 1`] = `
               className="c13"
               id="first-name"
               name="firstName"
+              onBlur={[Function]}
+              onChange={[Function]}
               placeholder="Enter your first name"
               required={false}
               type="text"
@@ -343,6 +345,8 @@ exports[`renders correctly 1`] = `
               className="c13"
               id="last-name"
               name="lastName"
+              onBlur={[Function]}
+              onChange={[Function]}
               placeholder="Enter your last name"
               required={false}
               type="text"
@@ -375,6 +379,8 @@ exports[`renders correctly 1`] = `
             className="c13"
             id="email"
             name="email"
+            onBlur={[Function]}
+            onChange={[Function]}
             placeholder="example@youremail.com"
             required={false}
             type="email"
@@ -388,7 +394,7 @@ exports[`renders correctly 1`] = `
         <button
           className="c15 c16"
           data-test="subscribe-button"
-          disabled={false}
+          disabled={true}
           type="submit"
         >
           <span

package/src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js

@@ -53,7 +53,7 @@ const CheckAnswer = ({
           name={name}
           id={`${name}-yes`}
           value="yes"
-          ref={register}
+          {...register(name)}
           onChange={onChange}
         />
         <span />

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -21,7 +21,7 @@ const MarketingPreferencesDS = ({
   id,
   formContext
 }) => {
-  const { errors, control } = formContext;
+  const { formState: { errors }, control } = formContext;
 
   // For brevity
   const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: null });

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js

@@ -63,7 +63,7 @@ const buildValidationSchema = overrideOptions => {
 
   const phoneRegex = /^(((((\+44)|(0044))\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((((\+44)|(0044))\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((((\+44)|(0044))\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\\#(\d{4}|\d{3}))?$/;
 
-  const mpValidationSchema = yup.object({
+  const mpValidationFields = {
     mp_email: yup.string()
       .when('mp_permissionEmail', {
         is: val => (!(mpValidationOptions.mp_permissionEmail.disableOption)
@@ -125,11 +125,15 @@ const buildValidationSchema = overrideOptions => {
 
     mp_address3: yup.string()
       .max(50, 'Please enter a maximum of 50 characters')
-  });
+  };
+
+  const mpValidationSchema = yup.object(mpValidationFields);
 
   return {
     mpValidationSchema,
-    mpValidationOptions
+    mpValidationOptions,
+    // Return the raw fields object too, to make for easier schema-combining:
+    mpValidationFields
   };
 };
 

package/src/components/Organisms/MarketingPreferencesDS/_TextInput.js

@@ -6,7 +6,7 @@ const TextInput = ({
   fieldName, label,
   optional, fieldType, formContext, ...rest
 }) => {
-  const { errors, register } = formContext;
+  const { formState: { errors }, register } = formContext;
 
   const props = {
     name: fieldName,
@@ -20,7 +20,7 @@ const TextInput = ({
     ...rest
   };
 
-  return <Input {...props} ref={register} />;
+  return <Input {...props} {...register(fieldName)} />;
 };
 
 TextInput.defaultProps = {