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