kitten-components/dist/javascripts/kitten/components/heroes/hero.js

Front-end components library

'use strict';

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

var _right2, _content, _left3, _right3, _image;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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 _container = require('kitten/components/grid/container');

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

var _screenConfig = require('kitten/constants/screen-config');

var _gridConfig = require('kitten/constants/grid-config');

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

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Grid = (0, _radium2.default)(_grid.Grid);
var GridCol = (0, _radium2.default)(_grid.GridCol);

var HeroBase = function (_Component) {
  _inherits(HeroBase, _Component);

  function HeroBase() {
    _classCallCheck(this, HeroBase);

    return _possibleConstructorReturn(this, (HeroBase.__proto__ || Object.getPrototypeOf(HeroBase)).apply(this, arguments));
  }

  _createClass(HeroBase, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _container.Container,
        null,
        _react2.default.createElement(
          Grid,
          null,
          this.renderContent(),
          this.renderImage()
        )
      );
    }
  }, {
    key: 'renderContent',
    value: function renderContent() {
      var gridStyles = [styles.content.grid, this.props.direction == 'left' && styles.content.grid.left, this.props.direction == 'right' && styles.content.grid.right, this.props.tiny && styles.content.grid.tiny];

      var contentStyles = [styles.content, this.props.direction == 'left' && styles.content.left, this.props.direction == 'right' && styles.content.right, {
        backgroundColor: this.props.contentBackgroundColor,
        color: this.props.contentColor
      }];

      return _react2.default.createElement(
        GridCol,
        { col: '12', 'col-s': '10', 'col-l': '6', style: gridStyles },
        _react2.default.createElement(
          'div',
          { style: contentStyles },
          this.props.children
        )
      );
    }
  }, {
    key: 'renderImage',
    value: function renderImage() {
      var gridStyles = [styles.image.grid, this.props.direction == 'left' && styles.image.grid.left, this.props.direction == 'right' && styles.image.grid.right, this.props.tiny && styles.image.grid.tiny];

      var imageStyles = [styles.image, this.props.direction == 'right' && styles.image.right, { backgroundImage: 'url(' + this.props.imageSrc + ')' }];

      return _react2.default.createElement(
        GridCol,
        { col: '12', 'col-l': '7', style: gridStyles },
        _react2.default.createElement('div', { style: imageStyles })
      );
    }
  }]);

  return HeroBase;
}(_react.Component);

HeroBase.propTypes = {
  direction: _propTypes2.default.oneOf(['left', 'right']),
  tiny: _propTypes2.default.bool,
  imageSrc: _propTypes2.default.string,
  contentBackgroundColor: _propTypes2.default.string,
  contentColor: _propTypes2.default.string
};
HeroBase.defaultProps = {
  direction: 'left',
  tiny: false,
  imageSrc: '',
  contentBackgroundColor: _colorsConfig2.default.font1,
  contentColor: _colorsConfig2.default.background1
};


var styles = {
  content: (_content = {
    padding: '100px 115px'

  }, _defineProperty(_content, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
    padding: '100px 85px'
  }), _defineProperty(_content, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
    padding: '50px 20px'
  }), _defineProperty(_content, 'left', _defineProperty({}, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
    marginLeft: '-' + _gridConfig.CONTAINER_PADDING_MOBILE + 'px'
  })), _defineProperty(_content, 'right', _defineProperty({}, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
    marginRight: '-' + _gridConfig.CONTAINER_PADDING_MOBILE + 'px'
  })), _defineProperty(_content, 'grid', {
    position: 'relative',
    zIndex: 1,
    paddingTop: 1 / _gridConfig.NUM_COLUMNS * 100 + 'vw',
    marginLeft: 1 / _gridConfig.NUM_COLUMNS * 100 + '%',

    left: _defineProperty({}, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
      paddingTop: 8 / _gridConfig.NUM_COLUMNS * 100 + 'vw',
      marginLeft: 0
    }),

    right: (_right2 = {
      marginLeft: 5 / _gridConfig.NUM_COLUMNS * 100 + '%'

    }, _defineProperty(_right2, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
      paddingTop: 8 / _gridConfig.NUM_COLUMNS * 100 + 'vw',
      marginLeft: 2 / _gridConfig.NUM_COLUMNS * 100 + '%'
    }), _defineProperty(_right2, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
      marginLeft: 0
    }), _right2),

    tiny: _defineProperty({}, '@media (min-width: ' + _screenConfig.ScreenConfig['L'].min + 'px)', {
      paddingBottom: 1 / 2 / _gridConfig.NUM_COLUMNS * 100 + 'vw'
    })
  }), _content),

  image: (_image = {
    width: 'calc(100% + ' + _gridConfig.CONTAINER_PADDING + 'px)',
    height: '100%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat'

  }, _defineProperty(_image, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
    width: 'calc(100% + ' + _gridConfig.CONTAINER_PADDING * 2 + 'px)',
    height: '100vw',
    marginLeft: '-' + _gridConfig.CONTAINER_PADDING + 'px'
  }), _defineProperty(_image, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
    width: 'calc(100% + ' + _gridConfig.CONTAINER_PADDING_MOBILE * 2 + 'px)',
    marginLeft: '-' + _gridConfig.CONTAINER_PADDING_MOBILE + 'px'
  }), _defineProperty(_image, 'right', {
    marginLeft: '-' + _gridConfig.CONTAINER_PADDING + 'px'
  }), _defineProperty(_image, 'grid', {
    marginLeft: '-' + 2 / _gridConfig.NUM_COLUMNS * 100 + '%',
    paddingBottom: 1 / 2 / _gridConfig.NUM_COLUMNS * 100 + 'vw',

    left: (_left3 = {}, _defineProperty(_left3, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
      marginLeft: '-' + 10 / _gridConfig.NUM_COLUMNS * 100 + '%',
      paddingBottom: 0
    }), _defineProperty(_left3, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
      marginLeft: '-100%'
    }), _left3),

    right: (_right3 = {
      marginLeft: '-' + 11 / _gridConfig.NUM_COLUMNS * 100 + '%'

    }, _defineProperty(_right3, '@media (max-width: ' + _screenConfig.ScreenConfig['M'].max + 'px)', {
      marginLeft: '-' + 12 / _gridConfig.NUM_COLUMNS * 100 + '%'
    }), _defineProperty(_right3, '@media (max-width: ' + _screenConfig.ScreenConfig['XS'].max + 'px)', {
      marginLeft: '-100%'
    }), _right3),

    tiny: _defineProperty({}, '@media (min-width: ' + _screenConfig.ScreenConfig['L'].min + 'px)', {
      paddingBottom: 0
    })
  }), _image)
};

var Hero = exports.Hero = (0, _radium2.default)(HeroBase);