@comicrelief/storybook 2.5.0 → 2.5.3

package/package.json

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

package/src/components/MarketingConsent/FormData.js

@@ -38,6 +38,7 @@ export default {
           name: 'permissionPost',
           hideFields: false,
           extraInfo: 'Please confirm the address we will use to <b>post</b> to you:',
+          disabled: false,
         },
       ],
       field: [

package/src/components/MarketingConsent/MarketingConsentCheckbox.js

@@ -171,7 +171,7 @@ class MarketingConsentCheckbox extends Component {
         <div id={`field-wrapper--${item.name}`} className="form__field--wrapper" >
           {
             item.options.map(option => (
-              <div key={option.value} className="form__field--wrapper form__checkbox form__checkbox--inline form__checkbox--inline-2-horizontal">
+              <div key={option.value} className={`form__field--wrapper form__checkbox form__checkbox--inline form__checkbox--inline-2-horizontal ${option.disabled && 'disabled'}`}>
                 <label className="form__field-label required" htmlFor={`field-label--${option.label}--${item.name}`} aria-label={`Can we contact you by ${item.name}?`}>
                   {option.label}
                 </label>
@@ -179,7 +179,7 @@ class MarketingConsentCheckbox extends Component {
                 <input
                   type="checkbox"
                   id={`field-label--${option.label}--${item.name}`}
-                  className="form__field form__field--checkbox"
+                  className={'form__field form__field--checkbox'}
                   name={option.name}
                   value={option.value}
                   onChange={e => this.handleCheckboxToggle(item, option, e)}
@@ -187,6 +187,7 @@ class MarketingConsentCheckbox extends Component {
                   ariarole="checkbox"
                   aria-label={`field-label--${option.label}--${item.name}`}
                   aria-checked={this.state.checkboxValidation[checkbox].value === option.value}
+                  disabled={option.disabled}
                 />
                 <span />
               </div>

package/src/components/PostcodeLookup/PostcodeLookup.js

@@ -407,6 +407,9 @@ class PostcodeLookup extends Component {
    */
   render() {
     const isBrowser = browser();
+
+    const isChrome = isBrowser.name === 'chrome';
+
     const postCodeField = {
       id: 'postcode',
       type: 'text',
@@ -417,15 +420,15 @@ class PostcodeLookup extends Component {
       invalidErrorText: this.state.currentPostcodeValidation.errorMsg,
       emptyFieldErrorText: 'Please enter your postcode',
       extraClass: 'search-box',
-      autoComplete: isBrowser.name === 'chrome' ? 'new-postcode' : 'off',
+      autoComplete: isChrome ? 'new-postcode' : 'off',
     };
     const addressPattern = /^[A-Za-z0-9]+[ _.'/&\w-]*$/;
     const addressErrorMessage = 'This field only accepts alphanumeric characters and \' . - & _ /';
     const addressOutputFields = [
-      { id: 'address1', type: 'text', label: 'Address line 1', required: true, pattern: addressPattern, invalidErrorText: addressErrorMessage },
-      { id: 'address2', type: 'text', label: 'Address line 2', required: false, pattern: addressPattern, invalidErrorText: addressErrorMessage },
-      { id: 'address3', type: 'text', label: 'Address line 3', required: false, pattern: addressPattern, invalidErrorText: addressErrorMessage },
-      { id: 'town', type: 'text', label: 'Town/City', required: true, pattern: addressPattern, invalidErrorText: addressErrorMessage },
+      { id: 'address1', type: 'text', label: 'Address line 1', required: true, pattern: addressPattern, invalidErrorText: addressErrorMessage, autoComplete: isChrome ? 'new-address-1' : 'off' },
+      { id: 'address2', type: 'text', label: 'Address line 2', required: false, pattern: addressPattern, invalidErrorText: addressErrorMessage, autoComplete: isChrome ? 'new-address-2' : 'off' },
+      { id: 'address3', type: 'text', label: 'Address line 3', required: false, pattern: addressPattern, invalidErrorText: addressErrorMessage, autoComplete: isChrome ? 'new-address-3' : 'off' },
+      { id: 'town', type: 'text', label: 'Town/City', required: true, pattern: addressPattern, invalidErrorText: addressErrorMessage, autoComplete: isChrome ? 'new-town' : 'off' },
     ];
     const supportedAriaAttributes = isBrowser.name === 'firefox' && isBrowser.os.match('Windows') ?
       { 'aria-live': 'assertive', 'aria-relevant': 'additions removals' } : { 'aria-live': 'assertive', role: 'status' };