@vtex/styleguide/lib/SelectableCard/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Check = require("../icon/Check");

var _Check2 = _interopRequireDefault(_Check);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var propTypes = {
  /** Content of the card */
  children: _propTypes2.default.node.isRequired,

  /** Use the full size of the card. */
  noPadding: _propTypes2.default.bool,
  selected: _propTypes2.default.bool,
  onClick: _propTypes2.default.func.isRequired,

  /** Use this to group cards on the left. */
  hasGroupLeft: _propTypes2.default.bool,

  /** Use this to group cards on the right. */
  hasGroupRight: _propTypes2.default.bool
};

var SelectableCard = function SelectableCard(_ref) {
  var children = _ref.children,
      noPadding = _ref.noPadding,
      selected = _ref.selected,
      onClick = _ref.onClick,
      hasGroupLeft = _ref.hasGroupLeft,
      hasGroupRight = _ref.hasGroupRight;
  var padding = noPadding ? '' : 'pa6';
  return _react2.default.createElement("div", {
    className: "ba br2 bw2 relative " + (selected ? 'b--action-primary z-999' : 'b--transparent') + " nh2"
  }, selected ? _react2.default.createElement("div", {
    className: "absolute right--1 top--1 br-100 h2 w2 bg-action-primary z-999 pa3"
  }, _react2.default.createElement(_Check2.default, {
    color: "white"
  })) : null, _react2.default.createElement("div", {
    style: {
      boxShadow: '0 3px 9px 0 rgba(61, 62, 64, 0.25)',
      clipPath: "inset(-10px " + (hasGroupRight ? '0px' : '-10px') + " -10px " + (hasGroupLeft ? '0px' : '-10px') + ")"
    },
    className: "vtex-card card w-100 b2 br2 bg-base c-on-base " + padding + " pointer",
    onClick: onClick
  }, children));
};

SelectableCard.propTypes = propTypes;
exports.default = SelectableCard;