Add password fields

asset-manifest.json

@@ -0,0 +1,5 @@
+{
+  "http://localhost:3001/main.js": "http://localhost:3001/static/js/bundle.js",
+  "http://localhost:3001/main.js.map": "http://localhost:3001/static/js/bundle.js.map",
+  "http://localhost:3001/static/media/logo.svg": "http://localhost:3001/static/media/logo.83748054.svg"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caldera-labs/components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "dependencies": {
     "@helpdotcom/is": "^3.0.4",
     "classnames": "^2.2.6",

src/App.js

@@ -318,6 +318,9 @@ class App extends Component {
 								label: 'Two'
 							}
 						]}
+						onValueChange={(newValue) => {
+							console.log(newValue);
+						}}
 					/>
 
 				</div>

src/components/fields/FieldGroup.js

@@ -11,6 +11,7 @@ import {Message} from './messages/Message';
 import {messageObjectFactory} from './messages/messageObjectFactory';
 import {fieldsetCheckboxHandler} from './field-group-change-handlers/fieldsetCheckboxHandler';
 import {MagicFieldGroup} from './magic-select/MagicFieldGroup';
+import {PasswordFieldGroup} from "./PasswordFieldGroup";
 
 /**
  * Represents one configField -- wrapper, label and input.
@@ -24,6 +25,9 @@ export const FieldGroup = (props) => {
 		return <MagicFieldGroup {...props} />;
 	}
 
+	if( 'password' === props.type ){
+		return <PasswordFieldGroup {...props } />;
+	}
 	/**
 	 * Creates the id attribute
 	 * @return {String}

src/components/fields/PasswordFieldGroup.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import classNames from 'classnames';
+import {ariaDescribedbyAttr} from './util';
+import {
+	fieldGroupPropTypes,
+} from './propTypes';
+import {FieldGroup} from "./FieldGroup";
+import {FieldInner} from './FieldInner';
+import {RenderGroup} from '../RenderGroup';
+import {Message} from './messages/Message';
+import {messageObjectFactory} from './messages/messageObjectFactory';
+import {Password} from "./input/password";
+
+/**
+ * Represents one configField -- wrapper, label and input.
+ *
+ * @param props
+ * @return {*}
+ * @constructor
+ */
+export const PasswordFieldGroup = (props) => {
+
+	/**
+	 * Creates the id attribute
+	 * @return {String}
+	 */
+	function idAttrForHelpElement() {
+		return ariaDescribedbyAttr(props.id, props.help);
+	}
+
+	const message = 'object' === typeof  props.message
+		? messageObjectFactory(props.message)
+		: messageObjectFactory({message: null, error: false});
+
+	return (
+		<div
+			className={RenderGroup.classNames.fieldWrapper}
+		>
+			<FieldGroup.Label
+				id={props.id}
+				label={props.label}
+			/>
+
+			<Message
+				message={message}
+			/>
+			<Password
+				id={props.id}
+				type={'password'}
+				help={props.help}
+				onClick={props.onClick}
+				disabled={props.disabled}
+				onFocus={props.onFocus}
+				onBlur={props.onBlur}
+				fieldClassName={
+					classNames(
+						props.fieldClassName,
+						{
+							required: props.isRequired,
+						}
+					)
+				}
+			/>
+
+			{props.help &&
+			<p
+				id={`${idAttrForHelpElement()}`}
+				className={'description'}
+			>
+				{props.help}
+			</p>
+			}
+		</div>
+	);
+
+
+};
+
+/**
+ * The prop type definitions for FieldGroup components
+ *
+ * @type {{id: (boolean|shim|*), isBlockInput: shim, isRequired: shim, help: shim, label: (boolean|shim|*), type: shim, value: shim, onValueChange: (boolean|shim|*), inputType: shim}}
+ */
+PasswordFieldGroup.propTypes = fieldGroupPropTypes;
+
+/**
+ * Default props for FieldGroups
+ *
+ * @type {{isBlockInput: boolean, isRequired: boolean, help: string}}
+ */
+PasswordFieldGroup.defaultProps = {
+	isBlockInput: true,
+	isRequired: false,
+	help: ''
+};

src/components/fields/factories/fieldFactory.test.js

@@ -3,7 +3,7 @@ import {
 } from './fieldFactory';
 import {prepareFieldConfig} from './prepareFieldConfig';
 import {fieldSetFactory} from './fieldSetFactory';
-import {getHtmlInputTypes} from '../util';
+import {getHtmlInputTypes, isValidHtml5type} from '../util';
 import {mount} from 'enzyme';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -27,6 +27,8 @@ const hiddenFieldConfig = {
 	'description': false
 };
 
+
+
 const magicField = {
 	'id': 'cf-magic-example',
 	'type': 'magic',
@@ -106,7 +108,17 @@ configFields.map(config => {
 
 describe('Factories', () => {
 	describe('Field factory', () => {
+		const passwordFieldConfig = {
+			'id': 'your-password',
+			'type': 'password',
+			'label': 'Password',
+			'description': false,
+			'help': ''
+		};
 
+		it( 'Can be a password field', () => {
+			expect(prepareFieldConfig(passwordFieldConfig).type).toEqual('password' );
+		});
 		it('validators array is empty array if none supplied', () => {
 			expect(prepareFieldConfig(textFieldConfig).validators).toEqual([]);
 		});
@@ -148,7 +160,6 @@ describe('Factories', () => {
 						value: '2',
 						label: 'Two'
 					}
-
 				],
 				value: [],
 				onValueChange: () => {
@@ -189,7 +200,6 @@ describe('Factories', () => {
 
 		it('passes the field options for select fields', () => {
 			expect(prepareFieldConfig(selectFieldConfig).options).toEqual(selectFieldOptions);
-
 		});
 
 		it('Changes "dropdown" to select', () => {

src/components/fields/factories/prepareFieldConfig.js

@@ -55,7 +55,14 @@ export const prepareFieldConfig = (fieldArgs) => {
 	case 'number':
 	default:
 		fieldArgs.inputType = isValidHtml5type(fieldArgs.type) ? fieldArgs.type : 'text';
-		fieldArgs.type = 'input';
+		if ('password' === fieldArgs.type || 'password' === fieldArgs.inputType ) {
+			fieldArgs.type = 'password';
+			fieldArgs.inputType = 'password';
+
+		} else {
+			fieldArgs.type = 'input';
+
+		}
 		break;
 	}
 
@@ -78,6 +85,7 @@ export const prepareFieldConfig = (fieldArgs) => {
 		? messageObjectFactory(fieldArgs.message)
 		: messageObjectFactory({message:null, error: false });
 
+
 	fieldArgs.validators = validators;
 	return fieldArgs;
 };

src/components/fields/input/Password.test.js

@@ -0,0 +1,70 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import {shallow} from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {Password} from './Password';
+import {FieldGroup} from "../FieldGroup";
+
+Enzyme.configure({adapter: new Adapter()});
+
+describe('Input component', () => {
+	it('Passes its props', () => {
+		const component = renderer.create(
+			<Password
+				id={'bags'}
+				fieldClassName={'foo'}
+				onValueChange={() => {
+				}}
+			/>
+		);
+		expect(component.toJSON()).toMatchSnapshot();
+	});
+
+	describe('Password component rendering', () => {
+
+		it( 'passes value to change handler', () => {
+			let receivedValue = '';
+			const handler = (newValue) => {
+				receivedValue = newValue;
+			};
+			const wrapper = shallow(
+				<Password
+					id={'password2'}
+					fieldClassName={'password'}
+					onValueChange={handler}
+					value={receivedValue}
+				/>
+			);
+			wrapper.find('#password2').simulate('change', { target: { value: '12345' } });
+			expect(receivedValue).toBe('12345');
+			//expect(wrapper.find('input').prop('type')).toBe('password');
+		});
+
+		it( 'Renders in FieldGroup', () => {
+
+			const wrapper = shallow(
+				<FieldGroup
+					id={'password3'}
+					label={'password'}
+					type={'password'}
+					innertype={'password'}
+					isRequired={true}
+					value={'12345'}
+					onValueChange={() => {
+
+					}}
+					help={'aaa'}
+
+				/>
+			)
+			expect(wrapper.find('#password3').prop('type')).toBe('password');
+		});
+
+	});
+
+
+});
+
+
+

src/components/fields/input/__snapshots__/Password.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input component Passes its props 1`] = `
+<input
+  aria-describedby=""
+  className="foo field-config"
+  disabled={undefined}
+  id="bags"
+  onBlur={undefined}
+  onChange={[Function]}
+  onFocus={undefined}
+  required={false}
+  type="password"
+  value={undefined}
+/>
+`;

src/components/fields/input/password.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import {fieldPropTypes} from '../propTypes';
+import classNames from 'classnames';
+import {RenderGroup} from '../../RenderGroup';
+/**
+ * Password input component
+ *
+ * @param {Object} props
+ * @returns {*}
+ * @constructor
+ */
+export const Password = (props) => {
+
+	/**
+	 * Dispatches value of input when it changes
+	 * @param event
+	 * @return {*}
+	 */
+	function changeHandler(event){
+		return props.onValueChange(event.target.value);
+	}
+
+	return (
+		<input
+			type={'password'}
+			id={props.id}
+			className={classNames(
+				props.fieldClassName,
+				RenderGroup.classNames.input
+			)}
+			aria-describedby={props.ariaDescribedbyAttr}
+			required={props.isRequired}
+			onChange={changeHandler}
+			value={props.value}
+			disabled={props.disabled}
+			onBlur={props.onBlur}
+			onFocus={props.onFocus}
+		/>
+	);
+
+}
+
+
+/**
+ * Prop definitions for Password components
+ */
+Password.propTypes = fieldPropTypes;
+
+/**
+ * Default props for Password Component
+ *
+ * @type {{ariaDescribedbyAttr: string, isRequired: boolean, inputType: string}}
+ */
+Password.defaultProps = {
+	ariaDescribedbyAttr: '',
+	isRequired: false,
+	inputType: 'text'
+};

src/components/fields/propTypes.js

@@ -37,7 +37,7 @@ export const fieldGroupPropTypes = {
 	isRequired: PropTypes.bool,
 	help: PropTypes.string,
 	label: PropTypes.string.isRequired,
-	type: PropTypes.oneOf(['input', 'select', 'fieldset', 'magic']),
+	type: PropTypes.oneOf(['input', 'select', 'fieldset', 'magic', 'password']),
 	value: valuePropType,
 	onValueChange: onValueChangePropType,
 	options: PropTypes.array,