@kiwicom/orbit-components/lib/Tile/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

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

var _react = require("react");

var React = _interopRequireWildcard(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _defaultTokens = require("../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

var _Heading = require("../Heading");

var _Heading2 = _interopRequireDefault(_Heading);

var _ChevronRight = require("../icons/ChevronRight");

var _ChevronRight2 = _interopRequireDefault(_ChevronRight);

var _NewWindow = require("../icons/NewWindow");

var _NewWindow2 = _interopRequireDefault(_NewWindow);

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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 StyledTile = (0, _styledComponents2.default)(function (_ref) {
  var theme = _ref.theme,
      icon = _ref.icon,
      title = _ref.title,
      external = _ref.external,
      props = _objectWithoutProperties(_ref, ["theme", "icon", "title", "external"]);

  var Component = props.href ? "a" : "div";
  return React.createElement(
    Component,
    props,
    props.children
  );
}).withConfig({
  displayName: "Tile__StyledTile"
})(["display:flex;justify-content:space-between;align-items:center;width:100%;padding:", ";background:", ";border-radius:", ";border:solid 1px ", ";box-shadow:0 2px 4px 0 rgba(23,27,30,0.1);box-sizing:border-box;transition:box-shadow ", " ease-in-out;font-family:", ";text-decoration:none;overflow:hidden;cursor:pointer;&:hover,&:focus{outline:0;box-shadow:0 4px 12px 0 rgba(23,27,30,0.1);}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.spaceMedium;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.paletteWhite;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.durationFast;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.fontFamily;
});

StyledTile.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledTileContent = _styledComponents2.default.div.withConfig({
  displayName: "Tile__StyledTileContent"
})(["display:flex;flex-direction:column;"]);

var StyledTileHeadingWrapper = _styledComponents2.default.div.withConfig({
  displayName: "Tile__StyledTileHeadingWrapper"
})(["display:flex;align-items:center;margin:", ";&:last-child{margin:0;}"], function (_ref8) {
  var theme = _ref8.theme;
  return "0 0 " + theme.orbit.spaceXXSmall + " 0";
});
StyledTileHeadingWrapper.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledTileChildren = _styledComponents2.default.div.withConfig({
  displayName: "Tile__StyledTileChildren"
})(["font-size:", ";color:", ";line-height:", ";margin:", ";"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.colorTextPrimary;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.lineHeightText;
}, function (_ref12) {
  var theme = _ref12.theme,
      icon = _ref12.icon,
      title = _ref12.title;
  return icon && title && "0 0 0 " + theme.orbit.spaceXLarge;
});

StyledTileChildren.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledIcon = _styledComponents2.default.div.withConfig({
  displayName: "Tile__StyledIcon"
})(["color:", ";display:flex;align-items:center;margin:", ";"], function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.colorHeading;
}, function (_ref14) {
  var theme = _ref14.theme;
  return "0 " + theme.orbit.spaceXSmall + " 0 0";
});

StyledIcon.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledIconRight = _styledComponents2.default.div.withConfig({
  displayName: "Tile__StyledIconRight"
})(["display:flex;flex-shrink:0;padding:", ";"], function (_ref15) {
  var theme = _ref15.theme;
  return "0 0 0 " + theme.orbit.spaceMedium;
});

StyledIconRight.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledNewWindow = (0, _styledComponents2.default)(_NewWindow2.default).withConfig({
  displayName: "Tile__StyledNewWindow"
})(["display:flex;align-items:center;color:", ";transition:color ", " ease-in-out;&:hover{color:", ";}"], function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.paletteInkLight;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.durationFast;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.paletteInkLightHover;
});

StyledNewWindow.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledChevron = (0, _styledComponents2.default)(_ChevronRight2.default).withConfig({
  displayName: "Tile__StyledChevron"
})(["display:flex;align-items:center;color:", ";transition:color ", " ease-in-out;&:hover{color:", ";}"], function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.paletteInkLight;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.durationFast;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.orbit.paletteInkLightHover;
});

StyledChevron.defaultProps = {
  theme: _defaultTokens2.default
};

var Icon = function Icon(_ref22) {
  var icon = _ref22.icon;
  return React.createElement(
    StyledIcon,
    null,
    icon
  );
};

var Tile = function Tile(_ref23) {
  var children = _ref23.children,
      _ref23$external = _ref23.external,
      external = _ref23$external === undefined ? false : _ref23$external,
      href = _ref23.href,
      icon = _ref23.icon,
      title = _ref23.title,
      onClick = _ref23.onClick,
      dataTest = _ref23.dataTest;
  return React.createElement(
    StyledTile,
    {
      target: href && external ? "_blank" : undefined,
      href: href,
      onClick: onClick,
      "data-test": dataTest
    },
    React.createElement(
      StyledTileContent,
      null,
      title && React.createElement(
        StyledTileHeadingWrapper,
        null,
        icon && React.createElement(Icon, { icon: icon }),
        React.createElement(
          _Heading2.default,
          { type: "title3", element: "h3" },
          title
        )
      ),
      children && React.createElement(
        StyledTileChildren,
        { title: title, icon: icon },
        children
      )
    ),
    React.createElement(
      StyledIconRight,
      null,
      external ? React.createElement(StyledNewWindow, { size: "medium", color: "secondary" }) : React.createElement(StyledChevron, { size: "medium", color: "secondary" })
    )
  );
};

exports.default = Tile;