@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/UIShell/HeaderSideNavItems.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var HeaderSideNavItems = function HeaderSideNavItems(_ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      hasDivider = _ref.hasDivider;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-navigation"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__header-divider"), hasDivider), _cx), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: className
+  }, children);
+};
+
+HeaderSideNavItems.propTypes = {
+  /**
+   * The child nodes to be rendered
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify if container will have a bottom divider to differentiate
+   * between original sidenav items and header menu items. False by default.
+   */
+  hasDivider: PropTypes__default["default"].bool
+};
+HeaderSideNavItems.defaultProps = {
+  hasDivider: false
+};
+var HeaderSideNavItems$1 = HeaderSideNavItems;
+
+exports["default"] = HeaderSideNavItems$1;

package/lib/components/UIShell/Link.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["element", "isSideNavExpanded"];
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+
+var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(props, ref) {
+  var element = props.element;
+      props.isSideNavExpanded;
+      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(element, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    ref: ref
+  }));
+});
+var LinkPropTypes = {
+  /**
+   * The base element to use to build the link. Defaults to `a`, can also accept
+   * alternative tag names or custom components like `Link` from `react-router`.
+   */
+  element: PropTypes__default["default"].elementType,
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes__default["default"].bool
+};
+Link.displayName = 'Link';
+Link.propTypes = LinkPropTypes;
+Link.defaultProps = {
+  element: 'a'
+};
+var Link$1 = Link;
+
+exports.LinkPropTypes = LinkPropTypes;
+exports["default"] = Link$1;

package/lib/components/UIShell/SideNav.js

@@ -0,0 +1,237 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var _utils = require('./_utils.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["expanded", "defaultExpanded", "isChildOfHeader", "aria-label", "aria-labelledby", "children", "onToggle", "className", "isFixedNav", "isRail", "isPersistent", "addFocusListeners", "addMouseListeners", "onOverlayClick"];
+// import SideNavFooter from './SideNavFooter';
+
+var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav(props, ref) {
+  var _cx, _cx2;
+
+  var expandedProp = props.expanded,
+      defaultExpanded = props.defaultExpanded,
+      isChildOfHeader = props.isChildOfHeader,
+      ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      children = props.children,
+      onToggle = props.onToggle,
+      customClassName = props.className,
+      isFixedNav = props.isFixedNav,
+      isRail = props.isRail,
+      isPersistent = props.isPersistent,
+      addFocusListeners = props.addFocusListeners,
+      addMouseListeners = props.addMouseListeners,
+      onOverlayClick = props.onOverlayClick,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useRef = React.useRef(expandedProp !== undefined),
+      controlled = _useRef.current;
+
+  var _useState = React.useState(defaultExpanded),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expandedState = _useState2[0],
+      setExpandedState = _useState2[1];
+
+  var _useState3 = React.useState(defaultExpanded),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      expandedViaHoverState = _useState4[0],
+      setExpandedViaHoverState = _useState4[1];
+
+  var expanded = controlled ? expandedProp : expandedState;
+
+  var handleToggle = function handleToggle(event) {
+    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+
+    if (!controlled) {
+      setExpandedState(value);
+    }
+
+    if (onToggle) {
+      onToggle(event, value);
+    }
+
+    if (controlled || isRail) {
+      setExpandedViaHoverState(value);
+    }
+  };
+
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  }; // TO-DO: comment back in when footer is added for rails
+  // const assistiveText = expanded
+  //   ? t('carbon.sidenav.state.open')
+  //   : t('carbon.sidenav.state.closed');
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--expanded"), expanded || expandedViaHoverState), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--collapsed"), !expanded && isFixedNav), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--rail"), isRail), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--ux"), isChildOfHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav--hidden"), !isPersistent), _cx));
+  var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--side-nav__overlay-active"), expanded || expandedViaHoverState), _cx2));
+  var childrenToRender = children; // if a rail, pass the expansion state as a prop, so children can update themselves to match
+
+  if (isRail) {
+    childrenToRender = React__default["default"].Children.map(children, function (child) {
+      var _child$type$displayNa, _child$type, _child$type2;
+
+      // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
+      var currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded; // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+
+      return /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2({}, _utils.CARBON_SIDENAV_ITEMS.includes((_child$type$displayNa = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) !== null && _child$type$displayNa !== void 0 ? _child$type$displayNa : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) ? {
+        isSideNavExpanded: currentExpansionState
+      } : {}));
+    });
+  }
+
+  var eventHandlers = {};
+
+  if (addFocusListeners) {
+    eventHandlers.onFocus = function (event) {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        handleToggle(event, true);
+      }
+    };
+
+    eventHandlers.onBlur = function (event) {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        handleToggle(event, false);
+      }
+    };
+  }
+
+  if (addMouseListeners && isRail) {
+    eventHandlers.onMouseEnter = function () {
+      return handleToggle(true, true);
+    };
+
+    eventHandlers.onMouseLeave = function () {
+      return handleToggle(false, false);
+    };
+  }
+
+  var isSideNavCollapsed = useMatchMedia.useMatchMedia("(max-width: 1055px)");
+  var ariaHidden = expanded === false && isSideNavCollapsed;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFixedNav ? null :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React__default["default"].createElement("div", {
+    className: overlayClassName,
+    onClick: onOverlayClick
+  }), /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
+    "aria-hidden": ariaHidden,
+    ref: ref,
+    className: "".concat(prefix, "--side-nav__navigation ").concat(className)
+  }, accessibilityLabel, eventHandlers, other), childrenToRender));
+});
+SideNav.displayName = 'SideNav';
+SideNav.defaultProps = {
+  // TO-DO: comment back in when footer is added for rails
+  // translateById: (id) => {
+  //   const translations = {
+  //     'carbon.sidenav.state.open': 'Close',
+  //     'carbon.sidenav.state.closed': 'Open',
+  //   };
+  //   return translations[id];
+  // },
+  defaultExpanded: false,
+  isChildOfHeader: true,
+  isFixedNav: false,
+  isPersistent: true,
+  addFocusListeners: true,
+  addMouseListeners: true
+};
+SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Specify whether focus and blur listeners are added. They are by default.
+   */
+  addFocusListeners: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether mouse entry/exit listeners are added. They are by default.
+   */
+  addMouseListeners: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * If `true`, the SideNav will be open on initial render.
+   */
+  defaultExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * If `true`, the SideNav will be expanded, otherwise it will be collapsed.
+   * Using this prop causes SideNav to become a controled component.
+   */
+  expanded: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  isChildOfHeader: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if sideNav is standalone
+   */
+  isFixedNav: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the sideNav will be persistent above the lg breakpoint
+   */
+  isPersistent: PropTypes__default["default"].bool,
+
+  /**
+   * Optional prop to display the side nav rail.
+   */
+  isRail: PropTypes__default["default"].bool,
+
+  /**
+   * An optional listener that is called when the SideNav overlay is clicked
+   *
+   * @param {object} event
+   */
+  onOverlayClick: PropTypes__default["default"].func,
+
+  /**
+   * An optional listener that is called when an event that would cause
+   * toggling the SideNav occurs.
+   *
+   * @param {object} event
+   * @param {boolean} value
+   */
+  onToggle: PropTypes__default["default"].func,
+
+  /**
+   * Provide a custom function for translating all message ids within this
+   * component. This function will take in two arguments: the mesasge Id and the
+   * state of the component. From this, you should return a string representing
+   * the label you want displayed or read by screen readers.
+   */
+  translateById: PropTypes__default["default"].func
+});
+var SideNav$1 = SideNav;
+
+exports["default"] = SideNav$1;

package/lib/components/UIShell/SideNavDetails.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SideNavDetails = function SideNavDetails(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      title = _ref.title;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__details"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("h2", {
+    className: "".concat(prefix, "--side-nav__title"),
+    title: title
+  }, title), children);
+};
+
+SideNavDetails.propTypes = {
+  /**
+   * Provide optional children to render in `SideNavDetails`. Useful for
+   * rendering the `SideNavSwitcher` component.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide the text that will be rendered as the title in the component
+   */
+  title: PropTypes__default["default"].string.isRequired
+};
+var SideNavDetails$1 = SideNavDetails;
+
+exports["default"] = SideNavDetails$1;

package/lib/components/UIShell/SideNavDivider.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function SideNavDivider(_ref) {
+  var className = _ref.className;
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--side-nav__divider"), className);
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    role: "separator",
+    className: classNames
+  });
+}
+
+SideNavDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = SideNavDivider;

package/lib/components/UIShell/SideNavFooter.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _Close, _ChevronRight;
+/**
+ * SideNavFooter is used for rendering the button at the bottom of the side
+ * navigation that is a part of the UI Shell. It is responsible for handling the
+ * user interaction to expand or collapse the side navigation.
+ */
+
+var SideNavFooter = function SideNavFooter(_ref) {
+  var assistiveText = _ref.assistiveText,
+      customClassName = _ref.className,
+      expanded = _ref.expanded,
+      onToggle = _ref.onToggle;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__footer"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("footer", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "".concat(prefix, "--side-nav__toggle"),
+    type: "button",
+    onClick: function onClick(evt) {
+      return onToggle(evt);
+    },
+    title: assistiveText
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--side-nav__icon")
+  }, expanded ? _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+    size: 20
+  })) : _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
+    size: 20
+  }))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, assistiveText)));
+};
+
+SideNavFooter.propTypes = {
+  /**
+   * Provide text to be read to screen readers and shown as a tooltip when
+   * interacting with the toggle button in the footer
+   */
+  assistiveText: PropTypes__default["default"].string.isRequired,
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the side navigation is expanded or collapsed
+   */
+  expanded: PropTypes__default["default"].bool.isRequired,
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a function that is called when the toggle button is interacted
+   * with. Useful for controlling the expansion state of the side navigation.
+   */
+  onToggle: PropTypes__default["default"].func.isRequired
+};
+SideNavFooter.defaultProps = {
+  assistiveText: 'Toggle opening or closing the side navigation'
+};
+var SideNavFooter$1 = SideNavFooter;
+
+exports["default"] = SideNavFooter$1;

package/lib/components/UIShell/SideNavHeader.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var SideNavIcon = require('./SideNavIcon.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SideNavHeader = function SideNavHeader(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      IconElement = _ref.renderIcon;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--side-nav__header"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("header", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), children);
+};
+
+SideNavHeader.propTypes = {
+  /**
+   * The child nodes to be rendered
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an icon to render in the header of the side navigation. Should be
+   * a React class.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]).isRequired
+};
+var SideNavHeader$1 = SideNavHeader;
+
+exports["default"] = SideNavHeader$1;

package/lib/components/UIShell/SideNavIcon.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SideNavIcon = function SideNavIcon(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className,
+      small = _ref.small;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__icon"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__icon--small"), small), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, children);
+};
+
+SideNavIcon.propTypes = {
+  /**
+   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * container
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the icon should be placed in a smaller bounding box
+   */
+  small: PropTypes__default["default"].bool.isRequired
+};
+SideNavIcon.defaultProps = {
+  small: false
+};
+var SideNavIcon$1 = SideNavIcon;
+
+exports["default"] = SideNavIcon$1;