import React from 'react';
import ReactDOM from 'react-dom';
import { TextInput } from 'web-foundation';

export default function() {
    ReactDOM.render(
        <TextInput
            label="input" />,
        document.getElementById('text-input-default')
    );
    ReactDOM.render(
        <TextInput
            placeholder="Placeholder Text"
            error="sample error"
            label="input" />,
        document.getElementById('text-input-error')
    );
    ReactDOM.render(
        <TextInput
            placeholder="Placeholder Text"
            disabled
            label="input" />,
        document.getElementById('text-input-disabled')
    );
    ReactDOM.render(
        <TextInput
            placeholder="Placeholder Text"
            disabled
            error="sample error"
            label="input" />,
        document.getElementById('text-input-error-disabled')
    );
    ReactDOM.render(
        <TextInput
            label="password"
            format="password" />,
        document.getElementById('text-input-password')
    );
    ReactDOM.render(
        <TextInput
            label="email"
            format="email" />,
        document.getElementById('text-input-email')
    );
    ReactDOM.render(
        <TextInput
            label="phone"
            format="phone" />,
        document.getElementById('text-input-phone')
    );
    ReactDOM.render(
        <TextInput
            label="card"
            format="card" />,
        document.getElementById('text-input-card')
    );
    ReactDOM.render(
        <TextInput
            label="ssn"
            format="ssn" />,
        document.getElementById('text-input-ssn')
    );
    ReactDOM.render(
        <TextInput
            label="website"
            format="website" />,
        document.getElementById('text-input-website')
    );
    ReactDOM.render(
        <TextInput
            label="money"
            format="money" />,
        document.getElementById('text-input-money')
    );
    ReactDOM.render(
        <TextInput
            label="number"
            format="number" />,
        document.getElementById('text-input-number')
    );
    ReactDOM.render(
        <TextInput
            label="float"
            format="float" />,
        document.getElementById('text-input-float')
    );
    ReactDOM.render(
        <TextInput
            label="%"
            format="percent" />,
        document.getElementById('text-input-percent')
    );
}
