import React from 'react'
import {
  Caption,
  TextInput,
  Title,
} from '../../'

class TextInputDefault extends React.Component {
  state = {
    firstName: '',
  }

  render() {
    const handleOnChange = ({ target }) => this.setState({ firstName: target.value })

    const {
      firstName,
    } = this.state

    return (
      <div>
        <TextInput
            aria={{ label: 'hello' }}
            data={{ say: 'hi', yell: 'go' }}
            id="unique-id"
            label="First Name"
            placeholder="Enter first name"
            value="Timothy Wenhold"
        />
        <TextInput
            label="Last Name"
            placeholder="Enter last name"
        />
        <TextInput
            label="Phone Number"
            placeholder="Enter phone number"
            type="phone"
        />
        <TextInput
            label="Email Address"
            placeholder="Enter email address"
            type="email"
        />
        <TextInput
            label="Zip Code"
            placeholder="Enter zip code"
            type="number"
        />

        <br />
        <br />

        <Title>{'Event Handler Props'}</Title>

        <br />
        <Caption>{'onChange'}</Caption>

        <br />

        <TextInput
            label="First Name"
            onChange={handleOnChange}
            placeholder="Enter first name"
            value={firstName}
        />

        <If condition={firstName !== ''}>
          {`First name is: ${firstName}`}
        </If>
      </div>
    )
  }
}

export default TextInputDefault

import React from 'react'
import {
  TextInput,
} from '../..'

const TextInputError = () => (
  <div>
    <TextInput
        error="Please enter a valid email address"
        label="Email Address"
        placeholder="Enter email address"
        type="email"
    />
  </div>
)

export default TextInputError

import React from 'react'
import { TextInput } from '../../'

const TextInputCustom = () => {
  return (
    <div>
      <TextInput
          label="Custom Label"
      >
        <input
            name="custom-name"
            placeholder="custom-placeholder"
            type="text"
        />
      </TextInput>
    </div>
  )
}

export default TextInputCustom