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

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [8.38.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-11) (2023-07-21)
+
+
+### Features
+
+* **instui-config,shared-types,ui-navigation,ui-side-nav-bar,ui:** add side-nav-bar component and deprecate navigation ([45848bf](https://github.com/instructure/instructure-ui/commit/45848bf5feea16e05c19e559c03e53e4b0637412))

package/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://github.com/instructure/instructure-ui/blob/master/LICENSE
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md

package/es/SideNavBar/SideNavBarItem/SideNavBarItemLocator.js

@@ -0,0 +1,33 @@
+/*
+ * 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) => TooltipLocator.findContent(...args)
+});

package/es/SideNavBar/SideNavBarItem/index.js

@@ -0,0 +1,107 @@
+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 */
+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 { allowedProps, propTypes } from './props';
+
+/**
+---
+parent: SideNavBar
+id: SideNavBar.Item
+---
+@tsProps
+**/
+let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class SideNavBarItem extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  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.props.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.props.minimized
+    });
+  }
+  renderLink(addRef) {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    const ElementType = getElementType(SideNavBarItem, this.props);
+    const _this$props3 = this.props,
+      href = _this$props3.href,
+      onClick = _this$props3.onClick,
+      icon = _this$props3.icon,
+      label = _this$props3.label;
+    const props = omitProps(this.props, SideNavBarItem.allowedProps);
+    return jsx(ElementType, Object.assign({}, props, {
+      href: href,
+      onClick: onClick,
+      ref: addRef ? this.handleRef : void 0,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
+      "aria-label": this.props.minimized ? label : void 0
+    }), jsx("div", {
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+      "aria-hidden": "true"
+    }, icon), !this.props.minimized ? jsx("div", {
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label
+    }, label) : null);
+  }
+  render() {
+    const _this$props4 = this.props,
+      minimized = _this$props4.minimized,
+      label = _this$props4.label;
+    const hasTooltip = minimized && hasVisibleChildren(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? jsx(Tooltip, {
+      renderTip: label,
+      placement: "end",
+      elementRef: this.handleRef
+    }, link) : link;
+  }
+}, _class2.displayName = "SideNavBarItem", _class2.componentId = 'SideNavBar.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _class2)) || _class) || _class);
+export default SideNavBarItem;
+export { SideNavBarItem };

package/es/SideNavBar/SideNavBarItem/locator.js

@@ -0,0 +1,26 @@
+/*
+ * 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/es/SideNavBar/SideNavBarItem/props.js

@@ -0,0 +1,36 @@
+/*
+ * 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';
+const propTypes = {
+  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 = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
+export { propTypes, allowedProps };

package/es/SideNavBar/SideNavBarItem/styles.js

@@ -0,0 +1,93 @@
+/*
+ * 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) => {
+  const selected = props.selected;
+  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/es/SideNavBar/SideNavBarItem/theme.js

@@ -0,0 +1,73 @@
+/*
+ * 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,
+    typography = theme.typography,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    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 = {
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightLight,
+    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    iconSize: '1.625rem',
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    backgroundColor: 'transparent',
+    linkTextDecoration: 'none',
+    hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
+    outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
+    innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
+    selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
+    selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
+    selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
+    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
+    contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+export default generateComponentTheme;

package/es/SideNavBar/SideNavBarLocator.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.
+ */
+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) => {
+    return SideNavBarItemLocator.findAll(...args);
+  },
+  findItem: (...args) => {
+    return SideNavBarItemLocator.find(...args);
+  }
+});

package/es/SideNavBar/index.js

@@ -0,0 +1,130 @@
+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 */
+import React, { Component, Children } 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 { allowedProps, propTypes } from './props';
+const navMinimized = ({
+  minimized
+}) => ({
+  minimized: !minimized
+});
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class SideNavBar extends 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 Children.map(this.props.children, child => {
+      var _this$props$styles;
+      const navItem = safeCloneElement(child, {
+        minimized: this.state.minimized
+      });
+      return 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 = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
+    return 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;
+      }
+    }), jsx("ul", {
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
+    }, this.renderChildren()), jsx("div", {
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
+    }, jsx(SideNavBarItem, {
+      "aria-expanded": !this.minimized,
+      onClick: this.handleNavToggle,
+      icon: jsx(IconMoveStartLine, {
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
+        inline: false
+      }),
+      label: jsx(ScreenReaderContent, null, this.toggleMessage())
+    })));
+  }
+}, _class2.displayName = "SideNavBar", _class2.componentId = 'SideNavBar', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  children: null,
+  defaultMinimized: false,
+  // TODO we should investigate later if it used or not
+  onClick: function (_e) {}
+}, _class2.Item = SideNavBarItem, _class2)) || _class) || _class);
+export default SideNavBar;
+export { SideNavBar, SideNavBarItem };

package/es/SideNavBar/locator.js

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