@instructure/ui-top-nav-bar 8.47.2-snapshot-3 → 8.47.2-snapshot-4

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.47.2-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.47.1...v8.47.2-snapshot-3) (2023-11-10)
+## [8.47.2-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.47.1...v8.47.2-snapshot-4) (2023-11-10)
 
 **Note:** Version bump only for package @instructure/ui-top-nav-bar
 

package/es/TopNavBar/TopNavBarBrand/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _dec3, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2;
 
 /** @jsx jsx */
 import React, { Component } from 'react';
-import { getElementType, omitProps } from '@instructure/ui-react-utils';
+import { deprecated, getElementType, omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -41,7 +41,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarBrand extends Component {
+let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9', null, 'Please use the updated TopNavBar design.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarBrand extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -100,6 +100,6 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
       "aria-hidden": "true"
     }, renderName)));
   }
-}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
+}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
 export { TopNavBarBrand };
 export default TopNavBarBrand;

package/es/TopNavBar/TopNavBarBreadcrumb/__new-tests__/TopNavBarBreadcrumb.test.js

@@ -0,0 +1,105 @@
+var _TopNavBarBreadcrumb, _BaseExample, _BaseExample2, _BaseExample3;
+/*
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { TopNavBarBreadcrumb } from '../index';
+import { Breadcrumb } from '@instructure/ui-breadcrumb';
+import TopNavBarContext from '../../TopNavBarContext';
+let originalResizeObserver;
+let originalMatchMedia;
+beforeAll(() => {
+  originalResizeObserver = global.ResizeObserver;
+  originalMatchMedia = window.matchMedia;
+  class MockResizeObserver {
+    constructor() {
+      this.observe = jest.fn();
+      this.unobserve = jest.fn();
+      this.disconnect = jest.fn();
+    }
+  }
+  global.ResizeObserver = MockResizeObserver;
+  window.matchMedia = jest.fn().mockImplementation(query => {
+    return {
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn()
+    };
+  });
+});
+afterAll(() => {
+  global.ResizeObserver = originalResizeObserver;
+  window.matchMedia = originalMatchMedia;
+});
+const TEST_BREADCRUMB_LABEL = 'You are here:';
+const BaseExample = props => {
+  return /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+    value: {
+      layout: props.layout,
+      inverseColor: props.inverseColor
+    }
+  }, _TopNavBarBreadcrumb || (_TopNavBarBreadcrumb = /*#__PURE__*/React.createElement(TopNavBarBreadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb, {
+    label: TEST_BREADCRUMB_LABEL
+  }, /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 3"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 4"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 5")))));
+};
+describe('<TopNavBarBreadcrumb />', () => {
+  it('should render', () => {
+    const _render = render(_BaseExample || (_BaseExample = /*#__PURE__*/React.createElement(BaseExample, {
+        inverseColor: true,
+        layout: "desktop"
+      }))),
+      getByLabelText = _render.getByLabelText;
+    const element = getByLabelText(TEST_BREADCRUMB_LABEL);
+    expect(element).toBeInTheDocument();
+  });
+  it('should warn if inverseColor is false', () => {
+    const consoleMock = jest.spyOn(console, 'error').mockImplementation();
+    const _render2 = render(_BaseExample2 || (_BaseExample2 = /*#__PURE__*/React.createElement(BaseExample, {
+        inverseColor: false,
+        layout: "desktop"
+      }))),
+      queryByLabelText = _render2.queryByLabelText;
+    const element = queryByLabelText(TEST_BREADCRUMB_LABEL);
+    expect(element).not.toBeInTheDocument();
+    expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
+  });
+  describe('should be accessible', () => {
+    it('a11y', async () => {
+      const _render3 = render(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/React.createElement(BaseExample, {
+          inverseColor: true,
+          layout: "desktop"
+        }))),
+        container = _render3.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

package/es/TopNavBar/TopNavBarBreadcrumb/index.js

@@ -0,0 +1,111 @@
+var _dec, _dec2, _class, _class2, _IconHamburgerLine;
+/*
+ * 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 { allowedProps, propTypes } from './props';
+import TopNavBar from '../index';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from '../TopNavBarBreadcrumb/styles';
+import { testable } from '@instructure/ui-testable';
+import { IconArrowOpenStartLine, IconHamburgerLine } from '@instructure/ui-icons';
+import TopNavBarContext from '../TopNavBarContext';
+import { error } from '@instructure/console';
+import { Link } from '@instructure/ui-link';
+
+/**
+---
+parent: TopNavBar
+id: TopNavBar.Breadcrumb
+---
+@module TopNavBarBreadcrumb
+ **/
+let TopNavBarBreadcrumb = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarBreadcrumb extends Component {
+  constructor(...args) {
+    super(...args);
+    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, {
+      inverseColor: this.context.inverseColor
+    });
+  }
+  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, {
+      inverseColor: this.context.inverseColor
+    });
+  }
+  renderMenu() {
+    var _this$props$styles;
+    const onClick = this.props.onClick;
+    return jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
+    }, jsx(TopNavBar.Item, {
+      id: "iconItem",
+      variant: "icon",
+      renderIcon: _IconHamburgerLine || (_IconHamburgerLine = jsx(IconHamburgerLine, null)),
+      onClick: onClick
+    }, "Hamburger menu"));
+  }
+  render() {
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      styles = _this$props3.styles;
+    if (!this.context.inverseColor) {
+      error(false, `[TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.`);
+    }
+    const breadcrumbElement = React.Children.toArray(children)[0];
+    const breadCrumbLinks = breadcrumbElement.props.children;
+    const lastButOneLink = React.Children.toArray(breadCrumbLinks)[React.Children.count(breadCrumbLinks) - 2];
+    return this.context.inverseColor && (this.context.layout === 'desktop' ? jsx("div", {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconContainer
+    }, this.renderMenu()), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.breadcrumbContainer
+    }, children)) : jsx("div", {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBreadcrumb
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.linkContainer
+    }, jsx(Link, {
+      href: lastButOneLink.props.href,
+      isWithinText: false,
+      renderIcon: IconArrowOpenStartLine
+    }, lastButOneLink.props.children))));
+  }
+}, _class2.displayName = "TopNavBarBreadcrumb", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
+export { TopNavBarBreadcrumb };
+export default TopNavBarBreadcrumb;

package/es/TopNavBar/TopNavBarBreadcrumb/props.js

@@ -0,0 +1,34 @@
+/*
+ * 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 { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import PropTypes from 'prop-types';
+import { Breadcrumb } from '@instructure/ui-breadcrumb';
+const propTypes = {
+  onClick: PropTypes.func,
+  elementRef: PropTypes.func,
+  children: ChildrenPropTypes.oneOf([Breadcrumb])
+};
+const allowedProps = ['children', 'onClick', 'elementRef'];
+export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarBreadcrumb/styles.js

@@ -0,0 +1,66 @@
+/*
+ * 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 generateStyle = (_props, _state) => {
+  return {
+    topNavBarBreadcrumb: {
+      label: 'topNavBarBreadcrumb',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexGrow: 1,
+      border: 0,
+      outline: 0,
+      padding: 0,
+      margin: 0,
+      appearance: 'none',
+      textDecoration: 'none'
+    },
+    iconContainer: {
+      label: 'topNavBarBreadcrumb__iconContainer',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    icon: {
+      label: 'topNavBarBreadcrumb__icon',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    breadcrumbContainer: {
+      label: 'topNavBarBreadcrumb__breadCrumbContainer',
+      appearance: 'none',
+      textDecoration: 'none',
+      marginLeft: '0.75rem',
+      flexGrow: 1
+    },
+    linkContainer: {
+      label: 'topNavBarBreadcrumb__linkContainer',
+      marginLeft: '0.5rem'
+    }
+  };
+};
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _dec3, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2;
 
 /** @jsx jsx */
 import React, { Component } from 'react';
-import { omitProps } from '@instructure/ui-react-utils';
+import { deprecated, omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import { TopNavBarContext } from '../../TopNavBarContext';
@@ -37,7 +37,9 @@ import { propTypes, allowedProps } from './props';
 private: true
 ---
 **/
-let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarDesktopLayout extends Component {
+let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9', {
+  hideActionsUserSeparator: true
+}, 'Note: this prop is probably used inside the desktopConfig prop on [TopNavBar.Layout]'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarDesktopLayout extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -77,28 +79,42 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
     const renderUser = this.props.renderUser;
     return !!renderUser && React.Children.count(renderUser.props.children) > 0;
   }
+  get hasMenuItemsBlock() {
+    const renderMenuItems = this.props.renderMenuItems;
+    return !!renderMenuItems && React.Children.count(renderMenuItems.props.children) > 0;
+  }
+  get hasBreadcrumbBlock() {
+    const renderBreadcrumb = this.props.renderBreadcrumb;
+    return !!renderBreadcrumb && React.Children.count(renderBreadcrumb.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,
+      renderBreadcrumb = _this$props3.renderBreadcrumb,
       navLabel = _this$props3.navLabel,
       styles = _this$props3.styles;
+
+    // only render breadcrumb if there is no brand or menu items
+    const shouldRenderBreadcrumbBlock = !(this.hasBrandBlock || this.hasMenuItemsBlock) && this.hasBreadcrumbBlock;
     return jsx("nav", Object.assign({}, omitProps(this.props, allowedProps), {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarDesktopLayout,
       "aria-label": navLabel
     }), this.hasBrandBlock && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.brandContainer
-    }, renderBrand), jsx("div", {
+    }, renderBrand), this.hasMenuItemsBlock && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.menuItemsContainer
-    }, renderMenuItems), this.hasActionItemsBlock && jsx("div", {
+    }, renderMenuItems), shouldRenderBreadcrumbBlock && renderBreadcrumb, jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.spacer
+    }), this.hasActionItemsBlock && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.actionItemsContainer
     }, renderActionItems), this.hasUserBlock && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.userContainer
     }, renderUser));
   }
-}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
+}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
 export { TopNavBarDesktopLayout };
 export default TopNavBarDesktopLayout;

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

@@ -86,6 +86,9 @@ const generateStyle = (componentTheme, props, state) => {
       marginBlock: 0,
       marginInline: componentTheme.desktopActionItemsContainerInlineMargin
     },
+    spacer: {
+      flexGrow: '1'
+    },
     userContainer: {
       label: 'topNavBarDesktopLayout__userContainer',
       display: 'flex',
@@ -108,6 +111,14 @@ const generateStyle = (componentTheme, props, state) => {
           display: 'block'
         }
       })
+    },
+    breadcrumbContainer: {
+      label: 'topNavBarDesktopLayout__breadcrumbContainer',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      marginBlock: 0,
+      alignItems: 'center'
     }
   };
 };

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

@@ -147,6 +147,10 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
   get hasSubmenu() {
     return (this.dropdownMenuContent || []).length > 0;
   }
+  get hasBreadcrumbBlock() {
+    const renderBreadcrumb = this.props.renderBreadcrumb;
+    return !!renderBreadcrumb && React.Children.count(renderBreadcrumb.props.children) > 0;
+  }
   get isInPlaceDialogOpen() {
     var _this$props$renderInP;
     return (_this$props$renderInP = this.props.renderInPlaceDialogConfig) === null || _this$props$renderInP === void 0 ? void 0 : _this$props$renderInP.open;
@@ -381,18 +385,21 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
       trayMountNode = _this$props7.trayMountNode,
       navLabel = _this$props7.navLabel,
       renderActionItems = _this$props7.renderActionItems,
+      renderBreadcrumb = _this$props7.renderBreadcrumb,
       styles = _this$props7.styles;
     return jsx("nav", Object.assign({}, omitProps(this.props, allowedProps), {
       ref: this.handleRef,
       "aria-label": navLabel
     }), jsx(Global, {
       styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
-    }), !this.isInPlaceDialogOpen && jsx("div", {
+    }), this.hasBreadcrumbBlock && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.navbar
+    }, renderBreadcrumb), !this.hasBreadcrumbBlock && !this.isInPlaceDialogOpen && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.navbar
-    }, this.renderMenuTrigger(), this.hasActionItemsBlock(renderActionItems) && renderActionItems), this.renderInPlaceDialog(), !trayMountNode && jsx("div", {
+    }, this.renderMenuTrigger(), this.hasActionItemsBlock(renderActionItems) && renderActionItems), !this.hasBreadcrumbBlock && this.renderInPlaceDialog(), !this.hasBreadcrumbBlock && !trayMountNode && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.trayContainer,
       id: this._trayContainerId
-    }), this.renderDropdownMenuTray());
+    }), !this.hasBreadcrumbBlock && this.renderDropdownMenuTray());
   }
 }, _class2.displayName = "TopNavBarSmallViewportLayout", _class2.componentId = 'TopNavBar.SmallViewportLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
 export { TopNavBarSmallViewportLayout };

package/es/TopNavBar/TopNavBarLayout/props.js

@@ -29,11 +29,13 @@ import { TopNavBarBrand } from '../TopNavBarBrand';
 import { TopNavBarMenuItems } from '../TopNavBarMenuItems';
 import { TopNavBarUser } from '../TopNavBarUser';
 import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props';
+import { TopNavBarBreadcrumb } from '../TopNavBarBreadcrumb';
 const commonPropTypes = {
   renderBrand: ChildrenPropTypes.oneOf([TopNavBarBrand]),
   renderMenuItems: ChildrenPropTypes.oneOf([TopNavBarMenuItems]),
   renderActionItems: ChildrenPropTypes.oneOf([TopNavBarActionItems]),
   renderUser: ChildrenPropTypes.oneOf([TopNavBarUser]),
+  renderBreadcrumb: ChildrenPropTypes.oneOf([TopNavBarBreadcrumb]),
   navLabel: PropTypes.string,
   elementRef: PropTypes.func
 };
@@ -64,7 +66,7 @@ const propTypes = {
   desktopConfig: PropTypes.shape(desktopPropTypes),
   smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
 };
-const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'navLabel', 'elementRef'];
+const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'renderBreadcrumb', 'navLabel', 'elementRef'];
 const desktopAllowedProps = ['hideActionsUserSeparator'];
 const smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
 const allowedProps = [...commonAllowedProps, 'desktopConfig', 'smallViewportConfig'];

package/es/TopNavBar/index.js

@@ -35,6 +35,7 @@ import { TopNavBarItem } from './TopNavBarItem';
 import { TopNavBarLayout } from './TopNavBarLayout';
 import { TopNavBarMenuItems } from './TopNavBarMenuItems';
 import { TopNavBarUser } from './TopNavBarUser';
+import { TopNavBarBreadcrumb } from './TopNavBarBreadcrumb';
 import { TopNavBarContext } from './TopNavBarContext';
 import { propTypes, allowedProps } from './props';
 /**
@@ -92,7 +93,7 @@ let TopNavBar = (_dec = testable(), _dec(_class = (_class2 = class TopNavBar ext
       }
     });
   }
-}, _class2.displayName = "TopNavBar", _class2.componentId = 'TopNavBar', _class2.ActionItems = TopNavBarActionItems, _class2.Brand = TopNavBarBrand, _class2.Item = TopNavBarItem, _class2.Layout = TopNavBarLayout, _class2.MenuItems = TopNavBarMenuItems, _class2.User = TopNavBarUser, _class2.contextType = TopNavBarContext, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+}, _class2.displayName = "TopNavBar", _class2.componentId = 'TopNavBar', _class2.ActionItems = TopNavBarActionItems, _class2.Brand = TopNavBarBrand, _class2.Item = TopNavBarItem, _class2.Layout = TopNavBarLayout, _class2.MenuItems = TopNavBarMenuItems, _class2.User = TopNavBarUser, _class2.Breadcrumb = TopNavBarBreadcrumb, _class2.contextType = TopNavBarContext, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   breakpoint: 1024,
   mediaQueryMatch: 'media',
   inverseColor: false

package/lib/TopNavBar/TopNavBarBrand/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TopNavBarBrand = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -17,7 +18,7 @@ var _TopNavBarContext = require("../TopNavBarContext");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _dec3, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -49,7 +50,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarBrand extends _react.Component {
+let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _deprecated.deprecated)('9', null, 'Please use the updated TopNavBar design.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarBrand extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -108,5 +109,5 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
       "aria-hidden": "true"
     }, renderName)));
   }
-}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
+}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
 var _default = exports.default = TopNavBarBrand;