@comicrelief/component-library 8.18.4 → 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 (39) hide show
  1. package/dist/components/Atoms/ErrorText/ErrorText.js +3 -15
  2. package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap +1 -17
  3. package/dist/components/Atoms/Input/Input.js +39 -24
  4. package/dist/components/Atoms/Input/Input.md +1 -2
  5. package/dist/components/Atoms/Input/assets/error-alert-icon-red.svg +10 -0
  6. package/dist/components/Atoms/Input/input.test.js +1 -1
  7. package/dist/components/Atoms/Label/Label.js +16 -10
  8. package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap +2 -2
  9. package/dist/components/Atoms/TextArea/TextArea.test.js +1 -1
  10. package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +160 -84
  11. package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +48 -20
  12. package/dist/components/Molecules/SearchInput/SearchInput.test.js +1 -1
  13. package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +48 -20
  14. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +306 -179
  15. package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +89 -59
  16. package/dist/components/Organisms/Membership/Membership.test.js +2 -2
  17. package/package.json +1 -1
  18. package/src/components/Atoms/ErrorText/ErrorText.js +1 -19
  19. package/src/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap +1 -17
  20. package/src/components/Atoms/Input/Input.js +54 -20
  21. package/src/components/Atoms/Input/Input.md +1 -2
  22. package/src/components/Atoms/Input/assets/error-alert-icon-red.svg +10 -0
  23. package/src/components/Atoms/Input/input.test.js +44 -16
  24. package/src/components/Atoms/Label/Label.js +25 -9
  25. package/src/components/Atoms/Select/__snapshots__/Select.test.js.snap +2 -2
  26. package/src/components/Atoms/TextArea/TextArea.test.js +2 -2
  27. package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +160 -84
  28. package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +48 -20
  29. package/src/components/Molecules/SearchInput/SearchInput.test.js +47 -19
  30. package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +48 -20
  31. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +306 -179
  32. package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +89 -59
  33. package/src/components/Organisms/Membership/Membership.test.js +121 -86
  34. package/dist/components/Atoms/Input/assets/CR_Error--red.svg +0 -1
  35. package/dist/components/Atoms/Input/assets/CR_Error.svg +0 -1
  36. package/dist/components/Atoms/Input/assets/error-alert-icon.png +0 -0
  37. package/src/components/Atoms/Input/assets/CR_Error--red.svg +0 -1
  38. package/src/components/Atoms/Input/assets/CR_Error.svg +0 -1
  39. package/src/components/Atoms/Input/assets/error-alert-icon.png +0 -0
@@ -21,15 +21,6 @@ exports[`renders correctly 1`] = `
21
21
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
22
22
  }
23
23
 
24
- .c10 {
25
- font-size: 1rem;
26
- line-height: 1rem;
27
- text-transform: inherit;
28
- font-weight: bold;
29
- line-height: normal;
30
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
31
- }
32
-
33
24
  .c15 {
34
25
  display: -webkit-inline-box;
35
26
  display: -webkit-inline-flex;
@@ -71,6 +62,7 @@ exports[`renders correctly 1`] = `
71
62
  }
72
63
 
73
64
  .c8 {
65
+ width: 100%;
74
66
  position: relative;
75
67
  display: -webkit-box;
76
68
  display: -webkit-flex;
@@ -80,11 +72,33 @@ exports[`renders correctly 1`] = `
80
72
  -ms-flex-direction: column;
81
73
  flex-direction: column;
82
74
  color: #5C5C5E;
83
- width: 100%;
84
75
  }
85
76
 
86
- .c11 {
77
+ .c10 {
87
78
  margin-bottom: 0.5rem;
79
+ font-weight: normal;
80
+ }
81
+
82
+ .c11 {
83
+ position: relative;
84
+ font-size: 1.25rem;
85
+ }
86
+
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;
88
102
  }
89
103
 
90
104
  .c13 {
@@ -92,7 +106,7 @@ exports[`renders correctly 1`] = `
92
106
  box-sizing: border-box;
93
107
  width: 100%;
94
108
  height: 48px;
95
- padding: 1rem 1.5rem;
109
+ padding: 1rem 2.4rem 1rem 1.5rem;
96
110
  background-color: #F4F3F5;
97
111
  border: 1px solid;
98
112
  border-color: #E1E2E3;
@@ -111,11 +125,6 @@ exports[`renders correctly 1`] = `
111
125
  border: 1px solid #666;
112
126
  }
113
127
 
114
- .c12 {
115
- position: relative;
116
- font-size: 1.25rem;
117
- }
118
-
119
128
  .c5 {
120
129
  text-align: left;
121
130
  }
@@ -225,6 +234,12 @@ exports[`renders correctly 1`] = `
225
234
  }
226
235
  }
227
236
 
237
+ @media (min-width:740px) {
238
+ .c12 {
239
+ max-width: 290px;
240
+ }
241
+ }
242
+
228
243
  @media (min-width:740px) {
229
244
  .c13 {
230
245
  max-width: 290px;
@@ -293,7 +308,7 @@ exports[`renders correctly 1`] = `
293
308
  htmlFor="first-name"
294
309
  >
295
310
  <span
296
- className="c10 c11"
311
+ className="c4 c10"
297
312
  color="inherit"
298
313
  dangerouslySetInnerHTML={
299
314
  Object {
@@ -303,21 +318,26 @@ exports[`renders correctly 1`] = `
303
318
  size="s"
304
319
  />
305
320
  <div
306
- className="c12"
321
+ className="c11"
307
322
  >
308
323
 
309
- <input
310
- aria-describedby="first-name"
311
- aria-required={true}
312
- className="c13"
313
- id="first-name"
314
- name="firstName"
315
- onBlur={[Function]}
316
- onChange={[Function]}
317
- placeholder="Enter your first name"
318
- required={false}
319
- type="text"
320
- />
324
+ <div
325
+ className="c12"
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>
321
341
  </div>
322
342
 
323
343
  </label>
@@ -326,7 +346,7 @@ exports[`renders correctly 1`] = `
326
346
  htmlFor="last-name"
327
347
  >
328
348
  <span
329
- className="c10 c11"
349
+ className="c4 c10"
330
350
  color="inherit"
331
351
  dangerouslySetInnerHTML={
332
352
  Object {
@@ -336,21 +356,26 @@ exports[`renders correctly 1`] = `
336
356
  size="s"
337
357
  />
338
358
  <div
339
- className="c12"
359
+ className="c11"
340
360
  >
341
361
 
342
- <input
343
- aria-describedby="last-name"
344
- aria-required={true}
345
- className="c13"
346
- id="last-name"
347
- name="lastName"
348
- onBlur={[Function]}
349
- onChange={[Function]}
350
- placeholder="Enter your last name"
351
- required={false}
352
- type="text"
353
- />
362
+ <div
363
+ className="c12"
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>
354
379
  </div>
355
380
 
356
381
  </label>
@@ -360,7 +385,7 @@ exports[`renders correctly 1`] = `
360
385
  htmlFor="email"
361
386
  >
362
387
  <span
363
- className="c10 c11"
388
+ className="c4 c10"
364
389
  color="inherit"
365
390
  dangerouslySetInnerHTML={
366
391
  Object {
@@ -370,21 +395,26 @@ exports[`renders correctly 1`] = `
370
395
  size="s"
371
396
  />
372
397
  <div
373
- className="c12"
398
+ className="c11"
374
399
  >
375
400
 
376
- <input
377
- aria-describedby="email"
378
- aria-required={true}
379
- className="c13"
380
- id="email"
381
- name="email"
382
- onBlur={[Function]}
383
- onChange={[Function]}
384
- placeholder="example@youremail.com"
385
- required={false}
386
- type="email"
387
- />
401
+ <div
402
+ className="c12"
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>
388
418
  </div>
389
419
 
390
420
  </label>
@@ -1,12 +1,12 @@
1
- import React from "react";
2
- import "jest-styled-components";
1
+ import React from 'react';
2
+ import 'jest-styled-components';
3
3
 
4
- import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
5
- import Membership from "./Membership";
6
- import { defaultData } from "../../../styleguide/data/data";
7
- import data from "./dev-data/data";
4
+ import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
5
+ import Membership from './Membership';
6
+ import { defaultData } from '../../../styleguide/data/data';
7
+ import data from './dev-data/data';
8
8
 
9
- it("renders correctly", () => {
9
+ it('renders correctly', () => {
10
10
  const tree = renderWithTheme(
11
11
  <Membership
12
12
  alt="Background image"
@@ -48,15 +48,6 @@ it("renders correctly", () => {
48
48
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
49
49
  }
50
50
 
51
- .c16 {
52
- font-size: 1rem;
53
- line-height: 1rem;
54
- text-transform: inherit;
55
- font-weight: bold;
56
- line-height: normal;
57
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
58
- }
59
-
60
51
  .c22 {
61
52
  font-size: 1rem;
62
53
  line-height: 1rem;
@@ -81,6 +72,7 @@ it("renders correctly", () => {
81
72
  }
82
73
 
83
74
  .c14 {
75
+ width: 100%;
84
76
  position: relative;
85
77
  display: -webkit-box;
86
78
  display: -webkit-flex;
@@ -90,11 +82,33 @@ it("renders correctly", () => {
90
82
  -ms-flex-direction: column;
91
83
  flex-direction: column;
92
84
  color: #5C5C5E;
93
- width: 100%;
94
85
  }
95
86
 
96
- .c17 {
87
+ .c16 {
97
88
  margin-bottom: 0.5rem;
89
+ font-weight: normal;
90
+ }
91
+
92
+ .c17 {
93
+ position: relative;
94
+ font-size: 1.25rem;
95
+ }
96
+
97
+ .c18 {
98
+ position: relative;
99
+ width: 100%;
100
+ display: -webkit-box;
101
+ display: -webkit-flex;
102
+ display: -ms-flexbox;
103
+ display: flex;
104
+ -webkit-box-pack: end;
105
+ -webkit-justify-content: flex-end;
106
+ -ms-flex-pack: end;
107
+ justify-content: flex-end;
108
+ -webkit-align-items: center;
109
+ -webkit-box-align: center;
110
+ -ms-flex-align: center;
111
+ align-items: center;
98
112
  }
99
113
 
100
114
  .c19 {
@@ -102,7 +116,7 @@ it("renders correctly", () => {
102
116
  box-sizing: border-box;
103
117
  width: 100%;
104
118
  height: 48px;
105
- padding: 1rem 1.5rem;
119
+ padding: 1rem 2.4rem 1rem 1.5rem;
106
120
  background-color: #F4F3F5;
107
121
  border: 1px solid;
108
122
  border-color: #E1E2E3;
@@ -121,11 +135,6 @@ it("renders correctly", () => {
121
135
  border: 1px solid #666;
122
136
  }
123
137
 
124
- .c18 {
125
- position: relative;
126
- font-size: 1.25rem;
127
- }
128
-
129
138
  .c15 {
130
139
  display: block;
131
140
  }
@@ -330,6 +339,12 @@ it("renders correctly", () => {
330
339
  background-color: #961D35;
331
340
  }
332
341
 
342
+ @media (min-width:740px) {
343
+ .c18 {
344
+ max-width: 290px;
345
+ }
346
+ }
347
+
333
348
  @media (min-width:740px) {
334
349
  .c19 {
335
350
  max-width: 290px;
@@ -461,7 +476,7 @@ it("renders correctly", () => {
461
476
  htmlFor="mship-1--moneyBuy-box1"
462
477
  >
463
478
  <span
464
- className="c16 c17"
479
+ className="c7 c16"
465
480
  color="inherit"
466
481
  dangerouslySetInnerHTML={
467
482
  Object {
@@ -471,21 +486,26 @@ it("renders correctly", () => {
471
486
  size="s"
472
487
  />
473
488
  <div
474
- className="c18"
489
+ className="c17"
475
490
  >
476
491
 
477
- <input
478
- aria-describedby="mship-1--moneyBuy-box1"
479
- aria-label="£5"
480
- className="c19"
481
- id="mship-1--moneyBuy-box1"
482
- name="mship-1--moneyBuy1"
483
- onClick={[Function]}
484
- placeholder=""
485
- required={false}
486
- type="button"
487
- value="£ 5"
488
- />
492
+ <div
493
+ className="c18"
494
+ >
495
+ <input
496
+ aria-describedby="mship-1--moneyBuy-box1"
497
+ aria-label="£5"
498
+ className="c19"
499
+ id="mship-1--moneyBuy-box1"
500
+ name="mship-1--moneyBuy1"
501
+ onClick={[Function]}
502
+ placeholder=""
503
+ required={false}
504
+ type="button"
505
+ value="£ 5"
506
+ />
507
+
508
+ </div>
489
509
  </div>
490
510
 
491
511
  </label>
@@ -494,7 +514,7 @@ it("renders correctly", () => {
494
514
  htmlFor="mship-1--moneyBuy-box2"
495
515
  >
496
516
  <span
497
- className="c16 c17"
517
+ className="c7 c16"
498
518
  color="inherit"
499
519
  dangerouslySetInnerHTML={
500
520
  Object {
@@ -504,21 +524,26 @@ it("renders correctly", () => {
504
524
  size="s"
505
525
  />
506
526
  <div
507
- className="c18"
527
+ className="c17"
508
528
  >
509
529
 
510
- <input
511
- aria-describedby="mship-1--moneyBuy-box2"
512
- aria-label="£10"
513
- className="c19"
514
- id="mship-1--moneyBuy-box2"
515
- name="mship-1--moneyBuy2"
516
- onClick={[Function]}
517
- placeholder=""
518
- required={false}
519
- type="button"
520
- value="£ 10"
521
- />
530
+ <div
531
+ className="c18"
532
+ >
533
+ <input
534
+ aria-describedby="mship-1--moneyBuy-box2"
535
+ aria-label="£10"
536
+ className="c19"
537
+ id="mship-1--moneyBuy-box2"
538
+ name="mship-1--moneyBuy2"
539
+ onClick={[Function]}
540
+ placeholder=""
541
+ required={false}
542
+ type="button"
543
+ value="£ 10"
544
+ />
545
+
546
+ </div>
522
547
  </div>
523
548
 
524
549
  </label>
@@ -527,7 +552,7 @@ it("renders correctly", () => {
527
552
  htmlFor="mship-1--moneyBuy-box3"
528
553
  >
529
554
  <span
530
- className="c16 c17"
555
+ className="c7 c16"
531
556
  color="inherit"
532
557
  dangerouslySetInnerHTML={
533
558
  Object {
@@ -537,21 +562,26 @@ it("renders correctly", () => {
537
562
  size="s"
538
563
  />
539
564
  <div
540
- className="c18"
565
+ className="c17"
541
566
  >
542
567
 
543
- <input
544
- aria-describedby="mship-1--moneyBuy-box3"
545
- aria-label="£20"
546
- className="c19"
547
- id="mship-1--moneyBuy-box3"
548
- name="mship-1--moneyBuy3"
549
- onClick={[Function]}
550
- placeholder=""
551
- required={false}
552
- type="button"
553
- value="£ 20"
554
- />
568
+ <div
569
+ className="c18"
570
+ >
571
+ <input
572
+ aria-describedby="mship-1--moneyBuy-box3"
573
+ aria-label="£20"
574
+ className="c19"
575
+ id="mship-1--moneyBuy-box3"
576
+ name="mship-1--moneyBuy3"
577
+ onClick={[Function]}
578
+ placeholder=""
579
+ required={false}
580
+ type="button"
581
+ value="£ 20"
582
+ />
583
+
584
+ </div>
555
585
  </div>
556
586
 
557
587
  </label>
@@ -571,7 +601,7 @@ it("renders correctly", () => {
571
601
  htmlFor="mship-1--MoneyBuy-userInput"
572
602
  >
573
603
  <span
574
- className="c16 c17"
604
+ className="c7 c16"
575
605
  color="inherit"
576
606
  dangerouslySetInnerHTML={
577
607
  Object {
@@ -581,27 +611,32 @@ it("renders correctly", () => {
581
611
  size="s"
582
612
  />
583
613
  <div
584
- className="c18"
614
+ className="c17"
585
615
  >
586
616
 
587
- <input
588
- aria-describedby="mship-1--MoneyBuy-userInput"
589
- aria-label="Input a different amount"
590
- className="c19"
591
- id="mship-1--MoneyBuy-userInput"
592
- max="25000"
593
- min="1"
594
- name="membership_amount"
595
- onChange={[Function]}
596
- onClick={[Function]}
597
- onKeyPress={[Function]}
598
- pattern="[^[0-9]+([,.][0-9]+)?$]"
599
- placeholder="0.00"
600
- required={false}
601
- step="0.01"
602
- type="number"
603
- value=""
604
- />
617
+ <div
618
+ className="c18"
619
+ >
620
+ <input
621
+ aria-describedby="mship-1--MoneyBuy-userInput"
622
+ aria-label="Input a different amount"
623
+ className="c19"
624
+ id="mship-1--MoneyBuy-userInput"
625
+ max="25000"
626
+ min="1"
627
+ name="membership_amount"
628
+ onChange={[Function]}
629
+ onClick={[Function]}
630
+ onKeyPress={[Function]}
631
+ pattern="[^[0-9]+([,.][0-9]+)?$]"
632
+ placeholder="0.00"
633
+ required={false}
634
+ step="0.01"
635
+ type="number"
636
+ value=""
637
+ />
638
+
639
+ </div>
605
640
  </div>
606
641
 
607
642
  </label>
@@ -1 +0,0 @@
1
- <svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z" fill="#e52630"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><style/><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z"/></svg>
@@ -1 +0,0 @@
1
- <svg version="1.1" id="Content" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style></style><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z" fill="#e52630"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><style/><path d="M24 47c12.683 0 23-10.318 23-23S36.683 1 24 1 1 11.318 1 24s10.317 23 23 23zm0-42c10.477 0 19 8.523 19 19s-8.523 19-19 19S5 34.477 5 24 13.523 5 24 5zm-4 30c0-2.206 1.794-4 4-4s4 1.794 4 4-1.794 4-4 4-4-1.794-4-4zm1-9V12a3 3 0 1 1 6 0v14a3 3 0 1 1-6 0z"/></svg>