feat(textarea): add textarea

__tests__/Textarea.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Textarea from '../src/Textarea'
+
+describe('Textarea', () => {
+  it('should render without crashing', () => {
+    mount(<Textarea />)
+  })
+
+  it('should render with base styles', () => {
+    const expected =
+      'block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray'
+    const wrapper = mount(<Textarea />)
+
+    expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

src/Textarea.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+const Textarea = React.forwardRef(function Textarea(props, ref) {
+  const { className, children, ...other } = props
+
+  const { textarea } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = textarea.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <textarea className={cls} ref={ref} {...other}>
+      {children}
+    </textarea>
+  )
+})
+
+Textarea.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default Textarea

src/index.js

@@ -6,3 +6,4 @@ export { default as HelperText } from './HelperText'
 export { default as Input } from './Input'
 export { default as Label } from './Label'
 export { default as Select } from './Select'
+export { default as Textarea } from './Textarea'

src/themes/default.js

@@ -1,4 +1,10 @@
 export default {
+  // Textarea
+  textarea: {
+    base:
+      'block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray',
+  },
+  // Select
   select: {
     base:
       'block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray',