Merge pull request #94 from codaco/fix/88-disabled-form-selectors

Use disabled state for unusable sections of the form selector

src/components/Form/Fields/Contexts.js

@@ -14,8 +14,8 @@ class Contexts extends Component {
     className: PropTypes.string,
     input: PropTypes.shape({
       onChange: PropTypes.func.isRequired,
+      name: PropTypes.string.isRequired,
     }).isRequired,
-    name: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -32,8 +32,7 @@ class Contexts extends Component {
 
   renderOption = (option, index) => {
     const {
-      input: { value },
-      name,
+      input: { value, name },
     } = this.props;
     const optionValue = getValue(option);
     const optionLabel = getLabel(option);

src/components/Form/Fields/Radio.js

@@ -1,19 +1,20 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { fieldPropTypes } from 'redux-form';
 import uuid from 'uuid';
 
 class Radio extends PureComponent {
   static propTypes = {
     label: PropTypes.string,
     className: PropTypes.string,
-    ...fieldPropTypes,
+    disabled: PropTypes.bool,
+    input: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
     className: '',
     label: null,
+    disabled: false,
   };
 
   componentWillMount() {
@@ -25,12 +26,16 @@ class Radio extends PureComponent {
       label,
       className,
       input,
+      disabled,
       ...rest
     } = this.props;
 
     const componentClasses = cx(
       'form-fields-radio',
       className,
+      {
+        'form-fields-radio--disabled': disabled,
+      },
     );
 
     return (

src/components/Form/Fields/RadioGroup.js

@@ -9,7 +9,7 @@ const toString = value => (isString(value) ? value : JSON.stringify(value));
 const getValue = option => get(option, 'value', option);
 const getLabel = option => get(option, 'label', toString(getValue(option)));
 
-class Contexts extends Component {
+class RadioGroup extends Component {
   static propTypes = {
     options: PropTypes.array,
     ...fieldPropTypes,
@@ -78,6 +78,6 @@ class Contexts extends Component {
   }
 }
 
-export { Contexts };
+export { RadioGroup };
 
-export default Contexts;
+export default RadioGroup;

src/components/Form/Fields/Select.js

@@ -1,18 +1,20 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { fieldPropTypes } from 'redux-form';
 
-class Radio extends PureComponent {
+class Select extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
     options: PropTypes.array,
-    ...fieldPropTypes,
+    input: PropTypes.object,
+    children: PropTypes.node,
   };
 
   static defaultProps = {
     className: '',
     options: [],
+    input: {},
+    children: null,
   };
 
   render() {
@@ -38,4 +40,4 @@ class Radio extends PureComponent {
   }
 }
 
-export default Radio;
+export default Select;

src/components/Form/Fields/VariableChooser/VariableChooser.js

@@ -67,6 +67,7 @@ class VariableChooser extends Component {
               toPairs(values)
                 .map(([variableName]) => (
                   <ValidatedField
+                    key={variableName}
                     name={variableName}
                     component={Tag}
                     editVariable={this.editVariable}

src/components/Guided/DefaultGuidance.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { propTypes, defaultProps } from './guidedProps';
 
-const Overview = ({ children, anyActive, toggleGuidance, className, showGuidance, ...props }) => {
+const DefaultGuidance = ({
+  isActive,
+  showGuidance,
+  resetGuidance,
+  toggleGuidance,
+  anyActive,
+  children, className, ...props
+}) => {
   const sectionClasses = cx(
     className,
     'guided-default-guidance',
@@ -16,7 +24,7 @@ const Overview = ({ children, anyActive, toggleGuidance, className, showGuidance
       className={sectionClasses}
       {...props}
     >
-      <h3>Overview</h3>
+      <h3>DefaultGuidance</h3>
       { children }
       <div
         className="guided-default-guidance__toggle"
@@ -26,20 +34,16 @@ const Overview = ({ children, anyActive, toggleGuidance, className, showGuidance
   );
 };
 
-Overview.propTypes = {
+DefaultGuidance.propTypes = {
   children: PropTypes.node,
-  anyActive: PropTypes.bool,
   className: PropTypes.string,
-  showGuidance: PropTypes.func,
-  toggleGuidance: PropTypes.func,
+  ...propTypes,
 };
 
-Overview.defaultProps = {
+DefaultGuidance.defaultProps = {
   children: null,
-  anyActive: false,
   className: '',
-  showGuidance: () => {},
-  toggleGuidance: () => {},
+  ...defaultProps,
 };
 
-export default Overview;
+export default DefaultGuidance;

src/components/Guided/Editor.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { propTypes, defaultProps } from './guidedProps';
 
 const Editor = ({
   isActive,
   showGuidance,
   resetGuidance,
+  toggleGuidance,
+  anyActive,
   children,
   className,
   disabled,
@@ -33,21 +36,17 @@ const Editor = ({
 };
 
 Editor.propTypes = {
-  isActive: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,
-  showGuidance: PropTypes.func,
-  resetGuidance: PropTypes.func,
+  ...propTypes,
 };
 
 Editor.defaultProps = {
-  isActive: false,
   className: '',
   children: null,
   disabled: false,
-  showGuidance: () => {},
-  resetGuidance: () => {},
+  ...defaultProps,
 };
 
 export default Editor;

src/components/Guided/Guidance.js

@@ -1,8 +1,18 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { propTypes, defaultProps } from './guidedProps';
 
-const Guidance = ({ isActive, children, className, ...props }) => (
+const Guidance = ({
+  isActive,
+  showGuidance,
+  resetGuidance,
+  toggleGuidance,
+  anyActive,
+  children,
+  className,
+  ...props
+}) => (
   <div
     className={cx(className, 'guided-guidance', { 'guided-guidance--is-active': isActive })}
     {...props}
@@ -13,15 +23,15 @@ const Guidance = ({ isActive, children, className, ...props }) => (
 );
 
 Guidance.propTypes = {
-  isActive: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
+  ...propTypes,
 };
 
 Guidance.defaultProps = {
-  isActive: false,
   children: null,
   className: '',
+  ...defaultProps,
 };
 
 export default Guidance;

src/components/Guided/Section.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { propTypes, defaultProps } from './guidedProps';
 
 const Section = ({
   children,
   isActive,
+  anyActive,
   show,
   className,
   showGuidance,
+  toggleGuidance,
   resetGuidance,
   ...props
 }) => {
@@ -28,29 +31,25 @@ const Section = ({
       {
         React.Children.toArray(children)
           .map((child, index) => React.cloneElement(
-            child, { isActive, key: index, showGuidance, resetGuidance },
+            child, { isActive, key: index, showGuidance, anyActive, toggleGuidance, resetGuidance },
           ))
       }
     </div>
   );
 };
 
 Section.propTypes = {
-  children: PropTypes.node,
-  isActive: PropTypes.bool,
   className: PropTypes.string,
   show: PropTypes.bool,
-  showGuidance: PropTypes.func,
-  resetGuidance: PropTypes.func,
+  children: PropTypes.node,
+  ...propTypes,
 };
 
 Section.defaultProps = {
   children: null,
-  isActive: false,
   show: true,
   className: '',
-  showGuidance: () => {},
-  resetGuidance: () => {},
+  ...defaultProps,
 };
 
 export default Section;

src/components/Guided/guidedProps.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  isActive: PropTypes.bool,
+  anyActive: PropTypes.bool,
+  showGuidance: PropTypes.func,
+  toggleGuidance: PropTypes.func,
+  resetGuidance: PropTypes.func,
+};
+
+const defaultProps = {
+  isActive: false,
+  anyActive: false,
+  showGuidance: () => {},
+  toggleGuidance: () => {},
+  resetGuidance: () => {},
+};
+
+export {
+  propTypes,
+  defaultProps,
+};

src/components/Routes/Protocol/Cards/EditSkipLogic.js

@@ -26,7 +26,7 @@ class EditSkipLogic extends PureComponent {
   static propTypes = {
     show: PropTypes.bool,
     hasChanges: PropTypes.bool,
-    stageId: PropTypes.number,
+    stageId: PropTypes.string,
     onComplete: PropTypes.func,
     onCancel: PropTypes.func,
     draft: PropTypes.any.isRequired,

src/components/StageEditor/StageEditor.js

@@ -53,7 +53,7 @@ const renderSections = (interfaceSections, props) => {
 
 const renderSectionsForStageType = ({ stageType, ...rest }) => {
   const interfaceSections = getSectionsForStageType(stageType);
-  return renderSections(interfaceSections, { stageType, ...rest });
+  return renderSections(interfaceSections, { ...rest });
 };
 
 const StageEditor = ({

src/components/StageEditor/sections/ContentItems/AddContentButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../../../../ui/components';
+
+const AddContentButton = ({ onClick, type, children }) => (
+  <Button
+    type="button"
+    size="small"
+    className={`button button--small stage-editor-section-content-items__control stage-editor-section-content-items__control--${type}`}
+    onClick={onClick}
+  >
+    {children}
+  </Button>
+);
+
+AddContentButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  type: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default AddContentButton;