@instructure/ui-top-nav-bar 8.30.1-snapshot-15

package/lib/TopNavBar/TopNavBarItem/props.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.topNavBarItemTooltipPropType = exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const topNavBarItemTooltipPropType = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
+  renderTip: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
+  placement: _propTypes.default.string,
+  offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onShowContent: _propTypes.default.func,
+  onHideContent: _propTypes.default.func
+})]);
+
+exports.topNavBarItemTooltipPropType = topNavBarItemTooltipPropType;
+const propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'button', 'icon', 'avatar']),
+  status: _propTypes.default.oneOf(['default', 'active', 'disabled']),
+  renderSubmenu: _Children.Children.oneOf([_Drilldown.Drilldown]),
+  showSubmenuChevron: _propTypes.default.bool,
+  customPopoverConfig: _propTypes.default.object,
+  tooltip: topNavBarItemTooltipPropType,
+  renderAvatar: _propTypes.default.shape({
+    avatarName: _propTypes.default.string.isRequired,
+    avatarSrc: _propTypes.default.string,
+    avatarAlt: _propTypes.default.string
+  }),
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  onSubmenuToggle: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  onMouseOut: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onKeyUp: _propTypes.default.func,
+  elementRef: _propTypes.default.func,
+  itemRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['id', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef'];
+exports.allowedProps = allowedProps;

package/lib/TopNavBar/TopNavBarItem/styles.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, state) => {
+  const status = props.status,
+        variant = props.variant,
+        renderSubmenu = props.renderSubmenu,
+        renderAvatar = props.renderAvatar,
+        customPopoverConfig = props.customPopoverConfig;
+  const layout = state.layout,
+        inverseColor = state.inverseColor;
+  const isSmallViewport = layout === 'smallViewport';
+  const isActive = renderAvatar ? false : status === 'active' && variant === 'default';
+  const hasPopover = renderSubmenu || customPopoverConfig;
+  const activeIndicatorPosition = `calc(${componentTheme.itemInlinePadding} - ${componentTheme.activeItemIndicatorSpacing})`;
+  return {
+    topNavBarItem: {
+      label: 'topNavBarItem',
+      padding: `0 calc(${componentTheme.itemSpacing} / 2)`,
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: hasPopover ? 'stretch' : 'center'
+    },
+    container: {
+      label: 'topNavBarItem__container',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      ...(isActive && {
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          insetBlockEnd: 0,
+          insetInlineStart: activeIndicatorPosition,
+          insetInlineEnd: activeIndicatorPosition,
+          height: componentTheme.activeIndicatorWidth,
+          background: inverseColor ? componentTheme.activeIndicatorColorInverse : componentTheme.activeIndicatorColor,
+          display: 'block'
+        }
+      }),
+      '& a': {
+        textDecoration: 'none'
+      }
+    },
+    content: {
+      label: 'topNavBarItem__content',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      appearance: 'none',
+      border: 0,
+      outline: 0,
+      margin: 0,
+      textDecoration: 'none',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: inverseColor ? componentTheme.colorInverse : componentTheme.color,
+      ...(isActive && {
+        fontWeight: componentTheme.activeItemFontWeight
+      }),
+      '*': {
+        pointerEvents: 'none'
+      }
+    },
+    avatarContainer: {
+      label: 'topNavBarItem__avatarContainer',
+      display: 'flex',
+      alignItems: 'center',
+      paddingInlineEnd: `calc(${componentTheme.iconTextGap} * 1.5)`
+    },
+    submenuTriggerContainer: {
+      label: 'topNavBarItem__submenuTriggerContainer',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    submenuIcon: {
+      label: 'topNavBarItem__submenuIcon',
+      fontSize: '0.875em',
+      display: 'flex',
+      alignItems: 'center',
+      paddingInlineStart: componentTheme.iconTextGap
+    },
+    focusOutlineOffset: isSmallViewport ? '0.375rem' : '0.625rem',
+    itemInlinePadding: componentTheme.itemInlinePadding
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarItem/theme.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        spacing = theme.spacing,
+        typography = theme.typography,
+        borders = theme.borders;
+  const componentVariables = {
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    color: 'inherit',
+    colorInverse: 'inherit',
+    itemInlinePadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    itemSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    iconTextGap: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    activeItemFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    activeItemIndicatorSpacing: '0.25rem',
+    activeIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    activeIndicatorColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    activeIndicatorColorInverse: colors.textDarkest
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavBarDesktopLayoutLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestUtils = require("@instructure/ui-test-utils");
+
+var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
+
+var _TopNavBarBrandLocator = require("../../TopNavBarBrand/TopNavBarBrandLocator");
+
+var _TopNavBarMenuItemsLocator = require("../../TopNavBarMenuItems/TopNavBarMenuItemsLocator");
+
+var _TopNavBarActionItemsLocator = require("../../TopNavBarActionItems/TopNavBarActionItemsLocator");
+
+var _TopNavBarUserLocator = require("../../TopNavBarUser/TopNavBarUserLocator");
+
+var _index = require("./index");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const TopNavBarDesktopLayoutLocator = (0, _locator.locator)( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+_index.TopNavBarDesktopLayout.selector, {
+  findBrandContainer: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (0, _uiTestUtils.find)('[class$=-topNavBarDesktopLayout__brandContainer]', ...args);
+  },
+  findMenuItemsContainer: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return (0, _uiTestUtils.find)('[class$=-topNavBarDesktopLayout__menuItemsContainer]', ...args);
+  },
+  findActionItemsContainer: function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return (0, _uiTestUtils.find)('[class$=-topNavBarDesktopLayout__actionItemsContainer]', ...args);
+  },
+  findUserContainer: function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return (0, _uiTestUtils.find)('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
+  },
+  findBrand: function () {
+    return _TopNavBarBrandLocator.TopNavBarBrandLocator.find(...arguments);
+  },
+  findMenuItems: function () {
+    return _TopNavBarMenuItemsLocator.TopNavBarMenuItemsLocator.find(...arguments);
+  },
+  findActionItems: function () {
+    return _TopNavBarActionItemsLocator.TopNavBarActionItemsLocator.find(...arguments);
+  },
+  findUser: function () {
+    return _TopNavBarUserLocator.TopNavBarUserLocator.find(...arguments);
+  },
+  getActionsUserSeparatorBackground: async function () {
+    try {
+      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+        args[_key5] = arguments[_key5];
+      }
+
+      const user = await (0, _uiTestUtils.find)('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
+      return user ? (0, _getComputedStyle.getComputedStyle)(user.getDOMNode(), '::before').backgroundColor : 'rgba(0, 0, 0, 0)';
+    } catch {
+      return 'rgba(0, 0, 0, 0)';
+    }
+  }
+});
+exports.TopNavBarDesktopLayoutLocator = TopNavBarDesktopLayoutLocator;

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TopNavBarDesktopLayout = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _TopNavBarContext = require("../../TopNavBarContext");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _props = require("./props");
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+private: true
+---
+@tsProps
+**/
+let TopNavBarDesktopLayout = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarDesktopLayout extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+  }
+
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+  }
+
+  get makeStylesVariables() {
+    return {
+      inverseColor: this.context.inverseColor,
+      hasBrandBlock: this.hasBrandBlock,
+      hasActionItemsBlock: this.hasActionItemsBlock,
+      hasUserBlock: this.hasUserBlock
+    };
+  }
+
+  get hasBrandBlock() {
+    const renderBrand = this.props.renderBrand;
+    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+  }
+
+  get hasActionItemsBlock() {
+    const renderActionItems = this.props.renderActionItems;
+    return !!renderActionItems && _react.default.Children.count(renderActionItems.props.children) > 0;
+  }
+
+  get hasUserBlock() {
+    const renderUser = this.props.renderUser;
+    return !!renderUser && _react.default.Children.count(renderUser.props.children) > 0;
+  }
+
+  render() {
+    const _this$props3 = this.props,
+          renderBrand = _this$props3.renderBrand,
+          renderMenuItems = _this$props3.renderMenuItems,
+          renderActionItems = _this$props3.renderActionItems,
+          renderUser = _this$props3.renderUser,
+          navLabel = _this$props3.navLabel,
+          styles = _this$props3.styles;
+    return (0, _emotion.jsx)("nav", Object.assign({}, (0, _omitProps.omitProps)(this.props, _props.allowedProps), {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.topNavBarDesktopLayout,
+      "aria-label": navLabel
+    }), this.hasBrandBlock && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.brandContainer
+    }, renderBrand), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.menuItemsContainer
+    }, renderMenuItems), this.hasActionItemsBlock && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.actionItemsContainer
+    }, renderActionItems), this.hasUserBlock && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.userContainer
+    }, renderUser));
+  }
+
+}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
+exports.TopNavBarDesktopLayout = TopNavBarDesktopLayout;
+var _default = TopNavBarDesktopLayout;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _props = require("../props");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const propTypes = { // Edit PropTypes in TopNabBarLayout/props.ts
+  ..._props.commonPropTypes,
+  ..._props.desktopPropTypes
+};
+exports.propTypes = propTypes;
+const allowedProps = [// Edit allowed props in TopNabBarLayout/props.ts
+..._props.commonAllowedProps, ..._props.desktopAllowedProps];
+exports.allowedProps = allowedProps;

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, state) => {
+  const hideActionsUserSeparator = props.hideActionsUserSeparator;
+  const inverseColor = state.inverseColor,
+        hasBrandBlock = state.hasBrandBlock,
+        hasActionItemsBlock = state.hasActionItemsBlock,
+        hasUserBlock = state.hasUserBlock;
+  const hasUserSeparator = hasActionItemsBlock && hasUserBlock && !hideActionsUserSeparator;
+  return {
+    topNavBarDesktopLayout: {
+      label: 'topNavBarDesktopLayout',
+      flowMode: 'logical',
+      fontSize: componentTheme.desktopFontSize,
+      fontFamily: componentTheme.desktopFontFamily,
+      fontWeight: componentTheme.desktopFontWeight,
+      background: inverseColor ? componentTheme.desktopBackgroundInverse : componentTheme.desktopBackground,
+      borderBlockEnd: inverseColor ? componentTheme.desktopBottomBorderInverse : componentTheme.desktopBottomBorder,
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'space-between',
+      height: componentTheme.desktopHeight,
+      zIndex: componentTheme.desktopZIndex,
+      maxWidth: '100%',
+      overflow: 'hidden',
+      paddingInline: componentTheme.desktopInlinePadding,
+      paddingBlock: 0,
+      ...(hasBrandBlock && {
+        paddingInlineStart: 0
+      })
+    },
+    brandContainer: {
+      label: 'topNavBarDesktopLayout__brandContainer',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      marginBlock: 0,
+      marginInline: componentTheme.desktopBrandContainerInlineMargin
+    },
+    menuItemsContainer: {
+      label: 'topNavBarDesktopLayout__menuItemsContainer',
+      display: 'flex',
+      flexGrow: 1,
+      flexShrink: 1,
+      marginBlock: 0,
+      marginInline: componentTheme.desktopMenuItemsContainerInlineMargin,
+      overflow: 'hidden'
+    },
+    actionItemsContainer: {
+      label: 'topNavBarDesktopLayout__actionItemsContainer',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      marginBlock: 0,
+      marginInline: componentTheme.desktopActionItemsContainerInlineMargin
+    },
+    userContainer: {
+      label: 'topNavBarDesktopLayout__userContainer',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      marginBlock: 0,
+      marginInline: componentTheme.desktopUserContainerInlineMargin,
+      ...(hasUserSeparator && {
+        position: 'relative',
+        paddingInlineStart: componentTheme.desktopUserSeparatorGap,
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          insetInlineStart: 0,
+          insetBlockStart: '50%',
+          marginBlockStart: `calc(-${componentTheme.desktopUserSeparatorHeight} / 2)`,
+          height: componentTheme.desktopUserSeparatorHeight,
+          width: componentTheme.desktopUserSeparatorWidth,
+          background: inverseColor ? componentTheme.desktopUserSeparatorColorInverse : componentTheme.desktopUserSeparatorColor,
+          display: 'block'
+        }
+      })
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;