From cb5ee1412eceebd9d3bbe622a5db7792ffdb9c95 Mon Sep 17 00:00:00 2001
From: Eduardo Pieretti Umpierre <eduardo.umpierre@4all.com>
Date: Tue, 26 Mar 2019 14:51:54 -0300
Subject: [PATCH] :sparkles: width prop added to input component

---
 src/components/Input/index.js         | 6 +++++-
 src/components/Input/style.js         | 1 +
 src/components/InputCurrency/index.js | 4 ++++
 src/stories/input.js                  | 6 ++++++
 src/stories/inputCurrency.js          | 6 ++++++
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 79fe30b..154dd7c 100644
--- a/src/components/Input/index.js
+++ b/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;
diff --git a/src/components/Input/style.js b/src/components/Input/style.js
index 1034d8b..8780fdd 100644
--- a/src/components/Input/style.js
+++ b/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`
diff --git a/src/components/InputCurrency/index.js b/src/components/InputCurrency/index.js
index 3a5045e..7628382 100644
--- a/src/components/InputCurrency/index.js
+++ b/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;
diff --git a/src/stories/input.js b/src/stories/input.js
index 1ce42e6..0f5a879 100644
--- a/src/stories/input.js
+++ b/src/stories/input.js
@@ -25,6 +25,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.primary}
       placeholder="Primary style"
+      width="250px"
     />
   ))
   .add('Disabled style', state => (
@@ -33,6 +34,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.disabled}
       placeholder="Disabled style"
+      width="250px"
       disabled
     />
   ))
@@ -42,6 +44,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.error}
       placeholder="Error style"
+      width="250px"
       error
     />
   ))
@@ -51,6 +54,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.checked}
       placeholder="Checked style"
+      width="250px"
       checked
     />
   ))
@@ -60,6 +64,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.disabledChecked}
       placeholder="Disabled checked style"
+      width="250px"
       disabled
       checked
     />
@@ -70,6 +75,7 @@ storiesOf('Input', module)
       onChange={handleChange}
       value={state.custom}
       placeholder="Custom style"
+      width="250px"
       customStyles={{
         backgroundColor: '#f1f1f1',
         color: '#118473',
diff --git a/src/stories/inputCurrency.js b/src/stories/inputCurrency.js
index c24d3d3..28896ba 100644
--- a/src/stories/inputCurrency.js
+++ b/src/stories/inputCurrency.js
@@ -25,6 +25,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.primary}
       placeholder="Primary style"
+      width="250px"
     />
   ))
   .add('Disabled style', state => (
@@ -33,6 +34,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.disabled}
       placeholder="Disabled style"
+      width="250px"
       disabled
     />
   ))
@@ -42,6 +44,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.error}
       placeholder="Error style"
+      width="250px"
       error
     />
   ))
@@ -51,6 +54,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.checked}
       placeholder="Checked style"
+      width="250px"
       checked
     />
   ))
@@ -60,6 +64,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.disabledChecked}
       placeholder="Disabled checked style"
+      width="250px"
       disabled
       checked
     />
@@ -70,6 +75,7 @@ storiesOf('InputCurrency', module)
       onChange={handleChange}
       value={state.custom}
       placeholder="Custom style"
+      width="250px"
       customStyles={{
         backgroundColor: '#f1f1f1',
         color: '#118473',