Feature/input component

src/components/Input/index.js

@@ -17,8 +17,9 @@ const Input = ({
   checked,
   customStyles,
   className,
+  width,
 }) => (
-  <styles.Container>
+  <styles.Container width={width}>
     <styles.Input
       id={id}
       name={name}
@@ -32,6 +33,7 @@ const Input = ({
       hasIcon={checked}
       customStyles={customStyles}
       className={className}
+      width={width}
     />
 
     {checked && <styles.Icon src={checkIcon} alt="Check" />}
@@ -53,6 +55,7 @@ Input.propTypes = {
   checked: PropTypes.bool,
   customStyles: PropTypes.object,
   className: PropTypes.string,
+  width: PropTypes.string,
 };
 
 Input.defaultProps = {
@@ -67,6 +70,7 @@ Input.defaultProps = {
   checked: false,
   customStyles: {},
   className: '',
+  width: '100%',
 };
 
 export default Input;

src/components/Input/style.js

@@ -29,6 +29,7 @@ export const Input = styled.input`
 
 export const Container = styled.div`
   position: relative;
+  width: ${({ width }) => width};
 `;
 
 export const Icon = styled.img`

src/components/InputCurrency/index.js

@@ -19,6 +19,7 @@ const InputCurrency = ({
   customStyles,
   checked,
   className,
+  width,
 }) => (
   <Input
     id={id}
@@ -32,6 +33,7 @@ const InputCurrency = ({
     customStyles={customStyles}
     checked={checked}
     className={className}
+    width={width}
   />
 );
 
@@ -47,6 +49,7 @@ InputCurrency.propTypes = {
   customStyles: PropTypes.object,
   checked: PropTypes.bool,
   className: PropTypes.string,
+  width: PropTypes.string,
 };
 
 InputCurrency.defaultProps = {
@@ -60,6 +63,7 @@ InputCurrency.defaultProps = {
   checked: false,
   customStyles: {},
   className: '',
+  width: '100%',
 };
 
 export default InputCurrency;

src/stories/input.js

@@ -26,6 +26,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.primary}
       placeholder="Primary style"
+      width="250px"
     />
   )))
   .add('Disabled style', customWithInfo()(state => (
@@ -34,6 +35,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.disabled}
       placeholder="Disabled style"
+      width="250px"
       disabled
     />
   )))
@@ -43,6 +45,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.error}
       placeholder="Error style"
+      width="250px"
       error
     />
   )))
@@ -52,6 +55,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.checked}
       placeholder="Checked style"
+      width="250px"
       checked
     />
   )))
@@ -61,6 +65,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.disabledChecked}
       placeholder="Disabled checked style"
+      width="250px"
       disabled
       checked
     />
@@ -71,6 +76,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.custom}
       placeholder="Custom style"
+      width="250px"
       customStyles={{
         backgroundColor: '#f1f1f1',
         color: '#118473',

src/stories/inputCurrency.js

@@ -26,6 +26,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.primary}
       placeholder="Primary style"
+      width="250px"
     />
   )))
   .add('Disabled style', customWithInfo()(state => (
@@ -34,6 +35,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.disabled}
       placeholder="Disabled style"
+      width="250px"
       disabled
     />
   )))
@@ -43,6 +45,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.error}
       placeholder="Error style"
+      width="250px"
       error
     />
   )))
@@ -52,6 +55,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.checked}
       placeholder="Checked style"
+      width="250px"
       checked
     />
   )))
@@ -61,6 +65,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.disabledChecked}
       placeholder="Disabled checked style"
+      width="250px"
       disabled
       checked
     />
@@ -71,6 +76,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.custom}
       placeholder="Custom style"
+      width="250px"
       customStyles={{
         backgroundColor: '#f1f1f1',
         color: '#118473',