@primer/react/lib/SideNav.js

An implementation of GitHub's Primer Design System using React

'use strict';

var styled = require('styled-components');
var Box = require('./Box/Box.js');
var Link = require('./Link/Link.js');
var React = require('react');
var clsx = require('clsx');
var sx = require('./sx.js');
var toggleStyledComponent = require('./internal/utils/toggleStyledComponent.js');
var SideNav_module = require('./SideNav.module.css.js');
require('./FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('./FeatureFlags/useFeatureFlag.js');
require('./FeatureFlags/DefaultFeatureFlags.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var styled__default = /*#__PURE__*/_interopDefault(styled);
var React__default = /*#__PURE__*/_interopDefault(React);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff';
const StyledNav = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'nav', styled__default.default(Box).withConfig({
  displayName: "SideNav__StyledNav",
  componentId: "sc-11f1jdr-0"
})(["background-color:var(--bgColor-muted);", " ", ";"], props => props.bordered && styled.css(["border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium);& > &{border-left:0;border-right:0;border-bottom:0;}"]), sx.default));
function SideNav({
  as = 'nav',
  variant = 'normal',
  className,
  bordered,
  children,
  'aria-label': ariaLabel,
  sx: sxProp
}) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
  const newClassName = clsx.clsx({
    [SideNav_module.SideNav]: enabled,
    [SideNav_module.SideNavBordered]: enabled && bordered,
    [SideNav_module[`SideNavVariant-${variantClassName}`]]: enabled,
    sidenav: !enabled,
    [`variant-${variantClassName}`]: !enabled
  }, className);
  return /*#__PURE__*/React__default.default.createElement(StyledNav, {
    as: as,
    bordered: enabled ? undefined : bordered,
    className: newClassName,
    "aria-label": ariaLabel,
    sx: sxProp
  }, children);
}
SideNav.displayName = "SideNav";
// used for variant normal hover, focus pseudo selectors
const CommonAccessibilityVariantNormalStyles = styled.css(["background-color:var(--bgColor-neutral-muted);text-decoration:none;"]);

// used for light weight hover, focus pseudo selectors
const CommonAccessibilityVariantLightWeightStyles = styled.css(["color:var(--fgColor-default);text-decoration:none;"]);
const StyledSideNavLink = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, Link, styled__default.default(Link).withConfig({
  displayName: "SideNav__StyledSideNavLink",
  componentId: "sc-11f1jdr-1"
})(["position:relative;display:block;width:100%;font-size:14px;text-align:left;text-decoration:none;", " & > .sidenav{border-bottom:none;}.sidenav.variant-normal > &{color:var(--fgColor-default);padding:var(--base-size-16);border:0;border-top:var(--borderWidth-thin) solid var(--borderColor-muted);&:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium);}&:last-child{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium);}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover{", "}&:focus{", " outline:solid 2px var(--fgColor-accent);z-index:1;}&[aria-current='page'],&[aria-selected='true']{background-color:var(--bgColor-default);&::before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}}}.sidenav.variant-lightweight > &{padding:var(--base-size-4) 0;color:var(--fgColor-accent);&:hover{", "}&:focus{", " outline:solid 1px var(--fgColor-accent);z-index:1;}&[aria-current='page'],&[aria-selected='true']{color:var(--fgColor-default);font-weight:var(--base-text-weight-medium);}}", ";"], props => props.variant === 'full' && styled.css(["display:flex;align-items:center;justify-content:space-between;"]), CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantLightWeightStyles, CommonAccessibilityVariantLightWeightStyles, sx.default));
const SideNavLink = ({
  selected,
  to,
  variant,
  className,
  children,
  ...rest
}) => {
  const isReactRouter = typeof to === 'string';
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const newClassName = clsx.clsx({
    [SideNav_module.SideNavLink]: true,
    [SideNav_module.SideNavLinkFull]: enabled && variant === 'full'
  }, className);

  // according to their docs, NavLink supports aria-current:
  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
  return /*#__PURE__*/React__default.default.createElement(StyledSideNavLink, _extends({
    "aria-current": isReactRouter || selected ? 'page' : undefined,
    className: newClassName,
    variant: variant
  }, rest), children);
};
SideNavLink.displayName = "SideNavLink";
SideNavLink.displayName = 'SideNav.Link';
/** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
var SideNav$1 = Object.assign(SideNav, {
  Link: SideNavLink
});

module.exports = SideNav$1;