@primer/components/lib/TabNav.js

Primer react components

"use strict";

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

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireDefault(require("react"));

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

var _constants = require("./constants");

var _sx = _interopRequireDefault(require("./sx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const ITEM_CLASS = 'TabNav-item';
const SELECTED_CLASS = 'selected';

const TabNavBase = _styledComponents.default.div.withConfig({
  displayName: "TabNav__TabNavBase",
  componentId: "sc-1xod0ow-0"
})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);

const TabNavBody = _styledComponents.default.nav.withConfig({
  displayName: "TabNav__TabNavBody",
  componentId: "sc-1xod0ow-1"
})(["display:flex;margin-bottom:-1px;overflow:auto;"]);

function TabNav({
  children,
  'aria-label': ariaLabel,
  ...rest
}) {
  return /*#__PURE__*/_react.default.createElement(TabNavBase, rest, /*#__PURE__*/_react.default.createElement(TabNavBody, {
    "aria-label": ariaLabel
  }, children));
}

TabNav.displayName = "TabNav";

const TabNavLink = _styledComponents.default.a.attrs(props => ({
  activeClassName: typeof props.to === 'string' ? 'selected' : '',
  className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
})).withConfig({
  displayName: "TabNav__TabNavLink",
  componentId: "sc-1xod0ow-2"
})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);

TabNavLink.displayName = 'TabNav.Link';

var _default = Object.assign(TabNav, {
  Link: TabNavLink
});

exports.default = _default;