fe-fabric-react 0.0.1-security → 2.864.3

package/lib/fe-panel/FePanel.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _customPropTypes = require("../customPropTypes");
+
+var _core = require("../core");
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var FePanel =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FePanel, _Component);
+
+  function FePanel(props) {
+    var _this;
+
+    _classCallCheck(this, FePanel);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FePanel).call(this, props));
+    _this.state = {
+      isCollapsed: _this.props.isCollapsible ? _this.props.isCollapsed : false
+    };
+    _this.panelToggle = _this.panelToggle.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(FePanel, [{
+    key: "panelToggle",
+    value: function panelToggle() {
+      var isCollapsed = this.state.isCollapsed;
+      this.setState({
+        isCollapsed: !isCollapsed
+      });
+    }
+  }, {
+    key: "getPanelHeader",
+    value: function getPanelHeader() {
+      var className = (0, _classnames.default)('fe-panel-header', {
+        'fe-panel-header--no-background': this.props.isTransparentHeader && !this.props.isCollapsible
+      });
+      var isTransparentLabel = this.props.isTransparentLabel;
+      var icon = this.props.iconLabel;
+
+      if (this.props.isCollapsible) {
+        icon = this.state.isCollapsed ? {
+          name: 'chevron-circle-right'
+        } : {
+          name: 'chevron-circle-down'
+        };
+      }
+
+      var ariaAttributesForButton = {
+        'id': this.props.id,
+        'aria-expanded': "".concat(!this.state.isCollapsed),
+        'aria-controls': "".concat(this.props.id, "Body")
+      };
+
+      if (!this.props.isCollapsible) {
+        ariaAttributesForButton['aria-disabled'] = 'true';
+      }
+
+      return _react.default.createElement("header", {
+        className: className
+      }, this.props.label ? _react.default.createElement(_core.FeLabel, _extends({}, ariaAttributesForButton, {
+        icon: icon,
+        isTransparent: isTransparentLabel,
+        onClick: this.props.isCollapsible ? this.panelToggle : null
+      }), this.props.label) : null, this.props.optionalComponent ? _react.default.createElement("div", {
+        className: "fe-panel-header__options"
+      }, this.props.optionalComponent) : null);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /** Minimum condition required to render*/
+
+      /** Rendering of component */
+      var className = (0, _classnames.default)('fe-panel', {
+        'fe-panel--collapsible': this.props.isCollapsible,
+        'open': !this.state.isCollapsed
+      }, this.props.className);
+      var panelHeader = this.getPanelHeader();
+      var bodyClass = (0, _classnames.default)('fe-panel__body', {
+        'fe-panel__body--border': !this.props.isTransparentLabel
+      });
+      var ariaAttributesForBody = {
+        'id': "".concat(this.props.id, "Body"),
+        'role': 'region',
+        'aria-labelledby': this.props.id
+      };
+      return _react.default.createElement("section", {
+        className: className
+      }, panelHeader, _react.default.createElement("div", _extends({}, ariaAttributesForBody, {
+        className: bodyClass
+      }), this.props.children));
+    }
+  }]);
+
+  return FePanel;
+}(_react.Component);
+
+FePanel.defaultProps = {
+  id: null,
+  label: null,
+  iconLabel: null,
+  isCollapsible: false,
+  isCollapsed: true,
+  isTransparentLabel: false,
+  isTransparentHeader: false,
+  optionalComponent: null
+};
+FePanel.propTypes = {
+  /** Provide id for panel to support ARIA-Attribute*/
+  id: _propTypes.default.string.isRequired,
+
+  /** Provide label for panel*/
+  label: _propTypes.default.node,
+
+  /** Provide the icon name and family in shape of { name: 'name', family: 'solid' }*/
+  iconLabel: _customPropTypes.iconPropType,
+
+  /** Set true/false to make collapsible panel*/
+  isCollapsible: _propTypes.default.bool,
+
+  /** Set true/false to change initial collapsed state only*/
+  isCollapsed: _propTypes.default.bool,
+
+  /** Set true/false to make transparent label*/
+  isTransparentLabel: _propTypes.default.bool,
+
+  /** Set true/false to make transparent header.
+    NOTE: If panel is collapsible, header can't be made as transparent.
+  */
+  isTransparentHeader: _propTypes.default.bool,
+
+  /** Provide optional 'FeButton' or 'FeDropdown' component*/
+  optionalComponent: _propTypes.default.element
+};
+FePanel.displayName = 'FePanel';
+var _default = FePanel;
+exports.default = _default;

package/lib/fe-panel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FePanel = _interopRequireDefault(require("./FePanel"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+var _default = _FePanel.default;
+exports.default = _default;

package/lib/fe-sidenav/FeSideNav.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FeSideNavList = _interopRequireDefault(require("./FeSideNavList"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+
+var FeSideNav = function FeSideNav(_ref) {
+  var navList = _ref.navList,
+      navHeaderContent = _ref.navHeaderContent,
+      navFooterContent = _ref.navFooterContent,
+      withSearch = _ref.withSearch,
+      customRenderLink = _ref.customRenderLink,
+      productType = _ref.productType;
+  return _react.default.createElement("div", {
+    className: "fe-container"
+  }, _react.default.createElement("nav", {
+    className: "fe-side-nav"
+  }, productType ? _react.default.createElement("span", {
+    className: "fe-product fe-product--".concat(productType, "-horizontal")
+  }) : null, navHeaderContent && _react.default.createElement("div", {
+    className: "fe-side-nav__header"
+  }, _react.default.createElement("div", {
+    className: "fe-top-nav__title"
+  }, navHeaderContent)), _react.default.createElement("div", {
+    className: "fe-side-nav__nav-container"
+  }, _react.default.createElement(_FeSideNavList.default, {
+    withSearch: withSearch,
+    navList: navList,
+    customRenderLink: customRenderLink
+  }), navFooterContent && _react.default.createElement("div", {
+    className: "fe-side-nav__footer"
+  }, navFooterContent))));
+};
+
+FeSideNav.defaultProps = {
+  withSearch: false,
+  navList: [],
+  navHeaderContent: null,
+  navFooterContent: null,
+  customRenderLink: null,
+  productType: null
+};
+FeSideNav.propTypes = {
+  /** Array of navigation items */
+  navList: _propTypes.default.array.isRequired,
+
+  /** Content for the header section */
+  navHeaderContent: _propTypes.default.node,
+
+  /** Content for the footer section */
+  navFooterContent: _propTypes.default.node,
+
+  /** Set to true to have seacrh box for nav items */
+  withSearch: _propTypes.default.bool,
+
+  /** A function that returns a react element to render the wrapping link.
+   *  Will receive url, className, and children props
+   */
+  customRenderLink: _propTypes.default.func,
+
+  /** Provide productType like 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'*/
+  productType: _propTypes.default.oneOf(['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'])
+};
+var _default = FeSideNav;
+exports.default = _default;