@kiwicom/orbit-components/lib/Tile/components/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";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

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

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

var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));

var _rtl = require("../../../utils/rtl");

var _Stack = _interopRequireDefault(require("../../../Stack"));

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

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

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

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

var _transition = _interopRequireDefault(require("../../../utils/transition"));

var _mediaQuery = _interopRequireDefault(require("../../../utils/mediaQuery"));

const StyledTileHeader = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-1dszoii-0"
})(["display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:", ";font-size:", ";line-height:", ";transition:", ";:focus{outline:none;}", ""], ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightTextNormal, (0, _transition.default)(["background-color"], "fast", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";"], ({
  theme
}) => theme.orbit.spaceLarge))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledTileIcon = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-1dszoii-1"
})(["color:", ";flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], ({
  theme
}) => theme.orbit.colorIconPrimary, ({
  theme
}) => (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledTileTitle = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-1dszoii-2"
})(["display:flex;align-items:center;width:100%;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledTileDescription = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-1dszoii-3"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";-webkit-text-size-adjust:100%;width:100%;", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  hasTitle,
  theme
}) => hasTitle && (0, _styledComponents.css)(["margin-top:", ";"], theme.orbit.spaceXXSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const IconRight = ({
  external,
  expandable,
  className
}) => {
  if (expandable) return /*#__PURE__*/React.createElement(_ChevronDown.default, {
    color: "secondary",
    className: className
  });
  if (external) return /*#__PURE__*/React.createElement(_NewWindow.default, {
    className: className
  });
  return /*#__PURE__*/React.createElement(_ChevronRight.default, {
    color: "secondary",
    className: className,
    reverseOnRtl: true
  });
};

const StyledIconRight = (0, _styledComponents.default)(IconRight).withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-1dszoii-4"
})(["color:", ";margin:", ";transition:", ";", ";"], ({
  theme
}) => theme.orbit.colorIconSecondary, ({
  theme
}) => (0, _rtl.rtlSpacing)(`0 0 0 ${theme.orbit.spaceMedium}`), (0, _transition.default)(["color", "transform"], "fast", "ease-in-out"), ({
  expanded
}) => expanded && (0, _styledComponents.css)(["transform:rotate(-180deg);"])); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

const TileHeader = ({
  icon,
  title,
  description,
  expandable,
  expanded,
  external,
  onClick,
  header,
  role,
  ariaExpanded,
  ariaControls,
  id,
  tabIndex,
  onKeyDown,
  noHeaderIcon
}) => /*#__PURE__*/React.createElement(StyledTileHeader, {
  onClick: onClick,
  onKeyDown: onKeyDown,
  role: role,
  "aria-expanded": ariaExpanded,
  "aria-controls": ariaControls,
  id: id,
  tabIndex: tabIndex
}, /*#__PURE__*/React.createElement(_Stack.default, {
  align: "center",
  justify: "between",
  shrink: true,
  spacing: "none"
}, icon && /*#__PURE__*/React.createElement(StyledTileIcon, null, icon), header || (title || description) && /*#__PURE__*/React.createElement(_Stack.default, {
  spacing: "none",
  direction: "column",
  shrink: true
}, title && /*#__PURE__*/React.createElement(StyledTileTitle, null, /*#__PURE__*/React.createElement(_Heading.default, {
  type: "title3",
  as: "h3"
}, title)), description && /*#__PURE__*/React.createElement(StyledTileDescription, {
  hasTitle: !!title
}, description)), !noHeaderIcon && /*#__PURE__*/React.createElement(StyledIconRight, {
  external: external,
  expandable: expandable,
  expanded: expanded
})));

var _default = TileHeader;
exports.default = _default;