@kiwicom/orbit-components/es/Tile/components/TileWrapper/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 transition from "../../../utils/transition";
import { StyledIconRight } from "../TileHeader";
import defaultTheme from "../../../defaultTheme";
export const StyledTileWrapper = styled.div.withConfig({
  displayName: "TileWrapper__StyledTileWrapper",
  componentId: "sc-u2u00m-0"
})(["", ""], ({
  theme
}) => css(["display:block;width:100%;box-sizing:border-box;font-family:", ";color:", ";text-decoration:none;background:", ";border-radius:", ";box-shadow:", ";transition:", ";:hover,:focus{outline:none;box-shadow:", ";", "{color:", ";}}"], theme.orbit.fontFamily, theme.orbit.paletteInkNormal, theme.orbit.paletteWhite, theme.orbit.borderRadiusLarge, theme.orbit.boxShadowAction, transition(["box-shadow"], "fast", "ease-in-out"), theme.orbit.boxShadowActionActive, StyledIconRight, theme.orbit.paletteInkLightHover)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTileWrapper.defaultProps = {
  theme: defaultTheme
};
const StyledTileAnchor = styled.a.withConfig({
  displayName: "TileWrapper__StyledTileAnchor",
  componentId: "sc-u2u00m-1"
})(["", ""], ({
  theme
}) => css(["display:block;height:100%;width:100%;outline:none;text-decoration:none;color:", ";&:focus{outline:none;box-shadow:", ";", "{color:", ";}}&:link,&:visited{color:", ";font-weight:", ";}"], theme.orbit.paletteInkNormal, theme.orbit.boxShadowActionActive, StyledIconRight, theme.orbit.paletteInkLightHover, theme.orbit.paletteInkNormal, theme.orbit.fontWeightLinks)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTileAnchor.defaultProps = {
  theme: defaultTheme
};

const TileWrapper = ({
  href,
  external,
  dataTest,
  onClick,
  onKeyDown,
  children,
  as,
  tabIndex,
  role,
  ariaExpanded,
  ariaControls,
  id,
  htmlTitle
}) => /*#__PURE__*/React.createElement(StyledTileWrapper, {
  "data-test": dataTest,
  onClick: onClick,
  onKeyDown: onKeyDown,
  as: as,
  tabIndex: tabIndex,
  role: role,
  "aria-expanded": ariaExpanded,
  "aria-controls": ariaControls,
  id: id
}, href ? /*#__PURE__*/React.createElement(StyledTileAnchor, {
  target: href && external ? "_blank" : undefined,
  rel: href && external ? "noopener" : undefined,
  href: href || undefined,
  title: htmlTitle
}, children) : children);

export default TileWrapper;