web-components/dist/modules/hero/Hero.js

Build and Test React Components in real time

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _hero = require('./hero.css');

var _hero2 = _interopRequireDefault(_hero);

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

function Hero(_ref) {
  var description = _ref.description;
  var background = _ref.background;
  var darkness = _ref.darkness;
  var ratio = _ref.ratio;
  var actionButton = _ref.actionButton;
  var fontSize = _ref.fontSize;
  var children = _ref.children;

  return _react2.default.createElement(
    'div',
    {
      id: 'hero',
      className: _hero2.default.container,
      style: {
        background: 'url(\'' + background + '\') no-repeat center',
        backgroundSize: 'cover',
        backgroundColor: 'rgba(0,0,0,' + darkness + ')',
        backgroundBlendMode: 'multiply',
        height: ratio + 'vh'
      }
    },
    _react2.default.createElement(
      'section',
      { className: _hero2.default.content },
      children && _react2.default.createElement(
        'h1',
        { className: _hero2.default.caption, style: { fontSize: fontSize } },
        children
      ),
      description && _react2.default.createElement(
        'p',
        { className: _hero2.default.description },
        description
      ),
      actionButton
    )
  );
}

Hero.defaultProps = {
  ratio: '100',
  darkness: '0.3',
  fontSize: '1.8em'
};

Hero.propTypes = {
  background: _react.PropTypes.string.required,
  children: _react.PropTypes.element.required,
  description: _react.PropTypes.string,
  darkness: _react.PropTypes.string,
  fontSize: _react.PropTypes.string,
  actionButton: _react.PropTypes.element,
  ratio: _react.PropTypes.string
};
//# sourceMappingURL=Hero.js.map