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

package/src/TopNavBar/TopNavBarLayout/DesktopLayout/index.tsx

@@ -0,0 +1,148 @@
+/*
+ * 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'
+import type {
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayoutStyleProps
+} from './props'
+
+/**
+---
+private: true
+---
+@tsProps
+**/
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class TopNavBarDesktopLayout extends Component<TopNavBarDesktopLayoutProps> {
+  static readonly componentId = 'TopNavBar.DesktopLayout'
+
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static defaultProps = {}
+
+  declare context: React.ContextType<typeof TopNavBarContext>
+  static contextType = TopNavBarContext
+
+  ref: HTMLElement | null = null
+
+  handleRef = (el: HTMLElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.(this.makeStylesVariables)
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStylesVariables)
+  }
+
+  get makeStylesVariables(): TopNavBarDesktopLayoutStyleProps {
+    return {
+      inverseColor: this.context.inverseColor,
+      hasBrandBlock: this.hasBrandBlock,
+      hasActionItemsBlock: this.hasActionItemsBlock,
+      hasUserBlock: this.hasUserBlock
+    }
+  }
+
+  get hasBrandBlock() {
+    const { renderBrand } = this.props
+    return (
+      !!renderBrand &&
+      (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon)
+    )
+  }
+
+  get hasActionItemsBlock() {
+    const { renderActionItems } = this.props
+    return (
+      !!renderActionItems &&
+      React.Children.count(renderActionItems.props.children) > 0
+    )
+  }
+
+  get hasUserBlock() {
+    const { renderUser } = this.props
+    return !!renderUser && React.Children.count(renderUser.props.children) > 0
+  }
+
+  render() {
+    const {
+      renderBrand,
+      renderMenuItems,
+      renderActionItems,
+      renderUser,
+      navLabel,
+      styles
+    } = this.props
+
+    return (
+      <nav
+        {...omitProps(this.props, allowedProps)}
+        ref={this.handleRef}
+        css={styles?.topNavBarDesktopLayout}
+        aria-label={navLabel}
+      >
+        {this.hasBrandBlock && (
+          <div css={styles?.brandContainer}>{renderBrand}</div>
+        )}
+
+        <div css={styles?.menuItemsContainer}>{renderMenuItems}</div>
+
+        {this.hasActionItemsBlock && (
+          <div css={styles?.actionItemsContainer}>{renderActionItems}</div>
+        )}
+
+        {this.hasUserBlock && (
+          <div css={styles?.userContainer}>{renderUser}</div>
+        )}
+      </nav>
+    )
+  }
+}
+
+export { TopNavBarDesktopLayout }
+export default TopNavBarDesktopLayout

package/src/TopNavBar/TopNavBarLayout/DesktopLayout/props.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  TopNavBarLayoutDesktopTheme,
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
+
+import type { TopNavBarContextType } from '../../TopNavBarContext'
+
+import {
+  commonPropTypes,
+  commonAllowedProps,
+  desktopPropTypes,
+  desktopAllowedProps
+} from '../props'
+import type { CommonTopNavBarLayoutProps } from '../props'
+
+import { TopNavBarDesktopLayout } from './index'
+
+type DesktopLayoutChild = React.ComponentElement<
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayout
+>
+
+type DesktopLayoutOwnProps = {
+  /**
+   * Hides the separator between the action items and the user block.
+   */
+  hideActionsUserSeparator?: boolean
+}
+
+type TopNavBarDesktopLayoutOwnProps = CommonTopNavBarLayoutProps &
+  DesktopLayoutOwnProps
+
+type PropKeys = keyof TopNavBarDesktopLayoutOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TopNavBarDesktopLayoutProps = TopNavBarDesktopLayoutOwnProps &
+  WithStyleProps<TopNavBarLayoutDesktopTheme, TopNavBarDesktopLayoutStyle> &
+  OtherHTMLAttributes<TopNavBarDesktopLayoutOwnProps>
+
+type TopNavBarDesktopLayoutStyle = ComponentStyle<
+  | 'topNavBarDesktopLayout'
+  | 'brandContainer'
+  | 'menuItemsContainer'
+  | 'actionItemsContainer'
+  | 'userContainer'
+>
+
+type TopNavBarDesktopLayoutStyleProps = {
+  inverseColor: TopNavBarContextType['inverseColor']
+  hasBrandBlock: boolean
+  hasActionItemsBlock: boolean
+  hasUserBlock: boolean
+}
+
+const propTypes: PropValidators<PropKeys> = {
+  // Edit PropTypes in TopNabBarLayout/props.ts
+  ...commonPropTypes,
+  ...desktopPropTypes
+}
+
+const allowedProps: AllowedPropKeys = [
+  // Edit allowed props in TopNabBarLayout/props.ts
+  ...commonAllowedProps,
+  ...desktopAllowedProps
+]
+
+export type {
+  DesktopLayoutChild,
+  DesktopLayoutOwnProps,
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayoutOwnProps,
+  TopNavBarDesktopLayoutStyle,
+  TopNavBarDesktopLayoutStyleProps
+}
+export { propTypes, allowedProps }

package/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts

@@ -0,0 +1,136 @@
+/*
+ * 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 type { TopNavBarLayoutDesktopTheme } from '@instructure/shared-types'
+import type {
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayoutStyleProps,
+  TopNavBarDesktopLayoutStyle
+} from './props'
+
+/**
+ * ---
+ * 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: TopNavBarLayoutDesktopTheme,
+  props: TopNavBarDesktopLayoutProps,
+  state: TopNavBarDesktopLayoutStyleProps
+): TopNavBarDesktopLayoutStyle => {
+  const { hideActionsUserSeparator } = props
+  const { inverseColor, hasBrandBlock, hasActionItemsBlock, hasUserBlock } =
+    state
+
+  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/src/TopNavBar/TopNavBarLayout/DesktopLayout/theme.ts

@@ -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.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import type { TopNavBarLayoutDesktopTheme } from '@instructure/shared-types'
+
+/**
+ * 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: Theme): TopNavBarLayoutDesktopTheme => {
+  const { colors, stacking, typography, spacing, borders } = theme
+
+  const componentVariables: TopNavBarLayoutDesktopTheme = {
+    desktopFontSize: typography?.fontSizeMedium,
+    desktopFontFamily: typography?.fontFamily,
+    desktopFontWeight: typography?.fontWeightNormal,
+
+    desktopBackground: colors?.backgroundBrandSecondary,
+    desktopBackgroundInverse: colors?.backgroundLightest,
+    desktopBottomBorder: 'none',
+    desktopBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.borderMedium}`,
+    desktopHeight: '4rem',
+    desktopZIndex: stacking?.topmost + 1,
+
+    desktopInlinePadding: spacing.small,
+    desktopBrandContainerInlineMargin: `0 ${spacing.medium}`,
+    desktopMenuItemsContainerInlineMargin: `0 ${spacing.large}`,
+    desktopActionItemsContainerInlineMargin: `${spacing.xSmall} 0`,
+    desktopUserContainerInlineMargin: `${spacing.xSmall} 0`,
+
+    desktopUserSeparatorGap: spacing?.xSmall,
+    desktopUserSeparatorHeight: '1.5rem',
+    desktopUserSeparatorWidth: borders?.widthSmall,
+    desktopUserSeparatorColor: colors.borderMedium,
+    desktopUserSeparatorColorInverse: colors.borderMedium
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.ts

@@ -0,0 +1,125 @@
+/*
+ * 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'
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+import { DrilldownLocator } from '@instructure/ui-drilldown/es/Drilldown/DrilldownLocator'
+// @ts-expect-error bypass no type definition found error
+import { TrayLocator } from '@instructure/ui-tray/es/Tray/TrayLocator'
+// @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 { TopNavBarBrandLocator } from '../../TopNavBarBrand/TopNavBarBrandLocator'
+import { TopNavBarActionItemsLocator } from '../../TopNavBarActionItems/TopNavBarActionItemsLocator'
+
+import { TopNavBarSmallViewportLayout } from './index'
+
+export const TopNavBarSmallViewportLayoutLocator = 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
+  TopNavBarSmallViewportLayout.selector,
+  {
+    findNavBar: (...args: any[]) => {
+      return find('[class$=-topNavBarSmallViewportLayout__navbar]', ...args)
+    },
+    findDropdownMenuTriggerWrapper: (...args: any[]) => {
+      return find(
+        '[class*=-topNavBarSmallViewportLayout__menuTrigger]',
+        ...args
+      )
+    },
+    findAlternativeTitleContainer: (...args: any[]) => {
+      return find(
+        '[class*=-topNavBarSmallViewportLayout__alternativeTitleContainer]',
+        ...args
+      )
+    },
+    findDropdownMenuTriggerItem: async (...args: any[]) => {
+      const triggerExists = await find(
+        '[id^=TopNavBarSmallViewportLayout-menuTrigger_]',
+        ...args
+      )
+
+      if (triggerExists) {
+        return TopNavBarItemLocator.find(
+          '[id^=TopNavBarSmallViewportLayout-menuTrigger_]'
+        )
+      } else {
+        return triggerExists
+      }
+    },
+    findDropdownMenuTriggerButton: async (...args: any[]) => {
+      const triggerExists = await find(
+        '[id^=TopNavBarSmallViewportLayout-menuTrigger_]',
+        ...args
+      )
+
+      if (triggerExists) {
+        const menuItem = await TopNavBarItemLocator.find(
+          '[id^=TopNavBarSmallViewportLayout-menuTrigger_]'
+        )
+        return menuItem.findButton()
+      } else {
+        return triggerExists
+      }
+    },
+    findBrandContainer: (...args: any[]) => {
+      return find(
+        '[class$=-topNavBarSmallViewportLayout__brandContainer]',
+        ...args
+      )
+    },
+    findBrand: (...args: any[]) => {
+      return TopNavBarBrandLocator.find(...args)
+    },
+    findActionItems: (...args: any[]) => {
+      return TopNavBarActionItemsLocator.find(...args)
+    },
+    findTruncateList: (...args: any[]) => {
+      return TruncateListLocator.find(...args)
+    },
+    findDropdownMenuTray: (...args: any[]) => {
+      return TrayLocator.find(...args)
+    },
+    findDropdownMenu: (...args: any[]) => {
+      return DrilldownLocator.find(...args)
+    },
+    findInPlaceDialog: (...args: any[]) => {
+      return find(
+        '[class$=-topNavBarSmallViewportLayout__inPlaceDialogContainer]',
+        ...args
+      )
+    },
+    findInPlaceDialogCloseButton: (...args: any[]) => {
+      return find(
+        '[id^=TopNavBarSmallViewportLayout-inPlaceDialogCloseButton_]',
+        ...args
+      )
+    }
+  }
+)