@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;
exports.__esModule = 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 _ChevronForward = _interopRequireDefault(require("../../../icons/ChevronForward"));
var _transition = _interopRequireDefault(require("../../../utils/transition"));
var _mediaQuery = _interopRequireDefault(require("../../../utils/mediaQuery"));
const StyledTileHeader = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-pwakb0-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:", ";font-size:", ";line-height:", ";transition:", ";", ""], theme.orbit.spaceMedium, theme.orbit.fontSizeTextNormal, theme.orbit.lineHeightTextNormal, (0, _transition.default)(["background-color"], "fast", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";"], theme.orbit.spaceLarge))));
StyledTileHeader.defaultProps = {
  theme: _defaultTheme.default
};
const StyledTileIcon = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-pwakb0-1"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["color:", ";flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], theme.orbit.colorIconPrimary, (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`)));
StyledTileIcon.defaultProps = {
  theme: _defaultTheme.default
};
const StyledTileTitle = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-pwakb0-2"
})(["display:flex;align-items:center;width:100%;"]);
StyledTileTitle.defaultProps = {
  theme: _defaultTheme.default
};
const StyledTileDescription = _styledComponents.default.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-pwakb0-3"
})(["", ""], ({
  theme,
  hasTitle
}) => (0, _styledComponents.css)(["font-family:", ";font-size:", ";color:", ";line-height:", ";font-weight:", ";-webkit-text-size-adjust:100%;width:100%;", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, theme.orbit.colorTextPrimary, theme.orbit.lineHeightTextNormal, theme.orbit.fontWeightNormal, hasTitle && (0, _styledComponents.css)(["margin-top:", ";"], theme.orbit.spaceXXSmall)));
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(_ChevronForward.default, {
    color: "secondary",
    className: className,
    reverseOnRtl: true
  });
};
const StyledIconRight = (0, _styledComponents.default)(IconRight).withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-pwakb0-4"
})(["", ""], ({
  theme,
  expanded
}) => (0, _styledComponents.css)(["color:", ";margin:", ";transition:", ";", ";"], theme.orbit.colorIconSecondary, (0, _rtl.rtlSpacing)(`0 0 0 ${theme.orbit.spaceSmall}`), (0, _transition.default)(["color", "transform"], "fast", "ease-in-out"), expanded && (0, _styledComponents.css)(["transform:rotate(-180deg);"])));
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 ? Number(tabIndex) : undefined
}, /*#__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: "title4",
  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;