import React from 'react'

import { FormGroup, TextInput } from 'playbook-ui'

const FormGroupDefault = (props) => (
  <div>
    <FormGroup>
      <TextInput
          label="First Name"
          placeholder="Enter First Name"
      />
      <TextInput
          label="Middle Intial"
          placeholder="Enter Middle Initial"
      />
      <TextInput
          label="Last Name"
          placeholder="Enter Last Name"
      />
    </FormGroup>
  </div>
)

export default FormGroupDefault

import React from 'react'

import { Button, FormGroup, TextInput } from 'playbook-ui'

const FormGroupButton = (props) => (
  <div>
    <div>
      <FormGroup>
        <TextInput
            label="With Label"
            placeholder="Search"
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
        />
      </FormGroup>
    </div>
    <br />
    <div>
      <FormGroup>
        <TextInput
            placeholder="Search"
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
        />
      </FormGroup>
    </div>
  </div>
)

export default FormGroupButton

import React from 'react'

import { FormGroup, TextInput, Button } from 'playbook-ui'

const FormGroupFullWidth = (props) => (
  <div>
    <div>
      <FormGroup fullWidth>
        <TextInput
            label="First Name"
            placeholder="Enter First Name"
        />
        <TextInput
            label="Middle Intial"
            placeholder="Enter Middle Initial"
        />
        <TextInput
            label="Last Name"
            placeholder="Enter Last Name"
        />
      </FormGroup>
    </div>
    <br />
    <div>
      <FormGroup fullWidth>
        <TextInput
            placeholder="Search"
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
        />
      </FormGroup>
    </div>
  </div>
)

export default FormGroupFullWidth

import React from 'react'

import { FormGroup, DatePicker, TextInput } from 'playbook-ui'

const FormGroupDatePicker = (props) => (
  <div>
    <FormGroup>
      <TextInput
          label="Event"
          placeholder="Event Name"
      />
      <DatePicker
          label="event date"
          pickerId="date-picker-default"
      />
    </FormGroup>
  </div>
)

export default FormGroupDatePicker

import React, {useState} from 'react'

import { FormGroup, PhoneNumberInput, Select, TextInput, Flex, Passphrase } from 'playbook-ui'

const FormGroupSelect = (props) => {
  const [input, setInput] = useState("");
  const handleChange = (e) => setInput(e.target.value);

  const options = [
    { value: 'Country' },
    { value: 'Pop' },
    { value: 'Rock' },
    { value: 'Hip-Hop/Rap' },
    { value: 'Classical' },
    { value: 'Gospel' },
    { value: 'Alternative' },
    { value: 'Indie' },
    { value: 'Other' },
  ]

  const phoneOptions = [
    { value: 'Cell' },
    { value: 'Work' },
    { value: 'Home' },
  ]

  return (
    <Flex 
        orientation="column" 
        rowGap="md"
    >
      <FormGroup>
        <TextInput
            placeholder="Enter Artist Name"
        />
        <Select
            blankSelection="Genre"
            options={options}
        />
      </FormGroup>
      <FormGroup>
        <Select
            blankSelection="Phone"
            options={phoneOptions}
        />
        <PhoneNumberInput
            id='default'
        />
    </FormGroup>
    <FormGroup>
      <PhoneNumberInput
          id='default-2'
      />
      <Select
          blankSelection="Phone"
          options={phoneOptions}
      />
    </FormGroup>
    <FormGroup>
        <Select 
            blankSelection="Phone" 
            options={phoneOptions}
        />
        <Passphrase
            id="my-passphrase"
            label=""
            onChange={handleChange}
            value={input}
        />
      </FormGroup>
    </Flex>
  )
}

export default FormGroupSelect

import React, { useState } from 'react'

import { FormGroup, SelectableCard } from 'playbook-ui'

const FormGroupSelectableCard = (props) => {
  const [value, setValue] = useState('')

  const handleSelect = (event) => {
    setValue(event.target.value)
  }

  return (
    <div>
      <FormGroup>
        <SelectableCard
            checked={value === 'cat'}
            inputId="cat1"
            multi={false}
            name="animal"
            onChange={handleSelect}
            value="cat"
        >
          {'Cat'}
        </SelectableCard>

        <SelectableCard
            checked={value === 'dog'}
            inputId="dog1"
            multi={false}
            name="animal"
            onChange={handleSelect}
            value="dog"
        >
          {'Dog'}
        </SelectableCard>
      </FormGroup>
    </div>
  )
}

export default FormGroupSelectableCard

import React, { useState } from 'react'

import { FormGroup, SelectableCardIcon } from 'playbook-ui'

const FormGroupSelectableCardIcon = (props) => {
  const [selectedFormat, toggleFormat] = useState(null)

  return (
    <div>
      <FormGroup>
        <SelectableCardIcon
            checked={selectedFormat === 'basketball'}
            icon="basketball-ball"
            inputId={7}
            name="select"
            onChange={() => toggleFormat('basketball')}
            titleText="Basketball"
            value="basketball"
        />
        <SelectableCardIcon
            checked={selectedFormat === 'football'}
            icon="football-ball"
            inputId={8}
            name="select"
            onChange={() => toggleFormat('football')}
            titleText="Football"
            value="football"
        />
      </FormGroup>
    </div>
  )
}

export default FormGroupSelectableCardIcon