Merge pull request #10 from renanborgez/renan/adornments

Add start and end adornments

Author: renanborgez

README.md

@@ -92,10 +92,13 @@ You can provide a custom `className` to the Nice Input Password and custom `clas
 | name | string | undefined | The name used on input element `name={name}` |
 | placeholder | string | (empty string) | The placeholder used on input element `placeholder={placeholder}` |
 | className | string | (empty string) | Optional class to be passed to niceinputpassword context |
+| style | object | undefined | Optional style to be passed to input field |
 | normalClassName | string | 'none' | The className used on level color
 | dangerClassName | string | 'danger' | The className used on level color
 | warningClassName | string | 'warning' | The className used on level color
 | successClassName | string | 'success' | The className used on level color
+| startAdornment | ReactNode | undefined | Start adornment for this component
+| endAdornment | ReactNode | undefined | End adornment for this component
 | value | string | undefined | The value to be renderized on element
 | showSecurityLevelBar | bool | false | Key to show or not the security level bullets of password
 | showSecurityLevelDescription | bool | false | Key to show or not the security level description securityLevels object
@@ -104,7 +107,7 @@ You can provide a custom `className` to the Nice Input Password and custom `clas
 
 ## License
 
-MIT Licensed. Copyright (c) Renan Borges 2018.
+MIT Licensed. Copyright (c) Renan Borges.
 
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Frenanborgez%2Freact-nice-input-password.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Frenanborgez%2Freact-nice-input-password?ref=badge_large)

public/index.jsx

@@ -73,6 +73,21 @@ class App extends React.Component {
           onChange={this.handleChange}
         />
         <hr />
+
+        <h2>With start and end adornment</h2>
+        <NiceInputPassword
+          label="Password"
+          name="pass4"
+          showSecurityLevelBar
+          showSecurityLevelDescription
+          securityLevels={securityLevels}
+          value={this.state.pass4}
+          onChange={this.handleChange}
+          style={{ paddingLeft: 15 }}
+          startAdornment={<div style={{ position: 'absolute', top: 2, left: 5 }}>Ξ</div>}
+          endAdornment="OK"
+        />
+        <hr />
       </div>
     );
   }

src/NiceInputPassword.jsx

@@ -11,7 +11,10 @@ const propTypes = {
   ]).isRequired,
   name: PropTypes.string.isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   value: PropTypes.string,
+  startAdornment: PropTypes.node,
+  endAdornment: PropTypes.node,
   showSecurityLevelBar: PropTypes.bool,
   showSecurityLevelDescription: PropTypes.bool,
   normalClassName: PropTypes.string,
@@ -37,6 +40,7 @@ const defaultProps = {
   value: '',
   className: '',
   placeholder: '',
+  style: null,
   showSecurityLevelBar: false,
   showSecurityLevelDescription: false,
   securityLevels: [],
@@ -45,6 +49,8 @@ const defaultProps = {
   warningClassName: 'warning',
   successClassName: 'success',
   onChange: () => {},
+  startAdornment: null,
+  endAdornment: null,
 };
 
 class NiceInputPassword extends React.Component {
@@ -103,6 +109,9 @@ class NiceInputPassword extends React.Component {
       className,
       value,
       placeholder,
+      startAdornment,
+      endAdornment,
+      style,
     } = this.props;
 
     let inputClassName = '';
@@ -164,6 +173,9 @@ class NiceInputPassword extends React.Component {
           placeholder={placeholder}
           className={inputClassName}
           value={value}
+          style={style}
+          startAdornment={startAdornment}
+          endAdornment={endAdornment}
           onChange={this.handleChange}
         />
         {securityLevels && securityLevels.length > 0 ? (

src/NiceInputPassword.scss

@@ -27,7 +27,6 @@ $font-size-small: 12px;
     input {
       box-sizing: border-box;
       display: block;
-      margin: 5px 0 10px;
 
       &:focus {
         outline: none;
@@ -40,6 +39,13 @@ $font-size-small: 12px;
       }
     }
 
+    &__field {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+    }
+
     &__description {
       list-style: none;
       padding: 0;

src/components/InputLabel.jsx

@@ -8,15 +8,21 @@ const propTypes = {
     PropTypes.element,
   ]).isRequired,
   className: PropTypes.string,
+  style: PropTypes.object,
   placeholder: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  startAdornment: PropTypes.node,
+  endAdornment: PropTypes.node,
 };
 
 const defaultProps = {
   placeholder: '',
   value: '',
   className: '',
+  style: null,
+  startAdornment: null,
+  endAdornment: null,
 };
 
 const InputLabel = ({
@@ -25,19 +31,27 @@ const InputLabel = ({
   placeholder,
   value,
   className,
+  startAdornment,
+  endAdornment,
+  style,
   onChange,
 }) => (
   <label htmlFor={name} className={className}>
     {label}
-    <input
-      name={name}
-      id={name}
-      className={className}
-      value={value}
-      type="password"
-      placeholder={placeholder}
-      onChange={onChange}
-    />
+    <div className="input-password__field">
+      {startAdornment && <div className="input-password__startAdornment">{startAdornment}</div>}
+      <input
+        name={name}
+        id={name}
+        className={className}
+        value={value}
+        type="password"
+        style={style}
+        placeholder={placeholder}
+        onChange={onChange}
+      />
+      {endAdornment && <div className="input-password__endAdornment">{endAdornment}</div>}
+    </div>
   </label>
 );
 

src/components/InputLabel.test.jsx

@@ -24,16 +24,22 @@ describe('components', () => {
         placeholder="myPlaceholder"
         onChange={() => {}}
         value="myValue"
+        startAdornment={<div className="start-adorn">A</div>}
+        endAdornment={<div className="end-adorn">B</div>}
       />, div);
 
       const input = div.querySelector('#myName');
       const label = div.querySelector('label');
+      const startAdornment = div.querySelector('.start-adorn');
+      const endAdornment = div.querySelector('.end-adorn');
 
-      expect(label.textContent).toBe('myLabel');
+      expect(label.textContent).toContain('myLabel');
       expect(label.htmlFor).toBe('myName');
       expect(input.name).toBe('myName');
       expect(input.value).toBe('myValue');
       expect(input.placeholder).toBe('myPlaceholder');
+      expect(startAdornment.textContent).toBe('A');
+      expect(endAdornment.textContent).toBe('B');
     });
 
     it('calls onChange handler', () => {