Merge.

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "2.0.0-rc.5",
+  "lerna": "2.0.0",
   "version": "0.0.10",
   "packages": [
     "packages/*"

package.json

@@ -58,7 +58,7 @@
     "eslint-plugin-react": "^7.0.1",
     "glob": "^7.1.1",
     "jest": "^20.0.1",
-    "lerna": "^2.0.0-rc.5",
+    "lerna": "^2.0.0",
     "prettier": "^1.3.1",
     "react-addons-test-utils": "^15.5.1",
     "rimraf": "^2.6.1",

packages/react-atlas-core/src/TextField/README.md

@@ -0,0 +1,70 @@
+###### Default textfield:
+
+    <TextField/>
+
+###### TextField with header above:
+
+    <TextField header="This is a TextField"/>
+
+###### Small textfield:
+
+    <TextField small/>
+
+###### Medium textfield:
+
+    <TextField medium/>
+
+###### Large textfield:
+
+    <TextField large/>
+
+###### Placeholder text:
+
+    <TextField placeholder="Enter product details here..."/>
+
+###### HTML5 types texfields (default: "text"):
+
+	<div>
+		<TextField type="email" header="Email"/>
+    	<TextField type="password" header="Password"/>
+    </div>
+
+###### Default or app controlled value:
+
+	<TextField value="textfield value here"/>
+
+###### Disabled textfield:
+
+    <TextField disabled/>
+
+###### Required validation:
+
+    <TextField required header="Email Address"/>
+
+###### Maximum length validation:
+
+    <TextField maxLength={20}/>
+
+###### Custom validation:
+
+    <TextField 
+    	errorText="Only numbers are allowed." 
+    	validator={ (value) => { return /^\d+$/.test(value) } } 
+    	header="Only numbers allowed"/>
+
+###### Input Mask:
+
+	<div>
+	    <TextField 
+	    	placeholder="(54) 111-1111"
+	    	mask="(54) 111-1111"
+	    	header="Phone"/>
+    	<TextField 
+	    	placeholder="ABC 1234"
+	    	mask="AAA 1111"
+	    	header="Lincese Plate"/>
+	</div>
+
+###### onChange handler:
+
+    <TextField onChange={ () => { alert('onChange executed!'); } }/>

packages/react-atlas-core/src/TextField/TextField.js

@@ -0,0 +1,211 @@
+import React, { cloneElement } from "react";
+import PropTypes from "prop-types";
+import { InputCore } from "../Input";
+import cx from "classnames";
+
+class TextField extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    // Initial state
+    this.state = {
+      "value": props.value || "",
+      "remaining": props.maxLength,
+      "active": false,
+      "valid": true
+    };
+  }
+
+  _handleChange = event => {
+    event.persist();
+    let value = event.target.value;
+
+    if (this.props.maxLength) {
+      // Keep difference between maxlength and input value in state for count
+      this.setState({ "remaining": this.props.maxLength - value.length });
+    }
+
+    // Set valid state depending on InputCore state
+    this.setState({ "valid": this.inputRef.state.isValid });
+
+    if (this.props.onChange) {
+      // Execute app code
+      this.props.onChange(event);
+    }
+  };
+
+  _handleFocus = event => {
+    this.setState({ "active": true });
+  };
+
+  _handleBlur = event => {
+    this.setState({ "active": false });
+  };
+
+  render() {
+    const {
+      name,
+      type,
+      header,
+      placeholder,
+      maxLength,
+      small,
+      medium,
+      large,
+      required,
+      validator,
+      errorText,
+      mask,
+      disabled,
+      hidden
+    } = this.props;
+
+    let textFieldHeader =
+      header &&
+      <div styleName={cx("header")}>
+        <span styleName={cx("headerFont")}>{header}</span>
+        {required && <span styleName={"error_text"}> *</span>}
+      </div>;
+
+    let wrapperClasses = cx(
+      {
+        hidden,
+        small,
+        medium,
+        large
+      },
+      "textfieldWrapper"
+    );
+
+    let textFieldClasses = cx(
+      {
+        disabled,
+        "active": this.state.active,
+        "invalid": !this.state.valid
+      },
+      "textfield"
+    );
+
+    return (
+      <div
+        styleName={wrapperClasses}
+        onFocus={this._handleFocus}
+        onBlur={this._handleBlur}
+      >
+        {textFieldHeader}
+        <InputCore
+          type={type}
+          name={name}
+          placeholder={placeholder}
+          value={this.state.value}
+          maxLength={maxLength}
+          styleName={textFieldClasses}
+          onChange={this._handleChange}
+          required={required}
+          validator={validator}
+          errorText={errorText}
+          mask={mask}
+          disabled={disabled}
+          hidden={hidden}
+          ref={node => this.inputRef = node}
+        />
+      </div>
+    );
+  }
+}
+
+TextField.PropTypes = {
+  /**
+	 * Define a custom css class name.
+	 * @examples 'textfield', 'textfield-elem'
+	 */
+  "className": PropTypes.string,
+  /**
+	 * Define a name for the text input.
+	 * @examples '<TextField name="test"/>'
+	 */
+  "name": PropTypes.string,
+  /**
+   * Define a type for the text input. Default is "text".
+   * @examples '<TextField type="password"/>'
+   */
+  "type": PropTypes.string,
+  /**
+   * Define a default value for the text input.
+   * @examples '<TextField value="Textfield value here"/>'
+   */
+  "value": PropTypes.string,
+  /**
+	 * Defines a small sized text input.
+	 * @examples '<TextField small/>'
+	 */
+  "small": PropTypes.bool,
+  /**
+   * Define a title or header to be displayed above the textfield.
+   * @examples '<TextField header="test"/>'
+   */
+  "header": PropTypes.string,
+  /**
+	 * Defines a medium sized text input.
+	 * @examples '<TextField medium/>'
+	 */
+  "medium": PropTypes.bool,
+  /**
+	 * Defines a large sized text input.
+	 * @examples '<TextField large/>'
+	 */
+  "large": PropTypes.bool,
+  /**
+   * Sets a maximum character length that will be validated onChange.
+   * @examples '<TextField maxLenght={25}/>'
+   */
+  "maxLength": PropTypes.number,
+  /**
+   * Sets a handler function to be executed and validate against. If it returns any falsy value, validation error will trigger.
+   * @examples '<TextField validator={this.customValidator}/>'
+   */
+  "validator": PropTypes.func,
+  /**
+   * Defines the error text to be shown when custom validation occurs.
+   * @examples '<TextField errorText="Custom error message."/>'
+   */
+  "errorText": PropTypes.string,
+  /**
+   * Sets a mask for the input field.
+   * @examples '<TextField mask="AAA 11111"/>'
+   */
+  "mask": PropTypes.string,
+  /**
+   * Defines placeholder text.
+   * @examples '<TextField placeholder="test input"/>'
+   */
+  "placeholder": PropTypes.string,
+  /**
+	 * Sets a handler function to be executed when onChange event occurs (at input element).
+	 * @examples <TextField onChange={this.customOnChangeFunc}/>
+	 */
+  "onChange": PropTypes.func,
+  /**
+   * Sets the field as required. Will be validated onChange.
+   * @examples '<TextField required/>'
+   */
+  "required": PropTypes.bool,
+  /**
+	 * Determines if the text input is disabled.
+	 * @examples '<TextField disabled/>'
+	 */
+  "disabled": PropTypes.bool,
+  /**
+	 * Determines if the text input is hidden.
+	 * @examples '<TextField hidden/>'
+	 */
+  "hidden": PropTypes.bool
+};
+
+TextField.defaultProps = {
+  "className": "",
+  "type": "text",
+  "disabled": false,
+  "hidden": false
+};
+
+export default TextField;

packages/react-atlas-core/src/TextField/index.js

@@ -0,0 +1,2 @@
+import { default as TextFieldCore } from "./TextField";
+export { TextFieldCore };

packages/react-atlas-core/src/index.js

@@ -12,3 +12,4 @@ export { TableCore } from "./Table";
 export { TooltipCore } from "./Tooltip";
 export { HintCore } from "./Hint";
 export { TextAreaCore } from "./TextArea";
+export { TextFieldCore } from "./TextField";

packages/react-atlas-default-theme/src/TextField/index.js

@@ -0,0 +1,2 @@
+import * as TextFieldStyle from "./textfield.css";
+export { TextFieldStyle };

packages/react-atlas-default-theme/src/TextField/textfield.css

@@ -0,0 +1,58 @@
+.textfield {
+	composes: primary-gray-border from '../styles.css';
+	width: 100%;
+	padding: 5px;
+}
+
+.textfieldWrapper {
+	width: 99%;
+	composes: default-font from '../styles.css';
+}
+
+.header {
+	padding: 10px 0 5px 0;
+}
+
+.headerFont {
+	composes: header-font from '../styles.css';
+}
+
+.small {
+	width: 30%;
+}
+
+.medium {
+	width: 60%;
+}
+
+.large {
+	width: 90%;
+}
+
+.active {
+	composes: text-input-active from '../styles.css';
+}
+
+.invalid {
+	composes: text-input-invalid from '../styles.css';
+}
+
+.invalid + span {
+	color: #bd0a33;
+}
+
+.disabled {
+	composes: cursor-not-allowed from '../styles.css';
+	pointer-events: none;
+	background-color: #ccc;
+}
+
+.hidden {
+	display: none;
+	visibility: hidden;
+}
+
+.error_text {
+  composes: header-font from '../styles.css';
+  color: #BD0A33;
+}

packages/react-atlas-default-theme/src/index.js

@@ -11,4 +11,5 @@ export { TableStyle } from "./Table";
 export { SwitchStyle } from "./Switch";
 export { TooltipStyle } from "./Tooltip";
 export { HintStyle } from "./Hint";
-export { TextAreaStyle } from "./TextArea";
+export { TextAreaStyle } from "./TextArea";
+export { TextFieldStyle } from "./TextField";

packages/react-atlas/src/codegen.config.js

@@ -159,7 +159,8 @@ let components = [
   "table",
   "tooltip",
   "hint",
-  "textArea"
+  "textArea",
+  "textField"
 ];
 
 module.exports = {

packages/react-atlas/styleguide.config.js

@@ -10,7 +10,7 @@ module.exports = {
 
   // Use this to test a single component.  Change it to the component you are testing and restart the styleguide server
   // Regex should be: 'src/components/NAME_OF_COMPONENT_FOLDER/[A-Z]*.js'
-  components: 'src/components/**/[Avatar|Button|Card|Checkbox|CheckboxGroup|Dropdown|Hint|Input|Switch|Radio|RadioGroup|TextArea]*.js',
+  components: 'src/components/**/[Avatar|Button|Card|Checkbox|CheckboxGroup|Dropdown|Hint|Input|Switch|Radio|RadioGroup|TextArea|TextField]*.js',
   ignore: ['**/__tests__/**', '**/*.test.js', '**/*.test.jsx', '**/*.spec.js', '**/*.spec.jsx', '**/index.js'],
   contextDependencies: [
     '../react-atlas-core/src',