Merge pull request #104 from jfurrow/feature/update-form-components

Add FormColumn and FormLabel, extend others

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;

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;

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 (
+      <div className={classes}>
+        {children}
+      </div>
+    );
+  }
+}
+
+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;

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 = (
+        <Tooltip className="tooltip tooltip--is-error" content={error}
+          offset={-5}>
+          <ErrorIcon />
+        </Tooltip>
+      );
+    }
+
+    return (
+      <label className={classes}>
+        {this.props.children}
+        {tooltip}
+      </label>
+    );
+  }
+}
+
+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;