feat(instui-config,shared-types,ui-navigation,ui-side-nav-bar,ui): ad…

…d side-nav-bar component and deprecate navigation

Closes: INSTUI-3792

packages/__docs__/components.js

@@ -102,6 +102,7 @@ export { RangeInput } from '@instructure/ui-range-input'
 export { Rating } from '@instructure/ui-rating'
 export { Responsive } from '@instructure/ui-responsive'
 export { Select } from '@instructure/ui-select'
+export { SideNavBar } from '@instructure/ui-side-nav-bar'
 export { SimpleSelect } from '@instructure/ui-simple-select'
 export { Selectable } from '@instructure/ui-selectable'
 export { InlineSVG, SVGIcon } from '@instructure/ui-svg-images'

packages/__docs__/package.json

@@ -89,6 +89,7 @@
  "@instructure/ui-responsive": "8.38.1",
  "@instructure/ui-select": "8.38.1",
  "@instructure/ui-selectable": "8.38.1",
+ "@instructure/ui-side-nav-bar": "8.38.1",
  "@instructure/ui-simple-select": "8.38.1",
  "@instructure/ui-source-code-editor": "8.38.1",
  "@instructure/ui-spinner": "8.38.1",

packages/__docs__/resolve.js

@@ -149,6 +149,10 @@ module.exports = {
  __dirname,
  '../ui-selectable/src/'
  ),
+ '@instructure/ui-side-nav-bar$': path.resolve(
+ __dirname,
+ '../ui-side-nav-bar/src/'
+ ),
  '@instructure/ui-simple-select$': path.resolve(
  __dirname,
  '../ui-simple-select/src/'

packages/__docs__/tsconfig.build.json

@@ -71,6 +71,7 @@
  { "path": "../ui-responsive/tsconfig.build.json" },
  { "path": "../ui-select/tsconfig.build.json" },
  { "path": "../ui-selectable/tsconfig.build.json" },
+ { "path": "../ui-side-nav-bar/tsconfig.build.json" },
  { "path": "../ui-simple-select/tsconfig.build.json" },
  { "path": "../ui-source-code-editor/tsconfig.build.json" },
  { "path": "../ui-spinner/tsconfig.build.json" },

packages/instui-config/package-lists/v9/package-list.json

@@ -84,6 +84,7 @@
  "@instructure/ui-scripts",
  "@instructure/ui-select",
  "@instructure/ui-selectable",
+ "@instructure/ui-side-nav-bar",
  "@instructure/ui-simple-select",
  "@instructure/ui-source-code-editor",
  "@instructure/ui-spinner",

packages/shared-types/src/ComponentThemeVariables.ts

@@ -851,6 +851,41 @@ export type NavigationTheme = {
  toggleTransition: Transitions['duration']
 }
 
+export type SideNavBarTheme = {
+ fontColor: Colors['textLightest']
+ backgroundColor: Colors['backgroundBrandSecondary']
+ width: string
+ minimizedWidth: string
+ fill: Colors['textLightest']
+ focusOutlineInnerWidth: Border['widthMedium']
+ focusOutlineOuterWidth: Border['widthSmall']
+ focusOutlineInnerColor: Colors['borderBrand']
+ focusOutlineOuterColor: Colors['borderLightest']
+ marginBottom: Spacing['small']
+ toggleTransition: Transitions['duration']
+}
+
+export type SideNavBarItemTheme = {
+ fontSize: Typography['fontSizeSmall']
+ fontFamily: Typography['fontFamily']
+ fontWeight: Typography['fontWeightLight']
+ fontColor: Colors['textLightest']
+ iconSize: string | 0
+ iconColor: Colors['textLightest']
+ lineHeight: Typography['lineHeight']
+ backgroundColor: string
+ linkTextDecoration: string
+ hoverBackgroundColor: Colors['backgroundDarkest']
+ outerFocusOutline: string
+ innerFocusOutline: string
+ selectedFontColor: Colors['textBrand']
+ selectedIconColor: Colors['textBrand']
+ selectedBackgroundColor: Colors['backgroundLightest']
+ selectedOuterFocusOutline: string
+ selectedInnerFocusOutline: string
+ contentPadding: Spacing['xxSmall']
+}
+
 export type NumberInputTheme = {
  fontFamily: Typography['fontFamily']
  fontWeight: Typography['fontWeightNormal']

packages/ui-navigation/src/Navigation/README.md

@@ -4,7 +4,18 @@ describes: Navigation
 
 A top-level `Navigation` component.
 
-> Note that this component is experimental and its API might change significantly in the future.
+```js
+---
+embed: true
+---
+<ToggleBlockquote
+ summary="DEPRECATED"
+>
+ <ToggleBlockquote.Paragraph>
+ This component is deprecated. Please use <Link href="#SideNavBar">SideNavBar</Link> instead.
+ </ToggleBlockquote.Paragraph>
+</ToggleBlockquote>
+```
 
 ```js
 ---

packages/ui-navigation/src/Navigation/index.tsx

@@ -26,7 +26,11 @@ import React, { Component, Children, ReactElement } from 'react'
 
 import { testable } from '@instructure/ui-testable'
 
-import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
+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'
@@ -44,13 +48,18 @@ const navMinimized = ({ minimized }: { minimized: boolean }) => ({
 
 /**
 ---
-category: components
+category: components/deprecated
 ---
 @tsProps
 **/
 
 @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'
 

packages/ui-side-nav-bar/.eslintignore

@@ -0,0 +1,4 @@
+/node_modules/**
+/lib/**
+/es/**
+/types/**

packages/ui-side-nav-bar/.gitignore

@@ -0,0 +1,4 @@
+lib/
+.babel-cache/
+es/
+types/

packages/ui-side-nav-bar/.npmignore

@@ -0,0 +1,6 @@
+**/.*
+**/__tests__
+**/__testfixtures__
+**/__examples__
+*.config.js
+*.conf.js

packages/ui-side-nav-bar/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/ui-side-nav-bar/README.md

@@ -0,0 +1,53 @@
+---
+category: packages
+---
+
+## ui-side-nav-bar
+
+[![npm][npm]][npm-url] 
+[![MIT License][license-badge]][license] 
+[![Code of Conduct][coc-badge]][coc]
+
+Main and application level navigational components.
+
+### Components
+
+The `ui-side-nav-bar` package contains the following:
+
+- [SideNavBar](#SideNavBar)
+- [AppNav](#AppNav)
+
+### Installation
+
+```sh
+yarn add @instructure/ui-side-nav-bar
+```
+
+### Usage
+
+```js
+import React from 'react'
+import { SideNavBar } from '@instructure/ui-side-nav-bar'
+import { Avatar } from '@instructure/ui-avatar'
+
+const MySideNavBar = () => {
+ return (
+ <SideNavBar label="My SideNavBar">
+ <SideNavBar.Item
+ icon={<Avatar name="Joel Andrews" size="x-small" />}
+ label="My Account"
+ href="http://example.com"
+ />
+ </SideNavBar>
+ )
+}
+```
+
+For detailed usage and documentation, see individual component examples.
+
+[npm]: https://img.shields.io/npm/v/@instructure/ui-side-nav-bar.svg
+[npm-url]: https://npmjs.com/package/@instructure/ui-side-nav-bar
+[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
+[license]: https:/instructure/instructure-ui/blob/master/LICENSE
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https:/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md

packages/ui-side-nav-bar/babel.config.js

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+ presets: [
+ [
+ require('@instructure/ui-babel-preset'),
+ {
+ coverage: Boolean(process.env.COVERAGE),
+ esModules: Boolean(process.env.ES_MODULES),
+ removeConsole: process.env.NODE_ENV === 'production',
+ transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+ }
+ ]
+ ]
+}

packages/ui-side-nav-bar/package.json

@@ -0,0 +1,61 @@
+{
+ "name": "@instructure/ui-side-nav-bar",
+ "version": "8.38.1",
+ "description": "Main and application level navigational components",
+ "author": "Instructure, Inc. Engineering and Product Design",
+ "module": "./es/index.js",
+ "main": "./lib/index.js",
+ "types": "./types/index.d.ts",
+ "repository": {
+ "type": "git",
+ "url": "https:/instructure/instructure-ui.git"
+ },
+ "homepage": "https://instructure.github.io/instructure-ui/",
+ "bugs": "https:/instructure/instructure-ui/issues",
+ "scripts": {
+ "lint": "run -T ui-scripts lint",
+ "lint:fix": "run -T ui-scripts lint --fix",
+ "clean": "run -T ui-scripts clean",
+ "build": "run -T ui-scripts build --modules es,cjs",
+ "build:watch": "yarn ts:check --watch & run -T ui-scripts build --watch",
+ "build:types": "run -T tsc -p tsconfig.build.json",
+ "ts:check": "run -T tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+ },
+ "license": "MIT",
+ "devDependencies": {
+ "@instructure/ui-babel-preset": "8.38.1",
+ "@instructure/ui-color-utils": "8.38.1",
+ "@instructure/ui-test-locator": "8.38.1",
+ "@instructure/ui-test-utils": "8.38.1",
+ "@instructure/ui-themes": "8.38.1"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.22.5",
+ "@instructure/console": "8.38.1",
+ "@instructure/debounce": "8.38.1",
+ "@instructure/emotion": "8.38.1",
+ "@instructure/shared-types": "8.38.1",
+ "@instructure/ui-a11y-content": "8.38.1",
+ "@instructure/ui-a11y-utils": "8.38.1",
+ "@instructure/ui-badge": "8.38.1",
+ "@instructure/ui-dom-utils": "8.38.1",
+ "@instructure/ui-focusable": "8.38.1",
+ "@instructure/ui-icons": "8.38.1",
+ "@instructure/ui-menu": "8.38.1",
+ "@instructure/ui-prop-types": "8.38.1",
+ "@instructure/ui-react-utils": "8.38.1",
+ "@instructure/ui-testable": "8.38.1",
+ "@instructure/ui-tooltip": "8.38.1",
+ "@instructure/ui-truncate-list": "8.38.1",
+ "@instructure/ui-utils": "8.38.1",
+ "@instructure/ui-view": "8.38.1",
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8 <=18"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "sideEffects": false
+}

packages/ui-side-nav-bar/src/SideNavBar/README.md

@@ -0,0 +1,74 @@
+---
+describes: SideNavBar
+---
+
+A top-level `SideNavBar` component.
+
+> Note that this component is experimental and its API might change significantly in the future.
+
+```js
+---
+example: true
+---
+ <div style={{height: '35rem'}}>
+ <SideNavBar
+ label="Main navigation"
+ toggleLabel={{
+ expandedLabel: 'Minimize SideNavBar',
+ minimizedLabel: 'Expand SideNavBar'
+ }}
+ >
+ <SideNavBar.Item
+ icon={<IconUserLine />}
+ label={<ScreenReaderContent>Home</ScreenReaderContent>}
+ href="#"
+ themeOverride={{
+ backgroundColor: 'red',
+ hoverBackgroundColor: 'blue'
+ }}
+ />
+ <SideNavBar.Item
+ icon={<Avatar name="Ziggy Marley" size="x-small"/>}
+ label="Account"
+ onClick={() => { this.loadSubNav('account') }}
+ />
+ <SideNavBar.Item
+ icon={<IconAdminLine />}
+ label="Admin"
+ href="#"
+ />
+ <SideNavBar.Item selected
+ icon={<IconDashboardLine />}
+ label="Dashboard"
+ href="#"
+ />
+ <SideNavBar.Item
+ icon={<Badge count={99}><IconInboxLine /></Badge>}
+ label="Inbox"
+ href="#"
+ />
+ <SideNavBar.Item
+ icon={<IconUserLine />}
+ label="Supercalifragilistic"
+ href="#"
+ />
+ </SideNavBar>
+ </div>
+```
+
+### Guidelines
+
+```js
+---
+guidelines: true
+---
+<Guidelines>
+ <Figure recommendation="yes" title="Do">
+ <Figure.Item>Use for top-level SideNavBar</Figure.Item>
+ <Figure.Item>Remember that SideNavBar 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>
+```