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

package/lib/SideNavBar/SideNavBarLocator.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SideNavBarItemLocator", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBarItemLocator.SideNavBarItemLocator;
+  }
+});
+exports.SideNavBarLocator = void 0;
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+var _index = require("./index");
+var _SideNavBarItemLocator = require("./SideNavBarItem/SideNavBarItemLocator");
+/*
+ * 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.
+ */
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const SideNavBarLocator = (0, _locator.locator)(_index.SideNavBar.selector, {
+  findAllItems: (...args) => {
+    return _SideNavBarItemLocator.SideNavBarItemLocator.findAll(...args);
+  },
+  findItem: (...args) => {
+    return _SideNavBarItemLocator.SideNavBarItemLocator.find(...args);
+  }
+});
+exports.SideNavBarLocator = SideNavBarLocator;

package/lib/SideNavBar/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavBar = void 0;
+Object.defineProperty(exports, "SideNavBarItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBarItem.SideNavBarItem;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _IconMoveStartLine = require("@instructure/ui-icons/lib/IconMoveStartLine.js");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _emotion = require("@instructure/emotion");
+var _SideNavBarItem = require("./SideNavBarItem");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+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 */
+const navMinimized = ({
+  minimized
+}) => ({
+  minimized: !minimized
+});
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class SideNavBar extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleNavToggle = event => {
+      if (!this.isControlled()) {
+        this.setState(navMinimized);
+      }
+      if (typeof this.props.onMinimized === 'function') {
+        this.props.onMinimized(event, !this.minimized);
+      }
+    };
+    this.state = {
+      minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
+    };
+  }
+  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, {
+      minimized: this.minimized
+    });
+  }
+  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, {
+      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';
+  }
+  renderChildren() {
+    return _react.Children.map(this.props.children, child => {
+      var _this$props$styles;
+      const navItem = (0, _safeCloneElement.safeCloneElement)(child, {
+        minimized: this.state.minimized
+      });
+      return (0, _emotion.jsx)("li", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list
+      }, navItem);
+    });
+  }
+  toggleMessage() {
+    return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
+  }
+  render() {
+    var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
+    const label = this.props.label;
+    const props = (0, _omitProps.omitProps)(this.props, SideNavBar.allowedProps, ['minimized']);
+    return (0, _emotion.jsx)("nav", Object.assign({}, props, {
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
+      "aria-label": label,
+      ref: element => {
+        this.ref = element;
+      }
+    }), (0, _emotion.jsx)("ul", {
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
+    }, this.renderChildren()), (0, _emotion.jsx)("div", {
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
+    }, (0, _emotion.jsx)(_SideNavBarItem.SideNavBarItem, {
+      "aria-expanded": !this.minimized,
+      onClick: this.handleNavToggle,
+      icon: (0, _emotion.jsx)(_IconMoveStartLine.IconMoveStartLine, {
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
+        inline: false
+      }),
+      label: (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, this.toggleMessage())
+    })));
+  }
+}, _class2.displayName = "SideNavBar", _class2.componentId = 'SideNavBar', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  children: null,
+  defaultMinimized: false,
+  // TODO we should investigate later if it used or not
+  onClick: function (_e) {}
+}, _class2.Item = _SideNavBarItem.SideNavBarItem, _class2)) || _class) || _class);
+exports.SideNavBar = SideNavBar;
+var _default = SideNavBar;
+exports.default = _default;

package/lib/SideNavBar/locator.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SideNavBarItemLocator", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBarLocator.SideNavBarItemLocator;
+  }
+});
+Object.defineProperty(exports, "SideNavBarLocator", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBarLocator.SideNavBarLocator;
+  }
+});
+exports.default = void 0;
+var _SideNavBarLocator = require("./SideNavBarLocator");
+/*
+ * 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.
+ */
+var _default = _SideNavBarLocator.SideNavBarLocator;
+exports.default = _default;

package/lib/SideNavBar/props.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+var _SideNavBarItem = require("./SideNavBarItem");
+/*
+ * 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.
+ */
+
+const propTypes = {
+  children: _Children.Children.oneOf([_SideNavBarItem.SideNavBarItem]),
+  minimized: (0, _controllable.controllable)(_propTypes.default.bool, 'onMinimized', 'defaultMinimized'),
+  defaultMinimized: _propTypes.default.bool,
+  onMinimized: _propTypes.default.func,
+  label: _propTypes.default.string.isRequired,
+  toggleLabel: _propTypes.default.shape({
+    expandedLabel: _propTypes.default.string,
+    minimizedLabel: _propTypes.default.string
+  }).isRequired,
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'minimized', 'defaultMinimized', 'onMinimized', 'label', 'toggleLabel', 'href', 'onClick'];
+exports.allowedProps = allowedProps;

package/lib/SideNavBar/styles.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 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.
+ */
+
+/**
+ * ---
+ * 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 minimized = state.minimized;
+  return {
+    navigation: {
+      label: 'navigation',
+      color: componentTheme.fontColor,
+      backgroundColor: componentTheme.backgroundColor,
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      width: componentTheme.width,
+      height: '100%',
+      overflowY: 'auto',
+      ...(minimized ? {
+        width: componentTheme.minimizedWidth
+      } : {})
+    },
+    list: {
+      label: 'navigation__list',
+      padding: 0,
+      margin: 0
+    },
+    content: {
+      label: 'navigation__content',
+      listStyleType: 'none',
+      margin: '0',
+      padding: '0',
+      flex: '1 0 auto'
+    },
+    toggle: {
+      transform: 'translate3d(0, 0, 0)',
+      transition: `all ${componentTheme.toggleTransition}`,
+      ...(minimized ? {
+        transform: 'rotate3d(0, 1, 0, -180deg)'
+      } : {})
+    },
+    toggleIcon: {
+      fill: componentTheme.fill,
+      margin: '0 auto'
+    }
+  };
+};
+var _default = generateStyle;
+exports.default = _default;

package/lib/SideNavBar/theme.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 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.
+ */
+
+/**
+ * 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,
+    borders = theme.borders,
+    transitions = theme.transitions,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      backgroundColor: theme['ic-brand-global-nav-bgd'],
+      fontColor: theme['ic-brand-global-nav-menu-item__text-color'],
+      fill: theme['ic-brand-global-nav-ic-icon-svg-fill']
+    }
+  };
+  const componentVariables = {
+    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
+    width: '5.25rem',
+    minimizedWidth: '3.375rem',
+    fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+    marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SideNavBar", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBar.SideNavBar;
+  }
+});
+Object.defineProperty(exports, "SideNavBarItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavBar.SideNavBarItem;
+  }
+});
+var _SideNavBar = require("./SideNavBar");

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@instructure/ui-side-nav-bar",
+  "version": "8.38.2-snapshot-11",
+  "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://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/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.2-snapshot-11",
+    "@instructure/ui-color-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-test-locator": "8.38.2-snapshot-11",
+    "@instructure/ui-test-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-themes": "8.38.2-snapshot-11"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.22.5",
+    "@instructure/console": "8.38.2-snapshot-11",
+    "@instructure/debounce": "8.38.2-snapshot-11",
+    "@instructure/emotion": "8.38.2-snapshot-11",
+    "@instructure/shared-types": "8.38.2-snapshot-11",
+    "@instructure/ui-a11y-content": "8.38.2-snapshot-11",
+    "@instructure/ui-a11y-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-badge": "8.38.2-snapshot-11",
+    "@instructure/ui-dom-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-focusable": "8.38.2-snapshot-11",
+    "@instructure/ui-icons": "8.38.2-snapshot-11",
+    "@instructure/ui-menu": "8.38.2-snapshot-11",
+    "@instructure/ui-prop-types": "8.38.2-snapshot-11",
+    "@instructure/ui-react-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-testable": "8.38.2-snapshot-11",
+    "@instructure/ui-tooltip": "8.38.2-snapshot-11",
+    "@instructure/ui-truncate-list": "8.38.2-snapshot-11",
+    "@instructure/ui-utils": "8.38.2-snapshot-11",
+    "@instructure/ui-view": "8.38.2-snapshot-11",
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 <=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}

package/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>
+```

package/src/SideNavBar/SideNavBarItem/SideNavBarItemLocator.ts

@@ -0,0 +1,34 @@
+/*
+ * 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'
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+// eslint-disable-next-line no-restricted-imports
+import { TooltipLocator } from '@instructure/ui-tooltip/es/Tooltip/TooltipLocator'
+
+import { SideNavBarItem } from './index'
+
+// @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 SideNavBarItemLocator = locator(SideNavBarItem.selector, {
+  findTooltipContent: (...args: any[]) => TooltipLocator.findContent(...args)
+})