@hig/project-account-switcher - npm Package Compare versions

Comparing version 0.2.0-alpha.fbb1eed0 to 0.2.0

build/index.es.js

@@ -1,5 +0,897 @@
-import ProjectAccountSwitcher from 'hig-react/lib/elements/components/GlobalNav/TopNav/ProjectAccountSwitcher';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Flyout, { anchorPoints } from '@hig/flyout';
+import icons from '@hig/icons';
 
-ProjectAccountSwitcher.displayName = "ProjectAccountSwitcher";
+var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function constructPlaceholder(label) {
+  return label.match(/\b(\w)/g).join("");
+}
+
+var ProjectAccountSwitcherPresenter = function (_Component) {
+  _inherits(ProjectAccountSwitcherPresenter, _Component);
+
+  function ProjectAccountSwitcherPresenter() {
+    _classCallCheck(this, ProjectAccountSwitcherPresenter);
+
+    return _possibleConstructorReturn(this, (ProjectAccountSwitcherPresenter.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcherPresenter)).apply(this, arguments));
+  }
+
+  _createClass(ProjectAccountSwitcherPresenter, [{
+    key: "constructLabel",
+    value: function constructLabel() {
+      var labels = [];
+      if (this.props.activeAccount) {
+        labels.push(this.props.activeAccount.label);
+      }
+      if (this.props.activeProject) {
+        labels.push(this.props.activeProject.label);
+      }
+      return labels.join(" / ");
+    }
+
+    // this method constructs the image placeholder for the combination of
+    // the current activeAccount and/or activeProject,
+    // in lieu of an image for either
+
+  }, {
+    key: "constructLabelPlaceholder",
+    value: function constructLabelPlaceholder() {
+      var placeholders = [];
+      if (this.props.activeAccount) {
+        placeholders.push(constructPlaceholder(this.props.activeAccount.label));
+      }
+      if (this.props.activeProject) {
+        placeholders.push(constructPlaceholder(this.props.activeProject.label));
+      }
+      return placeholders.join("/");
+    }
+  }, {
+    key: "accountsList",
+    value: function accountsList() {
+      var _this2 = this;
+
+      return this.props.accounts.map(function (_ref) {
+        var id = _ref.id,
+            label = _ref.label;
+        return React.createElement(
+          "li",
+          {
+            key: "account-" + id,
+            className: ["hig__project-account-switcher__item", "hig__project-account-switcher__item--account", "hig__project-account-switcher__item--active"].join(" "),
+            role: "menuitem",
+            tabIndex: "0",
+            onClick: function onClick(event) {
+              return _this2.props.onAccountClick(event, id);
+            }
+          },
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__image-wrapper" },
+            React.createElement(
+              "span",
+              { className: "hig__project-account-switcher__item__image-placeholder" },
+              constructPlaceholder(label)
+            )
+          ),
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__label" },
+            label
+          )
+        );
+      });
+    }
+  }, {
+    key: "projectsList",
+    value: function projectsList() {
+      var _this3 = this;
+
+      return this.props.projects.map(function (_ref2) {
+        var id = _ref2.id,
+            label = _ref2.label;
+        return React.createElement(
+          "li",
+          {
+            key: "project-" + id,
+            className: ["hig__project-account-switcher__item", "hig__project-account-switcher__item--project", "hig__project-account-switcher__item--active"].join(" "),
+            role: "menuitem",
+            tabIndex: "0",
+            onClick: function onClick(event) {
+              return _this3.props.onProjectClick(event, id);
+            }
+          },
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__image-wrapper" },
+            React.createElement(
+              "span",
+              { className: "hig__project-account-switcher__item__image-placeholder" },
+              constructPlaceholder(label)
+            )
+          ),
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__label" },
+            label
+          )
+        );
+      });
+    }
+  }, {
+    key: "flyoutContent",
+    value: function flyoutContent() {
+      return React.createElement(
+        "div",
+        { className: "hig__project-account-switcher__lists" },
+        this.props.accounts && React.createElement(
+          "ul",
+          { className: "hig__project-account-switcher__list" },
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__list__title" },
+            this.props.accountTitle
+          ),
+          this.accountsList()
+        ),
+        this.props.projects && React.createElement(
+          "ul",
+          { className: "hig__project-account-switcher__list" },
+          React.createElement(
+            "span",
+            { className: "hig__project-account-switcher__list__title" },
+            this.props.projectTitle
+          ),
+          this.projectsList()
+        )
+      );
+    }
+  }, {
+    key: "componentHasNoLists",
+    value: function componentHasNoLists() {
+      var _props = this.props,
+          _props$accounts = _props.accounts,
+          accounts = _props$accounts === undefined ? [] : _props$accounts,
+          _props$projects = _props.projects,
+          projects = _props$projects === undefined ? [] : _props$projects;
+
+
+      return !accounts.length && !projects.length;
+    }
+  }, {
+    key: "activeImage",
+    value: function activeImage() {
+      if (this.props.activeAccount && this.props.activeAccount.image) {
+        return this.props.activeAccount.image;
+      } else if (this.props.activeProject && this.props.activeProject.image) {
+        return this.props.activeProject.image;
+      }
+      return "";
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      if (this.componentHasNoLists()) {
+        console.warn("You must provide a list of accounts or projects");
+        return null;
+      }
+
+      var activeLabel = this.props.activeLabel ? this.props.activeLabel : this.constructLabel();
+      return React.createElement(
+        "div",
+        {
+          role: "button",
+          tabIndex: "0",
+          className: "hig__project-account-switcher",
+          onClick: this.props.onTargetClick
+        },
+        React.createElement(
+          Flyout,
+          {
+            anchorPoint: anchorPoints.TOP_RIGHT,
+            open: this.props.open,
+            panel: function panel(_ref3) {
+              var innerRef = _ref3.innerRef;
+              return React.createElement(
+                Flyout.Panel,
+                { innerRef: innerRef },
+                React.createElement(
+                  "div",
+                  { className: "hig__project-account-switcher--custom-width-and-padding" },
+                  _this4.flyoutContent()
+                )
+              );
+            }
+          },
+          React.createElement(
+            "div",
+            { className: "hig__project-account-switcher__target" },
+            React.createElement(
+              "div",
+              { className: "hig__project-account-switcher__item" },
+              React.createElement(
+                "span",
+                { className: "hig__project-account-switcher__item__image-wrapper" },
+                React.createElement("img", {
+                  className: "hig__project-account-switcher__item__image",
+                  alt: activeLabel,
+                  src: this.activeImage()
+                }),
+                React.createElement(
+                  "span",
+                  { className: "hig__project-account-switcher__item__image-placeholder" },
+                  this.constructLabelPlaceholder()
+                )
+              ),
+              React.createElement(
+                "span",
+                { className: "hig__project-account-switcher__item__label" },
+                activeLabel
+              )
+            ),
+            React.createElement(
+              "span",
+              { className: "hig__project-account-switcher__target__caret" },
+              React.createElement("div", {
+                className: "hig__icon hig__icon--24-size"
+                /* eslint-disable-next-line react/no-danger */
+                , dangerouslySetInnerHTML: {
+                  __html: icons["caret-24"]
+                }
+              })
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return ProjectAccountSwitcherPresenter;
+}(Component);
+
+ProjectAccountSwitcherPresenter.propTypes = {
+  /** Heading title for the list of Accounts */
+  accountTitle: PropTypes.string,
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccount: PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }),
+  /** Label for selected Accounts and Projects */
+  activeLabel: PropTypes.string,
+  /** Currently selected Project */
+  activeProject: PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }),
+  /** Handles Account selection, passed from Behavior */
+  onAccountClick: PropTypes.func,
+  /** Handles Project selection, passed from Behavior */
+  onProjectClick: PropTypes.func,
+  /** Handles Flyout display, passed from Behavior */
+  onTargetClick: PropTypes.func,
+  /** Menu heading title for the list of Projects */
+  open: PropTypes.bool,
+  /** Heading title for the list of Projects */
+  projectTitle: PropTypes.string,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }))
+};
+ProjectAccountSwitcherPresenter.defaultProps = {
+  accountTitle: "Accounts",
+  open: false,
+  projectTitle: "Projects"
+};
+ProjectAccountSwitcherPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcherPresenter",
+  "props": {
+    "accountTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Accounts",
+      "defaultValue": {
+        "value": "\"Accounts\"",
+        "computed": false
+      }
+    },
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccount": {
+      "type": {
+        "name": "shape",
+        "value": {
+          "id": {
+            "name": "string",
+            "required": false
+          },
+          "image": {
+            "name": "string",
+            "required": false
+          },
+          "label": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Label for selected Accounts and Projects"
+    },
+    "activeProject": {
+      "type": {
+        "name": "shape",
+        "value": {
+          "id": {
+            "name": "string",
+            "required": false
+          },
+          "image": {
+            "name": "string",
+            "required": false
+          },
+          "label": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "onAccountClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Account selection, passed from Behavior"
+    },
+    "onProjectClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Project selection, passed from Behavior"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Flyout display, passed from Behavior"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Menu heading title for the list of Projects",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "projectTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Projects",
+      "defaultValue": {
+        "value": "\"Projects\"",
+        "computed": false
+      }
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    }
+  }
+};
+
+var _createClass$1 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProjectAccountSwitcherBehavior = function (_Component) {
+  _inherits$1(ProjectAccountSwitcherBehavior, _Component);
+
+  function ProjectAccountSwitcherBehavior() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, ProjectAccountSwitcherBehavior);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = ProjectAccountSwitcherBehavior.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcherBehavior)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      activeAccount: _this.getAccount(_this.props.activeAccountId),
+      activeProject: _this.getProject(_this.props.activeProjectId),
+      open: _this.props.open
+    }, _this.handleTargetClick = function (event) {
+      var onTargetClick = _this.props.onTargetClick;
+
+
+      if (onTargetClick) {
+        onTargetClick(event);
+      }
+
+      _this.setState({
+        open: !_this.state.open
+      });
+    }, _this.handleAccountClick = function (event, id) {
+      var onClick = _this.props.onClick;
+
+
+      if (onClick) {
+        onClick(event);
+      }
+
+      _this.setState({
+        activeAccount: _this.getAccount(id)
+      });
+    }, _this.handleProjectClick = function (event, id) {
+      var onClick = _this.props.onClick;
+
+
+      if (onClick) {
+        onClick(event);
+      }
+
+      _this.setState({
+        activeProject: _this.getProject(id)
+      });
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  _createClass$1(ProjectAccountSwitcherBehavior, [{
+    key: "getAccount",
+    value: function getAccount(accountId) {
+      var _props$accounts = this.props.accounts,
+          accounts = _props$accounts === undefined ? [] : _props$accounts;
+
+
+      return accounts.find(function (_ref2) {
+        var id = _ref2.id;
+        return id === accountId;
+      });
+    }
+  }, {
+    key: "getProject",
+    value: function getProject(projectId) {
+      var _props$projects = this.props.projects,
+          projects = _props$projects === undefined ? [] : _props$projects;
+
+
+      return projects.find(function (_ref3) {
+        var id = _ref3.id;
+        return id === projectId;
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children({
+        activeAccount: this.state.activeAccount,
+        activeProject: this.state.activeProject,
+        handleAccountClick: this.handleAccountClick,
+        handleTargetClick: this.handleTargetClick,
+        handleProjectClick: this.handleProjectClick,
+        open: this.state.open
+      });
+    }
+  }]);
+
+  return ProjectAccountSwitcherBehavior;
+}(Component);
+
+ProjectAccountSwitcherBehavior.propTypes = {
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccountId: PropTypes.string,
+  /** Currently selected Project */
+  activeProjectId: PropTypes.string,
+  /** Render prop */
+  children: PropTypes.func,
+  /** Initially sets the selected Account, but allows user action to change it */
+  onClick: PropTypes.func,
+  /** Called when a user clicks on the target element */
+  onTargetClick: PropTypes.func,
+  /** Opens the Flyout */
+  open: PropTypes.bool,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }))
+};
+ProjectAccountSwitcherBehavior.defaultProps = {
+  open: false
+};
+ProjectAccountSwitcherBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcherBehavior",
+  "props": {
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccountId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeProjectId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Render prop"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Initially sets the selected Account, but allows user action to change it"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the target element"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Opens the Flyout",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    }
+  }
+};
+
+var _createClass$2 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProjectAccountSwitcher = function (_Component) {
+  _inherits$2(ProjectAccountSwitcher, _Component);
+
+  function ProjectAccountSwitcher() {
+    _classCallCheck$2(this, ProjectAccountSwitcher);
+
+    return _possibleConstructorReturn$2(this, (ProjectAccountSwitcher.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcher)).apply(this, arguments));
+  }
+
+  _createClass$2(ProjectAccountSwitcher, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          accounts = _props.accounts,
+          accountTitle = _props.accountTitle,
+          projects = _props.projects,
+          projectTitle = _props.projectTitle,
+          onChange = _props.onChange,
+          onClick = _props.onClick,
+          onTargetClick = _props.onTargetClick;
+
+
+      return React.createElement(
+        ProjectAccountSwitcherBehavior,
+        {
+          accounts: accounts,
+          activeAccountId: this.props.activeAccountId,
+          activeProjectId: this.props.activeProjectId,
+          onChange: onChange,
+          onClick: onClick,
+          onTargetClick: onTargetClick,
+          projects: projects
+        },
+        function (_ref) {
+          var activeAccount = _ref.activeAccount,
+              activeProject = _ref.activeProject,
+              handleAccountClick = _ref.handleAccountClick,
+              handleProjectClick = _ref.handleProjectClick,
+              handleTargetClick = _ref.handleTargetClick,
+              open = _ref.open;
+          return React.createElement(ProjectAccountSwitcherPresenter, {
+            accounts: accounts,
+            accountTitle: accountTitle,
+            activeAccount: activeAccount,
+            activeProject: activeProject,
+            onAccountClick: handleAccountClick,
+            onProjectClick: handleProjectClick,
+            onTargetClick: handleTargetClick,
+            open: open,
+            projects: projects,
+            projectTitle: projectTitle
+          });
+        }
+      );
+    }
+  }]);
+
+  return ProjectAccountSwitcher;
+}(Component);
+
+ProjectAccountSwitcher.propTypes = {
+  /** Heading title for the list of Accounts */
+  accountTitle: PropTypes.string,
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccountId: PropTypes.string,
+  /** Currently selected Project */
+  activeProjectId: PropTypes.string,
+  /** Called when a the element changes */
+  onChange: PropTypes.func,
+  /** Called when a user clicks on the element */
+  onClick: PropTypes.func,
+  /** Called when a user clicks on the target element */
+  onTargetClick: PropTypes.func,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Heading title for the list of Projects */
+  projectTitle: PropTypes.string
+};
+ProjectAccountSwitcher.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcher",
+  "props": {
+    "accountTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Accounts"
+    },
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccountId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeProjectId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a the element changes"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the element"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the target element"
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    },
+    "projectTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Projects"
+    }
+  }
+};
+
 export default ProjectAccountSwitcher;

build/index.js

@@ -7,6 +7,900 @@ 'use strict';
 
-var ProjectAccountSwitcher = _interopDefault(require('hig-react/lib/elements/components/GlobalNav/TopNav/ProjectAccountSwitcher'));
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var Flyout = require('@hig/flyout');
+var Flyout__default = _interopDefault(Flyout);
+var icons = _interopDefault(require('@hig/icons'));
 
-ProjectAccountSwitcher.displayName = "ProjectAccountSwitcher";
+var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function constructPlaceholder(label) {
+  return label.match(/\b(\w)/g).join("");
+}
+
+var ProjectAccountSwitcherPresenter = function (_Component) {
+  _inherits(ProjectAccountSwitcherPresenter, _Component);
+
+  function ProjectAccountSwitcherPresenter() {
+    _classCallCheck(this, ProjectAccountSwitcherPresenter);
+
+    return _possibleConstructorReturn(this, (ProjectAccountSwitcherPresenter.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcherPresenter)).apply(this, arguments));
+  }
+
+  _createClass(ProjectAccountSwitcherPresenter, [{
+    key: "constructLabel",
+    value: function constructLabel() {
+      var labels = [];
+      if (this.props.activeAccount) {
+        labels.push(this.props.activeAccount.label);
+      }
+      if (this.props.activeProject) {
+        labels.push(this.props.activeProject.label);
+      }
+      return labels.join(" / ");
+    }
+
+    // this method constructs the image placeholder for the combination of
+    // the current activeAccount and/or activeProject,
+    // in lieu of an image for either
+
+  }, {
+    key: "constructLabelPlaceholder",
+    value: function constructLabelPlaceholder() {
+      var placeholders = [];
+      if (this.props.activeAccount) {
+        placeholders.push(constructPlaceholder(this.props.activeAccount.label));
+      }
+      if (this.props.activeProject) {
+        placeholders.push(constructPlaceholder(this.props.activeProject.label));
+      }
+      return placeholders.join("/");
+    }
+  }, {
+    key: "accountsList",
+    value: function accountsList() {
+      var _this2 = this;
+
+      return this.props.accounts.map(function (_ref) {
+        var id = _ref.id,
+            label = _ref.label;
+        return React__default.createElement(
+          "li",
+          {
+            key: "account-" + id,
+            className: ["hig__project-account-switcher__item", "hig__project-account-switcher__item--account", "hig__project-account-switcher__item--active"].join(" "),
+            role: "menuitem",
+            tabIndex: "0",
+            onClick: function onClick(event) {
+              return _this2.props.onAccountClick(event, id);
+            }
+          },
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__image-wrapper" },
+            React__default.createElement(
+              "span",
+              { className: "hig__project-account-switcher__item__image-placeholder" },
+              constructPlaceholder(label)
+            )
+          ),
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__label" },
+            label
+          )
+        );
+      });
+    }
+  }, {
+    key: "projectsList",
+    value: function projectsList() {
+      var _this3 = this;
+
+      return this.props.projects.map(function (_ref2) {
+        var id = _ref2.id,
+            label = _ref2.label;
+        return React__default.createElement(
+          "li",
+          {
+            key: "project-" + id,
+            className: ["hig__project-account-switcher__item", "hig__project-account-switcher__item--project", "hig__project-account-switcher__item--active"].join(" "),
+            role: "menuitem",
+            tabIndex: "0",
+            onClick: function onClick(event) {
+              return _this3.props.onProjectClick(event, id);
+            }
+          },
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__image-wrapper" },
+            React__default.createElement(
+              "span",
+              { className: "hig__project-account-switcher__item__image-placeholder" },
+              constructPlaceholder(label)
+            )
+          ),
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__item__label" },
+            label
+          )
+        );
+      });
+    }
+  }, {
+    key: "flyoutContent",
+    value: function flyoutContent() {
+      return React__default.createElement(
+        "div",
+        { className: "hig__project-account-switcher__lists" },
+        this.props.accounts && React__default.createElement(
+          "ul",
+          { className: "hig__project-account-switcher__list" },
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__list__title" },
+            this.props.accountTitle
+          ),
+          this.accountsList()
+        ),
+        this.props.projects && React__default.createElement(
+          "ul",
+          { className: "hig__project-account-switcher__list" },
+          React__default.createElement(
+            "span",
+            { className: "hig__project-account-switcher__list__title" },
+            this.props.projectTitle
+          ),
+          this.projectsList()
+        )
+      );
+    }
+  }, {
+    key: "componentHasNoLists",
+    value: function componentHasNoLists() {
+      var _props = this.props,
+          _props$accounts = _props.accounts,
+          accounts = _props$accounts === undefined ? [] : _props$accounts,
+          _props$projects = _props.projects,
+          projects = _props$projects === undefined ? [] : _props$projects;
+
+
+      return !accounts.length && !projects.length;
+    }
+  }, {
+    key: "activeImage",
+    value: function activeImage() {
+      if (this.props.activeAccount && this.props.activeAccount.image) {
+        return this.props.activeAccount.image;
+      } else if (this.props.activeProject && this.props.activeProject.image) {
+        return this.props.activeProject.image;
+      }
+      return "";
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      if (this.componentHasNoLists()) {
+        console.warn("You must provide a list of accounts or projects");
+        return null;
+      }
+
+      var activeLabel = this.props.activeLabel ? this.props.activeLabel : this.constructLabel();
+      return React__default.createElement(
+        "div",
+        {
+          role: "button",
+          tabIndex: "0",
+          className: "hig__project-account-switcher",
+          onClick: this.props.onTargetClick
+        },
+        React__default.createElement(
+          Flyout__default,
+          {
+            anchorPoint: Flyout.anchorPoints.TOP_RIGHT,
+            open: this.props.open,
+            panel: function panel(_ref3) {
+              var innerRef = _ref3.innerRef;
+              return React__default.createElement(
+                Flyout__default.Panel,
+                { innerRef: innerRef },
+                React__default.createElement(
+                  "div",
+                  { className: "hig__project-account-switcher--custom-width-and-padding" },
+                  _this4.flyoutContent()
+                )
+              );
+            }
+          },
+          React__default.createElement(
+            "div",
+            { className: "hig__project-account-switcher__target" },
+            React__default.createElement(
+              "div",
+              { className: "hig__project-account-switcher__item" },
+              React__default.createElement(
+                "span",
+                { className: "hig__project-account-switcher__item__image-wrapper" },
+                React__default.createElement("img", {
+                  className: "hig__project-account-switcher__item__image",
+                  alt: activeLabel,
+                  src: this.activeImage()
+                }),
+                React__default.createElement(
+                  "span",
+                  { className: "hig__project-account-switcher__item__image-placeholder" },
+                  this.constructLabelPlaceholder()
+                )
+              ),
+              React__default.createElement(
+                "span",
+                { className: "hig__project-account-switcher__item__label" },
+                activeLabel
+              )
+            ),
+            React__default.createElement(
+              "span",
+              { className: "hig__project-account-switcher__target__caret" },
+              React__default.createElement("div", {
+                className: "hig__icon hig__icon--24-size"
+                /* eslint-disable-next-line react/no-danger */
+                , dangerouslySetInnerHTML: {
+                  __html: icons["caret-24"]
+                }
+              })
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return ProjectAccountSwitcherPresenter;
+}(React.Component);
+
+ProjectAccountSwitcherPresenter.propTypes = {
+  /** Heading title for the list of Accounts */
+  accountTitle: PropTypes.string,
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccount: PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }),
+  /** Label for selected Accounts and Projects */
+  activeLabel: PropTypes.string,
+  /** Currently selected Project */
+  activeProject: PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }),
+  /** Handles Account selection, passed from Behavior */
+  onAccountClick: PropTypes.func,
+  /** Handles Project selection, passed from Behavior */
+  onProjectClick: PropTypes.func,
+  /** Handles Flyout display, passed from Behavior */
+  onTargetClick: PropTypes.func,
+  /** Menu heading title for the list of Projects */
+  open: PropTypes.bool,
+  /** Heading title for the list of Projects */
+  projectTitle: PropTypes.string,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }))
+};
+ProjectAccountSwitcherPresenter.defaultProps = {
+  accountTitle: "Accounts",
+  open: false,
+  projectTitle: "Projects"
+};
+ProjectAccountSwitcherPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcherPresenter",
+  "props": {
+    "accountTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Accounts",
+      "defaultValue": {
+        "value": "\"Accounts\"",
+        "computed": false
+      }
+    },
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccount": {
+      "type": {
+        "name": "shape",
+        "value": {
+          "id": {
+            "name": "string",
+            "required": false
+          },
+          "image": {
+            "name": "string",
+            "required": false
+          },
+          "label": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Label for selected Accounts and Projects"
+    },
+    "activeProject": {
+      "type": {
+        "name": "shape",
+        "value": {
+          "id": {
+            "name": "string",
+            "required": false
+          },
+          "image": {
+            "name": "string",
+            "required": false
+          },
+          "label": {
+            "name": "string",
+            "required": false
+          }
+        }
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "onAccountClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Account selection, passed from Behavior"
+    },
+    "onProjectClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Project selection, passed from Behavior"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Handles Flyout display, passed from Behavior"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Menu heading title for the list of Projects",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "projectTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Projects",
+      "defaultValue": {
+        "value": "\"Projects\"",
+        "computed": false
+      }
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    }
+  }
+};
+
+var _createClass$1 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProjectAccountSwitcherBehavior = function (_Component) {
+  _inherits$1(ProjectAccountSwitcherBehavior, _Component);
+
+  function ProjectAccountSwitcherBehavior() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, ProjectAccountSwitcherBehavior);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = ProjectAccountSwitcherBehavior.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcherBehavior)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      activeAccount: _this.getAccount(_this.props.activeAccountId),
+      activeProject: _this.getProject(_this.props.activeProjectId),
+      open: _this.props.open
+    }, _this.handleTargetClick = function (event) {
+      var onTargetClick = _this.props.onTargetClick;
+
+
+      if (onTargetClick) {
+        onTargetClick(event);
+      }
+
+      _this.setState({
+        open: !_this.state.open
+      });
+    }, _this.handleAccountClick = function (event, id) {
+      var onClick = _this.props.onClick;
+
+
+      if (onClick) {
+        onClick(event);
+      }
+
+      _this.setState({
+        activeAccount: _this.getAccount(id)
+      });
+    }, _this.handleProjectClick = function (event, id) {
+      var onClick = _this.props.onClick;
+
+
+      if (onClick) {
+        onClick(event);
+      }
+
+      _this.setState({
+        activeProject: _this.getProject(id)
+      });
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  _createClass$1(ProjectAccountSwitcherBehavior, [{
+    key: "getAccount",
+    value: function getAccount(accountId) {
+      var _props$accounts = this.props.accounts,
+          accounts = _props$accounts === undefined ? [] : _props$accounts;
+
+
+      return accounts.find(function (_ref2) {
+        var id = _ref2.id;
+        return id === accountId;
+      });
+    }
+  }, {
+    key: "getProject",
+    value: function getProject(projectId) {
+      var _props$projects = this.props.projects,
+          projects = _props$projects === undefined ? [] : _props$projects;
+
+
+      return projects.find(function (_ref3) {
+        var id = _ref3.id;
+        return id === projectId;
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children({
+        activeAccount: this.state.activeAccount,
+        activeProject: this.state.activeProject,
+        handleAccountClick: this.handleAccountClick,
+        handleTargetClick: this.handleTargetClick,
+        handleProjectClick: this.handleProjectClick,
+        open: this.state.open
+      });
+    }
+  }]);
+
+  return ProjectAccountSwitcherBehavior;
+}(React.Component);
+
+ProjectAccountSwitcherBehavior.propTypes = {
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccountId: PropTypes.string,
+  /** Currently selected Project */
+  activeProjectId: PropTypes.string,
+  /** Render prop */
+  children: PropTypes.func,
+  /** Initially sets the selected Account, but allows user action to change it */
+  onClick: PropTypes.func,
+  /** Called when a user clicks on the target element */
+  onTargetClick: PropTypes.func,
+  /** Opens the Flyout */
+  open: PropTypes.bool,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  }))
+};
+ProjectAccountSwitcherBehavior.defaultProps = {
+  open: false
+};
+ProjectAccountSwitcherBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcherBehavior",
+  "props": {
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccountId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeProjectId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Render prop"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Initially sets the selected Account, but allows user action to change it"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the target element"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Opens the Flyout",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    }
+  }
+};
+
+var _createClass$2 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProjectAccountSwitcher = function (_Component) {
+  _inherits$2(ProjectAccountSwitcher, _Component);
+
+  function ProjectAccountSwitcher() {
+    _classCallCheck$2(this, ProjectAccountSwitcher);
+
+    return _possibleConstructorReturn$2(this, (ProjectAccountSwitcher.__proto__ || Object.getPrototypeOf(ProjectAccountSwitcher)).apply(this, arguments));
+  }
+
+  _createClass$2(ProjectAccountSwitcher, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          accounts = _props.accounts,
+          accountTitle = _props.accountTitle,
+          projects = _props.projects,
+          projectTitle = _props.projectTitle,
+          onChange = _props.onChange,
+          onClick = _props.onClick,
+          onTargetClick = _props.onTargetClick;
+
+
+      return React__default.createElement(
+        ProjectAccountSwitcherBehavior,
+        {
+          accounts: accounts,
+          activeAccountId: this.props.activeAccountId,
+          activeProjectId: this.props.activeProjectId,
+          onChange: onChange,
+          onClick: onClick,
+          onTargetClick: onTargetClick,
+          projects: projects
+        },
+        function (_ref) {
+          var activeAccount = _ref.activeAccount,
+              activeProject = _ref.activeProject,
+              handleAccountClick = _ref.handleAccountClick,
+              handleProjectClick = _ref.handleProjectClick,
+              handleTargetClick = _ref.handleTargetClick,
+              open = _ref.open;
+          return React__default.createElement(ProjectAccountSwitcherPresenter, {
+            accounts: accounts,
+            accountTitle: accountTitle,
+            activeAccount: activeAccount,
+            activeProject: activeProject,
+            onAccountClick: handleAccountClick,
+            onProjectClick: handleProjectClick,
+            onTargetClick: handleTargetClick,
+            open: open,
+            projects: projects,
+            projectTitle: projectTitle
+          });
+        }
+      );
+    }
+  }]);
+
+  return ProjectAccountSwitcher;
+}(React.Component);
+
+ProjectAccountSwitcher.propTypes = {
+  /** Heading title for the list of Accounts */
+  accountTitle: PropTypes.string,
+  /** List of Accounts */
+  accounts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Currently selected Account */
+  activeAccountId: PropTypes.string,
+  /** Currently selected Project */
+  activeProjectId: PropTypes.string,
+  /** Called when a the element changes */
+  onChange: PropTypes.func,
+  /** Called when a user clicks on the element */
+  onClick: PropTypes.func,
+  /** Called when a user clicks on the target element */
+  onTargetClick: PropTypes.func,
+  /** List of Projects */
+  projects: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /** Heading title for the list of Projects */
+  projectTitle: PropTypes.string
+};
+ProjectAccountSwitcher.__docgenInfo = {
+  "description": "",
+  "displayName": "ProjectAccountSwitcher",
+  "props": {
+    "accountTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Accounts"
+    },
+    "accounts": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Accounts"
+    },
+    "activeAccountId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Account"
+    },
+    "activeProjectId": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Currently selected Project"
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a the element changes"
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the element"
+    },
+    "onTargetClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when a user clicks on the target element"
+    },
+    "projects": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": false
+            },
+            "image": {
+              "name": "string",
+              "required": false
+            },
+            "label": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "List of Projects"
+    },
+    "projectTitle": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Heading title for the list of Projects"
+    }
+  }
+};
+
 exports.default = ProjectAccountSwitcher;

package.json

 {
   "name": "@hig/project-account-switcher",
-  "version": "0.2.0-alpha.fbb1eed0",
+  "version": "0.2.0",
   "description": "HIG Project Account Switcher",
@@ -21,6 +21,7 @@ "author": "Autodesk Inc.",
   "dependencies": {
+    "@hig/flyout": "^0.6.0",
+    "@hig/icons": "^0.2.0",
     "classnames": "^2.2.5",
-    "hig-react": "0.30.0-alpha.fbb1eed0",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.2"
+    "react-lifecycles-compat": "^3.0.4"
   },
@@ -31,7 +32,8 @@ "peerDependencies": {
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fbb1eed0",
-    "@hig/eslint-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/scripts": "0.2.0-alpha.fbb1eed0",
-    "@hig/semantic-release-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/styles": "^0.1.1"
+    "@hig/babel-preset": "^0.1.0",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.2.3"
   },
@@ -41,2 +43,3 @@ "scripts": {
     "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
     "release": "hig-scripts-release"
@@ -47,2 +50,5 @@ },
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
   "release": {
@@ -49,0 +55,0 @@ "extends": "@hig/semantic-release-config"

README.md

@@ -1,3 +0,18 @@
-# ProjectAccountSwitcher
+# Project Account Switcher
 
 The Project and Account Switcher is part of the Global Nav and allows customers to switch the context to different projects or accounts.
+
+## Getting started
+
+### Install the package
+
+```bash
+yarn add @hig/project-account-switcher
+```
+
+### Import the component and CSS
+
+```js
+import ProjectAccountSwitcher from '@hig/project-account-switcher';
+import '@hig/project-account-switcher/build/index.css';
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Number of lines in readme file

19

increased by375%

Worsened metrics

Total package byte prevSize

77491

decreased by-72.47%

Dependency count

6

increased by20%

Dev dependency count

6

increased by20%

Lines of code

2045

decreased by-74.71%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hig/flyout@^0.6.0

• + Added@hig/icons@^0.2.0

• + Added@hig/flyout@0.6.0(transitive)

• + Added@hig/icons@0.2.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - [e-mail]1eed0

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removed@hig/[e-mail]1eed0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - [e-mail]1eed0(transitive)

• - [e-mail]1eed0(transitive)

• - [e-mail]1eed0(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedreact-lifecycles-compat@^3.0.4