@comicrelief/component-library 7.48.5 → 8.0.0

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.
@@ -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,
@@ -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
@@ -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,
@@ -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
 
@@ -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.0",
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",
@@ -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 = {
@@ -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
@@ -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 />
@@ -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 });
@@ -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 = {