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

Front-end components library

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DonationCard = 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 _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _grid = require('kitten/components/grid/grid');

var _title = require('kitten/components/typography/title');

var _horizontalStroke = require('kitten/components/layout/horizontal-stroke');

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

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _mediaQueries = require('kitten/hoc/media-queries');

var _textInputWithUnitForm = require('kitten/components/form/text-input-with-unit-form');

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 DonationCardComponent = function DonationCardComponent(_ref) {
  var viewportIsSOrLess = _ref.viewportIsSOrLess,
      isDisabled = _ref.isDisabled,
      title = _ref.title,
      titleTag = _ref.titleTag,
      donationForm = _ref.donationForm,
      version = _ref.version,
      others = _objectWithoutProperties(_ref, ['viewportIsSOrLess', 'isDisabled', 'title', 'titleTag', 'donationForm', 'version']);

  var isTinyVersion = version === 'tiny' || viewportIsSOrLess;
  var gridColProps = isTinyVersion ? {} : { 'col-m': 10, 'offset-m': 1, 'col-l': 8, 'offset-l': 2 };

  var cardStyles = [others.style, styles.card, isDisabled && styles.card.isDisabled];

  return _react2.default.createElement(
    'div',
    { style: cardStyles },
    _react2.default.createElement(
      _marger.Marger,
      { bottom: isTinyVersion ? 3 : 4, top: isTinyVersion ? 3 : 4 },
      _react2.default.createElement(
        _grid.Grid,
        { style: styles.card.content },
        _react2.default.createElement(
          _grid.GridCol,
          gridColProps,
          _react2.default.createElement(
            _marger.Marger,
            { bottom: '2' },
            _react2.default.createElement(
              _title.Title,
              {
                modifier: isTinyVersion ? 'quinary' : 'quaternary',
                margin: false,
                tag: titleTag,
                style: styles.text
              },
              title
            )
          ),
          _react2.default.createElement(
            _marger.Marger,
            { top: '2', bottom: '3' },
            _react2.default.createElement(_horizontalStroke.HorizontalStroke, { size: 'big', style: styles.horizontalStroke })
          ),
          _react2.default.createElement(_textInputWithUnitForm.TextInputWithUnitForm, _extends({}, donationForm, {
            align: 'center',
            formIsDisabled: isDisabled,
            version: version
          }))
        )
      )
    )
  );
};

DonationCardComponent.propTypes = {
  viewportIsSOrLess: _propTypes2.default.bool.isRequired,
  title: _propTypes2.default.string.isRequired,
  titleTag: _propTypes2.default.string,
  isDisabled: _propTypes2.default.bool,
  donationForm: _propTypes2.default.object.isRequired,
  version: _propTypes2.default.oneOf(['default', 'tiny'])
};

DonationCardComponent.defaultProps = {
  titleTag: 'h2',
  isDisabled: false,
  version: 'default'
};

var styles = {
  card: {
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: _colorsConfig2.default.line1,

    content: {
      paddingLeft: 20,
      paddingRight: 20
    },
    isDisabled: {
      filter: 'grayscale(1) opacity(.4)',
      cursor: 'not-allowed'
    }
  },

  text: {
    color: _colorsConfig2.default.font1,
    textAlign: 'center'
  },

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

var DonationCard = exports.DonationCard = (0, _mediaQueries.mediaQueries)((0, _radium2.default)(DonationCardComponent), {
  viewportIsSOrLess: true
});