Selectable Card Icon

Default

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

Checkmark

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

Single Select

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

Custom Icon

Tips for Custom Icons

When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:

Attributes must be React compatible e.g. xmlns:xlink should be xmlnsXlink and so on. There should be no hyphenated attributes and no semi-colons!.

Fill colors with regards to g or path nodes, e.g. fill="black", should be replaced with currentColor ala fill="currentColor". Your mileage may vary depending on the complexity of your SVG.

Pay attention to your custom icon's dimensions and viewBox attribute. It is best to use a viewBox="0 0 512 512" starting point when designing instead of trying to retrofit the viewbox afterwards!

You must source your own SVG into component/view you are working on. This can easily be done in programmatic and maintainable ways.

React

So long as you have a valid React <SVG> node, you can send it as the customIcon prop and the kit will take care of the rest.

Rails

Some Rails applications use only webpack(er) which means using image_url will be successful over image_path in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use image_path or image_url. Of course, YMMV depending on any custom configurations in your Rails application.

import React from 'react'

import { SelectableCardIcon } from 'playbook-ui'

const svg = {
  newChat: (
    <svg
        ariaHidden="true"
        focusable="false"
        role="img"
        viewBox="0 0 512 512"
        xmlns="http://www.w3.org/2000/svg"
    >
      <path
          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
          fill="currentColor"
      />
    </svg>
  ),
}

const SelectableCardIconCustom = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <SelectableCardIcon
          bodyText="Talk to someone you love"
          checked
          customIcon={svg.newChat}
          inputId={1}
          titleText="New Chat"
      />
    </div>
  )
}

export default SelectableCardIconCustom

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat