@comicrelief/component-library 8.0.1 → 8.1.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 (9) hide show
  1. package/dist/theme/crTheme/Colors.md +19 -2
  2. package/dist/theme/crTheme/colors.js +1 -0
  3. package/dist/theme/srTheme/colors.js +1 -0
  4. package/package.json +2 -2
  5. package/playwright/components/organisms/emailSignUpForm.spec.js +1 -2
  6. package/playwright/components/organisms/marketingPreferences.spec.js +1 -2
  7. package/src/theme/crTheme/Colors.md +19 -2
  8. package/src/theme/crTheme/colors.js +1 -0
  9. package/src/theme/srTheme/colors.js +1 -0
package/dist/theme/crTheme/Colors.md CHANGED
@@ -31,7 +31,7 @@ const Item = styled.div`
31
31
 
32
32
  <div>
33
33
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
34
- Primary
34
+ Primary (CR Theme)
35
35
  </Text>
36
36
  <Grid>
37
37
  <Item>
@@ -277,7 +277,7 @@ const Item = styled.div`
277
277
  </Item>
278
278
  </Grid>
279
279
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
280
- Accent Colours
280
+ Accent Colours (CR Theme)
281
281
  </Text>
282
282
  <Text tag="h3" color="black" size="xs">
283
283
  Used for highlighted actions and content
@@ -319,5 +319,22 @@ const Item = styled.div`
319
319
  </Card>
320
320
  </Item>
321
321
  </Grid>
322
+
323
+ <Text tag="h3" family="Anton" uppercase color="black" size="l">
324
+ Additional Colours (CR Theme)
325
+ </Text>
326
+ <Text tag="h3" color="black" size="xs">
327
+ Currently, just one new colour used exclusively in the Donate widget on CRcom and the 2024 Donate build
328
+ </Text>
329
+ <Grid>
330
+ <Item>
331
+ <Card backgroundColor="blue_donate" height="auto">
332
+ <Text tag="h3" color="white" size="xs">
333
+ Blue Donate
334
+ </Text>
335
+ <Text tag="p" color="white">#2042AD</Text>
336
+ </Card>
337
+ </Item>
338
+ </Grid>
322
339
  </div>;
323
340
  ```
package/dist/theme/crTheme/colors.js CHANGED
@@ -8,6 +8,7 @@ const colors = {
8
8
  black: '#000000',
9
9
  blue: '#0565D1',
10
10
  blue_dark: '#274084',
11
+ blue_donate: '#2042AD',
11
12
  blue_light: '#BECCF9',
12
13
  blue_royal: '#6489FC',
13
14
  coral: '#F9686D',
package/dist/theme/srTheme/colors.js CHANGED
@@ -9,6 +9,7 @@ const colors = {
9
9
  black_dark: '#030e1a',
10
10
  blue: '#223c59',
11
11
  blue_dark: '#3a4972',
12
+ blue_donate: '#2042AD',
12
13
  blue_light: '#274084',
13
14
  blue_royal: '#6489FC',
14
15
  coral: '#FF6F61',
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.0.1",
4
+ "version": "8.1.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
@@ -41,7 +41,7 @@
41
41
  "react-uid": "^2.3.3",
42
42
  "styled-components": "^5.3.11",
43
43
  "youtube-player": "^5.6.0",
44
- "yup": "^0.32.9"
44
+ "yup": "^1.4.0"
45
45
  },
46
46
  "resolutions": {
47
47
  "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"
package/playwright/components/organisms/emailSignUpForm.spec.js CHANGED
@@ -2,7 +2,6 @@ const { test, expect } = require('@playwright/test');
2
2
 
3
3
  test.describe('Email Signup Form component', () => {
4
4
  test('Email SignUp Form', async ({ page }) => {
5
-
6
5
  await page.goto('/#emailsignupform');
7
6
 
8
7
  await expect(page.locator('[data-testid="EmailSignUpForm-example-1"]')).toBeVisible();
@@ -89,7 +88,7 @@ test.describe('Email Signup Form component', () => {
89
88
  await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').fill(''); // clear the email field
90
89
  await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('Test0-9!#$%&\'*+/=?^_{|}~-@comicrelief_9-8.com.uk');
91
90
  await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').click();
92
- await expect(page.locator('label[for="email"] div ~ span')).toBeHidden('');
91
+ await expect(page.locator('label[for="email"] div ~ span')).toContainText('Please enter a valid email address');
93
92
 
94
93
  // enter valid inputs should not show error messages
95
94
  await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
package/playwright/components/organisms/marketingPreferences.spec.js CHANGED
@@ -2,7 +2,6 @@ const { test, expect } = require('@playwright/test');
2
2
 
3
3
  test.describe('marketing preferences component', () => {
4
4
  test('marketing preferences', async ({ page }) => {
5
-
6
5
  await page.goto('/#marketingpreferencesdsform');
7
6
 
8
7
  await expect(page.locator('[data-testid="MarketingPreferencesDSForm-example-1"]')).toBeVisible();
@@ -80,7 +79,7 @@ test.describe('marketing preferences component', () => {
80
79
  await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
81
80
  await page.locator('div#marketing-preferences--default input#mp_email').type('Test0-9!#$%&\'*+/=?^_{|}~-@comicrelief_9-8.com.uk');
82
81
  await page.locator('div#marketing-preferences--default input#mp_address1').click();
83
- await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toBeHidden('');
82
+ await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
84
83
 
85
84
  // postal address fields validation
86
85
  // validate address line 1 field
package/src/theme/crTheme/Colors.md CHANGED
@@ -31,7 +31,7 @@ const Item = styled.div`
31
31
 
32
32
  <div>
33
33
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
34
- Primary
34
+ Primary (CR Theme)
35
35
  </Text>
36
36
  <Grid>
37
37
  <Item>
@@ -277,7 +277,7 @@ const Item = styled.div`
277
277
  </Item>
278
278
  </Grid>
279
279
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
280
- Accent Colours
280
+ Accent Colours (CR Theme)
281
281
  </Text>
282
282
  <Text tag="h3" color="black" size="xs">
283
283
  Used for highlighted actions and content
@@ -319,5 +319,22 @@ const Item = styled.div`
319
319
  </Card>
320
320
  </Item>
321
321
  </Grid>
322
+
323
+ <Text tag="h3" family="Anton" uppercase color="black" size="l">
324
+ Additional Colours (CR Theme)
325
+ </Text>
326
+ <Text tag="h3" color="black" size="xs">
327
+ Currently, just one new colour used exclusively in the Donate widget on CRcom and the 2024 Donate build
328
+ </Text>
329
+ <Grid>
330
+ <Item>
331
+ <Card backgroundColor="blue_donate" height="auto">
332
+ <Text tag="h3" color="white" size="xs">
333
+ Blue Donate
334
+ </Text>
335
+ <Text tag="p" color="white">#2042AD</Text>
336
+ </Card>
337
+ </Item>
338
+ </Grid>
322
339
  </div>;
323
340
  ```
package/src/theme/crTheme/colors.js CHANGED
@@ -2,6 +2,7 @@ const colors = {
2
2
  black: '#000000',
3
3
  blue: '#0565D1',
4
4
  blue_dark: '#274084',
5
+ blue_donate: '#2042AD',
5
6
  blue_light: '#BECCF9',
6
7
  blue_royal: '#6489FC',
7
8
  coral: '#F9686D',
package/src/theme/srTheme/colors.js CHANGED
@@ -3,6 +3,7 @@ const colors = {
3
3
  black_dark: '#030e1a',
4
4
  blue: '#223c59',
5
5
  blue_dark: '#3a4972',
6
+ blue_donate: '#2042AD',
6
7
  blue_light: '#274084',
7
8
  blue_royal: '#6489FC',
8
9
  coral: '#FF6F61',