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

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

@@ -0,0 +1,158 @@
+/*
+ * 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
+  };
+};
+
+export default generateStyle;

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

@@ -0,0 +1,61 @@
+/*
+ * 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
+  };
+};
+
+export default generateComponentTheme;

package/es/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+import { locator } from '@instructure/ui-test-locator';
+import { TopNavBarDesktopLayoutLocator } from './DesktopLayout/TopNavBarDesktopLayoutLocator';
+import { TopNavBarSmallViewportLayoutLocator } from './SmallViewportLayout/TopNavBarSmallViewportLayoutLocator';
+import { TopNavBarLayout } from './index'; // TODO: this type seems to be too complex, try to fix it later
+
+export const TopNavBarLayoutLocator = locator(TopNavBarLayout.selector, {
+  findDesktopLayout: function () {
+    return TopNavBarDesktopLayoutLocator.find(...arguments);
+  },
+  findSmallViewportLayout: function () {
+    return TopNavBarSmallViewportLayoutLocator.find(...arguments);
+  }
+});

package/es/TopNavBar/TopNavBarLayout/index.js

@@ -0,0 +1,118 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["desktopConfig", "smallViewportConfig", "styles", "makeStyles"];
+
+var _dec, _dec2, _class, _class2;
+
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+import React, { Component } from 'react';
+import { testable } from '@instructure/ui-testable';
+import { withStyle, jsx } from '@instructure/emotion';
+import { TopNavBarContext } from '../TopNavBarContext';
+import generateComponentTheme from './theme';
+import { TopNavBarSmallViewportLayout } from './SmallViewportLayout';
+import { TopNavBarDesktopLayout } from './DesktopLayout';
+import { propTypes, allowedProps } from './props';
+
+/**
+---
+parent: TopNavBar
+id: TopNavBar.Layout
+---
+@module TopNavBarLayout
+@tsProps
+**/
+let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarLayout extends 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 = _objectWithoutProperties(_this$props, _excluded);
+
+    if (this.context.layout === 'smallViewport') {
+      return jsx(TopNavBarSmallViewportLayout, Object.assign({}, smallViewportConfig, restProps, {
+        themeOverride: this.sortedThemeOverride.smallViewportThemeOverride,
+        elementRef: this.handleRef
+      }));
+    }
+
+    return jsx(TopNavBarDesktopLayout, Object.assign({}, desktopConfig, restProps, {
+      themeOverride: this.sortedThemeOverride.desktopThemeOverride,
+      elementRef: this.handleRef
+    }));
+  }
+
+}, _class2.displayName = "TopNavBarLayout", _class2.componentId = 'TopNavBar.Layout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  desktopConfig: {},
+  smallViewportConfig: {}
+}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
+export { TopNavBarLayout };
+export default TopNavBarLayout;

package/es/TopNavBar/TopNavBarLayout/props.js

@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import { Children as ChildrenPropTypes, element } from '@instructure/ui-prop-types';
+import { TopNavBarActionItems } from '../TopNavBarActionItems';
+import { TopNavBarBrand } from '../TopNavBarBrand';
+import { TopNavBarMenuItems } from '../TopNavBarMenuItems';
+import { TopNavBarUser } from '../TopNavBarUser';
+import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props';
+const commonPropTypes = {
+  renderBrand: ChildrenPropTypes.oneOf([TopNavBarBrand]),
+  renderMenuItems: ChildrenPropTypes.oneOf([TopNavBarMenuItems]),
+  renderActionItems: ChildrenPropTypes.oneOf([TopNavBarActionItems]),
+  renderUser: ChildrenPropTypes.oneOf([TopNavBarUser]),
+  navLabel: PropTypes.string,
+  elementRef: PropTypes.func
+};
+const desktopPropTypes = {
+  hideActionsUserSeparator: PropTypes.bool
+};
+const smallViewportPropTypes = {
+  dropdownMenuToggleButtonLabel: PropTypes.string.isRequired,
+  dropdownMenuToggleButtonTooltip: topNavBarItemTooltipPropType,
+  dropdownMenuLabel: PropTypes.string,
+  alternativeTitle: PropTypes.node,
+  renderInPlaceDialogConfig: PropTypes.shape({
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    closeButtonLabel: PropTypes.string.isRequired,
+    content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    returnFocusElement: PropTypes.func,
+    shouldContainFocus: PropTypes.bool,
+    shouldCloseOnDocumentClick: PropTypes.bool,
+    shouldCloseOnEscape: PropTypes.bool
+  }),
+  trayMountNode: PropTypes.oneOfType([element, PropTypes.func]),
+  onDropdownMenuToggle: PropTypes.func,
+  onDropdownMenuSelect: PropTypes.func
+};
+const propTypes = { ...commonPropTypes,
+  desktopConfig: PropTypes.shape(desktopPropTypes),
+  smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
+};
+const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'navLabel', 'elementRef'];
+const desktopAllowedProps = ['hideActionsUserSeparator'];
+const smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
+const allowedProps = [...commonAllowedProps, 'desktopConfig', 'smallViewportConfig'];
+export { propTypes, allowedProps, commonPropTypes, commonAllowedProps, desktopPropTypes, smallViewportPropTypes, desktopAllowedProps, smallViewportAllowedProps };

package/es/TopNavBar/TopNavBarLayout/theme.js

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+import desktopTheme from './DesktopLayout/theme';
+import smallViewportTheme from './SmallViewportLayout/theme';
+/**
+ * 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 = { ...desktopTheme(theme),
+    ...smallViewportTheme(theme)
+  };
+  return { ...componentVariables
+  };
+};
+
+export default generateComponentTheme;

package/es/TopNavBar/TopNavBarLocator.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+import { locator } from '@instructure/ui-test-locator';
+import { TopNavBar } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+export const TopNavBarLocator = locator(TopNavBar.selector, {
+  /* custom component query methods go here */
+});

package/es/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+import { locator } from '@instructure/ui-test-locator';
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+
+import { TruncateListLocator } from '@instructure/ui-truncate-list/es/TruncateList/TruncateListLocator';
+/* eslint-enable no-restricted-imports */
+
+import { TopNavBarItemLocator } from '../TopNavBarItem/TopNavBarItemLocator';
+import { TopNavBarMenuItems } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+export const TopNavBarMenuItemsLocator = locator(TopNavBarMenuItems.selector, {
+  findAllMenuItems: function () {
+    return TopNavBarItemLocator.findAll(...arguments);
+  },
+  findTruncateList: function () {
+    return TruncateListLocator.find(...arguments);
+  },
+  findTruncateListTriggerItem: async function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    const truncateList = await TruncateListLocator.find(...args);
+
+    if (truncateList) {
+      return TopNavBarItemLocator.find('[id^=TopNavBarMenuItems-hiddenMenuItemsMenuTrigger_]', ...args);
+    } else {
+      return truncateList;
+    }
+  }
+});