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

package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/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.smallViewportPropTypes
+};
+exports.propTypes = propTypes;
+const allowedProps = [// Edit allowed props in TopNabBarLayout/props.ts
+..._props.commonAllowedProps, ..._props.smallViewportAllowedProps];
+exports.allowedProps = allowedProps;

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

@@ -0,0 +1,166 @@
+"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 isDropdownMenuVisible = state.isDropdownMenuVisible,
+        drilldownId = state.drilldownId,
+        trayId = state.trayId,
+        menuBottomPosition = state.menuBottomPosition,
+        inverseColor = state.inverseColor;
+  const dropdownMenuTopPosition = componentTheme.smallViewportTrayFixTopPosition || `${menuBottomPosition}px`;
+  const dropdownMenuOptionStyle = {
+    display: 'inline-block',
+    padding: `0 ${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorSpacing}`
+  };
+  const navBarStyles = {
+    fontSize: componentTheme.smallViewportFontSize,
+    fontFamily: componentTheme.smallViewportFontFamily,
+    fontWeight: componentTheme.smallViewportFontWeight,
+    background: inverseColor ? componentTheme.smallViewportBackgroundInverse : componentTheme.smallViewportBackground,
+    borderBlockEnd: inverseColor ? componentTheme.smallViewportBottomBorderInverse : componentTheme.smallViewportBottomBorder,
+    height: componentTheme.smallViewportHeight,
+    maxWidth: '100%',
+    paddingBlock: 0,
+    paddingInline: componentTheme.smallViewportInlinePadding,
+    position: 'relative',
+    zIndex: componentTheme.smallViewportZIndex,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'stretch',
+    overflow: 'hidden'
+  };
+  return {
+    topNavBarSmallViewportLayout: {
+      label: 'topNavBarSmallViewportLayout'
+    },
+    navbar: {
+      label: 'topNavBarSmallViewportLayout__navbar',
+      ...navBarStyles
+    },
+    inPlaceDialogContainer: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainer',
+      ...navBarStyles,
+      alignItems: 'center'
+    },
+    inPlaceDialogContainerContent: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainerContent',
+      flex: '1 1'
+    },
+    inPlaceDialogContainerButton: {
+      label: 'topNavBarSmallViewportLayout__inPlaceDialogContainerButton',
+      flex: '0 0'
+    },
+    menuTriggerContainer: {
+      label: 'topNavBarSmallViewportLayout__menuTriggerContainer',
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      flex: '1 1'
+    },
+    menuTrigger: {
+      label: 'topNavBarSmallViewportLayout__menuTrigger',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    alternativeTitleContainer: {
+      label: 'topNavBarSmallViewportLayout__alternativeTitleContainer',
+      marginBlock: componentTheme.smallViewportAlternativeTitleBlockMargin,
+      marginInline: componentTheme.smallViewportAlternativeTitleInlineMargin
+    },
+    dropdownMenuOption: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOption',
+      ...dropdownMenuOptionStyle
+    },
+    dropdownMenuOptionActive: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOptionActive',
+      ...dropdownMenuOptionStyle,
+      fontWeight: componentTheme.smallViewportDropdownMenuActiveOptionFontWeight,
+      paddingBlockEnd: componentTheme.smallViewportDropdownMenuActiveOptionIndicatorSpacing,
+      borderBottom: `${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorWidth} solid ${componentTheme.smallViewportDropdownMenuActiveOptionIndicatorColor}`
+    },
+    dropdownMenuOptionWithAvatar: {
+      label: 'topNavBarSmallViewportLayout__dropdownMenuOptionWithAvatar',
+      ...dropdownMenuOptionStyle,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    brandContainer: {
+      label: 'topNavBarSmallViewportLayout__brandContainer',
+      display: 'flex',
+      alignItems: 'stretch'
+    },
+    trayContainer: {
+      label: 'topNavBarSmallViewportLayout__trayContainer',
+      width: '100%',
+      position: componentTheme.smallViewportTrayPosition,
+      insetBlockStart: dropdownMenuTopPosition,
+      insetInlineStart: '0px',
+      zIndex: componentTheme.smallViewportTrayZIndex,
+      ...(isDropdownMenuVisible && {
+        height: `calc(100% - ${dropdownMenuTopPosition})`
+      })
+    },
+    globalStyles: {
+      // the tray should all have 100% height
+      [`#${trayId}`]: {
+        height: '100%'
+      },
+      // removes the focus ring on the drilldown,
+      // not needed on the mobile menu
+      [`#${drilldownId}`]: {
+        height: '100%',
+        '&::before': {
+          // display: 'none'
+          top: '4px',
+          left: '4px',
+          right: '4px',
+          bottom: '4px',
+          zIndex: 1
+        }
+      }
+    },
+    navbarHeight: componentTheme.smallViewportHeight
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js

@@ -0,0 +1,69 @@
+"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,
+        stacking = theme.stacking,
+        typography = theme.typography,
+        spacing = theme.spacing,
+        borders = theme.borders;
+  const componentVariables = {
+    smallViewportFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    smallViewportFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    smallViewportFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    smallViewportBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
+    smallViewportBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    smallViewportBottomBorder: 'none',
+    smallViewportBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
+    smallViewportHeight: '3.5rem',
+    smallViewportInlinePadding: `0.25rem`,
+    smallViewportZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
+    smallViewportTrayPosition: 'fixed',
+    smallViewportTrayFixTopPosition: void 0,
+    smallViewportTrayZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
+    smallViewportDropdownMenuActiveOptionFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    smallViewportDropdownMenuActiveOptionIndicatorSpacing: '0.25rem',
+    smallViewportDropdownMenuActiveOptionIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    smallViewportDropdownMenuActiveOptionIndicatorColor: 'currentColor',
+    smallViewportAlternativeTitleInlineMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    smallViewportAlternativeTitleBlockMargin: '0'
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavBarLayoutLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _TopNavBarDesktopLayoutLocator = require("./DesktopLayout/TopNavBarDesktopLayoutLocator");
+
+var _TopNavBarSmallViewportLayoutLocator = require("./SmallViewportLayout/TopNavBarSmallViewportLayoutLocator");
+
+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.
+ */
+// TODO: this type seems to be too complex, try to fix it later
+const TopNavBarLayoutLocator = (0, _locator.locator)(_index.TopNavBarLayout.selector, {
+  findDesktopLayout: function () {
+    return _TopNavBarDesktopLayoutLocator.TopNavBarDesktopLayoutLocator.find(...arguments);
+  },
+  findSmallViewportLayout: function () {
+    return _TopNavBarSmallViewportLayoutLocator.TopNavBarSmallViewportLayoutLocator.find(...arguments);
+  }
+});
+exports.TopNavBarLayoutLocator = TopNavBarLayoutLocator;

package/lib/TopNavBar/TopNavBarLayout/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TopNavBarLayout = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _TopNavBarContext = require("../TopNavBarContext");
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _SmallViewportLayout = require("./SmallViewportLayout");
+
+var _DesktopLayout = require("./DesktopLayout");
+
+var _props = require("./props");
+
+const _excluded = ["desktopConfig", "smallViewportConfig", "styles", "makeStyles"];
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+parent: TopNavBar
+id: TopNavBar.Layout
+---
+@module TopNavBarLayout
+@tsProps
+**/
+let TopNavBarLayout = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarLayout 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);
+      }
+    };
+  }
+
+  get sortedThemeOverride() {
+    const themeOverride = this.props.themeOverride; // TODO: try to type better, the themeOverride types are not prepared to be inherited and sorted
+
+    if (!themeOverride || typeof themeOverride === 'function') {
+      return {
+        desktopThemeOverride: themeOverride,
+        smallViewportThemeOverride: themeOverride
+      };
+    }
+
+    const desktopThemeOverride = {};
+    const smallViewportThemeOverride = {};
+
+    for (const key in themeOverride) {
+      if (key.startsWith('smallViewport')) {
+        const variable = key;
+        smallViewportThemeOverride[variable] = themeOverride[variable];
+      } else if (key.startsWith('desktop')) {
+        const variable = key;
+        desktopThemeOverride[variable] = themeOverride[variable];
+      }
+    }
+
+    return {
+      desktopThemeOverride,
+      smallViewportThemeOverride
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          desktopConfig = _this$props.desktopConfig,
+          smallViewportConfig = _this$props.smallViewportConfig,
+          styles = _this$props.styles,
+          makeStyles = _this$props.makeStyles,
+          restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+
+    if (this.context.layout === 'smallViewport') {
+      return (0, _emotion.jsx)(_SmallViewportLayout.TopNavBarSmallViewportLayout, Object.assign({}, smallViewportConfig, restProps, {
+        themeOverride: this.sortedThemeOverride.smallViewportThemeOverride,
+        elementRef: this.handleRef
+      }));
+    }
+
+    return (0, _emotion.jsx)(_DesktopLayout.TopNavBarDesktopLayout, Object.assign({}, desktopConfig, restProps, {
+      themeOverride: this.sortedThemeOverride.desktopThemeOverride,
+      elementRef: this.handleRef
+    }));
+  }
+
+}, _class2.displayName = "TopNavBarLayout", _class2.componentId = 'TopNavBar.Layout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  desktopConfig: {},
+  smallViewportConfig: {}
+}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
+exports.TopNavBarLayout = TopNavBarLayout;
+var _default = TopNavBarLayout;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLayout/props.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.smallViewportPropTypes = exports.smallViewportAllowedProps = exports.propTypes = exports.desktopPropTypes = exports.desktopAllowedProps = exports.commonPropTypes = exports.commonAllowedProps = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _element = require("@instructure/ui-prop-types/lib/element.js");
+
+var _TopNavBarActionItems = require("../TopNavBarActionItems");
+
+var _TopNavBarBrand = require("../TopNavBarBrand");
+
+var _TopNavBarMenuItems = require("../TopNavBarMenuItems");
+
+var _TopNavBarUser = require("../TopNavBarUser");
+
+var _props = require("../TopNavBarItem/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 commonPropTypes = {
+  renderBrand: _Children.Children.oneOf([_TopNavBarBrand.TopNavBarBrand]),
+  renderMenuItems: _Children.Children.oneOf([_TopNavBarMenuItems.TopNavBarMenuItems]),
+  renderActionItems: _Children.Children.oneOf([_TopNavBarActionItems.TopNavBarActionItems]),
+  renderUser: _Children.Children.oneOf([_TopNavBarUser.TopNavBarUser]),
+  navLabel: _propTypes.default.string,
+  elementRef: _propTypes.default.func
+};
+exports.commonPropTypes = commonPropTypes;
+const desktopPropTypes = {
+  hideActionsUserSeparator: _propTypes.default.bool
+};
+exports.desktopPropTypes = desktopPropTypes;
+const smallViewportPropTypes = {
+  dropdownMenuToggleButtonLabel: _propTypes.default.string.isRequired,
+  dropdownMenuToggleButtonTooltip: _props.topNavBarItemTooltipPropType,
+  dropdownMenuLabel: _propTypes.default.string,
+  alternativeTitle: _propTypes.default.node,
+  renderInPlaceDialogConfig: _propTypes.default.shape({
+    open: _propTypes.default.bool.isRequired,
+    onClose: _propTypes.default.func.isRequired,
+    closeButtonLabel: _propTypes.default.string.isRequired,
+    content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    returnFocusElement: _propTypes.default.func,
+    shouldContainFocus: _propTypes.default.bool,
+    shouldCloseOnDocumentClick: _propTypes.default.bool,
+    shouldCloseOnEscape: _propTypes.default.bool
+  }),
+  trayMountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
+  onDropdownMenuToggle: _propTypes.default.func,
+  onDropdownMenuSelect: _propTypes.default.func
+};
+exports.smallViewportPropTypes = smallViewportPropTypes;
+const propTypes = { ...commonPropTypes,
+  desktopConfig: _propTypes.default.shape(desktopPropTypes),
+  smallViewportConfig: _propTypes.default.shape(smallViewportPropTypes).isRequired
+};
+exports.propTypes = propTypes;
+const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'navLabel', 'elementRef'];
+exports.commonAllowedProps = commonAllowedProps;
+const desktopAllowedProps = ['hideActionsUserSeparator'];
+exports.desktopAllowedProps = desktopAllowedProps;
+const smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
+exports.smallViewportAllowedProps = smallViewportAllowedProps;
+const allowedProps = [...commonAllowedProps, 'desktopConfig', 'smallViewportConfig'];
+exports.allowedProps = allowedProps;

package/lib/TopNavBar/TopNavBarLayout/theme.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _theme = _interopRequireDefault(require("./DesktopLayout/theme"));
+
+var _theme2 = _interopRequireDefault(require("./SmallViewportLayout/theme"));
+
+/*
+ * 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 componentVariables = { ...(0, _theme.default)(theme),
+    ...(0, _theme2.default)(theme)
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/TopNavBar/TopNavBarLocator.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavBarLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+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.
+ */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const TopNavBarLocator = (0, _locator.locator)(_index.TopNavBar.selector, {
+  /* custom component query methods go here */
+});
+exports.TopNavBarLocator = TopNavBarLocator;