diff --git a/client/scripts/components/General/FormElements/Checkbox.js b/client/scripts/components/General/FormElements/Checkbox.js index 9c6b48d8..a0864928 100644 --- a/client/scripts/components/General/FormElements/Checkbox.js +++ b/client/scripts/components/General/FormElements/Checkbox.js @@ -23,6 +23,10 @@ export default class Checkbox extends React.Component { } } + getValue() { + return this.state.checked; + } + handleCheckboxChange() { let currentCheckedState = this.state.checked; let newCheckedState = !currentCheckedState; diff --git a/client/scripts/components/General/FormElements/Dropdown.js b/client/scripts/components/General/FormElements/Dropdown.js index dfde564f..78055e58 100644 --- a/client/scripts/components/General/FormElements/Dropdown.js +++ b/client/scripts/components/General/FormElements/Dropdown.js @@ -147,6 +147,11 @@ class Dropdown extends React.Component { render() { let dropdownWrapperClass = classnames(this.props.dropdownWrapperClass, { + [`${this.props.dropdownWrapperClass}--match-button-width`]: + this.props.matchButtonWidth, + [`${this.props.dropdownWrapperClass}--width-${this.props.width}`]: + this.props.width != null, + [`${this.props.dropdownWrapperClass}--no-wrap`]: this.props.nowrap, 'is-expanded': this.state.isOpen }); @@ -172,14 +177,19 @@ class Dropdown extends React.Component { Dropdown.defaultProps = { dropdownWrapperClass: 'dropdown', - dropdownButtonClass: 'dropdown__trigger' + dropdownButtonClass: 'dropdown__trigger', + matchButtonWidth: false, + noWrap: false }; Dropdown.propTypes = { header: React.PropTypes.node, trigger: React.PropTypes.node, + matchButtonWidth: React.PropTypes.bool, menuItems: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.object)).isRequired, - onOpen: React.PropTypes.func + noWrap: React.PropTypes.bool, + onOpen: React.PropTypes.func, + width: React.PropTypes.oneOf(['small', 'medium', 'large']) }; export default Dropdown; diff --git a/client/scripts/components/General/FormElements/FormColumn.js b/client/scripts/components/General/FormElements/FormColumn.js new file mode 100644 index 00000000..3f1a0b84 --- /dev/null +++ b/client/scripts/components/General/FormElements/FormColumn.js @@ -0,0 +1,40 @@ +import classnames from 'classnames'; +import React from 'react'; + +class FormColumn extends React.Component { + render() { + let {baseClass, children, classNames, error, errorModifier, modifiers} + = this.props; + let classes = classnames(baseClass, classNames, + {[`${baseClass}--${errorModifier}`]: error}, + modifiers.reduce((memo, modifier) => { + return `${memo} ${baseClass}--${modifier}`; + }, '') + ); + + return ( +