kitten-components/dist/javascripts/kitten/components/box/link-box.js

Front-end components library

'use strict';

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

var _navigation;

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 _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 _arrowIcon = require('kitten/components/icons/arrow-icon');

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

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

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

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

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

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

var _typography = require('kitten/helpers/utils/typography');

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 Marger = (0, _radium2.default)(_marger.Marger);

var LinkBox = exports.LinkBox = function (_Component) {
  _inherits(LinkBox, _Component);

  function LinkBox(props) {
    _classCallCheck(this, LinkBox);

    var _this = _possibleConstructorReturn(this, (LinkBox.__proto__ || Object.getPrototypeOf(LinkBox)).call(this, props));

    _this.handleOnMouseEnter = function () {
      _this.setState({ hover: true });
    };

    _this.handleOnMouseLeave = function () {
      _this.setState({ hover: false });
    };

    _this.state = { hover: false };
    return _this;
  }

  _createClass(LinkBox, [{
    key: 'renderIcon',
    value: function renderIcon() {
      var _props = this.props,
          displayIcon = _props.displayIcon,
          children = _props.children;


      if (!displayIcon) return null;

      return _react2.default.createElement(
        'div',
        { style: styles.icon },
        children
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          isExternal = _props2.isExternal,
          href = _props2.href,
          title = _props2.title,
          text = _props2.text,
          linkProps = _props2.linkProps,
          titleTag = _props2.titleTag,
          textTag = _props2.textTag,
          viewportIsMobile = _props2.viewportIsMobile;


      var target = isExternal ? { target: '_blank', rel: 'noopener' } : {};

      var arrowStyle = [styles.navigation, this.state.hover && styles.navigation.hover];

      return _react2.default.createElement(
        _radium.StyleRoot,
        null,
        _react2.default.createElement(
          'a',
          _extends({}, linkProps, { style: styles.linkBox, href: href }, target),
          _react2.default.createElement(
            'div',
            {
              style: styles.container,
              onMouseEnter: this.handleOnMouseEnter,
              onMouseLeave: this.handleOnMouseLeave
            },
            this.renderIcon(),
            _react2.default.createElement(
              Marger,
              { top: '2', bottom: '2', style: styles.paragraph },
              _react2.default.createElement(
                Marger,
                { bottom: text ? 0.5 : 0 },
                _react2.default.createElement(
                  _text.Text,
                  {
                    tag: titleTag,
                    weight: 'regular',
                    size: viewportIsMobile ? 'tiny' : 'default',
                    color: 'font1',
                    style: { lineHeight: 1 }
                  },
                  title
                )
              ),
              text && _react2.default.createElement(
                _text.Text,
                {
                  tag: textTag,
                  weight: 'light',
                  size: 'tiny',
                  color: 'font1',
                  style: { lineHeight: 1.3 }
                },
                text
              )
            ),
            _react2.default.createElement(
              'div',
              { style: arrowStyle },
              _react2.default.createElement(_arrowIcon.ArrowIcon, { className: 'k-ButtonIcon__svg' })
            )
          )
        )
      );
    }
  }]);

  return LinkBox;
}(_react.Component);

LinkBox.propTypes = {
  displayIcon: _propTypes2.default.bool,
  href: _propTypes2.default.string,
  isExternal: _propTypes2.default.bool,
  title: _propTypes2.default.string.isRequired,
  titleTag: _propTypes2.default.string,
  text: _propTypes2.default.string,
  textTag: _propTypes2.default.string,
  linkProps: _propTypes2.default.object
};
LinkBox.defaultProps = {
  displayIcon: false,
  href: '#',
  isExternal: false,
  titleTag: 'span',
  text: '',
  textTag: 'span'
};


var styles = {
  linkBox: {
    display: 'flex',
    color: _colorsConfig2.default.font1,
    textDecoration: 'none'
  },

  container: {
    display: 'flex',
    minHeight: 90,
    width: '100%',
    boxSizing: 'border-box',
    color: _colorsConfig2.default.font1,
    backgroundColor: _colorsConfig2.default.background1,
    border: '2px solid ' + _colorsConfig2.default.line1,
    ':hover': {
      backgroundColor: _colorsConfig2.default.background2
    },
    ':active': {
      backgroundColor: _colorsConfig2.default.background3
    }
  },

  icon: _defineProperty({
    display: 'none',
    marginTop: -2,
    marginLeft: -2,
    marginBottom: -2,
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 90,
    backgroundColor: _colorsConfig2.default.primary4
  }, '@media (min-width: ' + _screenConfig.ScreenConfig.S.min + 'px)', {
    display: 'flex'
  }),

  paragraph: _defineProperty({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    flexGrow: 1,
    paddingLeft: (0, _typography.pxToRem)(20)
  }, '@media (min-width: ' + _screenConfig.ScreenConfig.S.min + 'px)', {
    paddingLeft: (0, _typography.pxToRem)(30)
  }),

  navigation: (_navigation = {
    display: 'flex',
    alignItems: 'center',
    padding: '15px 22px 15px 18px',
    transition: 'all 0.4s ease-in-out'
  }, _defineProperty(_navigation, '@media (min-width: ' + _screenConfig.ScreenConfig.S.min + 'px)', {
    paddingLeft: (0, _typography.pxToRem)(30),
    paddingRight: (0, _typography.pxToRem)(32)
  }), _defineProperty(_navigation, 'hover', {
    transform: 'translate(5px, 0px)'
  }), _navigation)

  // DEPRECATED: do not use default export.
};exports.default = LinkBox;