Sha256: 578a99cae2a1303fc9f64d5a7f74c7b54f3e0b56c6b52d26f90b8b35eec66932

Contents?: true

Size: 1.28 KB

Versions: 17

Compression:

Stored size: 1.28 KB

Contents

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

class SelectableCardImage extends React.Component {
  state = {
    selectableImage: true,
    unselectedImage: false,
  }

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

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

        <SelectableCard
            checked={this.state.selectableImage}
            icon
            inputId="selectableImage"
            name="selectableImage"
            onChange={this.handleSelect}
            value="selectableImage"
        >
          <Image
              rounded
              size="xl"
              url="https://unsplash.it/500/400/?image=634"
          />

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

        <SelectableCard
            checked={this.state.unselectedImage}
            icon
            inputId="unselectedImage"
            name="unselectedImage"
            onChange={this.handleSelect}
            value="unselectedImage"
        >
          <Image
              rounded
              size="xl"
              url="https://unsplash.it/500/400/?image=634"
          />
        </SelectableCard>

      </div>
    )
  }
}

export default SelectableCardImage

Version data entries

17 entries across 17 versions & 1 rubygems

Version Path
playbook_ui-7.11.1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.11.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.11.0.pre.alpha1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.10.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.9.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.8.4 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.8.3 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.8.2 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.8.1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.8.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.7.0.pre.alpha1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.7.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.6.2.pre.alpha1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.6.2 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.6.1.pre.alpha1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.6.1 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
playbook_ui-7.6.0 app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx