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

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

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

var React = _interopRequireWildcard(require("react"));

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

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

var _index = _interopRequireDefault(require("../../Heading/index"));

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

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

var _ChevronDown = _interopRequireDefault(require("../../icons/ChevronDown"));

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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

var StyledTileHeader = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-1k1u3lr-0"
})(["display:block;cursor:pointer;position:relative;padding:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.spaceMedium;
});

StyledTileHeader.defaultProps = {
  theme: _defaultTokens.default
};

var StyledTileTitle = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-1k1u3lr-1"
})(["display:flex;align-items:center;"]);

StyledTileTitle.defaultProps = {
  theme: _defaultTokens.default
};

var StyledTileIcon = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-1k1u3lr-2"
})(["color:", ";display:flex;flex-shrink:0;align-items:center;margin:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.colorHeading;
}, function (_ref3) {
  var theme = _ref3.theme;
  return "0 ".concat(theme.orbit.spaceXSmall, " 0 0");
});

StyledTileIcon.defaultProps = {
  theme: _defaultTokens.default
};

var StyledTileDescription = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-1k1u3lr-3"
})(["font-size:", ";color:", ";line-height:", ";margin-top:", ";margin-right:", ";margin-left:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.colorTextPrimary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.lineHeightText;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.spaceXXSmall;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.spaceXLarge;
}, function (_ref9) {
  var theme = _ref9.theme,
      hasIcon = _ref9.hasIcon,
      hasTitle = _ref9.hasTitle;
  return hasIcon && hasTitle && theme.orbit.spaceXLarge;
});

StyledTileDescription.defaultProps = {
  theme: _defaultTokens.default
};

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

var StyledIconRight = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-1k1u3lr-4"
})(["position:absolute;right:0;top:50%;transform:translateY(-50%);color:", ";padding:", ";transition:color ", " ease-in-out;svg{transform:", ";transition:transform ", " ease-in-out;}"], function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.paletteInkLight;
}, function (_ref12) {
  var theme = _ref12.theme;
  return "0 ".concat(theme.orbit.spaceMedium, " 0 0");
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.durationFast;
}, function (_ref14) {
  var isExpanded = _ref14.isExpanded;
  return isExpanded && "rotate(-180deg)";
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.durationFast;
});

exports.StyledIconRight = StyledIconRight;
StyledIconRight.defaultProps = {
  theme: _defaultTokens.default
};

var getIconRight = function getIconRight(_ref16) {
  var external = _ref16.external,
      isExpandable = _ref16.isExpandable;

  if (isExpandable) {
    return React.createElement(_ChevronDown.default, {
      size: "medium"
    });
  }

  if (external) {
    return React.createElement(_NewWindow.default, {
      size: "medium"
    });
  }

  return React.createElement(_ChevronRight.default, {
    size: "medium"
  });
};

var IconRight = function IconRight(_ref17) {
  var external = _ref17.external,
      isExpandable = _ref17.isExpandable,
      isExpanded = _ref17.isExpanded;
  return React.createElement(StyledIconRight, {
    isExpandable: isExpandable,
    isExpanded: isExpanded
  }, getIconRight({
    external: external,
    isExpandable: isExpandable
  }));
};

var TileHeader = function TileHeader(_ref18) {
  var icon = _ref18.icon,
      title = _ref18.title,
      description = _ref18.description,
      external = _ref18.external,
      onClick = _ref18.onClick,
      isExpandable = _ref18.isExpandable,
      isExpanded = _ref18.isExpanded;
  return React.createElement(StyledTileHeader, {
    onClick: onClick
  }, title && React.createElement(StyledTileTitle, null, icon && React.createElement(Icon, {
    icon: icon
  }), React.createElement(_index.default, {
    type: "title3",
    element: "h3"
  }, title)), description && React.createElement(StyledTileDescription, {
    hasIcon: !!icon,
    hasTitle: !!title
  }, description), React.createElement(IconRight, {
    external: external,
    isExpandable: isExpandable,
    isExpanded: isExpanded
  }));
};

var _default = TileHeader;
exports.default = _default;