fix: Adding missing prop placeholder in Input component

src/components/atoms/Input/index.mocks.json

@@ -9,6 +9,9 @@
     "basicExample": {
       "type": "text"
     },
+    "withPlaceholder": {
+      "placeholder": "Here the user will see this until you type something"
+    },
     "withText": {
       "text": "Welcome to reactive-bulma"
     },

src/components/atoms/Input/index.stories.tsx

@@ -18,6 +18,9 @@ const Template: StoryFn<typeof Input> = args => <Input {...args} />
 
 export const BasicExample = Template.bind({})
 
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = testing.withPlaceholder as InputProps
+
 export const WithText = Template.bind({})
 WithText.args = testing.withText as InputProps
 

src/components/atoms/Input/index.tsx

@@ -10,6 +10,7 @@ const Input: React.FC<InputProps> = ({
   style = null,
   type,
   text = null,
+  placeholder = null,
   isDisabled = false,
   isReadonly = false,
   color = null,
@@ -40,6 +41,7 @@ const Input: React.FC<InputProps> = ({
     <input
       data-testid={inputTestId}
       type={type}
+      placeholder={placeholder ?? undefined}
       defaultValue={text ?? undefined}
       disabled={isDisabled}
       readOnly={isReadonly}

src/interfaces/atomProps.ts

@@ -171,6 +171,8 @@ export interface InputProps extends ElementProps, ClickeableProps {
   type: inputTypes
   /** `Attribute` The value that will be shown on the input */
   text?: string
+  /** `Attribute` The text that will be shown if the user does not type any value */
+  placeholder?: string
   /** `Attribute` Will disable the input */
   isDisabled?: boolean
   /** `Attribute` Will show the input as a normal one, but is not editable and has no shadow */