@comicrelief/component-library 7.29.0 → 7.30.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 (15) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Organisms/Donate/Donate.js +12 -9
  3. package/dist/components/Organisms/Donate/Donate.md +27 -21
  4. package/dist/components/Organisms/Donate/Donate.style.js +37 -33
  5. package/dist/components/Organisms/Donate/Form/Form.js +11 -7
  6. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +39 -10
  7. package/dist/components/Organisms/Donate/_utils.js +8 -3
  8. package/package.json +3 -2
  9. package/playwright/components/organisms/donate.spec.js +73 -79
  10. package/src/components/Organisms/Donate/Donate.js +33 -27
  11. package/src/components/Organisms/Donate/Donate.md +27 -21
  12. package/src/components/Organisms/Donate/Donate.style.js +12 -6
  13. package/src/components/Organisms/Donate/Form/Form.js +15 -10
  14. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +39 -10
  15. package/src/components/Organisms/Donate/_utils.js +9 -3
package/playwright/components/organisms/donate.spec.js CHANGED
@@ -2,54 +2,53 @@ const { test, expect } = require('@playwright/test');
2
2
 
3
3
  test.describe('donate component', () => {
4
4
  test('Donate-example-1 - Single Donation', async ({ page }) => {
5
-
6
5
  await page.goto('/#donate');
7
6
 
8
7
  await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
9
8
 
10
9
  // moneybuy 1
11
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
12
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£12.10"]').click();
13
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('12.10');
10
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
11
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box1"][aria-label="£12.10"]').click();
12
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('12.10');
14
13
 
15
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
14
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
16
15
  console.log('buttonText:', moneybuyOneButtonText);
17
16
 
18
17
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.10 now');
19
18
 
20
19
  // moneybuy 2
21
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£20.00"]').click();
22
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
20
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box2"][aria-label="£20.00"]').click();
21
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
23
22
 
24
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
23
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
25
24
  console.log('buttonText:', moneybuyTwoButtonText);
26
25
 
27
26
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 now');
28
27
 
29
28
  // moneybuy 3
30
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£30.00"]').click();
31
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('30');
29
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box3"][aria-label="£30.00"]').click();
30
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('30');
32
31
 
33
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
32
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
34
33
  console.log('buttonText:', moneybuyThreeButtonText);
35
34
 
36
35
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £30 now');
37
36
 
38
37
  // amount field validation
39
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
38
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
40
39
 
41
40
  // enter amount 0 should show error message
42
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
41
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('0');
43
42
  await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
44
43
 
45
44
  // enter amount 25001 should show error message
46
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
47
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
45
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
46
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('25001');
48
47
  await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
49
48
 
50
49
  // enter own amount in decimals should not show error message
51
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
52
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
50
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
51
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('12.99');
53
52
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 now');
54
53
 
55
54
  // clicking the submit button should take to donate.comicrelief.com
@@ -59,7 +58,6 @@ test.describe('donate component', () => {
59
58
  });
60
59
 
61
60
  test('Donate-example-1 - Monthly Donation', async ({ page }) => {
62
-
63
61
  await page.goto('/#donate');
64
62
 
65
63
  await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
@@ -68,47 +66,47 @@ test.describe('donate component', () => {
68
66
  await page.locator('[data-testid="Donate-example-1"] [for="give-monthly--mship-1"]').click();
69
67
 
70
68
  // moneybuy 1
71
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£5.50"]').click();
72
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('5.50');
69
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box1"][aria-label="£5.50"]').click();
70
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('5.50');
73
71
 
74
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
72
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
75
73
  console.log('buttonText:', moneybuyOneButtonText);
76
74
 
77
75
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £5.50 monthly');
78
76
 
79
77
  // moneybuy 2
80
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£10.00"]').click();
81
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('10');
78
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box2"][aria-label="£10.00"]').click();
79
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('10');
82
80
 
83
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
81
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
84
82
  console.log('buttonText:', moneybuyTwoButtonText);
85
83
 
86
84
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £10 monthly');
87
85
 
88
86
  // moneybuy 3
89
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£20.00"]').click();
90
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
87
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box3"][aria-label="£20.00"]').click();
88
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
91
89
 
92
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
90
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
93
91
  console.log('buttonText:', moneybuyThreeButtonText);
94
92
 
95
93
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 monthly');
96
94
 
97
95
  // amount field validation
98
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
96
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
99
97
 
100
98
  // enter amount 0 should show error message
101
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
99
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('0');
102
100
  await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
103
101
 
104
102
  // enter amount 25001 should show error message
105
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
106
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
103
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
104
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('25001');
107
105
  await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
108
106
 
109
107
  // enter own amount in decimals should not show error message
110
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
111
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
108
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
109
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('12.99');
112
110
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 monthly');
113
111
 
114
112
  // clicking the submit button should take to donate.comicrelief.com
@@ -118,53 +116,52 @@ test.describe('donate component', () => {
118
116
  });
119
117
 
120
118
  test('Donate-example-3 - high value cart', async ({ page }) => {
121
-
122
119
  await page.goto('/#donate');
123
120
 
124
121
  await expect(page.locator('[data-testid="Donate-example-3"]')).toBeVisible();
125
122
 
126
123
  // moneybuy 1
127
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box1[aria-label="£7777"]').click();
128
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('7777');
124
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box1"][aria-label="£7777"]').click();
125
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('7777');
129
126
 
130
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
127
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
131
128
  console.log('buttonText:', moneybuyOneButtonText);
132
129
 
133
130
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £7777 now');
134
131
 
135
132
  // moneybuy 2
136
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box2[aria-label="£8888"]').click();
137
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('8888');
133
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box2"][aria-label="£8888"]').click();
134
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('8888');
138
135
 
139
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
136
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
140
137
  console.log('buttonText:', moneybuyTwoButtonText);
141
138
 
142
139
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £8888 now');
143
140
 
144
141
  // moneybuy 3
145
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box3[aria-label="£9999"]').click();
146
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('9999');
142
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box3"][aria-label="£9999"]').click();
143
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('9999');
147
144
 
148
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
145
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
149
146
  console.log('buttonText:', moneybuyThreeButtonText);
150
147
 
151
148
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £9999 now');
152
149
 
153
150
  // amount field validation
154
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
151
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
155
152
 
156
153
  // enter amount 0 should show error message
157
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('0');
154
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('0');
158
155
  await expect(page.locator('[data-testid="Donate-example-3"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
159
156
 
160
157
  // enter amount 25001 should show error message
161
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
162
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('25001');
158
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
159
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('25001');
163
160
  await expect(page.locator('[data-testid="Donate-example-3"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
164
161
 
165
162
  // enter own amount in decimals should not show error message
166
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
167
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('22000');
163
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
164
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('22000');
168
165
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £22000 now');
169
166
 
170
167
  // clicking the submit button should take to donate.comicrelief.com
@@ -174,53 +171,52 @@ test.describe('donate component', () => {
174
171
  });
175
172
 
176
173
  test('Donate-example-5 - Single Giving', async ({ page }) => {
177
-
178
174
  await page.goto('/#donate');
179
175
 
180
176
  await expect(page.locator('[data-testid="Donate-example-5"]')).toBeVisible();
181
177
 
182
178
  // moneybuy 1
183
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box1[aria-label="£10"]').click();
184
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('10');
179
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box1"][aria-label="£10"]').click();
180
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('10');
185
181
 
186
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
182
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
187
183
  console.log('buttonText:', moneybuyOneButtonText);
188
184
 
189
185
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £10 now');
190
186
 
191
187
  // moneybuy 2
192
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box2[aria-label="£20"]').click();
193
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('20');
188
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box2"][aria-label="£20"]').click();
189
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('20');
194
190
 
195
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
191
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
196
192
  console.log('buttonText:', moneybuyTwoButtonText);
197
193
 
198
194
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20 now');
199
195
 
200
196
  // moneybuy 3
201
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box3[aria-label="£30"]').click();
202
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('30');
197
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box3"][aria-label="£30"]').click();
198
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('30');
203
199
 
204
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
200
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
205
201
  console.log('buttonText:', moneybuyThreeButtonText);
206
202
 
207
203
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £30 now');
208
204
 
209
205
  // amount field validation
210
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
206
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
211
207
 
212
208
  // enter amount 0 should show error message
213
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('0');
209
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('0');
214
210
  await expect(page.locator('[data-testid="Donate-example-5"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
215
211
 
216
212
  // enter amount 25001 should show error message
217
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
218
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('25001');
213
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
214
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('25001');
219
215
  await expect(page.locator('[data-testid="Donate-example-5"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
220
216
 
221
217
  // enter own amount in decimals should not show error message
222
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
223
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('20.01');
218
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
219
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('20.01');
224
220
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20.01 now');
225
221
 
226
222
  // clicking the submit button should take to donate.comicrelief.com
@@ -230,7 +226,6 @@ test.describe('donate component', () => {
230
226
  });
231
227
 
232
228
  test('Donate-example-7 - Single Giving "No Money Buys"', async ({ page }) => {
233
-
234
229
  await page.goto('/#donate');
235
230
 
236
231
  await expect(page.locator('[data-testid="Donate-example-7"]')).toBeVisible();
@@ -238,20 +233,20 @@ test.describe('donate component', () => {
238
233
  await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20');
239
234
 
240
235
  // amount field validation
241
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
236
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
242
237
 
243
238
  // enter amount 0 should show error message
244
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('0');
239
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('0');
245
240
  await expect(page.locator('[data-testid="Donate-example-7"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
246
241
 
247
242
  // enter amount 25001 should show error message
248
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
249
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('25001');
243
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
244
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('25001');
250
245
  await expect(page.locator('[data-testid="Donate-example-7"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
251
246
 
252
247
  // enter own amount in decimals should not show error message
253
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
254
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('20.01');
248
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
249
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('20.01');
255
250
  await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20.01');
256
251
 
257
252
  // clicking the submit button should take to donate.comicrelief.com
@@ -261,7 +256,6 @@ test.describe('donate component', () => {
261
256
  });
262
257
 
263
258
  test('Donate-example-9 - Single Giving "No Money Buys" with overridden manual input value', async ({ page }) => {
264
-
265
259
  await page.goto('/#donate');
266
260
 
267
261
  await expect(page.locator('[data-testid="Donate-example-9"]')).toBeVisible();
@@ -269,20 +263,20 @@ test.describe('donate component', () => {
269
263
  await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £567.89');
270
264
 
271
265
  // amount field validation
272
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
266
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
273
267
 
274
268
  // enter amount 0 should show error message
275
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('0');
269
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('0');
276
270
  await expect(page.locator('[data-testid="Donate-example-9"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
277
271
 
278
272
  // enter amount 25001 should show error message
279
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
280
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('25001');
273
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
274
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('25001');
281
275
  await expect(page.locator('[data-testid="Donate-example-9"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
282
276
 
283
277
  // enter own amount in decimals should not show error message
284
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
285
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('20.01');
278
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
279
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('20.01');
286
280
  await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £20.01');
287
281
 
288
282
  // clicking the submit button should take to donate.comicrelief.com
package/src/components/Organisms/Donate/Donate.js CHANGED
@@ -11,8 +11,8 @@ import { handleTitles, handleCopy } from './_utils';
11
11
  import {
12
12
  BgImage,
13
13
  Container,
14
- Header,
15
- HeaderInner,
14
+ TitleWrapperInner,
15
+ TitleWrapperOuter,
16
16
  Wrapper
17
17
  } from './Donate.style';
18
18
 
@@ -70,7 +70,8 @@ const Donate = ({
70
70
  const {
71
71
  showCopy,
72
72
  thisTitle,
73
- thisSubtitle
73
+ thisSubtitle,
74
+ noTitlesAtAll
74
75
  } = handleTitles(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
75
76
 
76
77
  const {
@@ -112,28 +113,33 @@ const Donate = ({
112
113
  />
113
114
  ) : null}
114
115
 
115
- <Wrapper formAlignRight={formAlignRight} aria-live="polite">
116
- <Header formAlignRight={formAlignRight}>
117
- <HeaderInner>
116
+ <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll}>
117
+
118
+ {/* Only render if there is SOME title copy; otherwise,
119
+ we need to the space to centre-align the form */}
120
+ { !noTitlesAtAll && (
121
+ <TitleWrapperOuter formAlignRight={formAlignRight} data-test="this-one-here">
122
+ <TitleWrapperInner>
118
123
  {showCopy && (
119
- <>
120
- <Text
121
- tag="h2"
122
- color={textColor}
123
- size="big"
124
- family="Anton"
125
- weight="normal"
126
- uppercase
127
- >
128
- {thisTitle}
129
- </Text>
130
- <Text tag="p" color={textColor} size="m">
131
- {thisSubtitle}
132
- </Text>
133
- </>
124
+ <>
125
+ <Text
126
+ tag="h2"
127
+ color={textColor}
128
+ size="big"
129
+ family="Anton"
130
+ weight="normal"
131
+ uppercase
132
+ >
133
+ {thisTitle}
134
+ </Text>
135
+ <Text tag="p" color={textColor} size="m">
136
+ {thisSubtitle}
137
+ </Text>
138
+ </>
134
139
  )}
135
- </HeaderInner>
136
- </Header>
140
+ </TitleWrapperInner>
141
+ </TitleWrapperOuter>
142
+ )}
137
143
 
138
144
  <Form
139
145
  data={data}
@@ -222,10 +228,10 @@ Donate.defaultProps = {
222
228
  additionalSingleCopy: null,
223
229
  additionalMonthlyCopy: null,
224
230
  defaultGivingType: null,
225
- monthlyTitle: null,
226
- monthlySubtitle: null,
227
- monthlyChooseAmountText: null,
228
- monthlyOtherAmountText: null
231
+ monthlyTitle: '',
232
+ monthlySubtitle: '',
233
+ monthlyChooseAmountText: '',
234
+ monthlyOtherAmountText: ''
229
235
  };
230
236
 
231
237
  export default Donate;
package/src/components/Organisms/Donate/Donate.md CHANGED
@@ -131,7 +131,7 @@ setTimeout(()=>{
131
131
  mobileImageLow={mobilePictures.imageLow}
132
132
  mobileImages={mobilePictures.images}
133
133
  data={data}
134
- mbshipID="mship-4"
134
+ mbshipID="mship-5"
135
135
  donateLink="https://donation.comicrelief.com/"
136
136
  clientID="donate"
137
137
  cartID="default-comicrelief"
@@ -139,6 +139,8 @@ setTimeout(()=>{
139
139
  noMoneyBuys
140
140
  subtitle="Please help us fund life-changing projects in the UK and around the world."
141
141
  otherAmountValue={amountDonate}
142
+ otherAmountText="Here's an otherAmountText override"
143
+
142
144
  />;
143
145
  ```
144
146
 
@@ -166,7 +168,7 @@ setTimeout(()=>{
166
168
  mobileImageLow={mobilePictures.imageLow}
167
169
  mobileImages={mobilePictures.images}
168
170
  data={data}
169
- mbshipID="mship-1"
171
+ mbshipID="mship-6"
170
172
  donateLink="https://donation.comicrelief.com/"
171
173
  clientID="donate"
172
174
  cartID="default-comicrelief"
@@ -191,7 +193,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
191
193
  mobileImageLow={mobilePictures.imageLow}
192
194
  mobileImages={mobilePictures.images}
193
195
  data={data}
194
- mbshipID="mship-2"
196
+ mbshipID="mship-7"
195
197
  donateLink="https://donation.comicrelief.com/"
196
198
  clientID="donate"
197
199
  cartID="default-comicrelief"
@@ -202,7 +204,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
202
204
  ```
203
205
 
204
206
 
205
- ## Form align right - no subtitle
207
+ ## Form align right, but no copy, so ACTUALLY centre-aligns
206
208
 
207
209
  ```js
208
210
  import data from './dev-data/data';
@@ -220,12 +222,16 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
220
222
  mobileImageLow={mobilePictures.imageLow}
221
223
  mobileImages={mobilePictures.images}
222
224
  data={data}
223
- mbshipID="mship-5"
225
+ mbshipID="mship-8"
224
226
  donateLink="https://donation.comicrelief.com/"
225
227
  clientID="donate"
226
228
  cartID="default-comicrelief"
227
- title="Donate Now"
229
+ // Directly omiting values for these to centre-align
230
+ title=""
228
231
  subtitle=""
232
+ chooseAmountText=""
233
+ monthlyTitle=""
234
+ monthlySubtitle=""
229
235
  />;
230
236
  ```
231
237
 
@@ -245,7 +251,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
245
251
  mobileImageLow={mobilePictures.imageLow}
246
252
  mobileImages={mobilePictures.images}
247
253
  data={data}
248
- mbshipID="mship-6"
254
+ mbshipID="mship-9"
249
255
  donateLink="https://donation.comicrelief.com/"
250
256
  clientID="donate"
251
257
  cartID="default-comicrelief"
@@ -270,7 +276,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
270
276
  mobileImageLow={mobilePictures.imageLow}
271
277
  mobileImages={mobilePictures.images}
272
278
  data={data}
273
- mbshipID="mship-7"
279
+ mbshipID="mship-10"
274
280
  donateLink="https://donation.comicrelief.com/"
275
281
  clientID="donate"
276
282
  cartID="default-comicrelief"
@@ -295,7 +301,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
295
301
  mobileImageLow={mobilePictures.imageLow}
296
302
  mobileImages={mobilePictures.images}
297
303
  data={data}
298
- mbshipID="mship-8"
304
+ mbshipID="mship-11"
299
305
  donateLink="https://donation.comicrelief.com/"
300
306
  clientID="donate"
301
307
  cartID="default-comicrelief"
@@ -316,7 +322,7 @@ import data from './dev-data/data-single';
316
322
  mobileBackgroundColor="blue_dark"
317
323
  formAlignRight={false}
318
324
  data={data}
319
- mbshipID="mship-9"
325
+ mbshipID="mship-12"
320
326
  donateLink="https://donation.comicrelief.com/"
321
327
  clientID="donate"
322
328
  cartID="default-comicrelief"
@@ -345,7 +351,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
345
351
  mobileImageLow={mobilePictures.imageLow}
346
352
  mobileImages={mobilePictures.images}
347
353
  data={data}
348
- mbshipID="mship-10"
354
+ mbshipID="mship-13"
349
355
  donateLink="https://donation.comicrelief.com/"
350
356
  clientID="donate"
351
357
  cartID="default-comicrelief"
@@ -373,7 +379,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
373
379
  mobileImageLow={mobilePictures.imageLow}
374
380
  mobileImages={mobilePictures.images}
375
381
  data={data}
376
- mbshipID="mship-11"
382
+ mbshipID="mship-14"
377
383
  donateLink="https://donation.comicrelief.com/"
378
384
  clientID="donate"
379
385
  cartID="default-comicrelief"
@@ -402,7 +408,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
402
408
  mobileImageLow={mobilePictures.imageLow}
403
409
  mobileImages={mobilePictures.images}
404
410
  data={data}
405
- mbshipID="mship-12"
411
+ mbshipID="mship-15"
406
412
  donateLink="https://donation.comicrelief.com/"
407
413
  clientID="donate"
408
414
  cartID="default-comicrelief"
@@ -430,7 +436,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
430
436
  mobileImageLow={mobilePictures.imageLow}
431
437
  mobileImages={mobilePictures.images}
432
438
  data={data}
433
- mbshipID="mship-13"
439
+ mbshipID="mship-16"
434
440
  donateLink="https://donation.comicrelief.com/"
435
441
  clientID="donate"
436
442
  cartID="default-comicrelief"
@@ -458,7 +464,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
458
464
  mobileImageLow={mobilePictures.imageLow}
459
465
  mobileImages={mobilePictures.images}
460
466
  data={data}
461
- mbshipID="mship-14"
467
+ mbshipID="mship-17"
462
468
  donateLink="https://donation.comicrelief.com/"
463
469
  clientID="donate"
464
470
  cartID="default-comicrelief"
@@ -486,7 +492,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
486
492
  mobileImageLow={mobilePictures.imageLow}
487
493
  mobileImages={mobilePictures.images}
488
494
  data={data}
489
- mbshipID="mship-15"
495
+ mbshipID="mship-18"
490
496
  donateLink="https://donation.comicrelief.com/"
491
497
  clientID="donate"
492
498
  cartID="default-comicrelief"
@@ -513,7 +519,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
513
519
  mobileImageLow={mobilePictures.imageLow}
514
520
  mobileImages={mobilePictures.images}
515
521
  data={data}
516
- mbshipID="mship-16"
522
+ mbshipID="mship-19"
517
523
  donateLink="https://donation.comicrelief.com/"
518
524
  clientID="donate"
519
525
  cartID="default-comicrelief"
@@ -541,7 +547,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
541
547
  mobileImageLow={mobilePictures.imageLow}
542
548
  mobileImages={mobilePictures.images}
543
549
  data={data}
544
- mbshipID="mship-17"
550
+ mbshipID="mship-20"
545
551
  donateLink="https://donation.comicrelief.com/"
546
552
  clientID="donate"
547
553
  cartID="default-comicrelief"
@@ -572,7 +578,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
572
578
  mobileImageLow={mobilePictures.imageLow}
573
579
  mobileImages={mobilePictures.images}
574
580
  data={data}
575
- mbshipID="mship-18"
581
+ mbshipID="mship-21"
576
582
  donateLink="https://donation.comicrelief.com/"
577
583
  clientID="donate"
578
584
  cartID="default-comicrelief"
@@ -603,7 +609,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
603
609
  mobileImageLow={mobilePictures.imageLow}
604
610
  mobileImages={mobilePictures.images}
605
611
  data={data}
606
- mbshipID="mship-19"
612
+ mbshipID="mship-22"
607
613
  donateLink="https://donation.comicrelief.com/"
608
614
  clientID="donate"
609
615
  cartID="default-comicrelief"
@@ -616,4 +622,4 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
616
622
  monthlyChooseAmountText="monthlyChooseAmountText here"
617
623
  monthlyOtherAmountText="monthlyOtherAmountText here"
618
624
  />;
619
- ```
625
+ ```