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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var StyledNavigation = _styledComponents.default.nav.withConfig({
  displayName: "SkipLink__StyledNavigation",
  componentId: "sc-1hg3afm-0"
})([""]);

var StyledLink = _styledComponents.default.a.withConfig({
  displayName: "SkipLink__StyledLink",
  componentId: "sc-1hg3afm-1"
})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;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:", ";}"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontFamily;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.textDecorationTextLinkPrimary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.fontSizeTextLarge;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.paletteInkNormal;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceMedium;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteWhite;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.zIndexOnTheTop;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledLink.defaultProps = {
  theme: _defaultTheme.default
};

var SkipLink = function SkipLink(_ref9) {
  var links = _ref9.links,
      buttonLabel = _ref9.buttonLabel;
  return /*#__PURE__*/React.createElement(StyledNavigation, {
    "aria-label": buttonLabel
  }, links && links.map(function (_ref10, index) {
    var href = _ref10.href,
        name = _ref10.name,
        onClick = _ref10.onClick;
    return /*#__PURE__*/React.createElement(StyledLink, {
      key: encodeURIComponent(name + index),
      href: href,
      tabIndex: onClick && "0",
      role: href ? "link" : "button",
      onClick: onClick,
      onKeyDown: function onKeyDown(ev) {
        if (ev.keyCode === _keyMaps.default.ENTER && onClick) {
          onClick();
        }
      }
    }, name);
  }));
};

var _default = SkipLink;
exports.default = _default;