UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

69 lines (66 loc) 3.04 kB
import _defineProperty from '@babel/runtime/helpers/defineProperty'; import 'react'; import styled from 'styled-components'; import '../../utils/metaAttribute/index.js'; import { screenReaderStyles } from '../VisuallyHidden/ScreenReaderStyles.js'; import '../Link/BaseLink/index.js'; import '../../utils/index.js'; import { jsx } from 'react/jsx-runtime'; import BaseLink from '../Link/BaseLink/BaseLink.js'; import { makeSpace } from '../../utils/makeSpace/makeSpace.js'; import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js'; import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js'; function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } var fallbackId = 'blade-skip-nav'; var StyledLink = /*#__PURE__*/styled(BaseLink).withConfig({ displayName: "SkipNavweb__StyledLink", componentId: "sc-1k2s86v-0" })(function (_ref) { var theme = _ref.theme, _hasBackground = _ref._hasBackground; return _objectSpread(_objectSpread({}, screenReaderStyles), {}, { top: theme.spacing[5], left: theme.spacing[5], backgroundColor: _hasBackground ? theme.colors.surface.background.gray.intense : undefined, zIndex: _hasBackground ? 1 : undefined, ':focus': { padding: makeSpace(theme.spacing[2]), clip: 'auto', clipPath: 'unset', width: 'auto', height: 'auto' } }); }); var SkipNavLink = function SkipNavLink(_ref2) { var _ref2$id = _ref2.id, id = _ref2$id === void 0 ? fallbackId : _ref2$id, _ref2$children = _ref2.children, children = _ref2$children === void 0 ? 'Skip to content' : _ref2$children, _ref2$_hasBackground = _ref2._hasBackground, _hasBackground = _ref2$_hasBackground === void 0 ? false : _ref2$_hasBackground; return /*#__PURE__*/jsx(StyledLink, { href: "#".concat(id), _hasBackground: _hasBackground, children: children }); }; var SkipNavContent = function SkipNavContent(_ref3) { var _ref3$id = _ref3.id, id = _ref3$id === void 0 ? fallbackId : _ref3$id, _ref3$testID = _ref3.testID, testID = _ref3$testID === void 0 ? 'skipnav-content' : _ref3$testID; return /*#__PURE__*/jsx("div", _objectSpread({ tabIndex: -1, id: id, style: { outline: 0 } }, metaAttribute({ name: MetaConstants.SkipNav, testID: testID }))); }; export { SkipNavContent, SkipNavLink }; //# sourceMappingURL=SkipNav.web.js.map