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

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import React from "react";
import styled from "styled-components";
import KEY_CODE_MAP from "../common/keyMaps";
import defaultTheme from "../defaultTheme";
const StyledNavigation = styled.nav.withConfig({
  displayName: "SkipLink__StyledNavigation",
  componentId: "sc-1hg3afm-0"
})([""]);
const StyledLink = styled.a.withConfig({
  displayName: "SkipLink__StyledLink",
  componentId: "sc-1hg3afm-1"
})(["position:absolute;width:0px;height:0px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;font-family:", ";text-decoration:", ";font-size:", ";border-radius:", ";color:", ";&:focus{top:1rem;left:1rem;clip:auto;height:auto;width:auto;margin:0;overflow:visible;padding:", ";background-color:", ";z-index:", ";}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.textDecorationTextLinkPrimary, ({
  theme
}) => theme.orbit.fontSizeTextLarge, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme
}) => theme.orbit.paletteInkNormal, ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.zIndexOnTheTop);
StyledLink.defaultProps = {
  theme: defaultTheme
};
const StyledDescription = styled.p.withConfig({
  displayName: "SkipLink__StyledDescription",
  componentId: "sc-1hg3afm-2"
})(["background-color:red;visibility:none;position:absolute;width:0px;height:0px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;"]);

const SkipLink = ({
  links,
  description
}) => {
  return React.createElement(StyledNavigation, null, description && React.createElement(StyledDescription, null, description), links && links.map(({
    href,
    name,
    onClick
  }, index) => {
    return React.createElement(StyledLink, {
      key: encodeURIComponent(name + index),
      href: href,
      tabIndex: href ? "" : "0",
      role: href ? "" : "Button",
      onClick: onClick,
      onKeyDown: ev => {
        if (ev.keyCode === KEY_CODE_MAP.ENTER && onClick) {
          onClick();
        }
      }
    }, name);
  }));
};

export default SkipLink;