feat: textArea and select event

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patomation/ui",
-  "version": "2.0.0-beta16",
+  "version": "2.0.0-beta18",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

src/Input/index.tsx

@@ -6,9 +6,9 @@ import Error from '../Error'
 import Gutter from '../Gutter'
 
 interface Props {
-  type?: string
+  type?: InputHTMLAttributes<HTMLInputElement>['type']
   name?: string
-  onChange?: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>['onChange']
+  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
   onFocus?: () => void
   onBlur?: () => void
   value?: string | number
@@ -29,8 +29,6 @@ interface Props {
   max?: number
   step?: number
   textAlign?: 'center' | 'left' | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'right' | 'end' | 'justify' | 'match-parent' | 'start' | undefined
-  cols?: number
-  rows?: number
   prefix?: string
   suffix?: string
   disabled?: boolean
@@ -44,13 +42,10 @@ const Input: FunctionComponent<Props> = ({
   className, onClick, background, color,
   containerStyle, inputStyle, inputErrorStyle, errorStyle, style,
   textAlign,
-  rows = 3, cols,
   label, min, max, step,
   prefix, suffix,
   disabled
 }) => {
-  const InputType = type === 'textarea' ? 'textarea' : 'input'
-
   return (
     <div
       className={concat('input', className)}
@@ -80,12 +75,10 @@ const Input: FunctionComponent<Props> = ({
         : null
       }
 
-      <InputType
+      <input
         className='input__input'
         type={type}
         name={name}
-        rows={rows} // textarea
-        cols={cols} // textarea
         min={min}
         max={max}
         step={step}
@@ -101,17 +94,11 @@ const Input: FunctionComponent<Props> = ({
           ...(prefix ? {
             paddingLeft: '2rem'
           } : null),
-          ...(type === 'textarea' ? {
-            textAlign: 'left' as 'left',
-            resize: 'none',
-            padding: '1rem'
-          } : null),
           ...(background ? { background: background } : null),
           ...(color ? { color: color } : null),
           textAlign,
           ...inputStyle,
-          ...(error ? (inputErrorStyle || styles.errorBorder) : null),
-          ...(type === 'textarea' ? { height: 'auto' } : null)
+          ...(error ? (inputErrorStyle || styles.errorBorder) : null)
         }}
         disabled={disabled}/>
 

src/Select/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FunctionComponent, ReactNode } from 'react'
+import { FunctionComponent, ReactNode, InputHTMLAttributes } from 'react'
 import styles from './styles'
 import concat from '../_utility/concat'
 
@@ -9,7 +9,7 @@ interface Props {
   children?: [ReactNode] | ReactNode
   className?: string
   name?: string
-  onChange?: React.ChangeEventHandler
+  onChange?: InputHTMLAttributes<HTMLSelectElement>['onChange']
   onBlur?: () => void
   value?: string | number
   error?: string | boolean

src/TextArea/index.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+
+import TextArea from './index'
+
+describe('<TextArea />', () => {
+  it('renders', () => {
+    mount(<TextArea />)
+  })
+})

src/TextArea/index.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { FunctionComponent, InputHTMLAttributes } from 'react'
+import styles from './styles'
+import concat from '../_utility/concat'
+import Error from '../Error'
+import Gutter from '../Gutter'
+
+interface Props {
+  name?: string
+  onChange?: InputHTMLAttributes<HTMLTextAreaElement>['onChange']
+  onFocus?: () => void
+  onBlur?: () => void
+  value?: string | number
+  defaultValue?: string | number
+  error?: string | boolean
+  placeholder?: string
+  className?: string
+  onClick?: (MouseEvent) => void
+  background?: string
+  color?: string
+  containerStyle?: object
+  inputStyle?: object
+  inputErrorStyle?: object
+  errorStyle?: object
+  style?: object
+  label?: string
+  min?: number
+  max?: number
+  step?: number
+  textAlign?: 'center' | 'left' | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'right' | 'end' | 'justify' | 'match-parent' | 'start' | undefined
+  cols?: number
+  rows?: number
+  prefix?: string
+  suffix?: string
+  disabled?: boolean
+}
+
+/**
+* A standardized input component plus textarea
+*/
+const Input: FunctionComponent<Props> = ({
+  name, onChange, onFocus, onBlur, value, defaultValue, error, placeholder,
+  className, onClick, background, color,
+  containerStyle, inputStyle, inputErrorStyle, errorStyle, style,
+  textAlign,
+  rows = 3, cols,
+  label, min, max, step,
+  disabled
+}) => {
+  return (
+    <div
+      className={concat('text-area', className)}
+      style={{
+        ...styles.container,
+        position: 'relative',
+        ...style,
+        ...containerStyle
+      }}>
+
+      { label
+        ? <>
+          <label className='text-area__label'> {label} </label>
+          <Gutter half />
+        </>
+        : null }
+
+      <textarea
+        className='textarea__input'
+        name={name}
+        rows={rows} // textarea
+        cols={cols} // textarea
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        value={value}
+        defaultValue={defaultValue}
+        onClick={onClick}
+        style={{
+          ...styles.input,
+          textAlign: textAlign || 'left' as 'left',
+          resize: 'none',
+          padding: '1rem',
+          ...(background ? { background: background } : null),
+          ...(color ? { color: color } : null),
+          ...inputStyle,
+          ...(error ? (inputErrorStyle || styles.errorBorder) : null),
+          height: 'auto'
+        }}
+        disabled={disabled}/>
+
+      { typeof error === 'string'
+        ? <Error
+          className='input__error'
+          style={{
+            ...styles.error,
+            ...errorStyle
+          }}>
+
+          {error}
+
+        </Error>
+        : null }
+
+    </div>
+  )
+}
+
+export default Input

src/TextArea/readme.md

@@ -0,0 +1,7 @@
+
+Input example:
+
+```js
+<TextArea />
+
+```

src/TextArea/styles.ts

@@ -0,0 +1,42 @@
+import config from '../config'
+
+export default {
+  container: {
+    width: '100%',
+    display: 'block'
+  },
+  input: {
+    height: '42px', // uniform height
+    border: '1px solid rgba(0,0,0, 0.20)',
+    borderRadius: config.size.corners,
+    WebkitBorderRadius: config.size.corners,
+    MozBorderRadius: config.size.corners,
+    WebkitAppearance: 'none' as 'none', // Disable chrome styles
+    MozAppearance: 'none' as 'none', // Disable firefox styles
+    // border: 'none',
+    // height: '100%',
+    width: '100%',
+    margin: 0,
+    padding: 0,
+    paddingLeft: '1rem',
+    paddingRight: '1px', // border fix
+    WebkitBoxSizing: 'border-box' as 'border-box', /* Safari/Chrome, other WebKit */
+    MozBoxSizing: 'border-box' as 'border-box', /* Firefox, other Gecko */
+    boxSizing: 'border-box' as 'border-box', /* Opera/IE 8+ */
+    // width: '100%',
+    fontFamily: 'sans-serif',
+    fontSize: '1rem',
+    textAlign: 'center' as 'center',
+    textDecoration: 'none'
+  },
+  textarea: {
+
+  },
+
+  errorBorder: {
+    border: '2px solid red'
+  },
+  error: {
+    padding: '1rem 0 0 0'
+  }
+}

src/index.ts

@@ -46,4 +46,5 @@ export { default as Skeleton } from './Skeleton'
 export { default as Spinner } from './Spinner'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'
+export { default as TextArea } from './TextArea'
 export { default as Typography } from './Typography'