@instructure/ui-side-nav-bar 8.38.2-snapshot-11

package/src/SideNavBar/SideNavBarItem/index.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 { Component } from 'react'
+
+import { testable } from '@instructure/ui-testable'
+import { omitProps, getElementType } from '@instructure/ui-react-utils'
+import { Tooltip } from '@instructure/ui-tooltip'
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
+import { withStyle, jsx } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import type { SideNavBarItemProps } from './props'
+import { allowedProps, propTypes } from './props'
+
+/**
+---
+parent: SideNavBar
+id: SideNavBar.Item
+---
+@tsProps
+**/
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class SideNavBarItem extends Component<SideNavBarItemProps> {
+  static readonly componentId = 'SideNavBar.Item'
+
+  static allowedProps = allowedProps
+  static propTypes = propTypes
+
+  static defaultProps = {
+    as: 'a',
+    selected: false,
+    minimized: false
+  } as const
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+    this.ref = el
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.({ minimized: this.props.minimized })
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.({ minimized: this.props.minimized })
+  }
+
+  renderLink(addRef: boolean) {
+    const ElementType = getElementType(SideNavBarItem, this.props)
+
+    const { href, onClick, icon, label } = this.props
+
+    const props = omitProps(this.props, SideNavBarItem.allowedProps)
+
+    return (
+      <ElementType
+        {...props}
+        href={href}
+        onClick={onClick}
+        ref={addRef ? this.handleRef : undefined}
+        css={this.props.styles?.navigationItem}
+        aria-label={this.props.minimized ? (label as string) : undefined}
+      >
+        <div css={this.props.styles?.icon} aria-hidden="true">
+          {icon}
+        </div>
+        {!this.props.minimized ? (
+          <div css={this.props.styles?.label}>{label}</div>
+        ) : null}
+      </ElementType>
+    )
+  }
+
+  render() {
+    const { minimized, label } = this.props
+    const hasTooltip: boolean = minimized! && hasVisibleChildren(label)
+    const link = this.renderLink(!hasTooltip)
+    return hasTooltip ? (
+      <Tooltip renderTip={label} placement="end" elementRef={this.handleRef}>
+        {link}
+      </Tooltip>
+    ) : (
+      link
+    )
+  }
+}
+
+export default SideNavBarItem
+export { SideNavBarItem }

package/src/SideNavBar/SideNavBarItem/locator.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { SideNavBarItemLocator } from './SideNavBarItemLocator'
+
+export { SideNavBarItemLocator }
+export default SideNavBarItemLocator

package/src/SideNavBar/SideNavBarItem/props.ts

@@ -0,0 +1,102 @@
+/*
+ * 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 React from 'react'
+import type {
+  AsElementType,
+  PropValidators,
+  SideNavBarItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type SideNavBarItemOwnProps = {
+  /**
+   * The reference to the underlying HTML element
+   */
+  elementRef?: (el: Element | null) => void
+  /**
+   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
+   */
+  icon: React.ReactNode
+  /**
+   * The text to display  for the SideNavBar Link
+   */
+  label: React.ReactNode
+  /**
+   * The element type to render as (will default to `<a>` if href is provided)
+   */
+  as?: AsElementType
+  /**
+   * If the SideNavBarItem goes to a new page, pass an href
+   */
+  href?: string
+  /**
+   * If the SideNavBarItem does not go to a new page pass an onClick
+   */
+  onClick?: (event: React.MouseEvent) => void
+  /**
+   * Denotes which SideNavBarItem is currently selected
+   */
+  selected?: boolean
+  /**
+   * When minimized is set to true, the `<SideNavBar />` shows icons only while the text becomes a tooltip. When it is set to false, the `<SideNavBar />` shows text in addition to the icons
+   */
+  minimized?: boolean
+}
+
+type PropKeys = keyof SideNavBarItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SideNavBarItemProps = SideNavBarItemOwnProps &
+  WithStyleProps<SideNavBarItemTheme, SideNavBarItemStyle> &
+  OtherHTMLAttributes<SideNavBarItemOwnProps>
+
+type SideNavBarItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>
+
+const propTypes: PropValidators<PropKeys> = {
+  elementRef: PropTypes.func,
+  icon: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+  as: PropTypes.elementType,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  selected: PropTypes.bool,
+  minimized: PropTypes.bool
+}
+
+const allowedProps: AllowedPropKeys = [
+  'elementRef',
+  'icon',
+  'label',
+  'as',
+  'href',
+  'onClick',
+  'selected',
+  'minimized'
+]
+
+export type { SideNavBarItemProps, SideNavBarItemStyle }
+export { propTypes, allowedProps }

package/src/SideNavBar/SideNavBarItem/styles.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 { SideNavBarItemTheme } from '@instructure/shared-types'
+import type { SideNavBarItemProps, SideNavBarItemStyle } 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: SideNavBarItemTheme,
+  props: SideNavBarItemProps
+): SideNavBarItemStyle => {
+  const { selected } = props
+
+  return {
+    navigationItem: {
+      label: 'navigationItem',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      display: 'block',
+      width: '100%',
+      textAlign: 'center',
+      padding: componentTheme.contentPadding,
+      cursor: 'pointer',
+      border: 'none',
+      boxSizing: 'border-box',
+      textDecoration: componentTheme.linkTextDecoration,
+      overflowWrap: 'break-word',
+      wordWrap: 'break-word',
+      hyphens: 'auto',
+      ...(selected
+        ? {
+            backgroundColor: componentTheme.selectedBackgroundColor,
+            fill: componentTheme.selectedIconColor,
+            color: componentTheme.selectedFontColor,
+            '&:active, &:hover': {
+              backgroundColor: componentTheme.selectedBackgroundColor
+            },
+            '&:focus': {
+              backgroundColor: componentTheme.selectedBackgroundColor,
+              boxShadow: `${componentTheme.selectedOuterFocusOutline}, ${componentTheme.selectedInnerFocusOutline}`,
+              outline: 'none'
+            }
+          }
+        : {
+            backgroundColor: componentTheme.backgroundColor,
+            color: componentTheme.fontColor,
+            '&:active': {
+              backgroundColor: componentTheme.hoverBackgroundColor
+            },
+            '&:hover': {
+              backgroundColor: componentTheme.hoverBackgroundColor
+            },
+            '&:focus': {
+              backgroundColor: componentTheme.hoverBackgroundColor,
+              boxShadow: `${componentTheme.outerFocusOutline}, ${componentTheme.innerFocusOutline}`,
+              outline: 'none'
+            }
+          })
+    },
+    icon: {
+      label: 'navigationItem__icon',
+      fontSize: componentTheme.iconSize,
+      fill: componentTheme.iconColor
+    },
+    label: {
+      label: 'navigationItem__label',
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight
+    }
+  }
+}
+
+export default generateStyle

package/src/SideNavBar/SideNavBarItem/theme.ts

@@ -0,0 +1,82 @@
+/*
+ * 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, ThemeSpecificStyle } from '@instructure/ui-themes'
+import { SideNavBarItemTheme } 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): SideNavBarItemTheme => {
+  const { colors, spacing, typography, key: themeName } = theme
+
+  const themeSpecificStyle: ThemeSpecificStyle<SideNavBarItemTheme> = {
+    canvas: {
+      fontColor: theme['ic-brand-global-nav-menu-item__text-color'],
+      iconColor: theme['ic-brand-global-nav-ic-icon-svg-fill'],
+      backgroundColor: theme['ic-brand-global-nav-bgd'],
+      hoverBackgroundColor: theme['ic-global-nav-link-hover'],
+      selectedFontColor:
+        theme['ic-brand-global-nav-menu-item__text-color--active'],
+      selectedIconColor: theme['ic-brand-global-nav-ic-icon-svg-fill--active']
+    },
+    'canvas-high-contrast': {
+      linkTextDecoration: 'underline'
+    }
+  }
+
+  const componentVariables: SideNavBarItemTheme = {
+    fontSize: typography?.fontSizeSmall,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightLight,
+
+    fontColor: colors?.textLightest,
+    iconSize: '1.625rem',
+    iconColor: colors?.textLightest,
+    lineHeight: typography?.lineHeight,
+    backgroundColor: 'transparent',
+    linkTextDecoration: 'none',
+
+    hoverBackgroundColor: colors?.backgroundDarkest,
+    outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderDarkest}`,
+    innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderLightest}`,
+
+    selectedFontColor: colors?.textBrand,
+    selectedIconColor: colors?.textBrand,
+    selectedBackgroundColor: colors?.backgroundLightest,
+    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderLightest}`,
+    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderBrand}`,
+
+    contentPadding: spacing?.xxSmall
+  }
+
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  }
+}
+
+export default generateComponentTheme

package/src/SideNavBar/SideNavBarLocator.ts

@@ -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 { locator } from '@instructure/ui-test-locator'
+
+import { SideNavBar } from './index'
+import { SideNavBarItemLocator } from './SideNavBarItem/SideNavBarItemLocator'
+
+export { SideNavBarItemLocator }
+
+// @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 SideNavBarLocator = locator(SideNavBar.selector, {
+  findAllItems: (...args: any[]) => {
+    return SideNavBarItemLocator.findAll(...args)
+  },
+
+  findItem: (...args: any[]) => {
+    return SideNavBarItemLocator.find(...args)
+  }
+})

package/src/SideNavBar/index.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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, Children, ReactElement } from 'react'
+
+import { testable } from '@instructure/ui-testable'
+
+import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
+import { IconMoveStartLine } from '@instructure/ui-icons'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { withStyle, jsx } from '@instructure/emotion'
+
+import { SideNavBarItem } from './SideNavBarItem'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import type { SideNavBarProps, SideNavBarState } from './props'
+import { allowedProps, propTypes } from './props'
+
+const navMinimized = ({ minimized }: { minimized: boolean }) => ({
+  minimized: !minimized
+})
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class SideNavBar extends Component<SideNavBarProps, SideNavBarState> {
+  static readonly componentId = 'SideNavBar'
+
+  static allowedProps = allowedProps
+  static propTypes = propTypes
+
+  static defaultProps = {
+    children: null,
+    defaultMinimized: false,
+    // TODO we should investigate later if it used or not
+    onClick: function (_e: React.MouseEvent) {}
+  }
+
+  static Item = SideNavBarItem
+
+  ref: Element | null = null
+
+  constructor(props: SideNavBarProps) {
+    super(props)
+
+    this.state = {
+      minimized: this.isControlled(props)
+        ? !!props.minimized
+        : !!props.defaultMinimized
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.({ minimized: this.minimized })
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.({ minimized: this.minimized })
+  }
+
+  get minimized() {
+    if (this.isControlled()) {
+      return !!this.props.minimized
+    }
+    return !!this.state.minimized
+  }
+
+  isControlled(props = this.props) {
+    return typeof props.minimized === 'boolean'
+  }
+
+  handleNavToggle = (event: React.SyntheticEvent) => {
+    if (!this.isControlled()) {
+      this.setState(navMinimized)
+    }
+    if (typeof this.props.onMinimized === 'function') {
+      this.props.onMinimized(event, !this.minimized)
+    }
+  }
+
+  renderChildren() {
+    return Children.map(this.props.children, (child) => {
+      const navItem = safeCloneElement(child as ReactElement, {
+        minimized: this.state.minimized
+      })
+      return <li css={this.props.styles?.list}>{navItem}</li>
+    })
+  }
+
+  toggleMessage() {
+    return this.state.minimized
+      ? this.props.toggleLabel.minimizedLabel
+      : this.props.toggleLabel.expandedLabel
+  }
+
+  render() {
+    const { label } = this.props
+
+    const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized'])
+
+    return (
+      <nav
+        {...props}
+        css={this.props.styles?.navigation}
+        aria-label={label}
+        ref={(element) => {
+          this.ref = element
+        }}
+      >
+        <ul css={this.props.styles?.content}>{this.renderChildren()}</ul>
+        <div css={this.props.styles?.toggle}>
+          <SideNavBarItem
+            aria-expanded={!this.minimized}
+            onClick={this.handleNavToggle}
+            icon={
+              <IconMoveStartLine
+                css={this.props.styles?.toggleIcon}
+                inline={false}
+              />
+            }
+            label={
+              <ScreenReaderContent>{this.toggleMessage()}</ScreenReaderContent>
+            }
+          ></SideNavBarItem>
+        </div>
+      </nav>
+    )
+  }
+}
+
+export default SideNavBar
+export { SideNavBar, SideNavBarItem }

package/src/SideNavBar/locator.ts

@@ -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 { SideNavBarLocator } from './SideNavBarLocator'
+
+export { SideNavBarItemLocator } from './SideNavBarLocator'
+
+export { SideNavBarLocator }
+export default SideNavBarLocator