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 = () => ; +export const FullWidthInput: React.FC = () => ; + export const EmailInput: React.FC = () => ( ); 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)` 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 = ({ placeholder, label, borderColor, + fullWidth, }: InputProps) => { const placeholderProp = placeholder || "Placeholder"; const labelProp = label || "Label"; @@ -28,6 +30,7 @@ export const Input: React.FC = ({ }} variant="outlined" bordercolor={borderColorProp} + fullWidth={fullWidth} /> );