From 94970601fa5cad0fa84710793885ff2f6829d289 Mon Sep 17 00:00:00 2001
From: amalv <1252707+amalv@users.noreply.github.com>
Date: Fri, 8 Nov 2019 00:11:30 +0100
Subject: [PATCH] feat: add fullWidth prop for Input component (#35)

- Add fullWidth prop to Input component
- Add FullWidthInput story
---
 src/components/Input.stories.tsx | 2 ++
 src/components/Input.styles.ts   | 1 +
 src/components/Input.tsx         | 3 +++
 3 files changed, 6 insertions(+)

diff --git a/src/components/Input.stories.tsx b/src/components/Input.stories.tsx
index e25e4b7..3255e75 100644
--- a/src/components/Input.stories.tsx
+++ b/src/components/Input.stories.tsx
@@ -7,6 +7,8 @@ export default {
 
 export const DefaultInput: React.FC = () => <Input />;
 
+export const FullWidthInput: React.FC = () => <Input fullWidth />;
+
 export const EmailInput: React.FC = () => (
   <Input label="email" placeholder="my@email.com" borderColor="#6200ee" />
 );
diff --git a/src/components/Input.styles.ts b/src/components/Input.styles.ts
index 245643c..7849d24 100644
--- a/src/components/Input.styles.ts
+++ b/src/components/Input.styles.ts
@@ -9,6 +9,7 @@ export interface InputStyledProps {
   variant: string;
   bordercolor: string;
   InputLabelProps: object;
+  fullWidth?: boolean;
 }
 
 export const InputStyled = styled(TextField as React.FC<InputStyledProps>)`
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index f0d17bd..1d07d61 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -6,12 +6,14 @@ interface InputProps {
   placeholder?: string;
   label?: string;
   borderColor?: string;
+  fullWidth?: boolean;
 }
 
 export const Input: React.FC<InputProps> = ({
   placeholder,
   label,
   borderColor,
+  fullWidth,
 }: InputProps) => {
   const placeholderProp = placeholder || "Placeholder";
   const labelProp = label || "Label";
@@ -28,6 +30,7 @@ export const Input: React.FC<InputProps> = ({
         }}
         variant="outlined"
         bordercolor={borderColorProp}
+        fullWidth={fullWidth}
       />
     </StylesProvider>
   );