Selectable Card Icon

import React, { useState } from 'react'

import SelectableCardIcon from 'playbook-ui'

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"
      />
      <SelectableCardIcon
          bodyText="Export"
          checked={unselected}
          icon="chart-pie"
          inputId={2}
          onChange={() => setUnselected(!unselected)}
          titleText="Market Share"
      />
      <SelectableCardIcon
          bodyText="Export"
          disabled
          icon="analytics"
          inputId={3}
          titleText="Comprehensive"
      />
    </div>
  )
}

export default SelectableCardIconDefault

import React, { useState } from 'react'

import SelectableCardIcon from 'playbook-ui'

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"
      />
      <SelectableCardIcon
          bodyText="Poof, you're a sandwich."
          checked={unselected}
          checkmark
          icon="hat-wizard"
          inputId={5}
          onChange={() => setUnselected(!unselected)}
          titleText="Wizard"
      />
      <SelectableCardIcon
          bodyText="Where is the lamb sauce?"
          checkmark
          disabled
          icon="hat-chef"
          inputId={6}
          titleText="Chef"
      />
    </div>
  )
}

export default SelectableCardIconCheckmark

import React, { useState } from 'react'

import SelectableCardIcon from 'playbook-ui'

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"
      />
      <SelectableCardIcon
          checked={selectedFormat === 'bus'}
          icon="bus"
          inputId={8}
          name="select"
          onChange={() => toggleFormat('bus')}
          titleText="Bus"
          value="bus"
      />
      <SelectableCardIcon
          checked={selectedFormat === 'subway'}
          icon="subway"
          inputId={9}
          name="select"
          onChange={() => toggleFormat('subway')}
          titleText="Subway"
          value="subway"
      />
    </div>
  )
}

export default SelectableCardIconSingleSelect