@retailmenot/anchor/commonjs/card.js

A React UI Library by RetailMeNot

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    display: inline-block;\n    font-family: base;\n    width: 100%;\n    border-top: light;\n    ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCardActionArea = styled__default('div')(_templateObject(), function (_ref) {
  var _ref$backgroundColor = _ref.backgroundColor,
      backgroundColor = _ref$backgroundColor === void 0 ? 'white' : _ref$backgroundColor;
  return styled.css({
    backgroundColor: backgroundColor
  });
});
var CardActionArea = function CardActionArea(_a) {
  var className = _a.className,
      children = _a.children,
      props = __chunk_2.__rest(_a, ["className", "children"]);

  return React.createElement(StyledCardActionArea, Object.assign({
    className: classNames('anchor-card-action-area', className)
  }, props), children);
};

function _templateObject$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-family: base;\n    top: 0;\n    right: 0;\n    width: 2.5rem;\n    height: 2.5rem;\n    background-color: white;\n    z-index: 1;\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCard = styled__default('div')(_templateObject$1());
var CardAction = function CardAction(_a) {
  var className = _a.className,
      children = _a.children,
      props = __chunk_2.__rest(_a, ["className", "children"]);

  return React.createElement(StyledCard, Object.assign({
    className: classNames('anchor-card-action', className)
  }, props), children);
};

function _templateObject$2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n    padding: ", ";\n    font-family: base;\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var gutterSizes = {
  none: '',
  small: '0.75rem',
  medium: '1rem',
  large: '1.5rem'
};
var StyledCard$1 = styled__default('div')(_templateObject$2(), function (_ref) {
  var _ref$gutter = _ref.gutter,
      gutter = _ref$gutter === void 0 ? 'medium' : _ref$gutter;
  return gutterSizes[gutter];
});
var CardContent = function CardContent(_a) {
  var className = _a.className,
      children = _a.children,
      props = __chunk_2.__rest(_a, ["className", "children"]);

  return React.createElement(StyledCard$1, Object.assign({
    className: classNames('anchor-card-content', className)
  }, props), children);
};

function _templateObject$3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    font-family: base;\n    box-sizing: border-box;\n    border-radius: base;\n    border: solid thin ", ";\n    ", "\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCard$2 = styled__default('div')(_templateObject$3(), system.th.color('borders.base'), system.space);
var Card = function Card(_a) {
  var className = _a.className,
      children = _a.children,
      action = _a.action,
      actionArea = _a.actionArea,
      gutter = _a.gutter,
      props = __chunk_2.__rest(_a, ["className", "children", "action", "actionArea", "gutter"]);

  return React.createElement(StyledCard$2, Object.assign({
    className: classNames('anchor-card', className)
  }, props), action && React.createElement(CardAction, null, action), React.createElement(CardContent, {
    gutter: gutter,
    children: children
  }), React.Children.map(actionArea, function (child) {
    if (child.type.name === 'ActionArea') {
      return actionArea;
    } else {
      return React.createElement(CardActionArea, null, actionArea);
    }
  }));
};

exports.Card = Card;
//# sourceMappingURL=card.js.map