Fix form types (estevanmaito#31)

* fix(input): fix input type

* fix(forms): fix prop extension to allow usage of element attributes eg. name

Extend the correct HTML element to get all the available attributes, for example, `name`

fix estevanmaito#30

Co-authored-by: Samuel Carnell

src/Input.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLInputElement> {
+interface Props extends React.ComponentPropsWithRef<'input'> {
   /**
    * Defines the color of the input
    */

src/Select.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
+interface Props extends React.ComponentPropsWithRef<'select'> {
   /**
    * Defines the color of the select
    */

src/Textarea.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface Props extends React.ComponentPropsWithRef<'textarea'> {
   /**
    * Defines the color of the textarea
    */

src/__tests__/Input.test.tsx

@@ -65,4 +65,10 @@ describe('Input', () => {
       expected
     )
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(<Input name="test-name" />)
+
+    expect(wrapper.find('input[name="test-name"]').getDOMNode().getAttribute('name')).toBeDefined()
+  })
 })

src/__tests__/Select.test.tsx

@@ -74,4 +74,14 @@ describe('Select', () => {
 
     expect(wrapper.find('select').children()).toHaveLength(expected)
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(
+      <Select name="test-name">
+        <option value="lorem">Lorem</option>
+      </Select>
+    )
+
+    expect(wrapper.find('select[name="test-name"]').getDOMNode().getAttribute('name')).toBeDefined()
+  })
 })

src/__tests__/Textarea.test.tsx

@@ -44,4 +44,12 @@ describe('Textarea', () => {
 
     expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(<Textarea name="test-name" />)
+
+    expect(wrapper.find('textarea[name="test-name"]').getDOMNode().getAttribute('name')).toBe(
+      'test-name'
+    )
+  })
 })