@comicrelief/component-library 8.19.0 → 8.20.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 (22) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Atoms/Input/Input.js +42 -30
  3. package/dist/components/Atoms/Input/Input.md +14 -0
  4. package/dist/components/Atoms/Input/input.test.js +13 -1
  5. package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +145 -73
  6. package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +44 -20
  7. package/dist/components/Molecules/SearchInput/SearchInput.test.js +1 -1
  8. package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +44 -20
  9. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +290 -179
  10. package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +90 -56
  11. package/dist/components/Organisms/Membership/Membership.test.js +1 -1
  12. package/package.json +1 -1
  13. package/src/components/Atoms/Input/Input.js +51 -34
  14. package/src/components/Atoms/Input/Input.md +14 -0
  15. package/src/components/Atoms/Input/input.test.js +173 -13
  16. package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +145 -73
  17. package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +44 -20
  18. package/src/components/Molecules/SearchInput/SearchInput.test.js +44 -20
  19. package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +44 -20
  20. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +290 -179
  21. package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +90 -56
  22. package/src/components/Organisms/Membership/Membership.test.js +120 -81
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,9 +235,11 @@ exports[`renders correctly 1`] = `
218
235
  }
219
236
 
220
237
  @media (min-width:740px) {
221
- .c11 {
222
- max-width: 290px;
223
- }
238
+
239
+ }
240
+
241
+ @media (min-width:1024px) {
242
+
224
243
  }
225
244
 
226
245
  @media (min-width:1024px) {
@@ -298,18 +317,23 @@ exports[`renders correctly 1`] = `
298
317
  className="c11"
299
318
  >
300
319
 
301
- <input
302
- aria-describedby="first-name"
303
- aria-required={true}
320
+ <div
304
321
  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
- />
322
+ >
323
+ <input
324
+ aria-describedby="first-name"
325
+ aria-required={true}
326
+ className="c13"
327
+ id="first-name"
328
+ name="firstName"
329
+ onBlur={[Function]}
330
+ onChange={[Function]}
331
+ placeholder="Enter your first name"
332
+ required={false}
333
+ type="text"
334
+ />
335
+
336
+ </div>
313
337
  </div>
314
338
 
315
339
  </label>
@@ -331,18 +355,23 @@ exports[`renders correctly 1`] = `
331
355
  className="c11"
332
356
  >
333
357
 
334
- <input
335
- aria-describedby="last-name"
336
- aria-required={true}
358
+ <div
337
359
  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
- />
360
+ >
361
+ <input
362
+ aria-describedby="last-name"
363
+ aria-required={true}
364
+ className="c13"
365
+ id="last-name"
366
+ name="lastName"
367
+ onBlur={[Function]}
368
+ onChange={[Function]}
369
+ placeholder="Enter your last name"
370
+ required={false}
371
+ type="text"
372
+ />
373
+
374
+ </div>
346
375
  </div>
347
376
 
348
377
  </label>
@@ -365,26 +394,31 @@ exports[`renders correctly 1`] = `
365
394
  className="c11"
366
395
  >
367
396
 
368
- <input
369
- aria-describedby="email"
370
- aria-required={true}
397
+ <div
371
398
  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
- />
399
+ >
400
+ <input
401
+ aria-describedby="email"
402
+ aria-required={true}
403
+ className="c13"
404
+ id="email"
405
+ name="email"
406
+ onBlur={[Function]}
407
+ onChange={[Function]}
408
+ placeholder="example@youremail.com"
409
+ required={false}
410
+ type="email"
411
+ />
412
+
413
+ </div>
380
414
  </div>
381
415
 
382
416
  </label>
383
417
  <div
384
- className="c13"
418
+ className="c14"
385
419
  >
386
420
  <button
387
- className="c14 c15"
421
+ className="c15 c16"
388
422
  data-test="subscribe-button"
389
423
  disabled={true}
390
424
  type="submit"
@@ -403,7 +437,7 @@ exports[`renders correctly 1`] = `
403
437
  </div>
404
438
  </div>
405
439
  <div
406
- className="c16"
440
+ className="c17"
407
441
  >
408
442
  <span
409
443
  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\n }\n\n @media (min-width:1024px) {\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.20.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Input/Input.js CHANGED
@@ -11,6 +11,27 @@ 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
+ ${({ maxPxWidthMediumBreakpoint, maxPxWidthLargeBreakpoint, theme }) => css`
26
+ @media ${theme.allBreakpoints('M')} {
27
+ ${maxPxWidthMediumBreakpoint && `max-width: ${maxPxWidthMediumBreakpoint}px;`}
28
+ }
29
+ @media ${theme.allBreakpoints('L')} {
30
+ ${maxPxWidthLargeBreakpoint && `max-width: ${maxPxWidthLargeBreakpoint}px;`}
31
+ }
32
+ `}
33
+ `;
34
+
14
35
  const InputField = styled.input`${({ theme, error, prefixLength }) => css`
15
36
  position: relative;
16
37
  box-sizing: border-box;
@@ -34,28 +55,14 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
34
55
  }
35
56
  `}`;
36
57
 
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
-
56
- @media ${({ theme }) => theme.allBreakpoints('M')} {
57
- max-width: 290px;
58
- }
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`
@@ -88,6 +95,8 @@ const Input = React.forwardRef(
88
95
  labelProps = {},
89
96
  prefix = '',
90
97
  optional = null,
98
+ maxPxWidthMediumBreakpoint,
99
+ maxPxWidthLargeBreakpoint,
91
100
  ...rest
92
101
  },
93
102
  ref
@@ -103,17 +112,23 @@ const Input = React.forwardRef(
103
112
  >
104
113
  <InputWrapper error={Boolean(errorMsg)}>
105
114
  {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
- />
115
+ <InputFieldContainer
116
+ maxPxWidthMediumBreakpoint={maxPxWidthMediumBreakpoint}
117
+ maxPxWidthLargeBreakpoint={maxPxWidthLargeBreakpoint}
118
+ >
119
+ <InputField
120
+ id={id}
121
+ type={type}
122
+ placeholder={placeholder}
123
+ error={Boolean(errorMsg)}
124
+ aria-describedby={hasAria ? id : undefined}
125
+ ref={ref}
126
+ prefixLength={prefix.length}
127
+ required={optional === false}
128
+ {...rest}
129
+ />
130
+ {errorMsg && <ErrorIconWrapper />}
131
+ </InputFieldContainer>
117
132
  </InputWrapper>
118
133
  {errorMsg
119
134
  && (
@@ -150,7 +165,9 @@ Input.propTypes = {
150
165
  // (as `rest` is not spread on the outermost component)
151
166
  className: PropTypes.string,
152
167
  prefix: PropTypes.string,
153
- optional: PropTypes.bool
168
+ optional: PropTypes.bool,
169
+ maxPxWidthMediumBreakpoint: PropTypes.number,
170
+ maxPxWidthLargeBreakpoint: PropTypes.number
154
171
  };
155
172
 
156
173
  export default Input;
package/src/components/Atoms/Input/Input.md CHANGED
@@ -105,3 +105,17 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
105
105
  }
106
106
  }}
107
107
  />
108
+ ```
109
+
110
+ ```js
111
+ <h4>Input with responsive max width</h4>
112
+ <Input
113
+ name="responsive-width"
114
+ placeholder="I'm responsive"
115
+ type="text"
116
+ label="Responsive Width Input at M and L breakpoints"
117
+ id="input-example-7"
118
+ maxPxWidthMediumBreakpoint={150}
119
+ maxPxWidthLargeBreakpoint={250}
120
+ />
121
+ ```