kitten-components/dist/javascripts/kitten/components/cards/reward-card/content.js

Front-end components library

'use strict';

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

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 _rewardCard = require('kitten/components/cards/reward-card');

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

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

var _button = require('kitten/components/buttons/button');

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

var _paragraph = require('kitten/components/typography/paragraph');

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

var _starIcon = require('kitten/components/icons/star-icon');

var _deprecated = require('kitten/helpers/utils/deprecated');

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

var RewardCardContentBase = function RewardCardContentBase(_ref) {
  var titleAmount = _ref.titleAmount,
      titleTag = _ref.titleTag,
      subtitle = _ref.subtitle,
      subtitleTag = _ref.subtitleTag,
      description = _ref.description,
      starred = _ref.starred,
      starLabel = _ref.starLabel,
      isDisabled = _ref.isDisabled,
      isTinyVersion = _ref.isTinyVersion;

  var descriptionStyle = [isDisabled && _rewardCard.styles.disabled];

  return _react2.default.createElement(
    _deprecated.Deprecated,
    { warningMessage: 'Please use RewardCard sub-component to make your composition. You can check some examples on https://kisskissbankbank.github.io/kitten/' },
    _react2.default.createElement(
      'div',
      { style: descriptionStyle, disabled: isDisabled },
      starred && _react2.default.createElement(
        _marger.Marger,
        { bottom: '2' },
        _react2.default.createElement(
          _button.Button,
          {
            icon: true,
            readonly: true,
            tag: 'span',
            size: 'tiny',
            modifier: 'lithium',
            style: { borderRadius: 5 }
          },
          _react2.default.createElement(_starIcon.StarIcon, { className: 'k-Button__icon is-readonly' }),
          starLabel
        )
      ),
      _react2.default.createElement(
        _marger.Marger,
        { top: starred ? 2 : 0, bottom: '2' },
        _react2.default.createElement(
          _title.Title,
          {
            modifier: isTinyVersion ? 'quaternary' : 'tertiary',
            italic: true,
            margin: false,
            tag: titleTag,
            style: _rewardCard.styles.textColor
          },
          titleAmount
        )
      ),
      _react2.default.createElement(
        _marger.Marger,
        { top: '2', bottom: '3' },
        _react2.default.createElement(_horizontalStroke.HorizontalStroke, { size: 'big' })
      ),
      subtitle && _react2.default.createElement(
        _marger.Marger,
        { top: '3', bottom: '1' },
        _react2.default.createElement(
          _text.Text,
          {
            color: 'font1',
            size: isTinyVersion ? 'big' : 'huge',
            tag: subtitleTag,
            weight: 'bold',
            style: _rewardCard.styles.textMargin
          },
          subtitle
        )
      ),
      _react2.default.createElement(
        _marger.Marger,
        { top: !subtitle ? 3 : 1 },
        _react2.default.createElement(
          _paragraph.Paragraph,
          {
            style: _rewardCard.styles.textColor,
            modifier: isTinyVersion ? 'quaternary' : 'tertiary',
            margin: false
          },
          description
        )
      )
    )
  );
};

RewardCardContentBase.propTypes = {
  titleAmount: _propTypes2.default.string.isRequired,
  titleTag: _propTypes2.default.string,
  subtitle: _propTypes2.default.string,
  subtitleTag: _propTypes2.default.string,
  description: _propTypes2.default.string,
  starred: _propTypes2.default.bool,
  starLabel: _propTypes2.default.string,
  isDisabled: _propTypes2.default.bool,
  isTinyVersion: _propTypes2.default.bool.isRequired
};

RewardCardContentBase.defaultProps = {
  titleTag: 'h1',
  subtitle: '',
  subtitleTag: 'p',
  description: '',
  starred: false,
  starLabel: '',
  isDisabled: false
};

var RewardCardContent = exports.RewardCardContent = (0, _radium2.default)(RewardCardContentBase);