diff --git a/package.json b/package.json index a1357bc..5cdf95b 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index bf58bd1..b58d1ec 100644 --- a/src/components/Button/index.tsx +++ b/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, /** diff --git a/src/components/ContainerList/index.tsx b/src/components/ContainerList/index.tsx index d76bfdd..9012e87 100644 --- a/src/components/ContainerList/index.tsx +++ b/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, }; diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 1650792..f88bcbd 100644 --- a/src/components/Input/index.tsx +++ b/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 = ({ placeholder = '', + value = '', onChange = (e) => {} }) => { return( - + ) } \ No newline at end of file diff --git a/src/components/Input/style.scss b/src/components/Input/style.scss index 2467427..2dda5fa 100644 --- a/src/components/Input/style.scss +++ b/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; } diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index 941684c..aad48d8 100644 --- a/src/components/List/index.tsx +++ b/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 /** - * Is this the onClick Event of the button. + * Is this the onClick Event of the button to add an item. */ onClickAddItem?: MouseEventHandler | 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 = ({ list, placeholderInput, + valueInput = '', onChangeInput, onClickAddItem, onClickRemoveItem, @@ -60,6 +65,7 @@ const List: FC = ({