Merge pull request #923 from wyvl/techcnial/INT-14666-add-type-props-to-enable-password-input

Add type props to enable password input

Author: andrewhillcode

src/domain/Inputs/TextInput/TextInput.examples.md

@@ -133,3 +133,15 @@ initialState = { value: 'I have a custom width 500px' };
 />
 ```
 
+#### Password Input
+
+```jsx
+initialState = { textValue: '1234567890' };
+
+<TextInput
+  type='password'
+  value={state.textValue}
+  onChange={(value) => {setState({textValue: value})}}
+/>
+```
+

src/domain/Inputs/TextInput/TextInput.test.tsx

@@ -153,4 +153,17 @@ describe('<TextInput />', () => {
 
     expect(wrapper).toMatchSnapshot()
   })
+
+  it(`should render an password input`, () => {
+    const wrapper = shallow(
+      <TextInput
+        type='password'
+        value='test'
+        name='test'
+        onChange={dummyFunction}
+      />
+    )
+
+    expect(wrapper).toMatchSnapshot()
+  })
 })

src/domain/Inputs/TextInput/TextInput.tsx

@@ -24,6 +24,8 @@ interface ITextInputProps {
   onChange?: (value: string) => void
   /** Value of the input */
   value?: string | number
+  /** Type of the input */
+  type?: 'text' | 'password'
   /** If true, sets input to disabled state */
   isDisabled?: boolean
   /** Icon to display in the input box */
@@ -130,14 +132,15 @@ class TextInput extends React.PureComponent<ITextInputProps> {
       width,
       componentContext,
       margins,
+      type,
       'aria-label': label
     } = this.props
 
     return (
       <StyledTextInput
         id={id || name}
         name={name}
-        type='text'
+        type={type ? type : 'text'}
         value={value}
         onChange={this.handleChange}
         onKeyDown={handleKeyDown}

src/domain/Inputs/TextInput/__snapshots__/TextInput.test.tsx.snap

@@ -53,6 +53,19 @@ exports[`<TextInput /> should render an invalid text input 1`] = `
 />
 `;
 
+exports[`<TextInput /> should render an password input 1`] = `
+<styled.input
+  className="input "
+  data-component-type="text_input"
+  id="test"
+  name="test"
+  onChange={[Function]}
+  onFocus={[Function]}
+  type="password"
+  value="test"
+/>
+`;
+
 exports[`<TextInput /> should render an text input 1`] = `
 <styled.input
   className="input "