test.jsx

const translateX = x => `translateX(${x === 'middle' ? '-50%' : 0})`;
const slideTranslateY = y => `translateY(${{top: -1, bottom: 1}[y] * 14}px)`;

const slideIn = p => keyframes`
  from {
    transform: ${translateX(p.position.x)} ${slideTranslateY(p.position.y)};
  }
  to {
    transform: ${translateX(p.position.x)} translateY(0;
  }
`;

const positionX = offset => p => css`
  right: ${p.position.x === 'right' ? offset : 'inherit'};
  left: ${{left: offset, right: 'inherit', middle: '50%'}[p.position.x]};
  transform: ${translateX(p.position.x)};
`;

const positionY = offset => p => css`
  bottom: ${{top: offset, bottom: 'inherit'}[p.position.y]};
  top: ${{top: 'inherit', bottom: offset}[p.position.y]};
`;

const StyledHovercard = styled('div')`
  border-radius: 4px;
  background-clip: padding-box;
  text-align: left;
  padding: 0;
  line-height: 1;
  z-index: 1000;
  white-space: initial;
  color: ${p => p.theme.gray5};
  border: 1px solid ${p => p.theme.borderLight};
  background: #fff;
  box-shadow: 0 0 35px 0 rgba(67, 62, 75, 0.2);
  width: 295px;

  // The hovercard may appear in different contexts, don't inherit fonts
  font-family: ${p => p.theme.text.family};

  position: absolute;
  ${positionX('-2px')};
  ${positionY('28px')};

  visibility: ${p => (p.visible ? 'visible' : 'hidden')};

  animation: ${fadeIn} 100ms, ${slideIn} 100ms ease-in-out;
  animation-play-state: ${p => (p.visible ? 'running' : 'paused')};


  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    border: 10px solid transparent;
    border-${p => p.position.y}-color: #fff;

    ${positionX('20px')};
    ${positionY('-20px')};

    // TODO Border color should change if it's with a header
  }

  &:before {
    border-${p => p.position.y}-color: ${p => p.theme.borderLight};
    ${positionY('-21px')};
  }
`;