Merge pull request #133 from jav7zaid/master

feat(password): implement input type='password' capability

Author: 100stacks

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;

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>
+    </>
+  );
+});