adds sensitive info check on input tag

src/elements/Input/Input.js

@@ -30,6 +30,7 @@ const Input = ({
 	checked,
 	rows,
 	defaultValue,
+	value,
 	...other
 }) => {
 	const combinedClasses = classNames(
@@ -40,6 +41,9 @@ const Input = ({
 		}
 	);
 
+	// Checks for SSN and CC#s that 9-19 characters long, ignoring dashes and spaces
+	const redactedText = value?.replace(/(\d[ -]*){9,19}/, '[REDACTED]');
+
 	if(type === 'select') {
 		return (
 			<Fragment>
@@ -52,6 +56,7 @@ const Input = ({
 				<div className={classNames('ui-select-wrap', { bare })}>
 					<Common
 						{...other}
+						value={value}
 						id={id}
 						name={name}
 						classes={combinedClasses}
@@ -79,6 +84,7 @@ const Input = ({
 			<Fragment>
 				<Common
 					{...other}
+					value={value}
 					classes={combinedClasses}
 					tag="input"
 					type={type}
@@ -95,8 +101,8 @@ const Input = ({
 			</Fragment>
 		);
 	}
-
 	if(type === 'textarea') {
+
 		return (
 			<Fragment>
 				{label &&
@@ -107,6 +113,7 @@ const Input = ({
 
 				<Common
 					{...other}
+					value={redactedText}
 					classes={combinedClasses}
 					tag="textarea"
 					name={name}
@@ -127,6 +134,7 @@ const Input = ({
 
 			<Common
 				{...other}
+				value={redactedText}
 				classes={combinedClasses}
 				tag="input"
 				name={name}
@@ -147,6 +155,7 @@ Input.propTypes = {
 	bare: PropTypes.bool,
 	name: PropTypes.string.isRequired,
 	defaultValue: PropTypes.string,
+	value: PropTypes.string,
 	rows: PropTypes.oneOfType([
 		PropTypes.string,
 		PropTypes.number

src/elements/SSNInput/SSNInput.js

@@ -0,0 +1,103 @@
+/**
+ * SNN Input
+ */
+
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Common from '../Common/Common';
+
+const formatSSN = (ssn) =>  {
+	const numValue = ssn.replace(/[^0-9]/g, '').substr(-9),
+		numGroups = numValue.match(/([0-9]{0,3}){1}([0-9]{0,2})?([0-9]{0,4})?/);
+
+	let formattedSSN = '';
+
+	if (!numGroups) return formattedSSN;
+
+	if (numGroups[1]) formattedSSN = numGroups[1];
+
+	if (numGroups[1].length === 3 && numGroups[2]) {
+		formattedSSN += '-';
+	}
+
+	if (numGroups[2]) {
+		formattedSSN += numGroups[2];
+
+		if (numGroups[2].length === 2 && numGroups[3]) {
+			formattedSSN += '-';
+		}
+	}
+
+	if (numGroups[3]) {
+		formattedSSN += numGroups[3];
+	}
+
+	return formattedSSN;
+}
+
+/* eslint-disable react/prop-types */
+const Label = ({ children, htmlFor }) => (
+	<Common
+		tag="label"
+		className="ui-input-label"
+		htmlFor={htmlFor}
+	>
+		{children}
+	</Common>
+);
+/* eslint-enable */
+
+const SSNInput = ({
+	type,
+	label,
+	bare,
+	name,
+	id,
+	value,
+	...other
+}) => {
+	const combinedClasses = classNames(
+		'ui-input',
+		other.classes,
+		{
+			bare
+		}
+	);
+
+
+	return (
+		<Fragment>
+			{label &&
+				<Label htmlFor={other.id}>
+					{label}
+				</Label>
+			}
+
+			<Common
+				{...other}
+				value={formatSSN(value)}
+				classes={combinedClasses}
+				tag="input"
+				name={name}
+				id={id}
+				type={type}
+			/>
+		</Fragment>
+	);
+};
+
+Label.propTypes = {
+	children: PropTypes.node.isRequired
+};
+
+SSNInput.propTypes = {
+	type: PropTypes.string,
+	name: PropTypes.string.isRequired,
+	value: PropTypes.string,
+	/** Placeholder for input */
+	placeholder: PropTypes.string,
+};
+
+export default SSNInput;

src/index.js

@@ -19,6 +19,7 @@ export { default as Modal } from './elements/Modal/Modal';
 export { default as ModalProvider } from './elements/ModalProvider/ModalProvider';
 export { default as ProgressBar } from './elements/ProgressBar/ProgressBar';
 export { default as Accordion } from './elements/Accordion/Accordion';
+export { default as SSNInput } from './elements/SSNInput/SSNInput';
 
 export { getBreakpoint } from './util/helpers';
 export { isMobile } from './util/helpers';