@comicrelief/storybook 2.5.0 → 2.5.2

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.2",
   "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>