@kiwicom/orbit-components/es/Tile/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import Heading from "../Heading";
import ChevronRight from "../icons/ChevronRight";
import NewWindow from "../icons/NewWindow";

const StyledTile = styled((_ref) => {
  let { theme, icon, title, external } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "icon", "title", "external"]);

  const Component = props.href ? "a" : "div";
  return React.createElement(
    Component,
    props,
    props.children
  );
}).withConfig({
  displayName: "Tile__StyledTile"
})(["display:flex;justify-content:space-between;align-items:center;width:100%;padding:", ";background:", ";border-radius:", ";border:solid 1px ", ";box-shadow:0 2px 4px 0 rgba(23,27,30,0.1);box-sizing:border-box;transition:box-shadow ", " ease-in-out;font-family:", ";text-decoration:none;overflow:hidden;cursor:pointer;&:hover,&:focus{outline:0;box-shadow:0 4px 12px 0 rgba(23,27,30,0.1);}"], ({ theme }) => theme.orbit.spaceMedium, ({ theme }) => theme.orbit.paletteWhite, ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => theme.orbit.paletteCloudNormal, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.fontFamily);

StyledTile.defaultProps = {
  theme: defaultTokens
};

const StyledTileContent = styled.div.withConfig({
  displayName: "Tile__StyledTileContent"
})(["display:flex;flex-direction:column;"]);

const StyledTileHeadingWrapper = styled.div.withConfig({
  displayName: "Tile__StyledTileHeadingWrapper"
})(["display:flex;align-items:center;margin:", ";&:last-child{margin:0;}"], ({ theme }) => `0 0 ${theme.orbit.spaceXXSmall} 0`);
StyledTileHeadingWrapper.defaultProps = {
  theme: defaultTokens
};

const StyledTileChildren = styled.div.withConfig({
  displayName: "Tile__StyledTileChildren"
})(["font-size:", ";color:", ";line-height:", ";margin:", ";"], ({ theme }) => theme.orbit.fontSizeTextNormal, ({ theme }) => theme.orbit.colorTextPrimary, ({ theme }) => theme.orbit.lineHeightText, ({ theme, icon, title }) => icon && title && `0 0 0 ${theme.orbit.spaceXLarge}`);

StyledTileChildren.defaultProps = {
  theme: defaultTokens
};

const StyledIcon = styled.div.withConfig({
  displayName: "Tile__StyledIcon"
})(["color:", ";display:flex;align-items:center;margin:", ";"], ({ theme }) => theme.orbit.colorHeading, ({ theme }) => `0 ${theme.orbit.spaceXSmall} 0 0`);

StyledIcon.defaultProps = {
  theme: defaultTokens
};

const StyledIconRight = styled.div.withConfig({
  displayName: "Tile__StyledIconRight"
})(["display:flex;flex-shrink:0;padding:", ";"], ({ theme }) => `0 0 0 ${theme.orbit.spaceMedium}`);

StyledIconRight.defaultProps = {
  theme: defaultTokens
};

const StyledNewWindow = styled(NewWindow).withConfig({
  displayName: "Tile__StyledNewWindow"
})(["display:flex;align-items:center;color:", ";transition:color ", " ease-in-out;&:hover{color:", ";}"], ({ theme }) => theme.orbit.paletteInkLight, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.paletteInkLightHover);

StyledNewWindow.defaultProps = {
  theme: defaultTokens
};

const StyledChevron = styled(ChevronRight).withConfig({
  displayName: "Tile__StyledChevron"
})(["display:flex;align-items:center;color:", ";transition:color ", " ease-in-out;&:hover{color:", ";}"], ({ theme }) => theme.orbit.paletteInkLight, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.paletteInkLightHover);

StyledChevron.defaultProps = {
  theme: defaultTokens
};

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

const Tile = ({ children, external = false, href, icon, title, onClick, dataTest }) => React.createElement(
  StyledTile,
  {
    target: href && external ? "_blank" : undefined,
    href: href,
    onClick: onClick,
    "data-test": dataTest
  },
  React.createElement(
    StyledTileContent,
    null,
    title && React.createElement(
      StyledTileHeadingWrapper,
      null,
      icon && React.createElement(Icon, { icon: icon }),
      React.createElement(
        Heading,
        { type: "title3", element: "h3" },
        title
      )
    ),
    children && React.createElement(
      StyledTileChildren,
      { title: title, icon: icon },
      children
    )
  ),
  React.createElement(
    StyledIconRight,
    null,
    external ? React.createElement(StyledNewWindow, { size: "medium", color: "secondary" }) : React.createElement(StyledChevron, { size: "medium", color: "secondary" })
  )
);

export default Tile;