@comicrelief/component-library 6.1.5 → 6.2.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 (8) hide show
  1. package/cypress/integration/components/Organisms/Donate.spec.js +247 -247
  2. package/dist/components/Organisms/Donate/Form/Form.js +5 -5
  3. package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js +6 -6
  4. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +19 -19
  5. package/package.json +1 -1
  6. package/src/components/Organisms/Donate/Form/Form.js +7 -7
  7. package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js +6 -6
  8. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +19 -19
package/cypress/integration/components/Organisms/Donate.spec.js CHANGED
@@ -1,283 +1,283 @@
1
1
  describe('Donate component', () => {
2
- before(() => {
3
- // go to donate component
4
- cy.visit('/#donate');
5
- });
2
+ before(() => {
3
+ // go to donate component
4
+ cy.visit('/#donate');
5
+ });
6
6
 
7
- describe('props and methods section', () => {
8
- beforeEach(() => {
9
- cy.get('[data-testid="Donate-container"] button[name="rsg-usage"]')
10
- .contains('Props & methods')
11
- .as('propsBtn');
7
+ describe('props and methods section', () => {
8
+ beforeEach(() => {
9
+ cy.get('[data-testid="Donate-container"] button[name="rsg-usage"]')
10
+ .contains('Props & methods')
11
+ .as('propsBtn');
12
12
 
13
- cy.get('@propsBtn')
14
- .closest('[class^=rsg--tabs]')
15
- .as('container');
16
- });
13
+ cy.get('@propsBtn')
14
+ .closest('[class^=rsg--tabs]')
15
+ .as('container');
16
+ });
17
17
 
18
- it('is present', () => {
19
- cy.get('@propsBtn').should('exist');
20
- });
18
+ it('is present', () => {
19
+ cy.get('@propsBtn').should('exist');
20
+ });
21
21
 
22
- it('does not show table initially', () => {
23
- cy.get('@container')
24
- .find('table')
25
- .should('not.exist');
26
- });
22
+ it('does not show table initially', () => {
23
+ cy.get('@container')
24
+ .find('table')
25
+ .should('not.exist');
26
+ });
27
27
 
28
- it('shows the table on button click', () => {
29
- cy.get('@propsBtn').click();
30
- cy.get('@container')
31
- .find('table')
32
- .should('contain', 'Prop name');
33
- });
28
+ it('shows the table on button click', () => {
29
+ cy.get('@propsBtn').click();
30
+ cy.get('@container')
31
+ .find('table')
32
+ .should('contain', 'Prop name');
34
33
  });
34
+ });
35
35
 
36
- describe('Donate Form align right section', () => {
37
- beforeEach(() => {
38
- cy.get('[data-testid="Donate-example-1"]')
39
- .as('container')
40
- .find('[data-preview="Donate"]')
41
- .as('preview');
36
+ describe('Donate Form align right section', () => {
37
+ beforeEach(() => {
38
+ cy.get('[data-testid="Donate-example-1"]')
39
+ .as('container')
40
+ .find('[data-preview="Donate"]')
41
+ .as('preview');
42
42
 
43
- cy.get('@container')
44
- .find('button')
45
- .contains('View Code')
46
- .as('viewCodeBtn');
47
- });
43
+ cy.get('@container')
44
+ .find('button')
45
+ .contains('View Code')
46
+ .as('viewCodeBtn');
47
+ });
48
48
 
49
- it('renders donate form align right preview', () => {
50
- //monthly
51
- cy.get('@container')
52
- .find('label[for="give-once"]')
53
- .contains('Give once');
54
- cy.get('@container')
55
- .find('label[for="give-monthly"]')
56
- .contains('Give monthly')
57
- .click();
58
- cy.get('@container')
59
- .find('#mship-1--moneyBuy-box2')
60
- .should('exist')
61
- .click();
62
- cy.get('@container')
63
- .find('[id="mship-1--MoneyBuy-userInput"]')
64
- .should('have.value','10')
65
- .clear()
66
- .type('15.99')
67
- .clear()
68
- .type(' ');
69
- cy.get('@container')
70
- .find('p:nth-child(5)')
71
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
72
- cy.get('@container')
73
- .find('[id="mship-1--MoneyBuy-userInput"]')
74
- .type('15.999');
75
- cy.get('@container')
76
- .find('p:nth-child(5)')
77
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
78
- cy.get('@container')
79
- .find('form > fieldset > input')
80
- .contains('Donate monthly');
81
- cy.get('@container')
82
- .find('h2')
83
- .should('exist');
84
- });
49
+ it('renders donate form align right preview', () => {
50
+ // monthly
51
+ cy.get('@container')
52
+ .find('label[for="give-once"]')
53
+ .contains('Single');
54
+ cy.get('@container')
55
+ .find('label[for="give-monthly"]')
56
+ .contains('Monthly')
57
+ .click();
58
+ cy.get('@container')
59
+ .find('#mship-1--moneyBuy-box2')
60
+ .should('exist')
61
+ .click();
62
+ cy.get('@container')
63
+ .find('[id="mship-1--MoneyBuy-userInput"]')
64
+ .should('have.value', '10')
65
+ .clear()
66
+ .type('15.99')
67
+ .clear()
68
+ .type(' ');
69
+ cy.get('@container')
70
+ .find('p:nth-child(5)')
71
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
72
+ cy.get('@container')
73
+ .find('[id="mship-1--MoneyBuy-userInput"]')
74
+ .type('15.999');
75
+ cy.get('@container')
76
+ .find('p:nth-child(5)')
77
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
78
+ cy.get('@container')
79
+ .find('form > fieldset > input')
80
+ .contains('Donate monthly');
81
+ cy.get('@container')
82
+ .find('h2')
83
+ .should('exist');
84
+ });
85
85
 
86
- it('has view code button', () => {
87
- cy.get('@viewCodeBtn').should('exist');
88
- });
86
+ it('has view code button', () => {
87
+ cy.get('@viewCodeBtn').should('exist');
88
+ });
89
89
 
90
- it('shows code on click', () => {
91
- cy.get('@viewCodeBtn').click();
92
- cy.get('@container')
93
- .find('textarea')
94
- .should('exist');
95
- });
90
+ it('shows code on click', () => {
91
+ cy.get('@viewCodeBtn').click();
92
+ cy.get('@container')
93
+ .find('textarea')
94
+ .should('exist');
95
+ });
96
96
 
97
- it('closes code on click', () => {
98
- cy.get('@viewCodeBtn').click();
99
- });
97
+ it('closes code on click', () => {
98
+ cy.get('@viewCodeBtn').click();
100
99
  });
100
+ });
101
101
 
102
- describe('Donate Form align left section', () => {
103
- beforeEach(() => {
104
- cy.get('[data-testid="Donate-example-3"]')
105
- .as('container')
106
- .find('[data-preview="Donate"]')
107
- .as('preview');
102
+ describe('Donate Form align left section', () => {
103
+ beforeEach(() => {
104
+ cy.get('[data-testid="Donate-example-3"]')
105
+ .as('container')
106
+ .find('[data-preview="Donate"]')
107
+ .as('preview');
108
108
 
109
- cy.get('@container')
110
- .find('button')
111
- .contains('View Code')
112
- .as('viewCodeBtn');
113
- });
109
+ cy.get('@container')
110
+ .find('button')
111
+ .contains('View Code')
112
+ .as('viewCodeBtn');
113
+ });
114
114
 
115
- it('renders donate form align left preview', () => {
116
- cy.get('@container')
117
- .find('label[for="give-once"]')
118
- .contains('Give once');
119
- cy.get('@container')
120
- .find('label[for="give-monthly"]')
121
- .contains('Give monthly');
122
- cy.get('@container')
123
- .find('#mship-1--moneyBuy-box2')
124
- .should('exist')
125
- .click();
126
- cy.get('@container')
127
- .find('[id="mship-1--MoneyBuy-userInput"]')
128
- .should('have.value','20')
129
- .clear()
130
- .type(' ');
131
- cy.get('@container')
132
- .find('p:nth-child(5)')
133
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
134
- cy.get('@container')
135
- .find('[id="mship-1--MoneyBuy-userInput"]')
136
- .type('10.999');
137
- cy.get('@container')
138
- .find('p:nth-child(5)')
139
- .should('contain','Please enter an amount between £1 and £20000 and up to 2 decimal places');
140
- cy.get('@container')
141
- .find('form > fieldset > input')
142
- .contains('Donate once');
143
- cy.get('@container')
144
- .find('h2')
145
- .should('exist');
146
- });
115
+ it('renders donate form align left preview', () => {
116
+ cy.get('@container')
117
+ .find('label[for="give-once"]')
118
+ .contains('Single');
119
+ cy.get('@container')
120
+ .find('label[for="give-monthly"]')
121
+ .contains('Monthly');
122
+ cy.get('@container')
123
+ .find('#mship-1--moneyBuy-box2')
124
+ .should('exist')
125
+ .click();
126
+ cy.get('@container')
127
+ .find('[id="mship-1--MoneyBuy-userInput"]')
128
+ .should('have.value', '20')
129
+ .clear()
130
+ .type(' ');
131
+ cy.get('@container')
132
+ .find('p:nth-child(5)')
133
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
134
+ cy.get('@container')
135
+ .find('[id="mship-1--MoneyBuy-userInput"]')
136
+ .type('10.999');
137
+ cy.get('@container')
138
+ .find('p:nth-child(5)')
139
+ .should('contain', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
140
+ cy.get('@container')
141
+ .find('form > fieldset > input')
142
+ .contains('Donate now');
143
+ cy.get('@container')
144
+ .find('h2')
145
+ .should('exist');
146
+ });
147
147
 
148
- it('has view code button', () => {
149
- cy.get('@viewCodeBtn').should('exist');
150
- });
148
+ it('has view code button', () => {
149
+ cy.get('@viewCodeBtn').should('exist');
150
+ });
151
151
 
152
- it('shows code on click', () => {
153
- cy.get('@viewCodeBtn').click();
154
- cy.get('@container')
155
- .find('textarea')
156
- .should('exist');
157
- });
152
+ it('shows code on click', () => {
153
+ cy.get('@viewCodeBtn').click();
154
+ cy.get('@container')
155
+ .find('textarea')
156
+ .should('exist');
157
+ });
158
158
 
159
- it('closes code on click', () => {
160
- cy.get('@viewCodeBtn').click();
161
- });
159
+ it('closes code on click', () => {
160
+ cy.get('@viewCodeBtn').click();
162
161
  });
162
+ });
163
163
 
164
- describe('Single Giving section', () => {
165
- beforeEach(() => {
166
- cy.get('[data-testid="Donate-example-5"]')
167
- .as('container')
168
- .find('[data-preview="Donate"]')
169
- .as('preview');
164
+ describe('Single Giving section', () => {
165
+ beforeEach(() => {
166
+ cy.get('[data-testid="Donate-example-5"]')
167
+ .as('container')
168
+ .find('[data-preview="Donate"]')
169
+ .as('preview');
170
170
 
171
- cy.get('@container')
172
- .find('button')
173
- .contains('View Code')
174
- .as('viewCodeBtn');
175
- });
171
+ cy.get('@container')
172
+ .find('button')
173
+ .contains('View Code')
174
+ .as('viewCodeBtn');
175
+ });
176
176
 
177
- it('renders Single Giving preview', () => {
178
- cy.get('@container')
179
- .find('label[for="give-once"]')
180
- .should('not.exist');
181
- cy.get('@container')
182
- .find('#mship-1--moneyBuy-box3')
183
- .should('exist')
184
- .click();
185
- cy.get('@container')
186
- .find('[id="mship-1--MoneyBuy-userInput"]')
187
- .should('have.value','30')
188
- .clear()
189
- .type('10.99')
190
- .clear()
191
- .type(' ');
192
- cy.get('@container')
193
- .find('p:nth-child(5)')
194
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
195
- cy.get('@container')
196
- .find('[id="mship-1--MoneyBuy-userInput"]')
197
- .type('10.999');
198
- cy.get('@container')
199
- .find('p:nth-child(5)')
200
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
201
- cy.get('@container')
202
- .find('form > fieldset > input')
203
- .contains('Donate once');
204
- cy.get('@container')
205
- .find('h2')
206
- .should('exist');
207
- });
177
+ it('renders Single Giving preview', () => {
178
+ cy.get('@container')
179
+ .find('label[for="give-once"]')
180
+ .should('not.exist');
181
+ cy.get('@container')
182
+ .find('#mship-1--moneyBuy-box3')
183
+ .should('exist')
184
+ .click();
185
+ cy.get('@container')
186
+ .find('[id="mship-1--MoneyBuy-userInput"]')
187
+ .should('have.value', '30')
188
+ .clear()
189
+ .type('10.99')
190
+ .clear()
191
+ .type(' ');
192
+ cy.get('@container')
193
+ .find('p:nth-child(5)')
194
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
195
+ cy.get('@container')
196
+ .find('[id="mship-1--MoneyBuy-userInput"]')
197
+ .type('10.999');
198
+ cy.get('@container')
199
+ .find('p:nth-child(5)')
200
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
201
+ cy.get('@container')
202
+ .find('form > fieldset > input')
203
+ .contains('Donate now');
204
+ cy.get('@container')
205
+ .find('h2')
206
+ .should('exist');
207
+ });
208
208
 
209
- it('has view code button', () => {
210
- cy.get('@viewCodeBtn').should('exist');
211
- });
209
+ it('has view code button', () => {
210
+ cy.get('@viewCodeBtn').should('exist');
211
+ });
212
212
 
213
- it('shows code on click', () => {
214
- cy.get('@viewCodeBtn').click();
215
- cy.get('@container')
216
- .find('textarea')
217
- .should('exist');
218
- });
213
+ it('shows code on click', () => {
214
+ cy.get('@viewCodeBtn').click();
215
+ cy.get('@container')
216
+ .find('textarea')
217
+ .should('exist');
218
+ });
219
219
 
220
- it('closes code on click', () => {
221
- cy.get('@viewCodeBtn').click();
222
- });
220
+ it('closes code on click', () => {
221
+ cy.get('@viewCodeBtn').click();
223
222
  });
223
+ });
224
224
 
225
- describe('Single Giving "No Money Buys" section', () => {
226
- beforeEach(() => {
227
- cy.get('[data-testid="Donate-example-7"]')
228
- .as('container')
229
- .find('[data-preview="Donate"]')
230
- .as('preview');
225
+ describe('Single Giving "No Money Buys" section', () => {
226
+ beforeEach(() => {
227
+ cy.get('[data-testid="Donate-example-7"]')
228
+ .as('container')
229
+ .find('[data-preview="Donate"]')
230
+ .as('preview');
231
231
 
232
- cy.get('@container')
233
- .find('button')
234
- .contains('View Code')
235
- .as('viewCodeBtn');
236
- });
232
+ cy.get('@container')
233
+ .find('button')
234
+ .contains('View Code')
235
+ .as('viewCodeBtn');
236
+ });
237
237
 
238
- it('renders Single Giving "No Money Buys" preview', () => {
239
- cy.get('@container')
240
- .find('label[for="give-once"]')
241
- .should('not.exist');
242
- cy.get('@container')
243
- .find('#mship-1--moneyBuy-box1')
244
- .should('not.exist');
245
- cy.get('@container')
246
- .find('[id="mship-1--MoneyBuy-userInput"]')
247
- .should('exist')
248
- .clear()
249
- .type('5')
250
- .clear();
251
- cy.get('@container')
252
- .find('p:nth-child(4)')
253
- .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
254
- cy.get('@container')
255
- .find('[id="mship-1--MoneyBuy-userInput"]')
256
- .type('10.999')
257
- .clear()
258
- .type('5')
259
- .should('not.have','Please enter an amount between £1 and £20000 and up to 2 decimal places');
260
- cy.get('@container')
261
- .find('form > fieldset > input')
262
- .contains('Donate');
263
- cy.get('@container')
264
- .find('h2')
265
- .should('exist');
266
- });
238
+ it('renders Single Giving "No Money Buys" preview', () => {
239
+ cy.get('@container')
240
+ .find('label[for="give-once"]')
241
+ .should('not.exist');
242
+ cy.get('@container')
243
+ .find('#mship-1--moneyBuy-box1')
244
+ .should('not.exist');
245
+ cy.get('@container')
246
+ .find('[id="mship-1--MoneyBuy-userInput"]')
247
+ .should('exist')
248
+ .clear()
249
+ .type('5')
250
+ .clear();
251
+ cy.get('@container')
252
+ .find('p:nth-child(4)')
253
+ .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
254
+ cy.get('@container')
255
+ .find('[id="mship-1--MoneyBuy-userInput"]')
256
+ .type('10.999')
257
+ .clear()
258
+ .type('5')
259
+ .should('not.have', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
260
+ cy.get('@container')
261
+ .find('form > fieldset > input')
262
+ .contains('Donate');
263
+ cy.get('@container')
264
+ .find('h2')
265
+ .should('exist');
266
+ });
267
267
 
268
- it('has view code button', () => {
269
- cy.get('@viewCodeBtn').should('exist');
270
- });
268
+ it('has view code button', () => {
269
+ cy.get('@viewCodeBtn').should('exist');
270
+ });
271
271
 
272
- it('shows code on click', () => {
273
- cy.get('@viewCodeBtn').click();
274
- cy.get('@container')
275
- .find('textarea')
276
- .should('exist');
277
- });
272
+ it('shows code on click', () => {
273
+ cy.get('@viewCodeBtn').click();
274
+ cy.get('@container')
275
+ .find('textarea')
276
+ .should('exist');
277
+ });
278
278
 
279
- it('closes code on click', () => {
280
- cy.get('@viewCodeBtn').click();
281
- });
279
+ it('closes code on click', () => {
280
+ cy.get('@viewCodeBtn').click();
282
281
  });
282
+ });
283
283
  });
package/dist/components/Organisms/Donate/Form/Form.js CHANGED
@@ -151,19 +151,19 @@ var Signup = function Signup(_ref) {
151
151
  return setAmountDonate(parseFloat(e.target.value));
152
152
  },
153
153
  "aria-label": "Input a different amount"
154
- }))), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
154
+ }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
155
+ as: "p"
156
+ }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
155
157
  type: "submit",
156
158
  as: "input",
157
159
  value: "Donate"
158
160
  }) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
159
161
  type: "submit",
160
162
  as: "input",
161
- value: givingType === 'single' ? 'Donate once' : 'Donate monthly'
163
+ value: givingType === 'single' ? 'Donate now' : 'Donate monthly'
162
164
  }), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
163
165
  tag: "p"
164
- }, "Please enter an amount between \xA31 and \xA320000 and up to 2 decimal places"), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
165
- as: "p"
166
- }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy))));
166
+ }, "Please enter an amount between \xA31 and \xA320000 and up to 2 decimal places"))));
167
167
  };
168
168
 
169
169
  Signup.defaultProps = {
package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js CHANGED
@@ -72,9 +72,9 @@ var GivingSelector = function GivingSelector(_ref10) {
72
72
  var givingType = _ref10.givingType,
73
73
  changeGivingType = _ref10.changeGivingType;
74
74
  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
75
- "aria-label": "Give once",
75
+ "aria-label": "Single",
76
76
  id: "give-once",
77
- value: "Give once",
77
+ value: "Single",
78
78
  type: "radio",
79
79
  label: "",
80
80
  errormsg: "",
@@ -85,10 +85,10 @@ var GivingSelector = function GivingSelector(_ref10) {
85
85
  }), /*#__PURE__*/_react.default.createElement(Label, {
86
86
  active: givingType === 'single',
87
87
  htmlFor: "give-once"
88
- }, "Give once"), /*#__PURE__*/_react.default.createElement("input", {
89
- "aria-label": "Give monthly",
88
+ }, "Single"), /*#__PURE__*/_react.default.createElement("input", {
89
+ "aria-label": "Monthly",
90
90
  id: "give-monthly",
91
- value: "Give monthly",
91
+ value: "Monthly",
92
92
  type: "radio",
93
93
  label: "",
94
94
  errormsg: "",
@@ -99,7 +99,7 @@ var GivingSelector = function GivingSelector(_ref10) {
99
99
  }), /*#__PURE__*/_react.default.createElement(Label, {
100
100
  active: givingType === 'monthly',
101
101
  htmlFor: "give-monthly"
102
- }, "Give monthly"), /*#__PURE__*/_react.default.createElement(Switch, null)));
102
+ }, "Monthly"), /*#__PURE__*/_react.default.createElement(Switch, null)));
103
103
  };
104
104
 
105
105
  var _default = GivingSelector;
package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap CHANGED
@@ -680,36 +680,36 @@ exports[`Monthly donation renders correctly 1`] = `
680
680
  className="c11"
681
681
  >
682
682
  <input
683
- aria-label="Give once"
683
+ aria-label="Single"
684
684
  checked={true}
685
685
  errormsg=""
686
686
  id="give-once"
687
687
  label=""
688
688
  onClick={[Function]}
689
689
  type="radio"
690
- value="Give once"
690
+ value="Single"
691
691
  />
692
692
  <label
693
693
  className="c12"
694
694
  htmlFor="give-once"
695
695
  >
696
- Give once
696
+ Single
697
697
  </label>
698
698
  <input
699
- aria-label="Give monthly"
699
+ aria-label="Monthly"
700
700
  checked={false}
701
701
  errormsg=""
702
702
  id="give-monthly"
703
703
  label=""
704
704
  onClick={[Function]}
705
705
  type="radio"
706
- value="Give monthly"
706
+ value="Monthly"
707
707
  />
708
708
  <label
709
709
  className="c13"
710
710
  htmlFor="give-monthly"
711
711
  >
712
- Give monthly
712
+ Monthly
713
713
  </label>
714
714
  <span
715
715
  className="c14 c15"
@@ -888,7 +888,7 @@ exports[`Monthly donation renders correctly 1`] = `
888
888
  <input
889
889
  className="c31"
890
890
  type="submit"
891
- value="Donate once"
891
+ value="Donate now"
892
892
  />
893
893
  </fieldset>
894
894
  </form>
@@ -1258,12 +1258,12 @@ exports[`Single donation renders correctly 1`] = `
1258
1258
  border: 2px solid #969598;
1259
1259
  }
1260
1260
 
1261
- .c27 {
1261
+ .c26 {
1262
1262
  line-height: 1.5;
1263
1263
  margin-top: 2rem;
1264
1264
  }
1265
1265
 
1266
- .c26 {
1266
+ .c27 {
1267
1267
  width: 100%;
1268
1268
  margin: 2rem 0 2rem;
1269
1269
  color: #FFFFFF;
@@ -1282,9 +1282,9 @@ exports[`Single donation renders correctly 1`] = `
1282
1282
  appearance: none;
1283
1283
  }
1284
1284
 
1285
- .c26:active,
1286
- .c26:focus,
1287
- .c26:hover {
1285
+ .c27:active,
1286
+ .c27:focus,
1287
+ .c27:hover {
1288
1288
  outline: none;
1289
1289
  background-color: #961D35;
1290
1290
  }
@@ -1398,7 +1398,7 @@ exports[`Single donation renders correctly 1`] = `
1398
1398
  }
1399
1399
 
1400
1400
  @media (min-width:740px) {
1401
- .c26 {
1401
+ .c27 {
1402
1402
  padding: 1rem 2rem;
1403
1403
  }
1404
1404
  }
@@ -1626,19 +1626,19 @@ exports[`Single donation renders correctly 1`] = `
1626
1626
 
1627
1627
  </label>
1628
1628
  </div>
1629
- <input
1630
- className="c26"
1631
- type="submit"
1632
- value="Donate once"
1633
- />
1634
1629
  <p
1635
- className="c27"
1630
+ className="c26"
1636
1631
  >
1637
1632
  <strong>
1638
1633
  £20.00
1639
1634
  </strong>
1640
1635
  a support worker to visit 10 isolated young mums with postnatal depression in the UK.
1641
1636
  </p>
1637
+ <input
1638
+ className="c27"
1639
+ type="submit"
1640
+ value="Donate now"
1641
+ />
1642
1642
  </fieldset>
1643
1643
  </form>
1644
1644
  </div>
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": "6.1.5",
4
+ "version": "6.2.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/Donate/Form/Form.js CHANGED
@@ -179,13 +179,19 @@ const Signup = ({
179
179
  aria-label="Input a different amount"
180
180
  />
181
181
  </FormFieldset>
182
+ {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
183
+ <Copy as="p">
184
+ <strong>{`£${amountDonate.toFixed(2)} `}</strong>
185
+ {moneyBuyCopy}
186
+ </Copy>
187
+ )}
182
188
  {noMoneyBuys ? (
183
189
  <Button type="submit" as="input" value="Donate" />
184
190
  ) : (
185
191
  <Button
186
192
  type="submit"
187
193
  as="input"
188
- value={givingType === 'single' ? 'Donate once' : 'Donate monthly'}
194
+ value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
189
195
  />
190
196
  )}
191
197
  {errorMsg && (
@@ -194,12 +200,6 @@ const Signup = ({
194
200
  places
195
201
  </Error>
196
202
  )}
197
- {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
198
- <Copy as="p">
199
- <strong>{`£${amountDonate.toFixed(2)} `}</strong>
200
- {moneyBuyCopy}
201
- </Copy>
202
- )}
203
203
  </OuterFieldset>
204
204
  </Form>
205
205
  </FormWrapper>
package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js CHANGED
@@ -84,9 +84,9 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
84
84
  <Wrapper>
85
85
  <MoneyBox>
86
86
  <input
87
- aria-label="Give once"
87
+ aria-label="Single"
88
88
  id="give-once"
89
- value="Give once"
89
+ value="Single"
90
90
  type="radio"
91
91
  label=""
92
92
  errormsg=""
@@ -96,12 +96,12 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
96
96
  }}
97
97
  />
98
98
  <Label active={givingType === 'single'} htmlFor="give-once">
99
- Give once
99
+ Single
100
100
  </Label>
101
101
  <input
102
- aria-label="Give monthly"
102
+ aria-label="Monthly"
103
103
  id="give-monthly"
104
- value="Give monthly"
104
+ value="Monthly"
105
105
  type="radio"
106
106
  label=""
107
107
  errormsg=""
@@ -111,7 +111,7 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
111
111
  }}
112
112
  />
113
113
  <Label active={givingType === 'monthly'} htmlFor="give-monthly">
114
- Give monthly
114
+ Monthly
115
115
  </Label>
116
116
  <Switch />
117
117
  </MoneyBox>
package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap CHANGED
@@ -680,36 +680,36 @@ exports[`Monthly donation renders correctly 1`] = `
680
680
  className="c11"
681
681
  >
682
682
  <input
683
- aria-label="Give once"
683
+ aria-label="Single"
684
684
  checked={true}
685
685
  errormsg=""
686
686
  id="give-once"
687
687
  label=""
688
688
  onClick={[Function]}
689
689
  type="radio"
690
- value="Give once"
690
+ value="Single"
691
691
  />
692
692
  <label
693
693
  className="c12"
694
694
  htmlFor="give-once"
695
695
  >
696
- Give once
696
+ Single
697
697
  </label>
698
698
  <input
699
- aria-label="Give monthly"
699
+ aria-label="Monthly"
700
700
  checked={false}
701
701
  errormsg=""
702
702
  id="give-monthly"
703
703
  label=""
704
704
  onClick={[Function]}
705
705
  type="radio"
706
- value="Give monthly"
706
+ value="Monthly"
707
707
  />
708
708
  <label
709
709
  className="c13"
710
710
  htmlFor="give-monthly"
711
711
  >
712
- Give monthly
712
+ Monthly
713
713
  </label>
714
714
  <span
715
715
  className="c14 c15"
@@ -888,7 +888,7 @@ exports[`Monthly donation renders correctly 1`] = `
888
888
  <input
889
889
  className="c31"
890
890
  type="submit"
891
- value="Donate once"
891
+ value="Donate now"
892
892
  />
893
893
  </fieldset>
894
894
  </form>
@@ -1258,12 +1258,12 @@ exports[`Single donation renders correctly 1`] = `
1258
1258
  border: 2px solid #969598;
1259
1259
  }
1260
1260
 
1261
- .c27 {
1261
+ .c26 {
1262
1262
  line-height: 1.5;
1263
1263
  margin-top: 2rem;
1264
1264
  }
1265
1265
 
1266
- .c26 {
1266
+ .c27 {
1267
1267
  width: 100%;
1268
1268
  margin: 2rem 0 2rem;
1269
1269
  color: #FFFFFF;
@@ -1282,9 +1282,9 @@ exports[`Single donation renders correctly 1`] = `
1282
1282
  appearance: none;
1283
1283
  }
1284
1284
 
1285
- .c26:active,
1286
- .c26:focus,
1287
- .c26:hover {
1285
+ .c27:active,
1286
+ .c27:focus,
1287
+ .c27:hover {
1288
1288
  outline: none;
1289
1289
  background-color: #961D35;
1290
1290
  }
@@ -1398,7 +1398,7 @@ exports[`Single donation renders correctly 1`] = `
1398
1398
  }
1399
1399
 
1400
1400
  @media (min-width:740px) {
1401
- .c26 {
1401
+ .c27 {
1402
1402
  padding: 1rem 2rem;
1403
1403
  }
1404
1404
  }
@@ -1626,19 +1626,19 @@ exports[`Single donation renders correctly 1`] = `
1626
1626
 
1627
1627
  </label>
1628
1628
  </div>
1629
- <input
1630
- className="c26"
1631
- type="submit"
1632
- value="Donate once"
1633
- />
1634
1629
  <p
1635
- className="c27"
1630
+ className="c26"
1636
1631
  >
1637
1632
  <strong>
1638
1633
  £20.00
1639
1634
  </strong>
1640
1635
  a support worker to visit 10 isolated young mums with postnatal depression in the UK.
1641
1636
  </p>
1637
+ <input
1638
+ className="c27"
1639
+ type="submit"
1640
+ value="Donate now"
1641
+ />
1642
1642
  </fieldset>
1643
1643
  </form>
1644
1644
  </div>