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

package/es/TopNavBar/TopNavBarItem/styles.js

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

package/es/TopNavBar/TopNavBarItem/theme.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.
+ */
+
+/**
+ * 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
+  };
+};
+
+export default generateComponentTheme;

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

@@ -0,0 +1,86 @@
+/*
+ * 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 { find } from '@instructure/ui-test-utils';
+import { getComputedStyle } from '@instructure/ui-dom-utils';
+import { TopNavBarBrandLocator } from '../../TopNavBarBrand/TopNavBarBrandLocator';
+import { TopNavBarMenuItemsLocator } from '../../TopNavBarMenuItems/TopNavBarMenuItemsLocator';
+import { TopNavBarActionItemsLocator } from '../../TopNavBarActionItems/TopNavBarActionItemsLocator';
+import { TopNavBarUserLocator } from '../../TopNavBarUser/TopNavBarUserLocator';
+import { TopNavBarDesktopLayout } from './index';
+export const TopNavBarDesktopLayoutLocator = 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
+TopNavBarDesktopLayout.selector, {
+  findBrandContainer: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return 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 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 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 find('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
+  },
+  findBrand: function () {
+    return TopNavBarBrandLocator.find(...arguments);
+  },
+  findMenuItems: function () {
+    return TopNavBarMenuItemsLocator.find(...arguments);
+  },
+  findActionItems: function () {
+    return TopNavBarActionItemsLocator.find(...arguments);
+  },
+  findUser: function () {
+    return 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 find('[class$=-topNavBarDesktopLayout__userContainer]', ...args);
+      return user ? getComputedStyle(user.getDOMNode(), '::before').backgroundColor : 'rgba(0, 0, 0, 0)';
+    } catch {
+      return 'rgba(0, 0, 0, 0)';
+    }
+  }
+});

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

@@ -0,0 +1,119 @@
+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 { omitProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
+import { withStyle, jsx } from '@instructure/emotion';
+import { TopNavBarContext } from '../../TopNavBarContext';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
+
+/**
+---
+private: true
+---
+@tsProps
+**/
+let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarDesktopLayout 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);
+      }
+    };
+  }
+
+  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.Children.count(renderActionItems.props.children) > 0;
+  }
+
+  get hasUserBlock() {
+    const renderUser = this.props.renderUser;
+    return !!renderUser && React.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 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", {
+      css: styles === null || styles === void 0 ? void 0 : styles.menuItemsContainer
+    }, renderMenuItems), 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);
+export { TopNavBarDesktopLayout };
+export default TopNavBarDesktopLayout;

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

@@ -0,0 +1,31 @@
+/*
+ * 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 { commonPropTypes, commonAllowedProps, desktopPropTypes, desktopAllowedProps } from '../props';
+const propTypes = { // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...desktopPropTypes
+};
+const allowedProps = [// Edit allowed props in TopNabBarLayout/props.ts
+...commonAllowedProps, ...desktopAllowedProps];
+export { propTypes, allowedProps };

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

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

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/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 = {
+    desktopFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    desktopFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    desktopFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    desktopBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
+    desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    desktopBottomBorder: 'none',
+    desktopBottomBorderInverse: `${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}`,
+    desktopHeight: '4rem',
+    desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
+    desktopInlinePadding: spacing.small,
+    desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
+    desktopMenuItemsContainerInlineMargin: `0 ${spacing.large}`,
+    desktopActionItemsContainerInlineMargin: `${spacing.xSmall} 0`,
+    desktopUserContainerInlineMargin: `${spacing.xSmall} 0`,
+    desktopUserSeparatorGap: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    desktopUserSeparatorHeight: '1.5rem',
+    desktopUserSeparatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    desktopUserSeparatorColor: colors.borderMedium,
+    desktopUserSeparatorColorInverse: colors.borderMedium
+  };
+  return { ...componentVariables
+  };
+};
+
+export default generateComponentTheme;