@comicrelief/component-library 8.19.0 → 8.19.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 (19) hide show
  1. package/dist/components/Atoms/Input/Input.js +32 -29
  2. package/dist/components/Atoms/Input/input.test.js +1 -1
  3. package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +148 -64
  4. package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +45 -17
  5. package/dist/components/Molecules/SearchInput/SearchInput.test.js +1 -1
  6. package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +45 -17
  7. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +298 -171
  8. package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +92 -54
  9. package/dist/components/Organisms/Membership/Membership.test.js +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Atoms/Input/Input.js +42 -32
  12. package/src/components/Atoms/Input/input.test.js +41 -13
  13. package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +148 -64
  14. package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +45 -17
  15. package/src/components/Molecules/SearchInput/SearchInput.test.js +46 -18
  16. package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +45 -17
  17. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +298 -171
  18. package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +92 -54
  19. package/src/components/Organisms/Membership/Membership.test.js +122 -79
package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap CHANGED
@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
21
21
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
22
22
  }
23
23
 
24
- .c14 {
24
+ .c15 {
25
25
  display: -webkit-inline-box;
26
26
  display: -webkit-inline-flex;
27
27
  display: -ms-inline-flexbox;
@@ -51,12 +51,12 @@ exports[`renders correctly 1`] = `
51
51
  color: #FFFFFF;
52
52
  }
53
53
 
54
- .c14 > a {
54
+ .c15 > a {
55
55
  -webkit-text-decoration: none;
56
56
  text-decoration: none;
57
57
  }
58
58
 
59
- .c14:hover {
59
+ .c15:hover {
60
60
  background-color: #890B11;
61
61
  color: #FFFFFF;
62
62
  }
@@ -79,7 +79,29 @@ exports[`renders correctly 1`] = `
79
79
  font-weight: normal;
80
80
  }
81
81
 
82
+ .c11 {
83
+ position: relative;
84
+ font-size: 1.25rem;
85
+ }
86
+
82
87
  .c12 {
88
+ position: relative;
89
+ width: 100%;
90
+ display: -webkit-box;
91
+ display: -webkit-flex;
92
+ display: -ms-flexbox;
93
+ display: flex;
94
+ -webkit-box-pack: end;
95
+ -webkit-justify-content: flex-end;
96
+ -ms-flex-pack: end;
97
+ justify-content: flex-end;
98
+ -webkit-align-items: center;
99
+ -webkit-box-align: center;
100
+ -ms-flex-align: center;
101
+ align-items: center;
102
+ }
103
+
104
+ .c13 {
83
105
  position: relative;
84
106
  box-sizing: border-box;
85
107
  width: 100%;
@@ -99,20 +121,15 @@ exports[`renders correctly 1`] = `
99
121
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
100
122
  }
101
123
 
102
- .c12:focus {
124
+ .c13:focus {
103
125
  border: 1px solid #666;
104
126
  }
105
127
 
106
- .c11 {
107
- position: relative;
108
- font-size: 1.25rem;
109
- }
110
-
111
128
  .c5 {
112
129
  text-align: left;
113
130
  }
114
131
 
115
- .c15:disabled {
132
+ .c16:disabled {
116
133
  cursor: not-allowed;
117
134
  opacity: 0.75;
118
135
  }
@@ -139,15 +156,15 @@ exports[`renders correctly 1`] = `
139
156
  margin-bottom: 1rem;
140
157
  }
141
158
 
142
- .c13 {
159
+ .c14 {
143
160
  margin-top: 1rem;
144
161
  }
145
162
 
146
- .c13 button {
163
+ .c14 button {
147
164
  background-color: #E52630;
148
165
  }
149
166
 
150
- .c16 {
167
+ .c17 {
151
168
  display: -webkit-box;
152
169
  display: -webkit-flex;
153
170
  display: -ms-flexbox;
@@ -158,12 +175,12 @@ exports[`renders correctly 1`] = `
158
175
  margin-top: 1rem;
159
176
  }
160
177
 
161
- .c16 p {
178
+ .c17 p {
162
179
  font-size: 1rem;
163
180
  line-height: 2rem;
164
181
  }
165
182
 
166
- .c16 p a {
183
+ .c17 p a {
167
184
  font-size: 1rem;
168
185
  color: #FFFFFF;
169
186
  }
@@ -204,13 +221,13 @@ exports[`renders correctly 1`] = `
204
221
  }
205
222
 
206
223
  @media (min-width:740px) {
207
- .c14 {
224
+ .c15 {
208
225
  width: auto;
209
226
  }
210
227
  }
211
228
 
212
229
  @media (min-width:1024px) {
213
- .c14 {
230
+ .c15 {
214
231
  width: auto;
215
232
  padding: 1rem 2rem;
216
233
  margin: 0 auto 2rem;
@@ -218,7 +235,13 @@ exports[`renders correctly 1`] = `
218
235
  }
219
236
 
220
237
  @media (min-width:740px) {
221
- .c11 {
238
+ .c12 {
239
+ max-width: 290px;
240
+ }
241
+ }
242
+
243
+ @media (min-width:740px) {
244
+ .c13 {
222
245
  max-width: 290px;
223
246
  }
224
247
  }
@@ -298,18 +321,23 @@ exports[`renders correctly 1`] = `
298
321
  className="c11"
299
322
  >
300
323
 
301
- <input
302
- aria-describedby="first-name"
303
- aria-required={true}
324
+ <div
304
325
  className="c12"
305
- id="first-name"
306
- name="firstName"
307
- onBlur={[Function]}
308
- onChange={[Function]}
309
- placeholder="Enter your first name"
310
- required={false}
311
- type="text"
312
- />
326
+ >
327
+ <input
328
+ aria-describedby="first-name"
329
+ aria-required={true}
330
+ className="c13"
331
+ id="first-name"
332
+ name="firstName"
333
+ onBlur={[Function]}
334
+ onChange={[Function]}
335
+ placeholder="Enter your first name"
336
+ required={false}
337
+ type="text"
338
+ />
339
+
340
+ </div>
313
341
  </div>
314
342
 
315
343
  </label>
@@ -331,18 +359,23 @@ exports[`renders correctly 1`] = `
331
359
  className="c11"
332
360
  >
333
361
 
334
- <input
335
- aria-describedby="last-name"
336
- aria-required={true}
362
+ <div
337
363
  className="c12"
338
- id="last-name"
339
- name="lastName"
340
- onBlur={[Function]}
341
- onChange={[Function]}
342
- placeholder="Enter your last name"
343
- required={false}
344
- type="text"
345
- />
364
+ >
365
+ <input
366
+ aria-describedby="last-name"
367
+ aria-required={true}
368
+ className="c13"
369
+ id="last-name"
370
+ name="lastName"
371
+ onBlur={[Function]}
372
+ onChange={[Function]}
373
+ placeholder="Enter your last name"
374
+ required={false}
375
+ type="text"
376
+ />
377
+
378
+ </div>
346
379
  </div>
347
380
 
348
381
  </label>
@@ -365,26 +398,31 @@ exports[`renders correctly 1`] = `
365
398
  className="c11"
366
399
  >
367
400
 
368
- <input
369
- aria-describedby="email"
370
- aria-required={true}
401
+ <div
371
402
  className="c12"
372
- id="email"
373
- name="email"
374
- onBlur={[Function]}
375
- onChange={[Function]}
376
- placeholder="example@youremail.com"
377
- required={false}
378
- type="email"
379
- />
403
+ >
404
+ <input
405
+ aria-describedby="email"
406
+ aria-required={true}
407
+ className="c13"
408
+ id="email"
409
+ name="email"
410
+ onBlur={[Function]}
411
+ onChange={[Function]}
412
+ placeholder="example@youremail.com"
413
+ required={false}
414
+ type="email"
415
+ />
416
+
417
+ </div>
380
418
  </div>
381
419
 
382
420
  </label>
383
421
  <div
384
- className="c13"
422
+ className="c14"
385
423
  >
386
424
  <button
387
- className="c14 c15"
425
+ className="c15 c16"
388
426
  data-test="subscribe-button"
389
427
  disabled={true}
390
428
  type="submit"
@@ -403,7 +441,7 @@ exports[`renders correctly 1`] = `
403
441
  </div>
404
442
  </div>
405
443
  <div
406
- className="c16"
444
+ className="c17"
407
445
  >
408
446
  <span
409
447
  className="c4"
package/dist/components/Organisms/Membership/Membership.test.js CHANGED
@@ -22,5 +22,5 @@ it('renders correctly', () => {
22
22
  subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
23
23
  otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
24
24
  })).toJSON();
25
- expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1.5rem;\n line-height: 1.5rem;\n text-transform: inherit;\n font-weight: 800;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c7 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c12 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c21 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: 500;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .c3 {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n }\n\n .c14 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c16 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c18 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c18:focus {\n border: 1px solid #666;\n }\n\n .c17 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c15 {\n display: block;\n }\n\n .c15 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n }\n\n .c19 {\n display: block;\n }\n\n .c19 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n border-color: #E52630;\n background-color: #E52630;\n color: #FFFFFF;\n }\n\n .c0 {\n background-color: #FEE3CC;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 100vh;\n }\n\n .c2 {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: auto;\n }\n\n .c2:before {\n color: #FEE3CC;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: inset 0px 4rem 2rem -2rem;\n }\n\n .c4 {\n position: relative;\n max-width: 320px;\n text-align: center;\n margin-bottom: 50%;\n }\n\n .c5 {\n padding: 2rem 1rem 0;\n margin-bottom: 2rem;\n }\n\n .c8 {\n background-color: #FFFFFF;\n box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n height: 450px;\n }\n\n .c9 {\n padding: 1rem;\n }\n\n .c9 h3 {\n margin-top: 1rem;\n }\n\n .c9 input {\n max-width: 100%;\n margin: 0;\n }\n\n .c10 {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n .c10 > :not(:last-child):not(legend) {\n margin-bottom: 2rem;\n }\n\n .c11 {\n margin: 0;\n padding: 0;\n }\n\n .c13 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -webkit-justify-content: space-between;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n\n .c13 label {\n -webkit-flex: 0 0 30%;\n -ms-flex: 0 0 30%;\n flex: 0 0 30%;\n }\n\n .c13 label input {\n cursor: pointer;\n padding: 1rem;\n }\n\n .c13 label:hover input {\n border-color: #E52630;\n }\n\n .c20 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c22 {\n margin-right: auto;\n }\n\n .c23 {\n position: relative;\n -webkit-flex: 0 0 50%;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n font-weight: 400;\n display: block;\n }\n\n .c23 span {\n position: absolute;\n padding: 0px 15px;\n font-size: 20px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n left: 0px;\n font-weight: 500;\n }\n\n .c23 input {\n border: 2px solid #E1E2E3;\n background: transparent;\n padding: 0.5rem 1rem 0.5rem 2rem;\n }\n\n .c23 input:focus {\n border: 2px solid #E52630;\n }\n\n .c25 {\n line-height: 1.5;\n }\n\n .c24 {\n width: 100%;\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n padding: 1rem 0.5rem;\n background: #E52630;\n border: none;\n border-radius: 100px;\n }\n\n .c24:active,\n .c24:focus,\n .c24:hover {\n background-color: #961D35;\n }\n\n @media (min-width:740px) {\n .c17 {\n max-width: 290px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 {\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: inherit;\n -webkit-justify-content: inherit;\n -ms-flex-pack: inherit;\n justify-content: inherit;\n min-height: 750px;\n height: 100vh;\n max-height: 900px;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n }\n\n @media (min-width:1024px) {\n .c2 {\n height: 100%;\n }\n\n .c2:before {\n content: none;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n margin: 0 8rem;\n max-width: 420px;\n }\n }\n\n @media (min-width:1024px) {\n .c8 {\n height: 430px;\n }\n }\n\n @media (min-width:1024px) {\n .c23 {\n -webkit-flex: 0 0 60%;\n -ms-flex: 0 0 60%;\n flex: 0 0 60%;\n }\n }\n\n @media (min-width:1024px) {\n .c24 {\n width: auto;\n padding: 1rem 2rem;\n margin: 0 auto 2rem;\n }\n }\n\n <div\n className=\"c0\"\n id=\"mship-1\"\n >\n <div\n className=\"c1 c2\"\n height=\"100%\"\n width=\"100%\"\n >\n <img\n alt=\"Background image\"\n className=\"c3 lazyload\"\n data-src={null}\n height=\"100%\"\n width=\"100%\"\n />\n </div>\n <div\n className=\"c4\"\n >\n <div\n className=\"c5\"\n >\n <h2\n className=\"c6\"\n color=\"inherit\"\n size=\"l\"\n >\n Help someone like Jordan see a better tomorrow\n </h2>\n <p\n className=\"c7\"\n color=\"inherit\"\n size=\"s\"\n >\n Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n </p>\n </div>\n <div\n className=\"c8\"\n >\n <form\n className=\"c9\"\n onSubmit={[Function]}\n >\n <fieldset\n className=\"c10\"\n >\n <legend\n className=\"c11\"\n >\n <h3\n className=\"c12\"\n color=\"inherit\"\n size=\"s\"\n >\n Choose your monthly donation\n </h3>\n </legend>\n <div\n className=\"c13\"\n >\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box1\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <input\n aria-describedby=\"mship-1--moneyBuy-box1\"\n aria-label=\"\xA35\"\n className=\"c18\"\n id=\"mship-1--moneyBuy-box1\"\n name=\"mship-1--moneyBuy1\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 5\"\n />\n </div>\n \n </label>\n <label\n className=\"c14 c19\"\n htmlFor=\"mship-1--moneyBuy-box2\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <input\n aria-describedby=\"mship-1--moneyBuy-box2\"\n aria-label=\"\xA310\"\n className=\"c18\"\n id=\"mship-1--moneyBuy-box2\"\n name=\"mship-1--moneyBuy2\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 10\"\n />\n </div>\n \n </label>\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box3\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <input\n aria-describedby=\"mship-1--moneyBuy-box3\"\n aria-label=\"\xA320\"\n className=\"c18\"\n id=\"mship-1--moneyBuy-box3\"\n name=\"mship-1--moneyBuy3\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 20\"\n />\n </div>\n \n </label>\n </div>\n <div\n className=\"c20\"\n >\n <span\n className=\"c21 c22\"\n color=\"inherit\"\n size=\"s\"\n >\n Other amount\n </span>\n <label\n className=\"c14 c23\"\n htmlFor=\"mship-1--MoneyBuy-userInput\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\xA3\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <input\n aria-describedby=\"mship-1--MoneyBuy-userInput\"\n aria-label=\"Input a different amount\"\n className=\"c18\"\n id=\"mship-1--MoneyBuy-userInput\"\n max=\"25000\"\n min=\"1\"\n name=\"membership_amount\"\n onChange={[Function]}\n onClick={[Function]}\n onKeyPress={[Function]}\n pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n placeholder=\"0.00\"\n required={false}\n step=\"0.01\"\n type=\"number\"\n value=\"\"\n />\n </div>\n \n </label>\n </div>\n <input\n className=\"c24\"\n type=\"submit\"\n value=\"Donate\"\n />\n <p\n className=\"c25\"\n />\n </fieldset>\n </form>\n </div>\n </div>\n </div>\n ");
25
+ expect(tree).toMatchInlineSnapshot("\n .c6 {\n font-size: 1.5rem;\n line-height: 1.5rem;\n text-transform: inherit;\n font-weight: 800;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c7 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c12 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c22 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: 500;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c1 {\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .c3 {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n }\n\n .c14 {\n width: 100%;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n color: #5C5C5E;\n }\n\n .c16 {\n margin-bottom: 0.5rem;\n font-weight: normal;\n }\n\n .c17 {\n position: relative;\n font-size: 1.25rem;\n }\n\n .c18 {\n position: relative;\n width: 100%;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c19 {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 1rem 2.4rem 1rem 1.5rem;\n background-color: #F4F3F5;\n border: 1px solid;\n border-color: #E1E2E3;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n color: #000000;\n border-radius: 0.5rem;\n font-size: inherit;\n z-index: 2;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c19:focus {\n border: 1px solid #666;\n }\n\n .c15 {\n display: block;\n }\n\n .c15 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n }\n\n .c20 {\n display: block;\n }\n\n .c20 input {\n border: 2px solid #E1E2E3;\n font-size: 1.5rem;\n font-weight: 800;\n -webkit-letter-spacing: -2px;\n -moz-letter-spacing: -2px;\n -ms-letter-spacing: -2px;\n letter-spacing: -2px;\n height: auto;\n border-color: #E52630;\n background-color: #E52630;\n color: #FFFFFF;\n }\n\n .c0 {\n background-color: #FEE3CC;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 100vh;\n }\n\n .c2 {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: auto;\n }\n\n .c2:before {\n color: #FEE3CC;\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: inset 0px 4rem 2rem -2rem;\n }\n\n .c4 {\n position: relative;\n max-width: 320px;\n text-align: center;\n margin-bottom: 50%;\n }\n\n .c5 {\n padding: 2rem 1rem 0;\n margin-bottom: 2rem;\n }\n\n .c8 {\n background-color: #FFFFFF;\n box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n height: 450px;\n }\n\n .c9 {\n padding: 1rem;\n }\n\n .c9 h3 {\n margin-top: 1rem;\n }\n\n .c9 input {\n max-width: 100%;\n margin: 0;\n }\n\n .c10 {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n .c10 > :not(:last-child):not(legend) {\n margin-bottom: 2rem;\n }\n\n .c11 {\n margin: 0;\n padding: 0;\n }\n\n .c13 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -webkit-justify-content: space-between;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n\n .c13 label {\n -webkit-flex: 0 0 30%;\n -ms-flex: 0 0 30%;\n flex: 0 0 30%;\n }\n\n .c13 label input {\n cursor: pointer;\n padding: 1rem;\n }\n\n .c13 label:hover input {\n border-color: #E52630;\n }\n\n .c21 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .c23 {\n margin-right: auto;\n }\n\n .c24 {\n position: relative;\n -webkit-flex: 0 0 50%;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n font-weight: 400;\n display: block;\n }\n\n .c24 span {\n position: absolute;\n padding: 0px 15px;\n font-size: 20px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n left: 0px;\n font-weight: 500;\n }\n\n .c24 input {\n border: 2px solid #E1E2E3;\n background: transparent;\n padding: 0.5rem 1rem 0.5rem 2rem;\n }\n\n .c24 input:focus {\n border: 2px solid #E52630;\n }\n\n .c26 {\n line-height: 1.5;\n }\n\n .c25 {\n width: 100%;\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n padding: 1rem 0.5rem;\n background: #E52630;\n border: none;\n border-radius: 100px;\n }\n\n .c25:active,\n .c25:focus,\n .c25:hover {\n background-color: #961D35;\n }\n\n @media (min-width:740px) {\n .c18 {\n max-width: 290px;\n }\n }\n\n @media (min-width:740px) {\n .c19 {\n max-width: 290px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 {\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: inherit;\n -webkit-justify-content: inherit;\n -ms-flex-pack: inherit;\n justify-content: inherit;\n min-height: 750px;\n height: 100vh;\n max-height: 900px;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n }\n\n @media (min-width:1024px) {\n .c2 {\n height: 100%;\n }\n\n .c2:before {\n content: none;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n margin: 0 8rem;\n max-width: 420px;\n }\n }\n\n @media (min-width:1024px) {\n .c8 {\n height: 430px;\n }\n }\n\n @media (min-width:1024px) {\n .c24 {\n -webkit-flex: 0 0 60%;\n -ms-flex: 0 0 60%;\n flex: 0 0 60%;\n }\n }\n\n @media (min-width:1024px) {\n .c25 {\n width: auto;\n padding: 1rem 2rem;\n margin: 0 auto 2rem;\n }\n }\n\n <div\n className=\"c0\"\n id=\"mship-1\"\n >\n <div\n className=\"c1 c2\"\n height=\"100%\"\n width=\"100%\"\n >\n <img\n alt=\"Background image\"\n className=\"c3 lazyload\"\n data-src={null}\n height=\"100%\"\n width=\"100%\"\n />\n </div>\n <div\n className=\"c4\"\n >\n <div\n className=\"c5\"\n >\n <h2\n className=\"c6\"\n color=\"inherit\"\n size=\"l\"\n >\n Help someone like Jordan see a better tomorrow\n </h2>\n <p\n className=\"c7\"\n color=\"inherit\"\n size=\"s\"\n >\n Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n </p>\n </div>\n <div\n className=\"c8\"\n >\n <form\n className=\"c9\"\n onSubmit={[Function]}\n >\n <fieldset\n className=\"c10\"\n >\n <legend\n className=\"c11\"\n >\n <h3\n className=\"c12\"\n color=\"inherit\"\n size=\"s\"\n >\n Choose your monthly donation\n </h3>\n </legend>\n <div\n className=\"c13\"\n >\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box1\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box1\"\n aria-label=\"\xA35\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box1\"\n name=\"mship-1--moneyBuy1\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 5\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c20\"\n htmlFor=\"mship-1--moneyBuy-box2\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box2\"\n aria-label=\"\xA310\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box2\"\n name=\"mship-1--moneyBuy2\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 10\"\n />\n \n </div>\n </div>\n \n </label>\n <label\n className=\"c14 c15\"\n htmlFor=\"mship-1--moneyBuy-box3\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--moneyBuy-box3\"\n aria-label=\"\xA320\"\n className=\"c19\"\n id=\"mship-1--moneyBuy-box3\"\n name=\"mship-1--moneyBuy3\"\n onClick={[Function]}\n placeholder=\"\"\n required={false}\n type=\"button\"\n value=\"\xA3 20\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <div\n className=\"c21\"\n >\n <span\n className=\"c22 c23\"\n color=\"inherit\"\n size=\"s\"\n >\n Other amount\n </span>\n <label\n className=\"c14 c24\"\n htmlFor=\"mship-1--MoneyBuy-userInput\"\n >\n <span\n className=\"c7 c16\"\n color=\"inherit\"\n dangerouslySetInnerHTML={\n Object {\n \"__html\": \"\xA3\",\n }\n }\n size=\"s\"\n />\n <div\n className=\"c17\"\n >\n \n <div\n className=\"c18\"\n >\n <input\n aria-describedby=\"mship-1--MoneyBuy-userInput\"\n aria-label=\"Input a different amount\"\n className=\"c19\"\n id=\"mship-1--MoneyBuy-userInput\"\n max=\"25000\"\n min=\"1\"\n name=\"membership_amount\"\n onChange={[Function]}\n onClick={[Function]}\n onKeyPress={[Function]}\n pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n placeholder=\"0.00\"\n required={false}\n step=\"0.01\"\n type=\"number\"\n value=\"\"\n />\n \n </div>\n </div>\n \n </label>\n </div>\n <input\n className=\"c25\"\n type=\"submit\"\n value=\"Donate\"\n />\n <p\n className=\"c26\"\n />\n </fieldset>\n </form>\n </div>\n </div>\n </div>\n ");
26
26
  });
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": "8.19.0",
4
+ "version": "8.19.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Input/Input.js CHANGED
@@ -11,6 +11,23 @@ import zIndex from '../../../theme/shared/zIndex';
11
11
  // the element with JS)
12
12
  const getPrefixWidth = prefixLength => `calc(1.5rem + (${prefixLength} * 0.5rem))`;
13
13
 
14
+ const InputWrapper = styled.div`
15
+ position: relative;
16
+ font-size: ${({ theme }) => theme.fontSize('m')};
17
+ `;
18
+
19
+ const InputFieldContainer = styled.div`
20
+ position: relative;
21
+ width: 100%;
22
+ display: flex;
23
+ justify-content: flex-end;
24
+ align-items: center;
25
+
26
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
27
+ max-width: 290px;
28
+ }
29
+ `;
30
+
14
31
  const InputField = styled.input`${({ theme, error, prefixLength }) => css`
15
32
  position: relative;
16
33
  box-sizing: border-box;
@@ -32,30 +49,20 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
32
49
  :focus {
33
50
  border: 1px solid ${theme.color('grey_for_forms')};
34
51
  }
35
- `}`;
36
-
37
- const InputWrapper = styled.div`
38
- position: relative;
39
- font-size: ${({ theme }) => theme.fontSize('m')};
40
-
41
- ${({ error }) => error && css`
42
- &::after {
43
- content: '';
44
- position: absolute;
45
- top: 50%;
46
- right: 0.5rem;
47
- transform: translateY(-50%);
48
- background: url(${alertIcon}) center/contain no-repeat;
49
- --iconSize: 19px;
50
- width: var(--iconSize);
51
- height: var(--iconSize);
52
- z-index: 3;
53
- }
54
- `}
55
52
 
56
- @media ${({ theme }) => theme.allBreakpoints('M')} {
53
+ @media ${theme.allBreakpoints('M')} {
57
54
  max-width: 290px;
58
55
  }
56
+ `}`;
57
+
58
+ const ErrorIconWrapper = styled.div`
59
+ position: absolute;
60
+ right: 0.6rem;
61
+ background: url(${alertIcon}) center/contain no-repeat;
62
+ --iconSize: 19px;
63
+ width: var(--iconSize);
64
+ height: var(--iconSize);
65
+ z-index: 3;
59
66
  `;
60
67
 
61
68
  const Prefix = styled.div`
@@ -103,17 +110,20 @@ const Input = React.forwardRef(
103
110
  >
104
111
  <InputWrapper error={Boolean(errorMsg)}>
105
112
  {prefix && <Prefix length={prefix.length}>{prefix}</Prefix>}
106
- <InputField
107
- id={id}
108
- type={type}
109
- placeholder={placeholder}
110
- error={!!errorMsg}
111
- aria-describedby={hasAria ? id : undefined}
112
- ref={ref}
113
- prefixLength={prefix.length}
114
- required={optional === false}
115
- {...rest}
116
- />
113
+ <InputFieldContainer>
114
+ <InputField
115
+ id={id}
116
+ type={type}
117
+ placeholder={placeholder}
118
+ error={Boolean(errorMsg)}
119
+ aria-describedby={hasAria ? id : undefined}
120
+ ref={ref}
121
+ prefixLength={prefix.length}
122
+ required={optional === false}
123
+ {...rest}
124
+ />
125
+ {errorMsg && <ErrorIconWrapper />}
126
+ </InputFieldContainer>
117
127
  </InputWrapper>
118
128
  {errorMsg
119
129
  && (
package/src/components/Atoms/Input/input.test.js CHANGED
@@ -42,7 +42,29 @@ it('renders correctly', () => {
42
42
  font-weight: normal;
43
43
  }
44
44
 
45
+ .c3 {
46
+ position: relative;
47
+ font-size: 1.25rem;
48
+ }
49
+
45
50
  .c4 {
51
+ position: relative;
52
+ width: 100%;
53
+ display: -webkit-box;
54
+ display: -webkit-flex;
55
+ display: -ms-flexbox;
56
+ display: flex;
57
+ -webkit-box-pack: end;
58
+ -webkit-justify-content: flex-end;
59
+ -ms-flex-pack: end;
60
+ justify-content: flex-end;
61
+ -webkit-align-items: center;
62
+ -webkit-box-align: center;
63
+ -ms-flex-align: center;
64
+ align-items: center;
65
+ }
66
+
67
+ .c5 {
46
68
  position: relative;
47
69
  box-sizing: border-box;
48
70
  width: 100%;
@@ -62,17 +84,18 @@ it('renders correctly', () => {
62
84
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
63
85
  }
64
86
 
65
- .c4:focus {
87
+ .c5:focus {
66
88
  border: 1px solid #666;
67
89
  }
68
90
 
69
- .c3 {
70
- position: relative;
71
- font-size: 1.25rem;
91
+ @media (min-width:740px) {
92
+ .c4 {
93
+ max-width: 290px;
94
+ }
72
95
  }
73
96
 
74
97
  @media (min-width:740px) {
75
- .c3 {
98
+ .c5 {
76
99
  max-width: 290px;
77
100
  }
78
101
  }
@@ -95,15 +118,20 @@ it('renders correctly', () => {
95
118
  className="c3"
96
119
  >
97
120
 
98
- <input
99
- aria-describedby="Accessibility info go here"
121
+ <div
100
122
  className="c4"
101
- id="Accessibility info go here"
102
- name="fullname"
103
- placeholder="This is the hint text"
104
- required={false}
105
- type="text"
106
- />
123
+ >
124
+ <input
125
+ aria-describedby="Accessibility info go here"
126
+ className="c5"
127
+ id="Accessibility info go here"
128
+ name="fullname"
129
+ placeholder="This is the hint text"
130
+ required={false}
131
+ type="text"
132
+ />
133
+
134
+ </div>
107
135
  </div>
108
136
 
109
137
  </label>