Select

import React from 'react'

import Select from '../_select'

const SelectDefault = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          label="Favorite Food"
          name="food"
          options={options}
          {...props}
      />
    </div>
  )
}

export default SelectDefault

import React from 'react'

import Select from '../_select'

const SelectBlank = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
  ]

  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Where do you live"
          name="location"
          options={options}
          {...props}
      />
    </div>
  )
}

export default SelectBlank

import React from 'react'

import Select from '../_select'

const SelectDisabledOptions = (props) => {
  const options = [
    {
      value: '1',
      disabled: true,
      text: 'Espresso',
    },
    {
      value: '2',
      text: 'Americano',
    },
    {
      value: '3',
      disabled: true,
      text: 'Cappuccino',
    },
    {
      value: '4',
      text: 'Mocha',
    },
    {
      value: '5',
      text: 'Flat White',
    },
    {
      value: '6',
      text: 'Latte',
    },
  ]

  return (
    <div>
      <Select
          label="Favorite Coffee"
          name="coffee"
          options={options}
          value="2"
          {...props}
      />
    </div>
  )
}

export default SelectDisabledOptions

import React from 'react'

import Select from '../_select'

const SelectDisabled = (props) => {
  const options = [
    { value: 'Apple Pie' },
    { value: 'Cookies' },
    { value: 'Ice Cream' },
    { value: 'Brownies' },
  ]

  return (
    <div>
      <Select
          disabled
          label="Favorite Dessert"
          name="dessert"
          options={options}
          {...props}
      />
    </div>
  )
}

export default SelectDisabled

import React from 'react'

import Select from '../_select'

const SelectRequired = (props) => {
  const options = [
    { value: 'Left' },
    { value: 'Right' },
    { value: 'I go without laces' },
  ]

  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Which shoe do you tie first?"
          name="shoe"
          options={options}
          required
          {...props}
      />
    </div>
  )
}

export default SelectRequired

import React from 'react'

import Select from '../_select'

const SelectValueTextSame = (props) => {
  const options = [
    { value: 'Football' },
    { value: 'Baseball' },
    { value: 'Basketball' },
    { value: 'Hockey' },
  ]

  return (
    <div>
      <Select
          label="Favorite Sport"
          name="sports"
          options={options}
          {...props}
      />
    </div>
  )
}

export default SelectValueTextSame

import React from 'react'

import Select from '../_select'

const SelectCustomSelect = (props) => {
  return (
    <div>
      <Select
          label="Favorite Holiday"
          {...props}
      >
        <select
            id="holiday"
            name="holiday"
            {...props}
        >
          <option value="1">{'Christmas'}</option>
          <option value="2">{'Thanksgiving'}</option>
          <option value="3">{'Halloween'}</option>
          <option value="4">{'Fourth of July'}</option>
        </select>
      </Select>
    </div>
  )
}

export default SelectCustomSelect

import React from 'react'
import { Body, Select } from '../..'

const SelectError = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          error="Please make a valid selection"
          label="Favorite Food"
          name="food"
          options={options}
          value="2"
          {...props}
      />
      <Body
          error="Please make a valid selection"
          status="negative"
          {...props}
      />
    </div>
  )
}

export default SelectError

import React from 'react'
import { Body, Select } from '../..'

const SelectInline = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          inline
          label="Favorite Food"
          name="food"
          options={options}
          {...props}
      />
      <Body
          status="negative"
          {...props}
      />
    </div>
  )
}

export default SelectInline

import React from 'react'
import { Body, Select } from '../..'

const SelectInlineCompact = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          compact
          inline
          label="Favorite Food"
          name="food"
          options={options}
          {...props}
      />
      <Body
          status="negative"
          {...props}
      />
    </div>
  )
}

export default SelectInlineCompact