Forms

import React from 'react'

import Checkbox from '../_checkbox'

const CheckboxDefault = (props) => {
  return (
    <div>
      <Checkbox
          name="default name"
          tabIndex={0}
          text="Checkbox label"
          value="default value"
          {...props}
      />
    </div>
  )
}

export default CheckboxDefault

import React from 'react'

import Checkbox from '../_checkbox'

const CheckboxChecked = (props) => {
  return (
    <div>
      <Checkbox
          checked
          name="checkbox-name"
          text="Checked Checkbox"
          value="check-box value"
          {...props}
      />
    </div>
  )
}

export default CheckboxChecked

import React, { useState } from 'react'

import Checkbox from '../_checkbox'

const CheckboxCustom = (props) => {
  const [checked, setChecked] = useState(false)

  const handleOnChange = () => {
    setChecked(!checked)
  }

  return (
    <div>
      {`The checkbox is ${checked ? 'checked' : 'unchecked'}.`}
      <br />
      <br />
      <div>
        <Checkbox
            text="Toggle Me"
            {...props}
        >
          <input
              checked={checked}
              name="custom-name"
              onChange={handleOnChange}
              type="checkbox"
              value="custom-value"
          />
        </Checkbox>
      </div>
    </div>
  )
}

export default CheckboxCustom

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

const CheckboxError = (props) => {
  return (
    <div>
      <Checkbox
          error
          name="default name"
          text="Checkbox label"
          value="default value"
          {...props}
      />
    </div>
  )
}

export default CheckboxError

import React, { useState } from 'react'
import { Checkbox, Table } from '../..'

const CheckboxIndeterminate = (props) => {
  const [checkboxes, setCheckboxes] = useState([
    { name: 'Coffee', checked: false },
    { name: 'Ice Cream', checked: false },
    { name: 'Chocolate', checked: true },
  ])

  const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
  const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)

  const processCheckboxes = (checked) =>
    checkboxes.slice(0).map((checkbox) => {
      checkbox.checked = checked
      return checkbox
    })

  const onToggleAll = () => {
    setCheckboxes(
      isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
    )
  }

  const updateCheckboxes = (checkbox, index) => {
    const newCheckboxes = checkboxes.slice(0)
    newCheckboxes[index].checked = !checkbox.checked
    setCheckboxes(newCheckboxes)
  }

  return (
    <Table
        container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>
            <Checkbox
                checked={isAllChecked}
                indeterminate={!isAllChecked && !isNoneChecked}
                name="checkbox-name"
                onChange={onToggleAll}
                text={isNoneChecked ? 'Check All' : 'Uncheck All'}
                value="check-box value"
                {...props}
            />
          </th>
        </tr>
      </thead>
      <tbody>
        {checkboxes.map((checkbox, index) => (
          <tr key={index}>
            <td>
              <Checkbox
                  checked={checkbox.checked}
                  name={checkbox.name}
                  onChange={() => {
                    updateCheckboxes(checkbox, index)
                  }}
                  text={checkbox.name}
                  value="check-box value"
                  {...props}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  )
}

export default CheckboxIndeterminate

import React from 'react'

import DatePicker from '../_date_picker'

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

export default DatePickerDefault

import React from 'react'

import DatePicker from '../_date_picker'

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

export default DatePickerHideIcon

import React from 'react'

import DatePicker from '../_date_picker'

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

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

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

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

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

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

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

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 DatePicker from '../_date_picker'

import Button from '../../pb_button/_button'

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

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

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

import React from 'react'

import DatePicker from '../_date_picker'

const DatePickerInline = (props) => {
  const showAngleDownHandler = (dateSelected) => {
    if (dateSelected) {
      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
    }
  }

  return (
    <div>
      <DatePicker
          className="inline-date-picker"
          hideIcon
          inLine
          onChange={showAngleDownHandler}
          pickerId="date-picker-inline"
          {...props}
      />
    </div>
  )
}

export default DatePickerInline

/* @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 from '../_form_group'
import TextInput from '../../pb_text_input/_text_input'

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 from '../../pb_button/_button'
import FormGroup from '../../pb_form_group/_form_group'
import TextInput from '../../pb_text_input/_text_input'

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 FormGroup from '../_form_group'
import TextInput from '../../pb_text_input/_text_input'
import Button from '../../pb_button/_button'

const FormGroupFullWidth = (props) => (
  <div>
    <div>
      <FormGroup fullWidth>
        <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>
    <br />
    <div>
      <FormGroup fullWidth>
        <TextInput
            placeholder="Search"
            {...props}
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
            {...props}
        />
      </FormGroup>
    </div>
  </div>
)

export default FormGroupFullWidth

import React from 'react'

import FormGroup from '../_form_group'

import DatePicker from '../../pb_date_picker/_date_picker'
import TextInput from '../../pb_text_input/_text_input'

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

import Select from '../../pb_select/_select'
import TextInput from '../../pb_text_input/_text_input'

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 from '../../pb_form_group/_form_group'
import SelectableCard from '../../pb_selectable_card/_selectable_card'

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 from '../_form_group'
import SelectableCardIcon from '../../pb_selectable_card_icon/_selectable_card_icon'

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 FormPillSize = (props) => {
  return (

    <div>
      <FormPill
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="small"
          {...props}
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          size="small"
          {...props}
      />
    </div>
  )
}

export default FormPillSize

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, { useState } from 'react'

import Passphrase from '../_passphrase'

const PassphraseDefault = (props) => {
  const [input, setInput] = useState('')
  const handleChange = (e) => setInput(e.target.value)

  const [confoInput, setConfoInput] = useState('')
  const handleConfoChange = (e) => setConfoInput(e.target.value)

  return (
    <>
      <div>
        <Passphrase
            id="my-passphrase"
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            confirmation
            onChange={handleConfoChange}
            value={confoInput}
            {...props}
        />
        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
      </div>
    </>
  )
}

export default PassphraseDefault

import React, { useState } from 'react'

import Body from '../../pb_body/_body'
import Passphrase from '../../pb_passphrase/_passphrase'
import TextInput from '../../pb_text_input/_text_input'

const PassphraseMeterSettings = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  const [strength, setStrength] = useState(0)
  const handleStrengthChange = (str) => setStrength(str)
  return (
    <>
      <div>
        <Body>
          {'These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings.'}
        </Body>
        <br />
        <TextInput
            disabled
            label="Calculated Strength"
            readOnly
            value={strength}
        />

        <Passphrase
            label="Default settings"
            onChange={handleChange}
            onStrengthChange={handleStrengthChange}
            value={input}
            {...props}
        />

        <Passphrase
            label="Min length = 5"
            minLength={5}
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            label="Min length = 30"
            minLength={30}
            onChange={handleChange}
            value={input}
            {...props}
        />

        <Passphrase
            averageThreshold={1}
            label="Average threshold = 1"
            onChange={handleChange}
            value={input}
            {...props}
        />

        <Passphrase
            label="Strong Threshold = 4"
            onChange={handleChange}
            strongThreshold={4}
            value={input}
            {...props}
        />
      </div>
    </>
  )
}

export default PassphraseMeterSettings

import React, { useState } from 'react'

import Passphrase from '../../pb_passphrase/_passphrase'

const PassphraseInputProps = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  return (
    <>
      <div>
        <Passphrase
            inputProps={{
              name: 'my-disabled-field',
              id: 'my-value-id',
              disabled: true,
            }}
            label="Pass props directly to input kit"
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            inputProps={{
              children: (
                <input
                    onChange={handleChange}
                    type="password"
                    value={input}
                />),
            }}
            label="Custom input"
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
            label="Set name and ID for use in form libraries"
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            confirmation
            inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }}
            onChange={handleChange}
            value={input}
            {...props}
        />
      </div>
    </>
  )
}

export default PassphraseInputProps

import React, { useState } from 'react'

import Passphrase from '../_passphrase'

const PassphraseTips = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  return (
    <>
      <div>
        <Passphrase
            label="Pass an array of strings to the tips prop"
            onChange={handleChange}
            tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']}
            value={input}
            {...props}
        />
        <Passphrase
            label="Omit the prop to hide the icon"
            onChange={handleChange}
            value={input}
            {...props}
        />
        <Passphrase
            label="Only show tips at small screen size"
            onChange={handleChange}
            showTipsBelow="xs"
            tips={['Make the password longer', 'Type more things', 'Use something else']}
            value={input}
            {...props}
        />
        <Passphrase
            label="Only show tips at medium screen size"
            onChange={handleChange}
            showTipsBelow="md"
            tips={['Make the password longer', 'Type more things', 'Use something else']}
            value={input}
            {...props}
        />
        <Passphrase
            label="Only show tips at large screen size"
            onChange={handleChange}
            showTipsBelow="lg"
            tips={['Make the password longer', 'Type more things', 'Use something else']}
            value={input}
            {...props}
        />
      </div>
    </>
  )
}

export default PassphraseTips

import React, { useState } from 'react'

import Passphrase from '../_passphrase'

import TextInput from '../../pb_text_input/_text_input'

const PassphraseStrengthChange = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  const [strength, setStrength] = useState(0)
  const handleStrengthChange = (str) => setStrength(str)

  return (
    <>
      <div>
        <Passphrase
            label="Passphrase"
            onChange={handleChange}
            onStrengthChange={handleStrengthChange}
            value={input}
            {...props}
        />
        <TextInput
            disabled
            label="Passphrase Strength"
            readOnly
            value={strength}
        />
      </div>
    </>
  )
}

export default PassphraseStrengthChange

import React, { useState } from 'react'

import Passphrase from '../_passphrase'
import Body from '../../pb_body/_body'

const PassphraseCommon = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']

  const commonCheck = (passphrase) => {
    if (COMMON_PASSPHRASES.includes(passphrase))
      return true
    return false
  }

  return (
    <>
      <div>
        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
        <br />
        <Passphrase
            common={commonCheck(input)}
            onChange={handleChange}
            value={input}
            {...props}
        />
      </div>
    </>
  )
}

export default PassphraseCommon

import React, { useState } from 'react'

import Passphrase from '../_passphrase'

const PassphraseBreached = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => setInput(e.target.value)

  return (
    <>
      <div>
        <br />
        <Passphrase
            checkPwned
            onChange={handleChange}
            value={input}
            {...props}
        />
      </div>
    </>
  )
}

export default PassphraseBreached

import React from 'react'

import Radio from '../_radio'

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

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 { Flex, Radio } from '../../'

const RadioAlignment = () => {
  return (
    <Flex>
      <Radio
          alignment="vertical"
          label="Power"
          marginRight="sm"
          name="Group2"
          tabIndex={0}
          value="Power"
      />
      <br />
      <Radio
          alignment="vertical"
          defaultChecked={false}
          label="Nitro"
          marginRight="sm"
          name="Group2"
          value="Nitro"
      />
      <br />
      <Radio
          alignment="vertical"
          defaultChecked={false}
          label="Google"
          name="Group2"
          value="Google"
      />
    </Flex>
  )
}

export default RadioAlignment

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

const RichTextEditorDefault = (props) => (
  <div>
    <RichTextEditor
        {...props}
    />
  </div>
)

export default RichTextEditorDefault

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

const RichTextEditorSimple = (props) => (
  <div>
    <RichTextEditor
        simple
        {...props}
    />
  </div>
)

export default RichTextEditorSimple

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

const RichTextEditorAttributes = (props) => (
  <div>
    <RichTextEditor
        aria={{ label: 'rich textarea' }}
        data={{ key: 'value', key2: 'value2' }}
        name="name-attribute"
        {...props}
    />
  </div>
)

export default RichTextEditorAttributes

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

const RichTextEditorFocus = (props) => (
  <>
    <RichTextEditor
        focus
        {...props}
    />
    <br />
    <RichTextEditor
        focus
        {...props}
    />
  </>
)
export default RichTextEditorFocus

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

const RichTextEditorSticky = (props) => (
  <div>
    <RichTextEditor
        id="sticky"
        sticky
        value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
        {...props}
    />
  </div>
)

export default RichTextEditorSticky

import React, { useState } from 'react'
import { RichTextEditor, Select } from '../../'
import { changelog, release } from './templates.js'

const RichTextEditorTemplates = (props) => {
  const [editorContent, setEditorContent] = useState('')

  const handleChange = (event) => {
    setEditorContent(event.target.value)
  }

  const options = [
    {
      value: release,
      text: 'Playbook Release',
    },
    {
      value: changelog,
      text: 'Changelog',
    },
  ]

  return (
    <div>
      <Select
          blankSelection="Select a template..."
          label="Template"
          onChange={handleChange}
          options={options}
          {...props}
      />
      <RichTextEditor
          id="template"
          template={editorContent}
          {...props}
      />
    </div>
  )
}

export default RichTextEditorTemplates

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

const RichTextEditorToolbarBottom = (props) => (
  <div>
    <RichTextEditor
        id="bottom-toolbar"
        toolbarBottom
        {...props}
    />
  </div>
)

export default RichTextEditorToolbarBottom

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

const RichTextEditorInline = (props) => (
  <div>
    <RichTextEditor
        id="inline"
        inline
        toolbarBottom
        value="Try hovering over this text. Then try modifying it or adding more of your own text."
        {...props}
    />
  </div>
)

export default RichTextEditorInline

import React, { useState } from 'react'
import {
  Button,
  Card,
  RichTextEditor,
} from '../../'

const RichTextEditorPreview = (props) => {
  const [showPreview, setShowPreview] = useState(false)
  const [previewText, setPreviewText] = useState(<div />)

  const handleChange = (event) => setPreviewText(event)
  const handleClick = () => {
    setShowPreview(true)
  }

  return (
    <div>
      <RichTextEditor
          id="content-preview-editor"
          onChange={handleChange}
          {...props}
      />
      <If condition={showPreview}>
        <Card marginTop="md">
          <div
              className="trix-content"
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: previewText }}
              id="preview-content"
          />
        </Card>
        <Else />
        <div />
      </If>
      <Button
          id="preview-button"
          marginTop="md"
          onClick={handleClick}
          text="Preview Output"
          variant="secondary"
      />
    </div>
  )
}
export default RichTextEditorPreview

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