@comicrelief/component-library 8.0.0 → 8.0.2

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 (5) hide show
  1. package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js +7 -7
  2. package/package.json +2 -2
  3. package/playwright/components/organisms/emailSignUpForm.spec.js +1 -2
  4. package/playwright/components/organisms/marketingPreferences.spec.js +1 -2
  5. package/src/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js +7 -7
package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js CHANGED
@@ -69,31 +69,31 @@ const buildValidationSchema = overrideOptions => {
69
69
  const mpValidationFields = {
70
70
  mp_email: yup.string().when('mp_permissionEmail', {
71
71
  is: val => !mpValidationOptions.mp_permissionEmail.disableOption && mpValidationOptions.mp_permissionEmail[val],
72
- then: yup.string().required('Please enter your email address').email('Please enter a valid email address')
72
+ then: schema => schema.required('Please enter your email address').email('Please enter a valid email address')
73
73
  }),
74
74
  mp_mobile: yup.string().when('mp_permissionSMS', {
75
75
  is: val => !mpValidationOptions.mp_permissionSMS.disableOption && mpValidationOptions.mp_permissionSMS[val],
76
- then: yup.string().required('Please enter your mobile number').matches(phoneRegex, 'Please enter a valid UK mobile number')
76
+ then: schema => schema.required('Please enter your mobile number').matches(phoneRegex, 'Please enter a valid UK mobile number')
77
77
  }),
78
78
  mp_phone: yup.string().when('mp_permissionPhone', {
79
79
  is: val => !mpValidationOptions.mp_permissionPhone.disableOption && mpValidationOptions.mp_permissionPhone[val],
80
- then: yup.string().required('Please enter your phone number').matches(phoneRegex, 'Please enter a valid UK phone number')
80
+ then: schema => schema.required('Please enter your phone number').matches(phoneRegex, 'Please enter a valid UK phone number')
81
81
  }),
82
82
  mp_address1: yup.string().when('mp_permissionPost', {
83
83
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
84
- then: yup.string().required('Please enter the first line of your address').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
84
+ then: schema => schema.required('Please enter the first line of your address').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
85
85
  }),
86
86
  mp_town: yup.string().when('mp_permissionPost', {
87
87
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
88
- then: yup.string().required('Please enter your town').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
88
+ then: schema => schema.required('Please enter your town').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
89
89
  }),
90
90
  mp_postcode: yup.string().when('mp_permissionPost', {
91
91
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
92
- then: yup.string().required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
92
+ then: schema => schema.required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
93
93
  }),
94
94
  mp_country: yup.string().when('mp_permissionPost', {
95
95
  is: val => !mpValidationOptions.mp_permissionPost.disableOption && mpValidationOptions.mp_permissionPost[val],
96
- then: yup.string().required('Please enter your country').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
96
+ then: schema => schema.required('Please enter your country').matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character').max(50, 'Please enter a maximum of 50 characters')
97
97
  }),
98
98
  /* Non-required fields */
99
99
  mp_address2: yup.string().max(50, 'Please enter a maximum of 50 characters'),
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.0",
4
+ "version": "8.0.2",
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/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js CHANGED
@@ -68,14 +68,14 @@ const buildValidationSchema = overrideOptions => {
68
68
  .when('mp_permissionEmail', {
69
69
  is: val => (!(mpValidationOptions.mp_permissionEmail.disableOption)
70
70
  && mpValidationOptions.mp_permissionEmail[val]),
71
- then: yup.string().required('Please enter your email address').email('Please enter a valid email address')
71
+ then: schema => schema.required('Please enter your email address').email('Please enter a valid email address')
72
72
  }),
73
73
 
74
74
  mp_mobile: yup.string()
75
75
  .when('mp_permissionSMS', {
76
76
  is: val => (!(mpValidationOptions.mp_permissionSMS.disableOption)
77
77
  && mpValidationOptions.mp_permissionSMS[val]),
78
- then: yup.string().required('Please enter your mobile number')
78
+ then: schema => schema.required('Please enter your mobile number')
79
79
  .matches(phoneRegex, 'Please enter a valid UK mobile number')
80
80
  }),
81
81
 
@@ -83,7 +83,7 @@ const buildValidationSchema = overrideOptions => {
83
83
  .when('mp_permissionPhone', {
84
84
  is: val => (!(mpValidationOptions.mp_permissionPhone.disableOption)
85
85
  && mpValidationOptions.mp_permissionPhone[val]),
86
- then: yup.string().required('Please enter your phone number')
86
+ then: schema => schema.required('Please enter your phone number')
87
87
  .matches(phoneRegex, 'Please enter a valid UK phone number')
88
88
  }),
89
89
 
@@ -91,7 +91,7 @@ const buildValidationSchema = overrideOptions => {
91
91
  .when('mp_permissionPost', {
92
92
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
93
93
  && mpValidationOptions.mp_permissionPost[val]),
94
- then: yup.string().required('Please enter the first line of your address')
94
+ then: schema => schema.required('Please enter the first line of your address')
95
95
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
96
96
  .max(50, 'Please enter a maximum of 50 characters')
97
97
  }),
@@ -100,7 +100,7 @@ const buildValidationSchema = overrideOptions => {
100
100
  .when('mp_permissionPost', {
101
101
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
102
102
  && mpValidationOptions.mp_permissionPost[val]),
103
- then: yup.string().required('Please enter your town')
103
+ then: schema => schema.required('Please enter your town')
104
104
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
105
105
  .max(50, 'Please enter a maximum of 50 characters')
106
106
  }),
@@ -108,13 +108,13 @@ const buildValidationSchema = overrideOptions => {
108
108
  mp_postcode: yup.string().when('mp_permissionPost', {
109
109
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
110
110
  && mpValidationOptions.mp_permissionPost[val]),
111
- then: yup.string().required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
111
+ then: schema => schema.required('Please enter your postcode').matches(/^[a-zA-Z]{1,2}\d[a-zA-Z\d]?\s*\d[a-zA-Z]{2}$/, 'Please enter a valid postcode')
112
112
  }),
113
113
 
114
114
  mp_country: yup.string().when('mp_permissionPost', {
115
115
  is: val => (!(mpValidationOptions.mp_permissionPost.disableOption)
116
116
  && mpValidationOptions.mp_permissionPost[val]),
117
- then: yup.string().required('Please enter your country')
117
+ then: schema => schema.required('Please enter your country')
118
118
  .matches(/^[a-zA-Z0-9][a-zA-Z0-9'.,/()& -]*$/, 'This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character')
119
119
  .max(50, 'Please enter a maximum of 50 characters')
120
120
  }),