@comicrelief/storybook 2.4.1 → 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.4.1",
+  "version": "2.5.2",
   "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',
@@ -37,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

@@ -159,15 +159,19 @@ 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" >
           {
             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>
@@ -175,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)}
@@ -183,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>