@comicrelief/component-library 7.48.5 → 8.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/Organisms/EmailSignUp/_TextInput.js +4 -4
  2. package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +7 -1
  3. package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +4 -4
  4. package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +3 -1
  5. package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js +7 -7
  6. package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js +4 -4
  7. package/package.json +3 -3
  8. package/src/components/Organisms/EmailSignUp/_TextInput.js +2 -2
  9. package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +7 -1
  10. package/src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +1 -1
  11. package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +1 -1
  12. package/src/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js +7 -7
  13. package/src/components/Organisms/MarketingPreferencesDS/_TextInput.js +2 -2
package/dist/components/Organisms/EmailSignUp/_TextInput.js CHANGED
@@ -19,7 +19,9 @@ const TextInput = _ref => {
19
19
  ...rest
20
20
  } = _ref;
21
21
  const {
22
- errors,
22
+ formState: {
23
+ errors
24
+ },
23
25
  register
24
26
  } = formContext;
25
27
  const props = {
@@ -32,9 +34,7 @@ const TextInput = _ref => {
32
34
  'aria-required': !optional,
33
35
  ...rest
34
36
  };
35
- return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
36
- ref: register
37
- }));
37
+ return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
38
38
  };
39
39
  TextInput.defaultProps = {
40
40
  optional: null,
package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap CHANGED
@@ -312,6 +312,8 @@ exports[`renders correctly 1`] = `
312
312
  className="c13"
313
313
  id="first-name"
314
314
  name="firstName"
315
+ onBlur={[Function]}
316
+ onChange={[Function]}
315
317
  placeholder="Enter your first name"
316
318
  required={false}
317
319
  type="text"
@@ -343,6 +345,8 @@ exports[`renders correctly 1`] = `
343
345
  className="c13"
344
346
  id="last-name"
345
347
  name="lastName"
348
+ onBlur={[Function]}
349
+ onChange={[Function]}
346
350
  placeholder="Enter your last name"
347
351
  required={false}
348
352
  type="text"
@@ -375,6 +379,8 @@ exports[`renders correctly 1`] = `
375
379
  className="c13"
376
380
  id="email"
377
381
  name="email"
382
+ onBlur={[Function]}
383
+ onChange={[Function]}
378
384
  placeholder="example@youremail.com"
379
385
  required={false}
380
386
  type="email"
@@ -388,7 +394,7 @@ exports[`renders correctly 1`] = `
388
394
  <button
389
395
  className="c15 c16"
390
396
  data-test="subscribe-button"
391
- disabled={false}
397
+ disabled={true}
392
398
  type="submit"
393
399
  >
394
400
  <span
package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js CHANGED
@@ -53,14 +53,14 @@ const CheckAnswer = _ref => {
53
53
  return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckContainer, null, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
54
54
  htmlFor: "".concat(name, "-yes"),
55
55
  userSelection: userSelection
56
- }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, {
56
+ }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
57
57
  type: "checkbox",
58
58
  name: name,
59
59
  id: "".concat(name, "-yes"),
60
- value: "yes",
61
- ref: register,
60
+ value: "yes"
61
+ }, register(name), {
62
62
  onChange: onChange
63
- }), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
63
+ })), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
64
64
  };
65
65
  CheckAnswer.defaultProps = {
66
66
  userSelection: null,
package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js CHANGED
@@ -34,7 +34,9 @@ const MarketingPreferencesDS = _ref => {
34
34
  formContext
35
35
  } = _ref;
36
36
  const {
37
- errors,
37
+ formState: {
38
+ errors
39
+ },
38
40
  control
39
41
  } = formContext;
40
42
 
package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js CHANGED
@@ -69,31 +69,31 @@ const buildValidationSchema = overrideOptions => {
69
69
  const mpValidationFields = {
70
70
  mp_email: yup.string().when('mp_permissionEmail', {
71
71
  is: val => !mpValidationOptions.mp_permissionEmail.disableOption && mpValidationOptions.mp_permissionEmail[val],
72
- then: yup.string().required('Please enter your email address').email('Please enter a valid email address')
72
+ then: schema => schema.required('Please enter your email address').email('Please enter a valid email address')
73
73
  }),
74
74
  mp_mobile: yup.string().when('mp_permissionSMS', {
75
75
  is: val => !mpValidationOptions.mp_permissionSMS.disableOption && mpValidationOptions.mp_permissionSMS[val],
76
- then: yup.string().required('Please enter your mobile number').matches(phoneRegex, 'Please enter a valid UK mobile number')
76
+ then: schema => schema.required('Please enter your mobile number').matches(phoneRegex, 'Please enter a valid UK mobile number')
77
77
  }),
78
78
  mp_phone: yup.string().when('mp_permissionPhone', {
79
79
  is: val => !mpValidationOptions.mp_permissionPhone.disableOption && mpValidationOptions.mp_permissionPhone[val],
80
- then: yup.string().required('Please enter your phone number').matches(phoneRegex, 'Please enter a valid UK phone number')
80
+ then: schema => schema.required('Please enter your phone number').matches(phoneRegex, 'Please enter a valid UK phone number')
81
81
  }),
82
82
  mp_address1: yup.string().when('mp_permissionPost', {
83
83
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
84
- then: yup.string().required('Please enter the first line of your address').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
84
+ then: schema => schema.required('Please enter the first line of your address').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
85
85
  }),
86
86
  mp_town: yup.string().when('mp_permissionPost', {
87
87
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
88
- then: yup.string().required('Please enter your town').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
88
+ then: schema => schema.required('Please enter your town').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
89
89
  }),
90
90
  mp_postcode: yup.string().when('mp_permissionPost', {
91
91
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
92
- then: yup.string().required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
92
+ then: schema => schema.required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
93
93
  }),
94
94
  mp_country: yup.string().when('mp_permissionPost', {
95
95
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
96
- then: yup.string().required('Please enter your country').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
96
+ then: schema => schema.required('Please enter your country').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
97
97
  }),
98
98
  /* Non-required fields */
99
99
  mp_address2: yup.string().max(50, 'Please enter a maximum of 50 characters'),
package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js CHANGED
@@ -17,7 +17,9 @@ const TextInput = _ref => {
17
17
  ...rest
18
18
  } = _ref;
19
19
  const {
20
- errors,
20
+ formState: {
21
+ errors
22
+ },
21
23
  register
22
24
  } = formContext;
23
25
  const props = {
@@ -30,9 +32,7 @@ const TextInput = _ref => {
30
32
  'aria-required': !optional,
31
33
  ...rest
32
34
  };
33
- return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
34
- ref: register
35
- }));
35
+ return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, register(fieldName)));
36
36
  };
37
37
  TextInput.defaultProps = {
38
38
  optional: null,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "7.48.5",
4
+ "version": "8.0.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
@@ -22,7 +22,7 @@
22
22
  "url": "https://github.com/comicrelief/component-library.git"
23
23
  },
24
24
  "dependencies": {
25
- "@hookform/resolvers": "^1.3.4",
25
+ "@hookform/resolvers": "^3.9.0",
26
26
  "axios": "^1.7.2",
27
27
  "lazysizes": "^5.3.2",
28
28
  "lodash": "^4.17.11",
@@ -33,7 +33,7 @@
33
33
  "react-canvas-confetti": "^1.4.0",
34
34
  "react-currency-format": "^1.1.0",
35
35
  "react-dom": "^17.0.2",
36
- "react-hook-form": "^6.3.0",
36
+ "react-hook-form": "^7.52.1",
37
37
  "react-modal": "^3.16.1",
38
38
  "react-range-slider-input": "^3.0.7",
39
39
  "react-responsive": "^9.0.2",
package/src/components/Organisms/EmailSignUp/_TextInput.js CHANGED
@@ -12,7 +12,7 @@ const TextInput = ({
12
12
  formContext,
13
13
  ...rest
14
14
  }) => {
15
- const { errors, register } = formContext;
15
+ const { formState: { errors }, register } = formContext;
16
16
 
17
17
  const props = {
18
18
  name: fieldName,
@@ -25,7 +25,7 @@ const TextInput = ({
25
25
  ...rest
26
26
  };
27
27
 
28
- return <Input {...props} ref={register} />;
28
+ return <Input {...props} {...register(fieldName)} />;
29
29
  };
30
30
 
31
31
  TextInput.defaultProps = {
package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap CHANGED
@@ -312,6 +312,8 @@ exports[`renders correctly 1`] = `
312
312
  className="c13"
313
313
  id="first-name"
314
314
  name="firstName"
315
+ onBlur={[Function]}
316
+ onChange={[Function]}
315
317
  placeholder="Enter your first name"
316
318
  required={false}
317
319
  type="text"
@@ -343,6 +345,8 @@ exports[`renders correctly 1`] = `
343
345
  className="c13"
344
346
  id="last-name"
345
347
  name="lastName"
348
+ onBlur={[Function]}
349
+ onChange={[Function]}
346
350
  placeholder="Enter your last name"
347
351
  required={false}
348
352
  type="text"
@@ -375,6 +379,8 @@ exports[`renders correctly 1`] = `
375
379
  className="c13"
376
380
  id="email"
377
381
  name="email"
382
+ onBlur={[Function]}
383
+ onChange={[Function]}
378
384
  placeholder="example@youremail.com"
379
385
  required={false}
380
386
  type="email"
@@ -388,7 +394,7 @@ exports[`renders correctly 1`] = `
388
394
  <button
389
395
  className="c15 c16"
390
396
  data-test="subscribe-button"
391
- disabled={false}
397
+ disabled={true}
392
398
  type="submit"
393
399
  >
394
400
  <span
package/src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js CHANGED
@@ -53,7 +53,7 @@ const CheckAnswer = ({
53
53
  name={name}
54
54
  id={`${name}-yes`}
55
55
  value="yes"
56
- ref={register}
56
+ {...register(name)}
57
57
  onChange={onChange}
58
58
  />
59
59
  <span />
package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js CHANGED
@@ -21,7 +21,7 @@ const MarketingPreferencesDS = ({
21
21
  id,
22
22
  formContext
23
23
  }) => {
24
- const { errors, control } = formContext;
24
+ const { formState: { errors }, control } = formContext;
25
25
 
26
26
  // For brevity
27
27
  const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: null });
package/src/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js CHANGED
@@ -68,14 +68,14 @@ const buildValidationSchema = overrideOptions => {
68
68
  .when('mp_permissionEmail', {
69
69
  is: val => (!(mpValidationOptions.mp_permissionEmail.disableOption)
70
70
  && mpValidationOptions.mp_permissionEmail[val]),
71
- then: yup.string().required('Please enter your email address').email('Please enter a valid email address')
71
+ then: schema => schema.required('Please enter your email address').email('Please enter a valid email address')
72
72
  }),
73
73
 
74
74
  mp_mobile: yup.string()
75
75
  .when('mp_permissionSMS', {
76
76
  is: val => (!(mpValidationOptions.mp_permissionSMS.disableOption)
77
77
  && mpValidationOptions.mp_permissionSMS[val]),
78
- then: yup.string().required('Please enter your mobile number')
78
+ then: schema => schema.required('Please enter your mobile number')
79
79
  .matches(phoneRegex, 'Please enter a valid UK mobile number')
80
80
  }),
81
81
 
@@ -83,7 +83,7 @@ const buildValidationSchema = overrideOptions => {
83
83
  .when('mp_permissionPhone', {
84
84
  is: val => (!(mpValidationOptions.mp_permissionPhone.disableOption)
85
85
  && mpValidationOptions.mp_permissionPhone[val]),
86
- then: yup.string().required('Please enter your phone number')
86
+ then: schema => schema.required('Please enter your phone number')
87
87
  .matches(phoneRegex, 'Please enter a valid UK phone number')
88
88
  }),
89
89
 
@@ -91,7 +91,7 @@ const buildValidationSchema = overrideOptions => {
91
91
  .when('mp_permissionPost', {
92
92
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
93
93
  && mpValidationOptions.mp_permissionPost[val]),
94
- then: yup.string().required('Please enter the first line of your address')
94
+ then: schema => schema.required('Please enter the first line of your address')
95
95
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
96
96
  .max(50, 'Please enter a maximum of 50 characters')
97
97
  }),
@@ -100,7 +100,7 @@ const buildValidationSchema = overrideOptions => {
100
100
  .when('mp_permissionPost', {
101
101
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
102
102
  && mpValidationOptions.mp_permissionPost[val]),
103
- then: yup.string().required('Please enter your town')
103
+ then: schema => schema.required('Please enter your town')
104
104
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
105
105
  .max(50, 'Please enter a maximum of 50 characters')
106
106
  }),
@@ -108,13 +108,13 @@ const buildValidationSchema = overrideOptions => {
108
108
  mp_postcode: yup.string().when('mp_permissionPost', {
109
109
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
110
110
  && mpValidationOptions.mp_permissionPost[val]),
111
- then: yup.string().required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
111
+ then: schema => schema.required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
112
112
  }),
113
113
 
114
114
  mp_country: yup.string().when('mp_permissionPost', {
115
115
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
116
116
  && mpValidationOptions.mp_permissionPost[val]),
117
- then: yup.string().required('Please enter your country')
117
+ then: schema => schema.required('Please enter your country')
118
118
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
119
119
  .max(50, 'Please enter a maximum of 50 characters')
120
120
  }),
package/src/components/Organisms/MarketingPreferencesDS/_TextInput.js CHANGED
@@ -6,7 +6,7 @@ const TextInput = ({
6
6
  fieldName, label,
7
7
  optional, fieldType, formContext, ...rest
8
8
  }) => {
9
- const { errors, register } = formContext;
9
+ const { formState: { errors }, register } = formContext;
10
10
 
11
11
  const props = {
12
12
  name: fieldName,
@@ -20,7 +20,7 @@ const TextInput = ({
20
20
  ...rest
21
21
  };
22
22
 
23
- return <Input {...props} ref={register} />;
23
+ return <Input {...props} {...register(fieldName)} />;
24
24
  };
25
25
 
26
26
  TextInput.defaultProps = {