@comicrelief/storybook 2.4.0 → 2.5.0

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.5.0",
   "dependencies": {
     "@snyk/protect": "^1.1060.0",
     "@storybook/addon-info": "3",

package/src/components/MarketingConsent/FormData.js

@@ -30,6 +30,7 @@ export default {
       id: 'postConsent',
       text: 'Send me post',
       name: 'Post',
+      additionalFieldGroupInfo: '',
       options: [
         {
           label: 'Post',
@@ -116,7 +117,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 +144,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

@@ -159,10 +159,14 @@ class MarketingConsentCheckbox extends Component {
     const bgStyle = 'form__field--background';
     const customMessage = typeof item.customMessage !== 'undefined' ? item.customMessage : null;
     const subFieldShowing = !(this.state.checkboxValidation[checkbox].isFieldsHidden);
+    const additionalFieldGroupInfo = typeof item.additionalFieldGroupInfo !== 'undefined' ? item.additionalFieldGroupInfo : null;
 
     return (
       <div key={item.id} className={`form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background form__field-wrapper--${item.name} ${(subFieldShowing ? 'showing' : '')}`}>
         <p className="form__fieldset--label" aria-label={`Can we contact you by ${item.name}?`}>{item.text}</p>
+
+        { additionalFieldGroupInfo && <p className="form__fieldset--additional-info">{additionalFieldGroupInfo}</p> }
+
         { customMessage && <p>{customMessage}</p> }
         <div id={`field-wrapper--${item.name}`} className="form__field--wrapper" >
           {
@@ -222,8 +226,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>
             ))