Merge pull request #3 from aleleba/PR-505263

PR-505263: fixing input.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-list-ui-library",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Library with storybook for a list app",
   "main": "dist/index.js",
   "scripts": {

src/components/Button/index.tsx

@@ -4,7 +4,7 @@ import { RemoveButton } from './RemoveButton';
 
 type TButtonProps = {
   /**
-   * Is this the title of the card.
+   * Is this the type of the Button (Add or Remove).
    */
   type?: ButtonTypes,
   /**

src/components/ContainerList/index.tsx

@@ -3,11 +3,11 @@ import './style.scss';
 
 type TContainerListProps = {
   /**
-   * Is this the title of the card.
+   * Is this the title of the Container List.
    */
   title?: string,
   /**
-   * Is this the child component of the card. (The content)
+   * Is this the child component of the Container List. (The content)
    */
   children?: JSX.Element,
 };

src/components/Input/index.tsx

@@ -6,6 +6,10 @@ export type TInputProps = {
      * Is this the text you want to add to the input placeholder
      */
     placeholder?: string
+    /**
+     * Is this the value of the input
+     */
+    value?: string
     /**
      * Is this the onChange event of the input
      */
@@ -14,9 +18,10 @@ export type TInputProps = {
 
 export const Input:FC<TInputProps> = ({
     placeholder = '',
+    value = '',
     onChange = (e) => {}
 }) => {
     return(
-        <input className='input' placeholder={placeholder} type='text' onChange={onChange} />
+        <input className='input' value={value} placeholder={placeholder} type='text' onChange={onChange} />
     )
 }

src/components/Input/style.scss

@@ -1,10 +1,11 @@
 .input{
-    width: 100%;
+    width: 95%;
     height: 30px;
     border: 1px solid #ccc;
     border-radius: 50px;
     font-size: 16px;
     outline: none;
+    padding-left: 15px;
     &:focus{
         border: 1px solid #000;
     }

src/components/List/index.tsx

@@ -5,23 +5,27 @@ import { on } from 'events';
 
 type TListProps = {
   /**
-   * Is this the title of the card.
+   * Is this the list of items as an array.
    */
   list: TItem[]
   /**
-   * Is this the title of the card.
+   * Is this the text of the placeholder of the input of the List.
    */
   placeholderInput?: string
   /**
-     * Is this the onChange event of the input
+   * Is this the text of the value of the input of the List.
+   */
+  valueInput?: string
+  /**
+   * Is this the onChange event of the input to add 
    */
   onChangeInput?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Is this the onClick Event of the button.
+   * Is this the onClick Event of the button to add an item.
    */
   onClickAddItem?: MouseEventHandler<HTMLButtonElement> | undefined
   /**
-   * Is this the onClick Event of the button.
+   * Is this the onClick Event of the button to Remove a Item.
    */
   onClickRemoveItem?: ((index: number) => void)
   /**
@@ -33,6 +37,7 @@ type TListProps = {
 const List: FC<TListProps> = ({
   list,
   placeholderInput,
+  valueInput = '',
   onChangeInput,
   onClickAddItem,
   onClickRemoveItem,
@@ -60,6 +65,7 @@ const List: FC<TListProps> = ({
       <div>
         <Input 
           placeholder={placeholderInput}
+          value={valueInput}
           onChange={onChangeInput}
         />
       </div>