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

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../../defaultTokens";
import Heading from "../../Heading/index";
import NewWindow from "../../icons/NewWindow";
import ChevronRight from "../../icons/ChevronRight";
import ChevronDown from "../../icons/ChevronDown";
const StyledTileHeader = styled.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-1k1u3lr-0"
})(["display:block;cursor:pointer;position:relative;padding:", ";"], ({
  theme
}) => theme.orbit.spaceMedium);
StyledTileHeader.defaultProps = {
  theme: defaultTokens
};
const StyledTileTitle = styled.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-1k1u3lr-1"
})(["display:flex;align-items:center;"]);
StyledTileTitle.defaultProps = {
  theme: defaultTokens
};
const StyledTileIcon = styled.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-1k1u3lr-2"
})(["color:", ";display:flex;flex-shrink:0;align-items:center;margin:", ";"], ({
  theme
}) => theme.orbit.colorHeading, ({
  theme
}) => `0 ${theme.orbit.spaceXSmall} 0 0`);
StyledTileIcon.defaultProps = {
  theme: defaultTokens
};
const StyledTileDescription = styled.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-1k1u3lr-3"
})(["font-size:", ";color:", ";line-height:", ";margin-top:", ";margin-right:", ";margin-left:", ";"], ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme
}) => theme.orbit.lineHeightText, ({
  theme
}) => theme.orbit.spaceXXSmall, ({
  theme
}) => theme.orbit.spaceXLarge, ({
  theme,
  hasIcon,
  hasTitle
}) => hasIcon && hasTitle && theme.orbit.spaceXLarge);
StyledTileDescription.defaultProps = {
  theme: defaultTokens
};

const Icon = ({
  icon
}) => React.createElement(StyledTileIcon, null, icon);

export const StyledIconRight = styled.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;}"], ({
  theme
}) => theme.orbit.paletteInkLight, ({
  theme
}) => `0 ${theme.orbit.spaceMedium} 0 0`, ({
  theme
}) => theme.orbit.durationFast, ({
  isExpanded
}) => isExpanded && "rotate(-180deg)", ({
  theme
}) => theme.orbit.durationFast);
StyledIconRight.defaultProps = {
  theme: defaultTokens
};

const getIconRight = ({
  external,
  isExpandable
}) => {
  if (isExpandable) {
    return React.createElement(ChevronDown, {
      size: "medium"
    });
  }

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

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

const IconRight = ({
  external,
  isExpandable,
  isExpanded
}) => React.createElement(StyledIconRight, {
  isExpandable: isExpandable,
  isExpanded: isExpanded
}, getIconRight({
  external,
  isExpandable
}));

const TileHeader = ({
  icon,
  title,
  description,
  external,
  onClick,
  isExpandable,
  isExpanded
}) => React.createElement(StyledTileHeader, {
  onClick: onClick
}, title && React.createElement(StyledTileTitle, null, icon && React.createElement(Icon, {
  icon: icon
}), React.createElement(Heading, {
  type: "title3",
  element: "h3"
}, title)), description && React.createElement(StyledTileDescription, {
  hasIcon: !!icon,
  hasTitle: !!title
}, description), React.createElement(IconRight, {
  external: external,
  isExpandable: isExpandable,
  isExpanded: isExpanded
}));

export default TileHeader;