Forms

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

const DatePickerDefault = (props) => (
  <div>
    <DatePicker
        pickerId="date-picker-default"
        {...props}
    />
  </div>
)

export default DatePickerDefault

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

const DatePickerHideIcon = (props) => (
  <div>
    <DatePicker
        hideIcon
        pickerId="date-picker-hide-icon"
        {...props}
    />
  </div>
)

export default DatePickerHideIcon

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

const DatePickerDefaultDate = (props) => (
  <div>
    <DatePicker
        defaultDate="07/31/2020"
        label="Default Date String"
        pickerId="date-picker-default-date1"
        {...props}
    />
    <DatePicker
        defaultDate={new Date().fp_incr(1)}
        label="Default Date Dynamic"
        pickerId="date-picker-default-date2"
        {...props}
    />
    <DatePicker
        defaultDate={[new Date(), new Date().fp_incr(7)]}
        label="Default Date Range"
        mode="range"
        pickerId="date-picker-default-date3"
        {...props}
    />
    <DatePicker
        label="Default Behavior"
        pickerId="date-picker-default-date4"
        {...props}
    />
  </div>
)

export default DatePickerDefaultDate

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

const DatePickerInput = (props) => (
  <div>
    <DatePicker
        inputAria={{ label: 'input-field' }}
        inputData={{ key: 'value', key2: 'value2' }}
        label="Aria, Name, and Data Attributes"
        name="date-field"
        pickerId="date-picker-input1"
        {...props}
    />
    <DatePicker
        label="Custom Placeholder"
        pickerId="date-picker-input2"
        placeholder="custom-placeholder"
        {...props}
    />
    <DatePicker
        label="Blank Placeholder"
        pickerId="date-picker-input3"
        placeholder=""
        {...props}
    />
    <DatePicker
        disableInput
        label="Disable Input"
        pickerId="date-picker-input4"
        placeholder="Disabled Input"
        {...props}
    />
  </div>
)

export default DatePickerInput

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

const DatePickerLabel = (props) => (
  <div>
    <DatePicker
        label="Your Label Here"
        pickerId="date-picker-label"
        {...props}
    />
    <DatePicker
        hideLabel
        pickerId="date-picker-hide-label"
        {...props}
    />
  </div>
)

export default DatePickerLabel

import React, { useState } from 'react'
import { DatePicker, LabelValue } from '../..'

const DatePickerOnChange = (props) => {
  const today = new Date()
  const [dateString, setDateString] = useState(today.toLocaleDateString())
  const [dateObj, setDateObj] = useState([today])

  const changeHandler = (dateStr, selectedDates) => {
    setDateString(dateStr)
    setDateObj(selectedDates)
  }

  return (
    <div>
      <DatePicker
          defaultDate={dateString}
          marginBottom="lg"
          onChange={changeHandler}
          pickerId="date-picker-onchange"
          {...props}
      />
      <LabelValue
          label="Date Object"
          marginBottom="lg"
          value={dateObj[0] ? dateObj[0].toString() : ''}
          {...props}
      />
      <LabelValue
          label="Date String"
          value={dateString}
          {...props}
      />
    </div>
  )
}
export default DatePickerOnChange

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

const DatePickerRange = (props) => (
  <div>
    <DatePicker
        defaultDate={[new Date(), new Date().fp_incr(7)]}
        mode="range"
        pickerId="date-picker-range"
        {...props}
    />
  </div>
)

export default DatePickerRange

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

const DatePickerFormat = (props) => (
  <div>
    <DatePicker
        defaultDate={new Date()}
        format="m-d-Y"
        pickerId="date-picker-format1"
        {...props}
    />
    <DatePicker
        defaultDate={new Date()}
        format="m/d/y"
        pickerId="date-picker-format2"
        {...props}
    />
    <DatePicker
        defaultDate={new Date()}
        format="n-j-y"
        pickerId="date-picker-format3"
        {...props}
    />
    <DatePicker
        defaultDate={new Date()}
        format="Y-d-m"
        pickerId="date-picker-format4"
        {...props}
    />
  </div>
)

export default DatePickerFormat

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

const DatePickerDisabled = (props) => (
  <div>
    <DatePicker
        disableDate={[new Date().fp_incr(1)]}
        label="Disable Single Date"
        pickerId="single-disabled-date"
        {...props}
    />
    <DatePicker
        disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
        label="Disable Multiple Dates"
        pickerId="multiple-disabled-dates"
        {...props}
    />
    <DatePicker
        disableRange={[
          {
            from: new Date().fp_incr(1),
            to: new Date().fp_incr(7),
          },
        ]}
        label="Disable Single Range"
        pickerId="single-date-range"
        {...props}
    />
    <DatePicker
        disableRange={[
          {
            from: new Date().fp_incr(1),
            to: new Date().fp_incr(3),
          },
          {
            from: new Date().fp_incr(7),
            to: new Date().fp_incr(14),
          },
        ]}
        label="Disable Multiple Ranges"
        pickerId="multiple-date-ranges"
        {...props}
    />
    <DatePicker
        disableWeekdays={['Sunday', 'Saturday']}
        label="Disable Specific Weekdays"
        pickerId="disabled-weekdays"
        {...props}
    />
  </div>
)

export default DatePickerDisabled

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

const DatePickerMinMax = (props) => (
  <div>
    <DatePicker
        label="Dynamic dates using flatpickr increment function"
        maxDate={new Date().fp_incr(3)}
        minDate={new Date().fp_incr(-3)}
        pickerId="date-picker-min-max1"
        {...props}
    />
    <DatePicker
        format="m/d/Y"
        label="Absolute formatted dates"
        maxDate="10/20/2020"
        minDate="10/10/2020"
        pickerId="date-picker-min-max2"
        {...props}
    />
  </div>
)

export default DatePickerMinMax

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

const DatePickerError = (props) => (
  <div>
    <DatePicker
        error="Invalid date. Please pick a valid date."
        pickerId="date-picker-error"
        {...props}
    />
  </div>
)

export default DatePickerError

import React, { useEffect } from 'react'
import { Button, DatePicker } from '../../'

const DatePickerFlatpickrMethods = () => {
  let fpInstance
  useEffect(() => {
    fpInstance = document.querySelector('#fp-methods')._flatpickr
  }, [])
  const clickHandlerClear = () => {
    fpInstance.clear()
  }
  const clickHandlerClose = () => {
    fpInstance.close()
  }
  const clickHandlerToday = () => {
    fpInstance.setDate(new Date(), true)
  }

  return (
    <div>
      <Button
          marginRight="sm"
          onClick={clickHandlerClose}
          text="Close"
      />
      <Button
          marginRight="sm"
          onClick={clickHandlerClear}
          text="Clear"
      />
      <Button
          onClick={clickHandlerToday}
          text="Today"
      />
      <DatePicker
          hideLabel
          marginTop="sm"
          pickerId="fp-methods"
      />
    </div>
  )
}

export default DatePickerFlatpickrMethods

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

const DatePickerHooks = (props) => {
  // Define hooks
  const changeHook = () => {
    alert('date changed')
  }
  const openHook = () => {
    alert('calendar opened')
  }

  // Access flatpickr instances with picker ids and assign them variables
  window.addEventListener('DOMContentLoaded', () => {
    const fpChange = document.querySelector('#date-picker-hooks-onchange')._flatpickr
    const fpOpen = document.querySelector('#date-picker-hooks-onopen')._flatpickr

    // Push one or more hooks to flatpickr instance's Event config arrays
    fpChange.config.onChange.push(changeHook)
    fpOpen.config.onOpen.push(openHook)
  })

  return (
    <div>
      <DatePicker
          label="onChange"
          pickerId="date-picker-hooks-onchange"
          {...props}
      />
      <DatePicker
          label="onOpen"
          pickerId="date-picker-hooks-onopen"
          {...props}
      />
    </div>
  )
}

export default DatePickerHooks

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

const DatePickerYearRange = (props) => (
  <div>
    <DatePicker
        defaultDate="05/05/2015"
        maxDate="12/31/2018"
        minDate="01/01/2015"
        pickerId="date-picker-year-range"
        yearRange={[2015, 2018]}
        {...props}
    />
  </div>
)

export default DatePickerYearRange

/* @flow */

import React, { useState } from 'react'
import {
  FileUpload,
  List,
  ListItem,
} from '../..'

const AcceptedFilesList = ({ files }: FileList) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadDefault = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
          {...props}
      />
      <FileUpload
          onFilesAccepted={handleOnFilesAccepted}
          {...props}
      />
    </div>
  )
}

export default FileUploadDefault

/* @flow */

import React, { useState } from 'react'
import {
  FileUpload,
  List,
  ListItem,
} from '../..'

const AcceptedFilesList = ({ files }: FileList) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadAccept = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
          {...props}
      />
      <FileUpload
          accept={['image/svg+xml']}
          onFilesAccepted={handleOnFilesAccepted}
          {...props}
      />
    </div>
  )
}

export default FileUploadAccept

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

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

export default FormGroupDefault

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

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

export default FormGroupButton

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

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

export default FormGroupDatePicker

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

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

  return (
    <div>
      <FormGroup>
        <TextInput
            label="Artist"
            placeholder="Enter Artist Name"
            {...props}
        />
        <Select
            blankSelection="Genre"
            options={options}
            {...props}
        />
      </FormGroup>
    </div>
  )
}

export default FormGroupSelect

import React, { useState } from 'react'
import { FormGroup, SelectableCard } from '../../'

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"
            {...props}
        >
          {'Cat'}
        </SelectableCard>

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

export default FormGroupSelectableCard

import React, { useState } from 'react'
import { FormGroup, SelectableCardIcon } from '../../'

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"
            {...props}
        />
        <SelectableCardIcon
            checked={selectedFormat === 'football'}
            icon="football-ball"
            inputId={8}
            name="select"
            onChange={() => toggleFormat('football')}
            titleText="Football"
            value="football"
            {...props}
        />
      </FormGroup>
    </div>
  )
}

export default FormGroupSelectableCardIcon

import React from 'react'
import FormPill from '../_form_pill.jsx'

const FormPillDefault = (props) => {
  return (

    <div>
      <FormPill
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          onClick={() => {
 alert('Click!')
}}
          {...props}
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          onClick={() => {
 alert('Click!')
}}
          {...props}
      />
    </div>
  )
}

export default FormPillDefault

import React from 'react'
import FormPill from '../_form_pill.jsx'

const FormPillDefault = (props) => {
  return (
    <div>
      <FormPill
          onClick={() => {
alert('Click!')
}}
          text="this is a tag"
          {...props}
      />
    </div>
  )
}
export default FormPillDefault

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

const RadioDefault = () => {
  const ref = React.createRef()

  return (
    <div>
      <Radio
          label="Power"
          name="Group2"
          ref={ref}
          tabIndex={0}
          value="Power"
      />
      <br />
      <Radio
          defaultChecked={false}
          label="Nitro"
          name="Group2"
          value="Nitro"
      />
      <br />
      <Radio
          defaultChecked={false}
          label="Google"
          name="Group2"
          value="Google"
      />
    </div>
  )
}
export default RadioDefault

import React, { useState } from 'react'
import { Radio } from '../../'

const RadioCustom = (props) => {
  const [choice, setChoice] = useState('power')

  const handleOnChange = ({ target }) => {
    setChoice(target.value)
  }

  return (
    <div>
      <p>
        {'Your choice is: '}
        <code>{choice}</code>
      </p>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Power"
          {...props}
      >
        <input
            checked={choice === 'power'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="power"
            {...props}
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Nitro"
          {...props}
      >
        <input
            checked={choice === 'nitro'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="nitro"
            {...props}
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Google"
          {...props}
      >
        <input
            checked={choice === 'google'}
            name="custom"
            onChange={handleOnChange}
            type="radio"
            value="google"
            {...props}
        />
      </Radio>
    </div>
  )
}
export default RadioCustom

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

const RadioError = () => {
  return (
    <div>
      <Radio
          error
          label="Power"
          name="Group2"
          value="Power"
      />
    </div>
  )
}
export default RadioError

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

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 '../../'

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 '../../'

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 '../../'

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 '../../'

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 '../../'

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 '../../'

const SelectCustomSelect = (props) => {
  return (
    <div>
      <Select label="Favorite Holiday">
        <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, { useState } from 'react'
import SelectableCard from '../_selectable_card.jsx'

const SelectableCardDefault = (props) => {
  const [selectedWithIcon, setSelectedWithIcon] = useState(true)
  const [selectedNoIcon, setSelectedNoIcon] = useState(true)
  const [unselected, setUnselected] = useState(false)
  const [disabled, setDisabled] = useState(false)

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selectedWithIcon}
          icon
          inputId="selectedWithIcon"
          name="selectedWithIcon"
          onChange={() => setSelectedWithIcon(!selectedWithIcon)}
          value="selectedWithIcon"
          {...props}
      >
        {'Selected, with icon'}
      </SelectableCard>

      <SelectableCard
          checked={selectedNoIcon}
          icon={false}
          inputId="selectedWithoutIcon"
          name="selectedWithoutIcon"
          onChange={() => setSelectedNoIcon(!selectedNoIcon)}
          value="selectedWithoutIcon"
          {...props}
      >
        {'Selected, without icon'}
      </SelectableCard>

      <SelectableCard
          checked={unselected}
          inputId="unselected"
          name="unselected"
          onChange={() => setUnselected(!unselected)}
          value="unselected"
          {...props}
      >
        {'Unselected'}
      </SelectableCard>

      <SelectableCard
          checked={disabled}
          disabled
          inputId="disabled"
          name="disabled"
          onChange={() => setDisabled(!disabled)}
          value="disabled"
          {...props}
      >
        {'Disabled'}
      </SelectableCard>

    </div>
  )
}

export default SelectableCardDefault

import React, { useState } from 'react'
import SelectableCard from '../_selectable_card.jsx'

const SelectableCardSingleSelect = (props) => {
  const [selected, setSelected] = useState(null)
  const handleSelect = (event) => {
    setSelected(event.target.value)
  }

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selected === 'male'}
          inputId="male1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="male"
          {...props}
      >
        {'Male'}
      </SelectableCard>

      <SelectableCard
          checked={selected === 'female'}
          inputId="female1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="female"
          {...props}
      >
        {'Female'}
      </SelectableCard>

      <SelectableCard
          checked={selected === 'other'}
          inputId="other1"
          multi={false}
          name="gender"
          onChange={handleSelect}
          value="other"
          {...props}
      >
        {'Other'}
      </SelectableCard>

    </div>
  )
}

export default SelectableCardSingleSelect

import React, { useState } from 'react'
import { Body, SelectableCard, Title } from '../../'

const SelectableCardBlock = (props) => {
  const [block, setBlock] = useState(true)
  const [tag, setTag] = useState(false)

  const handleSelect = (event) => {
    setBlock(event.target.checked)
  }

  const handleTag = (event) => {
    setTag(event.target.checked)
  }

  return (
    <div className="pb--doc-demo-row">
      <SelectableCard
          checked={block}
          inputId="block"
          name="block"
          onChange={handleSelect}
          value="block"
          {...props}
      >
        <Title
            size={4}
            text="Block"
            {...props}
        />
        <Body
            tag="span"
            {...props}
        >
          {'This uses block'}
        </Body>
      </SelectableCard>

      <SelectableCard
          checked={tag}
          inputId="tag"
          name="tag"
          onChange={handleTag}
          text="This passes text through the tag"
          value="tag"
          {...props}
      />
    </div>
  )
}

export default SelectableCardBlock

import React, { useState } from 'react'
import {
  Body,
  Image,
  SelectableCard,
} from '../../'

const SelectableCardImage = (props) => {
  const [selectedImage, setSelectedImage] = useState(true)
  const [unselectedImage, setUnselectedImage] = useState(false)

  return (
    <div className="pb--doc-demo-row">

      <SelectableCard
          checked={selectedImage}
          icon
          inputId="selectableImage"
          name="selectableImage"
          onChange={() => setSelectedImage(!selectedImage)}
          value="selectableImage"
          {...props}
      >
        <Image
            rounded
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
            {...props}
        />

        <Body>{'Add text here'}</Body>
      </SelectableCard>

      <SelectableCard
          checked={unselectedImage}
          icon
          inputId="unselectedImage"
          name="unselectedImage"
          onChange={() => setUnselectedImage(!unselectedImage)}
          value="unselectedImage"
          {...props}
      >
        <Image
            rounded
            size="xl"
            url="https://unsplash.it/500/400/?image=634"
            {...props}
        />
      </SelectableCard>

    </div>
  )
}

export default SelectableCardImage

import React from 'react'
import {
  Body,
  SelectableCard,
  Title,
} from '../../'

class SelectableCardInput extends React.Component {
  state = {
    firstCheckbox: true,
    secondCheckbox: true,
    thirdCheckbox: false,
    forthCheckbox: false,
    radioSelected: 'first',
  }

  handleSelect = (event) => {
    this.setState({
      [event.target.name]: event.target.checked,
    })
  }

  handleRadioSelect = (event) => {
    this.setState({
      radioSelected: event.target.value,
    })
  }

  render() {
    return (
      <>
        <Title
            size={3}
            text="What programming languages do you know?"
        />

        <br />

        <SelectableCard
            checked={this.state.firstCheckbox}
            inputId="firstCheckbox"
            name="firstCheckbox"
            onChange={this.handleSelect}
            value="firstCheckbox"
            variant="displayInput"
        >
          <Body>{'Ruby'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.secondCheckbox}
            inputId="secondCheckbox"
            name="secondCheckbox"
            onChange={this.handleSelect}
            value="secondCheckbox"
            variant="displayInput"
        >
          <Body>{'JavaScript'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.thirdCheckbox}
            inputId="thirdCheckbox"
            name="thirdCheckbox"
            onChange={this.handleSelect}
            value="thirdCheckbox"
            variant="displayInput"
        >
          <Body>{'TypeScript'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.fourthCheckbox}
            inputId="fourthCheckbox"
            name="fourthCheckbox"
            onChange={this.handleSelect}
            value="fourthCheckbox"
            variant="displayInput"
        >
          <Body>{'Swift'}</Body>
        </SelectableCard>

        <br />

        <Title
            size={3}
            text="How likely are you to recommend Playbook to a friend?"
        />

        <br />

        <SelectableCard
            checked={this.state.radioSelected === 'first'}
            inputId="radio-1"
            multi={false}
            name="radio"
            onChange={this.handleRadioSelect}
            value="first"
            variant="displayInput"
        >
          <Body>{'5'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.radioSelected === 'second'}
            inputId="radio-2"
            multi={false}
            name="radio"
            onChange={this.handleRadioSelect}
            value="second"
            variant="displayInput"
        >
          <Body>
            {'4'}
          </Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.radioSelected === 'third'}
            inputId="radio-3"
            multi={false}
            name="radio"
            onChange={this.handleRadioSelect}
            value="third"
            variant="displayInput"
        >
          <Body>{'3'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.radioSelected === 'fourth'}
            inputId="radio-4"
            multi={false}
            name="radio"
            onChange={this.handleRadioSelect}
            value="fourth"
            variant="displayInput"
        >
          <Body>{'2'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.radioSelected === 'fifth'}
            inputId="radio-5"
            multi={false}
            name="radio"
            onChange={this.handleRadioSelect}
            value="fifth"
            variant="displayInput"
        >
          <Body>{'1'}</Body>
        </SelectableCard>
      </>
    )
  }
}

export default SelectableCardInput

import React, { useState } from 'react'
import { Body, SelectableCard, Title } from '../..'

const SelectableCardError = (props) => {
  const [football, setFootball] = useState(false)
  const [basketball, setBasketball] = useState(false)
  const [baseball, setBaseball] = useState(false)

  return (
    <div>
      <Title
          {...props}
          size={3}
          text="What sports do you like?"
      />
      <br />
      <SelectableCard
          {...props}
          checked={football}
          error
          inputId="football"
          name="football"
          onChange={() => setFootball(!football)}
          value="football"
          variant="displayInput"
      >
        <Body {...props}>{'Football'}</Body>
      </SelectableCard>

      <SelectableCard
          {...props}
          checked={basketball}
          error
          inputId="basketball"
          name="basketball"
          onChange={() => setBasketball(!basketball)}
          value="basketball"
          variant="displayInput"
      >
        <Body {...props}>{'Basketball'}</Body>
      </SelectableCard>

      <SelectableCard
          {...props}
          checked={baseball}
          error
          inputId="baseball"
          name="baseball"
          onChange={() => setBaseball(!baseball)}
          value="baseball"
          variant="displayInput"
      >
        <Body {...props}>{'Baseball'}</Body>
      </SelectableCard>
    </div>
  )
}
export default SelectableCardError

import React, { useState } from 'react'
import { SelectableCardIcon } from '../../'

const SelectableCardIconDefault = (props) => {
  const [selected, setSelected] = useState(true)
  const [unselected, setUnselected] = useState(false)

  return (
    <div className="pb--doc-demo-row">
      <SelectableCardIcon
          bodyText="Export"
          checked={selected}
          icon="chart-line"
          inputId={1}
          onChange={() => setSelected(!selected)}
          titleText="Quarterly Report"
          {...props}
      />
      <SelectableCardIcon
          bodyText="Export"
          checked={unselected}
          icon="chart-pie"
          inputId={2}
          onChange={() => setUnselected(!unselected)}
          titleText="Market Share"
          {...props}
      />
      <SelectableCardIcon
          bodyText="Export"
          disabled
          icon="analytics"
          inputId={3}
          titleText="Comprehensive"
          {...props}
      />
    </div>
  )
}

export default SelectableCardIconDefault

import React, { useState } from 'react'
import { SelectableCardIcon } from '../../'

const SelectableCardIconCheckmark = (props) => {
  const [selected, setSelected] = useState(true)
  const [unselected, setUnselected] = useState(false)

  return (
    <div className="pb--doc-demo-row">

      <SelectableCardIcon
          bodyText="Howdy Partner."
          checked={selected}
          checkmark
          icon="hat-cowboy"
          inputId={4}
          onChange={() => setSelected(!selected)}
          titleText="Cowboy"
          {...props}
      />
      <SelectableCardIcon
          bodyText="Poof, you're a sandwich."
          checked={unselected}
          checkmark
          icon="hat-wizard"
          inputId={5}
          onChange={() => setUnselected(!unselected)}
          titleText="Wizard"
          {...props}
      />
      <SelectableCardIcon
          bodyText="Where is the lamb sauce?"
          checkmark
          disabled
          icon="hat-chef"
          inputId={6}
          titleText="Chef"
          {...props}
      />
    </div>
  )
}

export default SelectableCardIconCheckmark

import React, { useState } from 'react'
import { SelectableCardIcon } from '../../'

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

  return (
    <div className="pb--doc-demo-row">
      <SelectableCardIcon
          checked={selectedFormat === 'car'}
          icon="car"
          inputId={7}
          name="select"
          onChange={() => toggleFormat('car')}
          titleText="Car"
          value="car"
          {...props}
      />
      <SelectableCardIcon
          checked={selectedFormat === 'bus'}
          icon="bus"
          inputId={8}
          name="select"
          onChange={() => toggleFormat('bus')}
          titleText="Bus"
          value="bus"
          {...props}
      />
      <SelectableCardIcon
          checked={selectedFormat === 'subway'}
          icon="subway"
          inputId={9}
          name="select"
          onChange={() => toggleFormat('subway')}
          titleText="Subway"
          value="subway"
          {...props}
      />
    </div>
  )
}

export default SelectableCardIconSingleSelect

import React, { useState } from 'react'
import { SelectableIcon } from '../../'

const SelectableIconDefault = (props) => {
  const [ checkSelected, toggleSelected ] = useState(true)
  const [ checkUnselected, toggleUnselected ] = useState(false)
  const [ checkDisabled, toggleDisabled ] = useState(false)

  return (

    <div className="pb--doc-demo-row">
      <SelectableIcon
          checked={checkSelected}
          icon="dollar-sign"
          inputId={10}
          onChange={() => toggleSelected(!checkSelected)}
          text="US Dollar"
          {...props}
      />

      <SelectableIcon
          checked={checkUnselected}
          icon="euro-sign"
          inputId={11}
          onChange={() => toggleUnselected(!checkUnselected)}
          text="Euro"
          {...props}
      />

      <SelectableIcon
          checked={checkDisabled}
          disabled
          icon="yen-sign"
          inputId={12}
          onChange={() => toggleDisabled(!checkDisabled)}
          text="Yen"
          {...props}
      />
    </div>
  )
}

export default SelectableIconDefault

import React, { useState } from 'react'
import { SelectableIcon } from '../../'

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

  return (

    <div className="pb--doc-demo-row">
      <SelectableIcon
          checked={selectedFormat === 'Cassette'}
          icon="cassette-tape"
          inputId={13}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('Cassette')}
          text="Cassette"
          value="Cassette"
          {...props}
      />

      <SelectableIcon
          checked={selectedFormat === 'CD'}
          icon="compact-disc"
          inputId={14}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('CD')}
          text="CD"
          value="CD"
          {...props}
      />

      <SelectableIcon
          checked={selectedFormat === 'Vinyl'}
          icon="album-collection"
          inputId={15}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('Vinyl')}
          text="Vinyl"
          value="Vinyl"
          {...props}
      />
    </div>
  )
}

export default SelectableIconSingleSelect

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

const SelectableListDefault = (props) => {
  return (
    <div>
      <SelectableList variant="checkbox">
        <SelectableList.Item
            label="Mild"
            name="checkbox-name-1"
            value="1"
            {...props}
        />
        <SelectableList.Item
            checked
            label="Medium"
            name="checkbox-name-2"
            value="2"
            {...props}
        />
        <SelectableList.Item
            label="Hot"
            name="checkbox-name-3"
            value="3"
            {...props}
        />
      </SelectableList>
    </div>
  )
}

export default SelectableListDefault

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

const SelectableListDefault = (props) => {
  return (
    <div>
      <SelectableList variant="radio">
        <SelectableList.Item
            label="Small"
            name="radio"
            value="1"
            {...props}
        />
        <SelectableList.Item
            defaultChecked
            label="Medium"
            name="radio"
            value="2"
            {...props}
        />
        <SelectableList.Item
            label="Large"
            name="radio"
            value="3"
            {...props}
        />
      </SelectableList>
    </div>
  )
}

export default SelectableListDefault

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

const TextInputDefault = (props) => {
  const handleOnChangeFirstName = ({ target }) => {
    setFirstName(target.value)
  }
  const ref = React.createRef()

  const [firstName, setFirstName] = useState('')
  const [formFields, setFormFields] = useState({
    firstName: 'Jane',
    lastName: 'Doe',
    phone: '8888888888',
    email: 'jane@doe.com',
    zip: 55555,
  })

  const handleOnChangeFormField =  ({ target }) => {
    const { name, value } = target
    setFormFields({ ...formFields, [name]: value })
  }

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

      <br />
      <br />

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

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

      <br />

      <TextInput
          label="First Name"
          onChange={handleOnChangeFirstName}
          placeholder="Enter first name"
          ref={ref}
          value={firstName}
          {...props}
      />

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

export default TextInputDefault

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

const TextInputError = (props) => {
  const [email, setEmail] = useState('')

  const handleUpdateEmail = ({ target }) => {
    setEmail(target.value)
  }
  return (
    <div>
      <TextInput
          error="Please enter a valid email address"
          label="Email Address"
          onChange={handleUpdateEmail}
          placeholder="Enter email address"
          type="email"
          value={email}
          {...props}
      />
    </div>
  )
}
export default TextInputError

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

const TextInputCustom = (props) => {
  const [name, setName] = useState('')
  const handleUpdateName = ({ target }) => {
    setName(target.value)
  }
  return (
    <div>
      <TextInput
          label="Custom Label"
          {...props}
      >
        <input
            name="custom-name"
            onChange={handleUpdateName}
            placeholder="custom-placeholder"
            type="text"
            value={name}
            {...props}
        />
      </TextInput>
    </div>
  )
}

export default TextInputCustom

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

class TextInputDisabled extends React.Component {
  render(props) {
    return (
      <div>
        <TextInput
            disabled
            label="Last Name"
            placeholder="Enter last name"
            {...props}
        />
      </div>
    )
  }
}

export default TextInputDisabled

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

const TextareaDefault = (props) => {
  return (
    <div>
      <Textarea
          label="Label"
          rows={4}
          {...props}
      />

      <br />

      <Textarea
          label="Label"
          placeholder="Placeholder text"
          {...props}
      />

      <br />

      <Textarea
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
          {...props}
      />

    </div>
  )
}

export default TextareaDefault

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

const TextareaCustom = (props) => {
  return (
    <div>
      <Textarea label="Label">
        <textarea
            className="my_custom_class"
            name="custom_textarea"
            rows={4}
            {...props}
        >
          {'Content goes here.'}
        </textarea>
      </Textarea>
    </div>
  )
}

export default TextareaCustom

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

const TextareaResize = (props) => {
  return (
    <div>
      <Textarea
          label="auto"
          placeholder="Resize Auto"
          resize="auto"
          {...props}
      />

      <br />

      <Textarea
          label="vertical"
          placeholder="Resize Vertical"
          resize="vertical"
          {...props}
      />

      <br />

      <Textarea
          label="both"
          placeholder="Resize Both"
          resize="both"
          {...props}
      />

      <br />

      <Textarea
          label="horizontal"
          placeholder="Resize Horizontal"
          resize="horizontal"
          {...props}
      />
    </div>
  )
}

export default TextareaResize