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

package/es/SideNavBar/props.js

@@ -0,0 +1,42 @@
+/*
+ * 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 { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { SideNavBarItem } from './SideNavBarItem';
+const propTypes = {
+  children: ChildrenPropTypes.oneOf([SideNavBarItem]),
+  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 = ['children', 'minimized', 'defaultMinimized', 'onMinimized', 'label', 'toggleLabel', 'href', 'onClick'];
+export { propTypes, allowedProps };

package/es/SideNavBar/styles.js

@@ -0,0 +1,77 @@
+/*
+ * 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'
+    }
+  };
+};
+export default generateStyle;

package/es/SideNavBar/theme.js

@@ -0,0 +1,61 @@
+/*
+ * 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]
+  };
+};
+export default generateComponentTheme;

package/es/index.js

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export { SideNavBar, SideNavBarItem } from './SideNavBar';

package/lib/SideNavBar/SideNavBarItem/SideNavBarItemLocator.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavBarItemLocator = void 0;
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+var _TooltipLocator = require("@instructure/ui-tooltip/lib/Tooltip/TooltipLocator");
+var _index = require("./index");
+/*
+ * 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(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
+
+// @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 SideNavBarItemLocator = (0, _locator.locator)(_index.SideNavBarItem.selector, {
+  findTooltipContent: (...args) => _TooltipLocator.TooltipLocator.findContent(...args)
+});
+exports.SideNavBarItemLocator = SideNavBarItemLocator;

package/lib/SideNavBar/SideNavBarItem/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SideNavBarItem = void 0;
+var _react = require("react");
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _emotion = require("@instructure/emotion");
+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 */
+/**
+---
+parent: SideNavBar
+id: SideNavBar.Item
+---
+@tsProps
+**/
+let SideNavBarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class SideNavBarItem extends _react.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 = (0, _getElementType.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 = (0, _omitProps.omitProps)(this.props, SideNavBarItem.allowedProps);
+    return (0, _emotion.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
+    }), (0, _emotion.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 ? (0, _emotion.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 && (0, _hasVisibleChildren.hasVisibleChildren)(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? (0, _emotion.jsx)(_Tooltip.Tooltip, {
+      renderTip: label,
+      placement: "end",
+      elementRef: this.handleRef
+    }, link) : link;
+  }
+}, _class2.displayName = "SideNavBarItem", _class2.componentId = 'SideNavBar.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _class2)) || _class) || _class);
+exports.SideNavBarItem = SideNavBarItem;
+var _default = SideNavBarItem;
+exports.default = _default;

package/lib/SideNavBar/SideNavBarItem/locator.js

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

package/lib/SideNavBar/SideNavBarItem/props.js

@@ -0,0 +1,45 @@
+"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"));
+/*
+ * 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 = {
+  elementRef: _propTypes.default.func,
+  icon: _propTypes.default.node.isRequired,
+  label: _propTypes.default.node.isRequired,
+  as: _propTypes.default.elementType,
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  minimized: _propTypes.default.bool
+};
+exports.propTypes = propTypes;
+const allowedProps = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
+exports.allowedProps = allowedProps;

package/lib/SideNavBar/SideNavBarItem/styles.js

@@ -0,0 +1,100 @@
+"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) => {
+  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
+    }
+  };
+};
+var _default = generateStyle;
+exports.default = _default;

package/lib/SideNavBar/SideNavBarItem/theme.js

@@ -0,0 +1,80 @@
+"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,
+    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]
+  };
+};
+var _default = generateComponentTheme;
+exports.default = _default;