kitten-components/dist/javascripts/kitten/components/cards/backer-card.js

Front-end components library

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _marger = require('kitten/components/layout/marger');

var _text = require('kitten/components/typography/text');

var _buttonImage = require('kitten/components/buttons/button-image');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var BackerCard = function BackerCard(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle,
      imgProps = _ref.imgProps,
      description = _ref.description,
      others = _objectWithoutProperties(_ref, ['title', 'subtitle', 'imgProps', 'description']);

  return _react2.default.createElement(
    'div',
    _extends({}, others, { style: _extends({}, styles.card, others.style) }),
    _react2.default.createElement(
      _marger.Marger,
      { top: '4', bottom: '1' },
      _react2.default.createElement(
        _text.Text,
        { color: 'primary1', weight: 'regular', lineHeight: 'normal' },
        title,
        subtitle && _react2.default.createElement(
          _text.Text,
          {
            color: 'font1',
            weight: 'light',
            size: 'micro',
            style: { display: 'block' }
          },
          subtitle
        )
      )
    ),
    _react2.default.createElement(
      _marger.Marger,
      { top: '1', bottom: '1' },
      _react2.default.createElement(_buttonImage.ButtonImage, {
        tag: 'span',
        img: imgProps,
        style: styles.buttonImage,
        withoutPointerEvents: true,
        huge: true
      })
    ),
    _react2.default.createElement(
      _marger.Marger,
      { top: '1', bottom: '4' },
      _react2.default.createElement(
        _text.Text,
        {
          tag: 'p',
          color: 'font1',
          weight: 'light',
          size: 'micro',
          lineHeight: 'normal',
          style: { margin: 0 }
        },
        description
      )
    )
  );
};

exports.BackerCard = BackerCard;
BackerCard.propTypes = {
  title: _propTypes2.default.string.isRequired,
  subtitle: _propTypes2.default.string,
  imgProps: _propTypes2.default.object.isRequired,
  description: _propTypes2.default.node.isRequired
};

BackerCard.defaultProps = {
  subtitle: null
};

var styles = {
  card: {
    padding: '0 20px',
    border: '2px solid ' + _colorsConfig2.default.line1,
    textAlign: 'center',
    wordBreak: 'break-word'
  },

  buttonImage: {
    margin: '0 auto'
  }
};