@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";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
const StyledNavigation = _styledComponents.default.nav.withConfig({
  displayName: "SkipLink__StyledNavigation",
  componentId: "sc-1atjx4h-0"
})([""]);
const StyledLink = _styledComponents.default.a.withConfig({
  displayName: "SkipLink__StyledLink",
  componentId: "sc-1atjx4h-1"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["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:", ";}"], theme.orbit.fontFamily, theme.orbit.textDecorationTextLinkPrimary, theme.orbit.fontSizeTextLarge, theme.orbit.borderRadiusNormal, theme.orbit.paletteInkDark, theme.orbit.spaceMedium, theme.orbit.paletteWhite, theme.orbit.zIndexOnTheTop));
StyledLink.defaultProps = {
  theme: _defaultTheme.default
};
const SkipLink = ({
  links,
  buttonLabel
}) => {
  return /*#__PURE__*/React.createElement(StyledNavigation, {
    "aria-label": buttonLabel
  }, links && links.map(({
    href,
    name,
    onClick
  }, index) => {
    return /*#__PURE__*/React.createElement(StyledLink, {
      key: encodeURIComponent(name + index),
      href: href,
      tabIndex: onClick && 0,
      role: href ? "link" : "button",
      onClick: onClick,
      onKeyDown: ev => {
        if (ev.keyCode === _keyMaps.default.ENTER && onClick) {
          onClick(ev);
        }
      }
    }, name);
  }));
};
var _default = SkipLink;
exports.default = _default;