@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../../defaultTheme";
import { rtlSpacing } from "../../../utils/rtl/index";
import Stack from "../../../Stack/index";
import Heading from "../../../Heading/index";
import ChevronDown from "../../../icons/ChevronDown";
import NewWindow from "../../../icons/NewWindow";
import ChevronRight from "../../../icons/ChevronRight";
import transition from "../../../utils/transition";
import mq from "../../../utils/mediaQuery";
var StyledTileHeader = styled.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-13kgyxb-0"
})(["display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:", ";font-size:", ";line-height:", ";transition:", ";:focus{outline:none;}", ""], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.spaceMedium;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.lineHeightTextNormal;
}, transition(["background-color"], "fast", "ease-in-out"), mq.largeMobile(css(["padding:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceLarge;
})));
StyledTileHeader.defaultProps = {
  theme: defaultTheme
};
var StyledTileIcon = styled.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-13kgyxb-1"
})(["color:", ";flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.colorIconPrimary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return rtlSpacing("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
});
StyledTileIcon.defaultProps = {
  theme: defaultTheme
};
var StyledTileTitle = styled.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-13kgyxb-2"
})(["display:flex;align-items:center;width:100%;"]);
StyledTileTitle.defaultProps = {
  theme: defaultTheme
};
var StyledTileDescription = styled.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-13kgyxb-3"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";-webkit-text-size-adjust:100%;width:100%;", ";"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.fontFamily;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.colorTextPrimary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref11) {
  var hasTitle = _ref11.hasTitle,
      theme = _ref11.theme;
  return hasTitle && css(["margin-top:", ";"], theme.orbit.spaceXXSmall);
});
StyledTileDescription.defaultProps = {
  theme: defaultTheme
};

var IconRight = function IconRight(_ref12) {
  var external = _ref12.external,
      expandable = _ref12.expandable,
      className = _ref12.className;
  if (expandable) return /*#__PURE__*/React.createElement(ChevronDown, {
    className: className
  });
  if (external) return /*#__PURE__*/React.createElement(NewWindow, {
    className: className
  });
  return /*#__PURE__*/React.createElement(ChevronRight, {
    className: className,
    reverseOnRtl: true
  });
};

export var StyledIconRight = styled(IconRight).withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-13kgyxb-4"
})(["color:", ";margin:", ";transition:", ";", ";"], function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.colorIconSecondary;
}, function (_ref14) {
  var theme = _ref14.theme;
  return rtlSpacing("0 0 0 ".concat(theme.orbit.spaceMedium));
}, transition(["color", "transform"], "fast", "ease-in-out"), function (_ref15) {
  var expanded = _ref15.expanded;
  return expanded && css(["transform:rotate(-180deg);"]);
});
StyledIconRight.defaultProps = {
  theme: defaultTheme
};

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

export default TileHeader;