@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.
- package/dist/components/Organisms/EmailSignUp/_TextInput.js +4 -4
- package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +7 -1
- package/dist/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +4 -4
- package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +3 -1
- package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js +4 -4
- package/package.json +3 -3
- package/src/components/Organisms/EmailSignUp/_TextInput.js +2 -2
- package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +7 -1
- package/src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js +1 -1
- package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +1 -1
- package/src/components/Organisms/MarketingPreferencesDS/_TextInput.js +2 -2
|
@@ -19,7 +19,9 @@ const TextInput = _ref => {
|
|
|
19
19
|
...rest
|
|
20
20
|
} = _ref;
|
|
21
21
|
const {
|
|
22
|
-
|
|
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={
|
|
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
|
-
|
|
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,
|
|
@@ -17,7 +17,9 @@ const TextInput = _ref => {
|
|
|
17
17
|
...rest
|
|
18
18
|
} = _ref;
|
|
19
19
|
const {
|
|
20
|
-
|
|
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": "
|
|
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": "^
|
|
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": "^
|
|
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}
|
|
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={
|
|
397
|
+
disabled={true}
|
|
392
398
|
type="submit"
|
|
393
399
|
>
|
|
394
400
|
<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}
|
|
23
|
+
return <Input {...props} {...register(fieldName)} />;
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
TextInput.defaultProps = {
|