From 226b8dfe177fc2a66a66fd3ddf1b25632ad64834 Mon Sep 17 00:00:00 2001
From: RichEwin <richardewinlambert@gmail.com>
Date: Thu, 24 Aug 2023 20:46:54 +0200
Subject: [PATCH] fix: updated input and chip components

---
 src/components/Chip/Chip.tsx           | 11 +++++++++--
 src/components/Input/Input.stories.tsx |  4 ++++
 src/components/Input/Input.styled.ts   |  5 +++++
 src/components/Input/Input.tsx         | 22 +++++++++++++++-------
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index e83f81b..77d22dd 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { StyledChipContainer, StyledChipGroupContainer } from "./Chip.styled";
 
 export interface ChipProps {
@@ -18,11 +18,18 @@ const Chip = ({ label, active, onClick }: ChipProps) => {
 export interface ChipGroupInterface {
   tags: string[];
   onClick: (tag: string) => void;
+  reset?: boolean;
 }
 
-export const ChipGroup = ({ tags, onClick }: ChipGroupInterface) => {
+export const ChipGroup = ({ tags, onClick, reset }: ChipGroupInterface) => {
   const [activeTag, setActiveTag] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (reset) {
+      setActiveTag(null);
+    }
+  }, [reset]);
+
   const toggleTag = (tag: string) => {
     if (activeTag === tag) {
       setActiveTag(null);
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index faf9f2f..586ee9d 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -16,3 +16,7 @@ export const WithOnChange = () => (
 );
 
 export const WithPlaceholder = () => <Input placeholder="Placeholder" />;
+
+export const WithType = () => <Input type="number" />;
+
+export const WithLabel = () => <Input label="Label" />;
diff --git a/src/components/Input/Input.styled.ts b/src/components/Input/Input.styled.ts
index 827c6c0..8c8e94d 100644
--- a/src/components/Input/Input.styled.ts
+++ b/src/components/Input/Input.styled.ts
@@ -1,3 +1,8 @@
 import styled from "styled-components";
 
 export const StyledInput = styled.input``;
+export const LabelWrapper = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+`;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 1881d0d..cdf37ea 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,11 +1,13 @@
 import React from "react";
-import { StyledInput } from "./Input.styled";
+import { LabelWrapper, StyledInput } from "./Input.styled";
 
 export interface InputProps {
   disabled?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   className?: string;
+  type?: string;
+  label?: string;
 }
 
 export const Input = ({
@@ -13,14 +15,20 @@ export const Input = ({
   onChange,
   placeholder,
   className,
+  type,
+  label,
 }: InputProps) => {
   return (
-    <StyledInput
-      disabled={disabled}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={className}
-    />
+    <>
+      {label ? <LabelWrapper>{label}</LabelWrapper> : null}
+      <StyledInput
+        disabled={disabled}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={className}
+        type={type}
+      />
+    </>
   );
 };