@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, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import Heading from "../../Heading";
import Stack from "../../Stack";
import NewWindow from "../../icons/NewWindow";
import ChevronRight from "../../icons/ChevronRight";
import ChevronDown from "../../icons/ChevronDown";
import { rtlSpacing } from "../../utils/rtl";
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: defaultTheme
};
const StyledTileTitle = styled.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-1k1u3lr-1"
})(["display:flex;align-items:center;"]);
StyledTileTitle.defaultProps = {
  theme: defaultTheme
};
const StyledTileIcon = styled.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-1k1u3lr-2"
})(["color:", ";display:flex;flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], ({
  theme
}) => theme.orbit.colorHeading, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`));
StyledTileIcon.defaultProps = {
  theme: defaultTheme
};
const StyledTileDescription = styled.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-1k1u3lr-3"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";width:100%;", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme
}) => theme.orbit.lineHeightText, ({
  hasTitle,
  theme
}) => hasTitle && css(["margin-top:", ";"], theme.orbit.spaceXXSmall));
StyledTileDescription.defaultProps = {
  theme: defaultTheme
};
export const StyledIconRight = styled.div.withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-1k1u3lr-4"
})(["color:", ";padding:", ";transition:color ", " ease-in-out;svg{", ";transition:transform ", " ease-in-out;}"], ({
  theme
}) => theme.orbit.paletteInkLight, ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceMedium}`), ({
  theme
}) => theme.orbit.durationFast, ({
  isExpanded
}) => isExpanded && css(["transform:rotate(-180deg);"]), ({
  theme
}) => theme.orbit.durationFast);
StyledIconRight.defaultProps = {
  theme: defaultTheme
};

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",
    reverseOnRtl: true
  });
};

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
}, React.createElement(Stack, {
  align: "center",
  shrink: true,
  spacing: "none"
}, icon && React.createElement(StyledTileIcon, null, icon), React.createElement(Stack, {
  spacing: "none",
  direction: "column",
  shrink: true
}, title && React.createElement(StyledTileTitle, null, React.createElement(Heading, {
  type: "title3",
  element: "h3"
}, title)), description && React.createElement(StyledTileDescription, {
  hasTitle: !!title
}, description)), React.createElement(IconRight, {
  external: external,
  isExpandable: isExpandable,
  isExpanded: isExpanded
})));

export default TileHeader;