@comicrelief/storybook 2.4.0 → 2.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/storybook",
   "description": "React components to build the Comic Relief front-end experience",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "dependencies": {
     "@snyk/protect": "^1.1060.0",
     "@storybook/addon-info": "3",

package/src/components/MarketingConsent/FormData.js

@@ -116,7 +116,8 @@ export default {
           label: 'Phone number',
           placeholder: null,
           required: true,
-          pattern: '^(((((\\+44)|(0044))\\s?\\d{4}|\\(?0\\d{4}\\)?)\\s?\\d{3}\\s?\\d{3})|((((\\+44)|(0044))\\s?\\d{3}|\\(?0\\d{3}\\)?)\\s?\\d{3}\\s?\\d{4})|((((\\+44)|(0044))\\s?\\d{2}|\\(?0\\d{2}\\)?)\\s?\\d{4}\\s?\\d{4}))(\\s?\\\\#(\\d{4}|\\d{3}))?$',
+          // For reference for the future usage, but also because I had to do some weird formatting with the escape characters, don't wanna lose it!
+          // pattern: '^(((((\\+44)|(0044))\\s?\\d{4}|\\(?0\\d{4}\\)?)\\s?\\d{3}\\s?\\d{3})|((((\\+44)|(0044))\\s?\\d{3}|\\(?0\\d{3}\\)?)\\s?\\d{3}\\s?\\d{4})|((((\\+44)|(0044))\\s?\\d{2}|\\(?0\\d{2}\\)?)\\s?\\d{4}\\s?\\d{4}))(\\s?\\\\#(\\d{4}|\\d{3}))?$',
         },
       ],
     },
@@ -142,7 +143,7 @@ export default {
           label: 'Mobile number',
           placeholder: null,
           required: true,
-          pattern: '^(((((\\+44)|(0044))\\s?\\d{4}|\\(?0\\d{4}\\)?)\\s?\\d{3}\\s?\\d{3})|((((\\+44)|(0044))\\s?\\d{3}|\\(?0\\d{3}\\)?)\\s?\\d{3}\\s?\\d{4})|((((\\+44)|(0044))\\s?\\d{2}|\\(?0\\d{2}\\)?)\\s?\\d{4}\\s?\\d{4}))(\\s?\\\\#(\\d{4}|\\d{3}))?$',
+          // pattern: '^(((((\\+44)|(0044))\\s?\\d{4}|\\(?0\\d{4}\\)?)\\s?\\d{3}\\s?\\d{3})|((((\\+44)|(0044))\\s?\\d{3}|\\(?0\\d{3}\\)?)\\s?\\d{3}\\s?\\d{4})|((((\\+44)|(0044))\\s?\\d{2}|\\(?0\\d{2}\\)?)\\s?\\d{4}\\s?\\d{4}))(\\s?\\\\#(\\d{4}|\\d{3}))?$',
         },
       ],
     },

package/src/components/MarketingConsent/MarketingConsentCheckbox.js

@@ -222,8 +222,8 @@ class MarketingConsentCheckbox extends Component {
                   showErrorMessage={this.props.showErrorMessages}
                   fieldValue={this.state.checkboxValidation[checkbox].fieldValidation[field.name]}
                   value={() => this.fieldValue(checkbox, field.name)}
-                  // Only use our improved Yup-based validation for email
-                  yupValidation={field.type === 'email'}
+                  // Only use our improved Yup-based validation for the problematic fields
+                  yupValidation={field.type === 'email' || field.type === 'tel'}
                 />
               </div>
             ))