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 ( +
+ {children} +
+ ); + } +} + +FormColumn.defaultProps = { + baseClass: 'form__column', + errorModifier: 'has-error', + className: null, + errors: {}, + modifiers: [] +}; + +FormColumn.propTypes = { + baseClass: React.PropTypes.string, + className: React.PropTypes.oneOfType([React.PropTypes.string, + React.PropTypes.array, React.PropTypes.object]), + errorModifier: React.PropTypes.string, + errors: React.PropTypes.object, + modifiers: React.PropTypes.arrayOf(React.PropTypes.string) +}; + +export default FormColumn; diff --git a/client/scripts/components/General/FormElements/FormLabel.js b/client/scripts/components/General/FormElements/FormLabel.js new file mode 100644 index 00000000..d982ec14 --- /dev/null +++ b/client/scripts/components/General/FormElements/FormLabel.js @@ -0,0 +1,42 @@ +import classnames from 'classnames'; +import React from 'react'; + +import ErrorIcon from '../../Icons/ErrorIcon'; +import Tooltip from '../Tooltip'; + +class FormLabel extends React.Component { + render() { + let {baseClass, className, error} = this.props; + let classes = classnames(baseClass, className); + let tooltip = null; + + if (error) { + tooltip = ( + + + + ); + } + + return ( + + ); + } +} + +FormLabel.defaultProps = { + baseClass: 'form__label', + className: null +}; + +FormLabel.propTypes = { + baseClass: React.PropTypes.string, + className: React.PropTypes.oneOfType([React.PropTypes.string, + React.PropTypes.array, React.PropTypes.object]) +}; + +export default FormLabel;