@storybook/design-system/dist/components/header/Header.js

Storybook design system

"use strict";

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

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

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

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

var _theming = require("@storybook/theming");

var _styles = require("../shared/styles");

var _WithTooltip = _interopRequireDefault(require("../tooltip/WithTooltip"));

var _Link = require("../Link");

var _Icon = require("../Icon");

var _Nav = require("./Nav");

var _NavItem = require("./NavItem");

var _HeaderContext = require("./HeaderContext");

var _excluded = ["logo", "links", "github", "mobileMenu", "inverse", "navBreakpoint"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var GitHubWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "enx0fv33"
} : {
  target: "enx0fv33",
  label: "GitHubWrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "7dkk8d",
  styles: "transform:scale(0.84);margin-left:-10px;margin-right:-10px;;.github-btn{font:bold 14px/14px 'Helvetica Neue',Helvetica,Arial,sans-serif;height:auto;.gh-btn,.gh-count{padding:4px 8px;}}"
} : {
  name: "7dkk8d",
  styles: "transform:scale(0.84);margin-left:-10px;margin-right:-10px;;.github-btn{font:bold 14px/14px 'Helvetica Neue',Helvetica,Arial,sans-serif;height:auto;.gh-btn,.gh-count{padding:4px 8px;}}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var GithubNavItem = ( /*#__PURE__*/0, _theming.styled)(_NavItem.NavItem, process.env.NODE_ENV === "production" ? {
  target: "enx0fv32"
} : {
  target: "enx0fv32",
  label: "GithubNavItem"
})(process.env.NODE_ENV === "production" ? {
  name: "eijlxr",
  styles: "display:none;@media (min-width: 375px){display:inline-flex;align-items:center;}"
} : {
  name: "eijlxr",
  styles: "display:none;@media (min-width: 375px){display:inline-flex;align-items:center;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var MobileMenuTooltip = ( /*#__PURE__*/0, _theming.styled)(_WithTooltip["default"], process.env.NODE_ENV === "production" ? {
  target: "enx0fv31"
} : {
  target: "enx0fv31",
  label: "MobileMenuTooltip"
})("&:focus svg{color:", _styles.color.secondary, ";}");
var Menu = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
  target: "enx0fv30"
} : {
  target: "enx0fv30",
  label: "Menu"
})(process.env.NODE_ENV === "production" ? {
  name: "1ahx58u",
  styles: "width:3rem;border:none!important;text-decoration:none!important;svg{height:18px;width:18px;margin:0;margin-right:-4px!important;}"
} : {
  name: "1ahx58u",
  styles: "width:3rem;border:none!important;text-decoration:none!important;svg{height:18px;width:18px;margin:0;margin-right:-4px!important;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

function Header(_ref) {
  var logo = _ref.logo,
      links = _ref.links,
      github = _ref.github,
      mobileMenu = _ref.mobileMenu,
      _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? _HeaderContext.defaultHeaderContext.inverse : _ref$inverse,
      _ref$navBreakpoint = _ref.navBreakpoint,
      navBreakpoint = _ref$navBreakpoint === void 0 ? _HeaderContext.defaultHeaderContext.navBreakpoint : _ref$navBreakpoint,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_HeaderContext.HeaderContext.Provider, {
    value: {
      navBreakpoint: navBreakpoint,
      inverse: inverse
    }
  }, /*#__PURE__*/_react["default"].createElement(_Nav.NavWrapper, props, /*#__PURE__*/_react["default"].createElement(_Nav.Nav, null, /*#__PURE__*/_react["default"].createElement(_Nav.NavGroup, {
    navBreakpoint: navBreakpoint
  }, /*#__PURE__*/_react["default"].createElement(_NavItem.NavItem, null, logo)), /*#__PURE__*/_react["default"].createElement(_Nav.NavGroup, {
    navBreakpoint: navBreakpoint,
    withRightAlignment: true
  }, links, github && /*#__PURE__*/_react["default"].createElement(GithubNavItem, {
    showDesktop: true,
    className: "chromatic-ignore"
  }, /*#__PURE__*/_react["default"].createElement(GitHubWrapper, null, github)), /*#__PURE__*/_react["default"].createElement(_NavItem.NavItem, {
    showMobile: true
  }, /*#__PURE__*/_react["default"].createElement(MobileMenuTooltip, {
    tagName: "span",
    placement: "top",
    trigger: "click",
    tooltip: mobileMenu
  }, /*#__PURE__*/_react["default"].createElement(Menu, {
    secondary: true,
    inverse: inverse,
    isButton: true
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    icon: "menu",
    "aria-label": "Menu"
  }))))))));
}

Header.defaultProps = {
  inverse: false
};