From 2558034e0d2bc5642dc66fd0945d073d5777aca2 Mon Sep 17 00:00:00 2001
From: Javed Khan <javed.khan@rackspace.com>
Date: Fri, 12 Mar 2021 19:03:12 +0530
Subject: [PATCH] add type password capability

---
 src/PasswordText/index.js   | 44 +++++++++++++++++++++++++++++++++++++
 src/PasswordText/stories.js | 34 ++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 src/PasswordText/index.js
 create mode 100644 src/PasswordText/stories.js

diff --git a/src/PasswordText/index.js b/src/PasswordText/index.js
new file mode 100644
index 0000000..ba04a3f
--- /dev/null
+++ b/src/PasswordText/index.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const Password = React.forwardRef(
+  ({ id, label, invalid, className, required, children, style, placeholder, ...rest }, ref) => {
+    return (
+      <hx-password-control
+        class={classnames(className, { hxInvalid: invalid })}
+        style={style}
+        ref={ref}
+      >
+        <input {...rest} id={id} required={required} placeholder={placeholder} type="password" />
+        <label
+          className={classnames({
+            hxRequired: required,
+          })}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+        {children}
+      </hx-password-control>
+    );
+  }
+);
+
+Password.displayName = 'Password';
+
+Password.propTypes = {
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default Password;
diff --git a/src/PasswordText/stories.js b/src/PasswordText/stories.js
new file mode 100644
index 0000000..ddde765
--- /dev/null
+++ b/src/PasswordText/stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs/react';
+import { addParameters, storiesOf } from '@storybook/react';
+import Password from './index';
+import { callback, InputContainer } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 2 },
+});
+
+storiesOf('Password', module).add('All Knobs', () => {
+  let disabled = boolean('disabled', false);
+  let required = boolean('required', false);
+  let invalid = boolean('invalid', false);
+  let label = text('label', 'Password Text Label');
+  let placeholder = text('placeholder', 'Enter Password');
+
+  return (
+    <>
+      <InputContainer>
+        <Password
+          id="passwordInputDemo"
+          {...(label && { label })}
+          {...(disabled && { disabled })}
+          {...(required && { required })}
+          {...(invalid && { invalid })}
+          {...(placeholder && { placeholder })}
+          onChange={callback(action('onChange'))}
+        />
+      </InputContainer>
+    </>
+  );
+});