@instructure/ui-navigation 8.56.0 → 9.0.0

package/src/Navigation/NavigationItem/styles.ts

@@ -1,103 +0,0 @@
-/*
- * 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 { NavigationItemTheme } from '@instructure/shared-types'
-import type { NavigationItemProps, NavigationItemStyle } 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: NavigationItemTheme,
-  props: NavigationItemProps
-): NavigationItemStyle => {
-  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/Navigation/NavigationItem/theme.ts

@@ -1,82 +0,0 @@
-/*
- * 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 { NavigationItemTheme } 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): NavigationItemTheme => {
-  const { colors, spacing, typography, key: themeName } = theme
-
-  const themeSpecificStyle: ThemeSpecificStyle<NavigationItemTheme> = {
-    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: NavigationItemTheme = {
-    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/Navigation/NavigationLocator.ts

@@ -1,40 +0,0 @@
-/*
- * 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 { Navigation } from './index'
-import { NavigationItemLocator } from './NavigationItem/NavigationItemLocator'
-
-export { NavigationItemLocator }
-
-// @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 NavigationLocator = locator(Navigation.selector, {
-  findAllItems: (...args: any[]) => {
-    return NavigationItemLocator.findAll(...args)
-  },
-
-  findItem: (...args: any[]) => {
-    return NavigationItemLocator.find(...args)
-  }
-})

package/src/Navigation/README.md

@@ -1,85 +0,0 @@
----
-describes: Navigation
----
-
-A top-level `Navigation` component.
-
-```js
----
-type: embed
----
-<ToggleBlockquote
-  summary="DEPRECATED"
->
-  <ToggleBlockquote.Paragraph>
-    This component is deprecated. Please use <Link href="#SideNavBar">SideNavBar</Link> instead.
-  </ToggleBlockquote.Paragraph>
-</ToggleBlockquote>
-```
-
-```js
----
-type: example
----
-  <div style={{height: '35rem'}}>
-    <Navigation
-      label="Main navigation"
-      toggleLabel={{
-        expandedLabel: 'Minimize Navigation',
-        minimizedLabel: 'Expand Navigation'
-      }}
-    >
-      <Navigation.Item
-        icon={<IconUserLine />}
-        label={<ScreenReaderContent>Home</ScreenReaderContent>}
-        href="#"
-        themeOverride={{
-          backgroundColor: 'red',
-          hoverBackgroundColor: 'blue'
-        }}
-      />
-      <Navigation.Item
-        icon={<Avatar name="Ziggy Marley" size="x-small"/>}
-        label="Account"
-        onClick={() => { this.loadSubNav('account') }}
-      />
-      <Navigation.Item
-        icon={<IconAdminLine />}
-        label="Admin"
-        href="#"
-      />
-      <Navigation.Item selected
-        icon={<IconDashboardLine />}
-        label="Dashboard"
-        href="#"
-      />
-      <Navigation.Item
-        icon={<Badge count={99}><IconInboxLine /></Badge>}
-        label="Inbox"
-        href="#"
-      />
-      <Navigation.Item
-        icon={<IconUserLine />}
-        label="Supercalifragilistic"
-        href="#"
-      />
-    </Navigation>
-  </div>
-```
-
-### Guidelines
-
-```js
----
-type: embed
----
-<Guidelines>
-  <Figure recommendation="yes" title="Do">
-    <Figure.Item>Use for top-level Navigation</Figure.Item>
-    <Figure.Item>Remember that Navigation can be themed by the institution</Figure.Item>
-  </Figure>
-  <Figure recommendation="no" title="Don't">
-    <Figure.Item>Add LTI links to the main area</Figure.Item>
-  </Figure>
-</Guidelines>
-```

package/src/Navigation/index.tsx

@@ -1,168 +0,0 @@
-/*
- * 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,
-  deprecated
-} 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 { NavigationItem } from './NavigationItem'
-
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
-import type { NavigationProps, NavigationState } from './props'
-import { allowedProps, propTypes } from './props'
-
-const navMinimized = ({ minimized }: { minimized: boolean }) => ({
-  minimized: !minimized
-})
-
-/**
----
-category: components/deprecated
----
-**/
-
-@withStyle(generateStyle, generateComponentTheme)
-@testable()
-@deprecated(
-  '9.0.0',
-  null,
-  'This component is deprecated and will be removed in a later version. Use <SideNavBar /> instead.'
-)
-class Navigation extends Component<NavigationProps, NavigationState> {
-  static readonly componentId = 'Navigation'
-
-  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 = NavigationItem
-
-  ref: Element | null = null
-
-  constructor(props: NavigationProps) {
-    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, Navigation.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}>
-          <NavigationItem
-            aria-expanded={!this.minimized}
-            onClick={this.handleNavToggle}
-            icon={
-              <IconMoveStartLine
-                css={this.props.styles?.toggleIcon}
-                inline={false}
-              />
-            }
-            label={
-              <ScreenReaderContent>{this.toggleMessage()}</ScreenReaderContent>
-            }
-          ></NavigationItem>
-        </div>
-      </nav>
-    )
-  }
-}
-
-export default Navigation
-export { Navigation, NavigationItem }

package/src/Navigation/locator.ts

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

package/src/Navigation/props.ts

@@ -1,118 +0,0 @@
-/*
- * 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 PropTypes from 'prop-types'
-
-import {
-  controllable,
-  Children as ChildrenPropTypes
-} from '@instructure/ui-prop-types'
-
-import { NavigationItem } from './NavigationItem'
-
-import type {
-  PropValidators,
-  NavigationTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-
-type NavigationOwnProps = {
-  /**
-   * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
-   */
-  minimized?: boolean
-  /**
-   * Whether the `<Navigation />` is initially minimized (uncontrolled)
-   */
-  defaultMinimized?: boolean
-  onMinimized?: (event: React.SyntheticEvent, minimized: boolean) => void
-  /**
-   * Screen reader label for the main Navigation
-   */
-  label: string
-  /**
-   * Screen reader label for the toggle button expanded/minimized state
-   */
-  toggleLabel: {
-    expandedLabel?: string
-    minimizedLabel?: string
-  }
-  /**
-   * If the `<Navigation.Item>` goes to a new page, pass an href
-   */
-  href?: string
-  /**
-   * If the `<Navigation.Item>` does not go to a new page pass an onClick
-   */
-  onClick?: (event: React.MouseEvent) => void
-  /**
-   * children of type Navigation.Item
-   */
-  children?: React.ReactNode
-}
-
-type NavigationState = {
-  minimized: boolean
-}
-
-type PropKeys = keyof NavigationOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type NavigationProps = NavigationOwnProps &
-  WithStyleProps<NavigationTheme, NavigationStyle> &
-  OtherHTMLAttributes<NavigationOwnProps>
-
-type NavigationStyle = ComponentStyle<
-  'navigation' | 'list' | 'content' | 'toggle' | 'toggleIcon'
->
-
-const propTypes: PropValidators<PropKeys> = {
-  children: ChildrenPropTypes.oneOf([NavigationItem]),
-  minimized: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized'),
-  defaultMinimized: PropTypes.bool,
-  onMinimized: PropTypes.func,
-  label: PropTypes.string.isRequired,
-  toggleLabel: PropTypes.shape({
-    expandedLabel: PropTypes.string,
-    minimizedLabel: PropTypes.string
-  }).isRequired,
-  href: PropTypes.string,
-  onClick: PropTypes.func
-}
-
-const allowedProps: AllowedPropKeys = [
-  'children',
-  'minimized',
-  'defaultMinimized',
-  'onMinimized',
-  'label',
-  'toggleLabel',
-  'href',
-  'onClick'
-]
-
-export type { NavigationProps, NavigationState, NavigationStyle }
-export { propTypes, allowedProps }