@financial-times/n-conversion-forms 41.2.0 → 41.3.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.
Files changed (6) hide show
  1. package/.toolkitstate/ci.json +3 -3
  2. package/components/__snapshots__/year-of-birth.spec.js.snap +18 -6
  3. package/components/year-of-birth.jsx +3 -1
  4. package/dist/year-of-birth.jsx +4 -2
  5. package/package.json +1 -1
  6. package/utils/year-of-birth.js +9 -0
package/.toolkitstate/ci.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "branch": "",
3
3
  "repo": "n-conversion-forms",
4
- "version": "4ddf21c1d1a8f7e1c6ea79d0628dc66321d77c3a",
5
- "tag": "v41.2.0",
6
- "buildNumber": "15786"
4
+ "version": "9c75b3a5f551e0167f7df699432065e34f3e3ed9",
5
+ "tag": "v41.3.0",
6
+ "buildNumber": "15871"
7
7
  }
package/components/__snapshots__/year-of-birth.spec.js.snap CHANGED
@@ -14,16 +14,18 @@ exports[`YearOfBirth render a year of birth input with default value 1`] = `
14
14
  </span>
15
15
  </span>
16
16
  <span class="o-forms-input o-forms-input--text">
17
- <input type="number"
17
+ <input type="text"
18
18
  id="yearOfBirth"
19
19
  name="yearOfBirth"
20
20
  placeholder="YYYY"
21
21
  autocomplete="bday-year"
22
22
  minlength="4"
23
23
  maxlength="4"
24
+ pattern="\\d{4}"
24
25
  data-trackable="year-of-birth"
25
26
  aria-required="true"
26
27
  required
28
+ inputmode="numeric"
27
29
  value="2001"
28
30
  >
29
31
  <span class="o-forms-input__error">
@@ -47,17 +49,19 @@ exports[`YearOfBirth render a year of birth input with disabled field 1`] = `
47
49
  </span>
48
50
  </span>
49
51
  <span class="o-forms-input o-forms-input--text">
50
- <input type="number"
52
+ <input type="text"
51
53
  id="yearOfBirth"
52
54
  name="yearOfBirth"
53
55
  placeholder="YYYY"
54
56
  autocomplete="bday-year"
55
57
  minlength="4"
56
58
  maxlength="4"
59
+ pattern="\\d{4}"
57
60
  data-trackable="year-of-birth"
58
61
  aria-required="true"
59
62
  required
60
63
  disabled
64
+ inputmode="numeric"
61
65
  value="2001"
62
66
  >
63
67
  <span class="o-forms-input__error">
@@ -82,16 +86,18 @@ exports[`YearOfBirth renders a year of birth input with custom prompt 1`] = `
82
86
  </span>
83
87
  </span>
84
88
  <span class="o-forms-input o-forms-input--text">
85
- <input type="number"
89
+ <input type="text"
86
90
  id="yearOfBirth"
87
91
  name="yearOfBirth"
88
92
  placeholder="YYYY"
89
93
  autocomplete="bday-year"
90
94
  minlength="4"
91
95
  maxlength="4"
96
+ pattern="\\d{4}"
92
97
  data-trackable="year-of-birth"
93
98
  aria-required="true"
94
99
  required
100
+ inputmode="numeric"
95
101
  value
96
102
  >
97
103
  <span class="o-forms-input__error">
@@ -115,16 +121,18 @@ exports[`YearOfBirth renders a year of birth input with default error message 1`
115
121
  </span>
116
122
  </span>
117
123
  <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
118
- <input type="number"
124
+ <input type="text"
119
125
  id="yearOfBirth"
120
126
  name="yearOfBirth"
121
127
  placeholder="YYYY"
122
128
  autocomplete="bday-year"
123
129
  minlength="4"
124
130
  maxlength="4"
131
+ pattern="\\d{4}"
125
132
  data-trackable="year-of-birth"
126
133
  aria-required="true"
127
134
  required
135
+ inputmode="numeric"
128
136
  value
129
137
  >
130
138
  <span class="o-forms-input__error">
@@ -148,16 +156,18 @@ exports[`YearOfBirth renders a year of birth input with default params 1`] = `
148
156
  </span>
149
157
  </span>
150
158
  <span class="o-forms-input o-forms-input--text">
151
- <input type="number"
159
+ <input type="text"
152
160
  id="yearOfBirth"
153
161
  name="yearOfBirth"
154
162
  placeholder="YYYY"
155
163
  autocomplete="bday-year"
156
164
  minlength="4"
157
165
  maxlength="4"
166
+ pattern="\\d{4}"
158
167
  data-trackable="year-of-birth"
159
168
  aria-required="true"
160
169
  required
170
+ inputmode="numeric"
161
171
  value
162
172
  >
163
173
  <span class="o-forms-input__error">
@@ -181,15 +191,17 @@ exports[`YearOfBirth renders an optional year of birth input 1`] = `
181
191
  </span>
182
192
  </span>
183
193
  <span class="o-forms-input o-forms-input--text">
184
- <input type="number"
194
+ <input type="text"
185
195
  id="yearOfBirth"
186
196
  name="yearOfBirth"
187
197
  placeholder="YYYY"
188
198
  autocomplete="bday-year"
189
199
  minlength="4"
190
200
  maxlength="4"
201
+ pattern="\\d{4}"
191
202
  data-trackable="year-of-birth"
192
203
  aria-required="false"
204
+ inputmode="numeric"
193
205
  value
194
206
  >
195
207
  <span class="o-forms-input__error">
package/components/year-of-birth.jsx CHANGED
@@ -39,18 +39,20 @@ export function YearOfBirth({
39
39
  </span>
40
40
  <span className={inputWrapperClassNames}>
41
41
  <input
42
- type="number"
42
+ type="text"
43
43
  id={inputId}
44
44
  name={inputName}
45
45
  placeholder="YYYY"
46
46
  autoComplete="bday-year"
47
47
  minLength="4"
48
48
  maxLength="4"
49
+ pattern="\d{4}"
49
50
  data-trackable={dataTrackable}
50
51
  aria-required={isRequired}
51
52
  required={isRequired}
52
53
  disabled={isDisabled}
53
54
  defaultValue={value}
55
+ inputmode="numeric"
54
56
  />
55
57
  <span className="o-forms-input__error">
56
58
  {customErrorMessage || 'Please enter a valid year of birth'}
package/dist/year-of-birth.jsx CHANGED
@@ -51,18 +51,20 @@ function YearOfBirth(_ref) {
51
51
  }, prompt)), /*#__PURE__*/_react["default"].createElement("span", {
52
52
  className: inputWrapperClassNames
53
53
  }, /*#__PURE__*/_react["default"].createElement("input", {
54
- type: "number",
54
+ type: "text",
55
55
  id: inputId,
56
56
  name: inputName,
57
57
  placeholder: "YYYY",
58
58
  autoComplete: "bday-year",
59
59
  minLength: "4",
60
60
  maxLength: "4",
61
+ pattern: "\\d{4}",
61
62
  "data-trackable": dataTrackable,
62
63
  "aria-required": isRequired,
63
64
  required: isRequired,
64
65
  disabled: isDisabled,
65
- defaultValue: value
66
+ defaultValue: value,
67
+ inputmode: "numeric"
66
68
  }), /*#__PURE__*/_react["default"].createElement("span", {
67
69
  className: "o-forms-input__error"
68
70
  }, customErrorMessage || 'Please enter a valid year of birth')));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "41.2.0",
3
+ "version": "41.3.0",
4
4
  "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
5
5
  "main": "./dist/index.js",
6
6
  "scripts": {
package/utils/year-of-birth.js CHANGED
@@ -10,6 +10,8 @@ class YearOfBirth {
10
10
  if (!this.$yearOfBirth) {
11
11
  throw new Error('Please include the year of birth partial on the page');
12
12
  }
13
+
14
+ this.preventNonNumericInput();
13
15
  }
14
16
 
15
17
  handleYearOfBirthBlur(callback = () => {}) {
@@ -19,6 +21,13 @@ class YearOfBirth {
19
21
  getYearOfBirth() {
20
22
  return this.$yearOfBirth.value;
21
23
  }
24
+
25
+ preventNonNumericInput() {
26
+ this.$yearOfBirth.addEventListener('input', (event) => {
27
+ event.preventDefault();
28
+ this.$yearOfBirth.value = this.$yearOfBirth.value.replace(/\D/g, '');
29
+ });
30
+ }
22
31
  }
23
32
 
24
33
  module.exports = YearOfBirth;