@pingux/astro 1.1.0-alpha.10 → 1.1.0-alpha.14

package/lib/cjs/components/NavBar/NavBar.test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+
+var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
+
+var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
+
+var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
+
+var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
+
+var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
+
+var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
+
+var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
+
+var _NavBar = _interopRequireDefault(require("./NavBar"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var data = [{
+  icon: _GlobeIcon["default"],
+  key: 'Overview',
+  heading: 'Overview',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
+}, {
+  icon: _ViewDashboardIcon["default"],
+  key: 'Dashboard',
+  heading: 'Dashboard',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _AccountMultipleIcon["default"],
+  key: 'Identities',
+  heading: 'Identities',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _TransitConnectionVariantIcon["default"],
+  key: 'Connections',
+  heading: 'Connections',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _EmoticonHappyOutlineIcon["default"],
+  key: 'Experiences',
+  heading: 'Experiences',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+var secondData = [{
+  icon: _FingerprintIcon["default"],
+  key: 'MFA',
+  heading: 'MFA',
+  children: ['Users', {
+    subTitle: 'PingOne Services'
+  }, 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _ScaleBalanceIcon["default"],
+  key: 'Risk',
+  heading: 'Risk',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _VerifiedIcon["default"],
+  key: 'Verify',
+  heading: 'Verify',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      height: '100%',
+      maxHeight: '100%',
+      overflowY: 'overlay !important'
+    }
+  }, (0, _react2.jsx)(_index.NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondData,
+    title: "test_title"
+  }))));
+};
+
+(0, _testAxe["default"])(getComponent);
+test('should render basic nav with children', function () {
+  getComponent();
+
+  var nav = _testWrapper.screen.queryByRole('navigation');
+
+  expect(nav).toBeInTheDocument();
+});
+test('should render title for sections that have titles', function () {
+  getComponent();
+
+  var title = _testWrapper.screen.getByText('test_title');
+
+  expect(title).toBeInTheDocument();
+});
+test('should render title for itemBodies that have subTitles', function () {
+  getComponent();
+
+  var subTitle = _testWrapper.screen.getByText('PingOne Services');
+
+  expect(subTitle).toBeInTheDocument();
+});

package/lib/cjs/components/NavBar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _NavBar["default"];
+  }
+});
+
+var _NavBar = _interopRequireDefault(require("./NavBar"));

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var NavBarItemBody = function NavBarItemBody(props) {
+  var _context;
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      alignItems: 'flex-start',
+      mb: '15px'
+    }
+  }, (0, _map["default"])(_context = props.item.children).call(_context, function (child) {
+    return child.subTitle ? (0, _react2.jsx)(_react.Fragment, {
+      key: "fragment".concat(child.subTitle)
+    }, (0, _react2.jsx)(_index.Separator, {
+      variant: "separator.navBarSubtitleSeparator",
+      key: "separator".concat(child.subTitle)
+    }), (0, _react2.jsx)(_index.Text, {
+      key: "text".concat(child.subTitle),
+      variant: "text.navBarSubtitle",
+      sx: {
+        mb: '10px',
+        ml: '45px'
+      }
+    }, child.subTitle)) : child;
+  }));
+};
+
+NavBarItemBody.propTypes = {
+  item: _propTypes["default"].shape({
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]))
+  })
+};
+var _default = NavBarItemBody;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var icon = item.icon;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.navBarItemHeaderContainer",
+    isRow: true
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: 20,
+    sx: {
+      mr: '10px',
+      color: 'white',
+      fill: 'white'
+    }
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "navBarHeaderText"
+  }, props.item.heading));
+};
+
+NavBarItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    heading: _propTypes["default"].string,
+    icon: _propTypes["default"].elementType
+  })
+};
+var _default = NavBarItemHeader;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
+
+var _NavBarItemHeader = _interopRequireDefault(require("./NavBarItemHeader"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Composed component that creates an AccordionGrid group
+ * with title, and separator options.
+ *
+ */
+var NavBarSection = function NavBarSection(props) {
+  var hasSeparator = props.hasSeparator,
+      title = props.title,
+      items = props.items;
+  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
+    variant: "text.navBarSubtitle",
+    sx: {
+      mt: '25px',
+      mb: '15px',
+      ml: '15px'
+    }
+  }, title), (0, _react2.jsx)(_index.AccordionGridGroup, {
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      headerProps: {
+        variant: 'accordion.accordionGridHeaderNav'
+      },
+      textValue: item
+    }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
+      item: item
+    }), (0, _react2.jsx)(_NavBarItemBody["default"], {
+      item: item
+    }));
+  }), hasSeparator && (0, _react2.jsx)(_index.Box, {
+    sx: {
+      pl: '15px',
+      pr: '15px',
+      mt: '25px'
+    }
+  }, (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  })));
+};
+
+NavBarSection.defaultProps = {
+  hasSeparator: false
+};
+NavBarSection.propTypes = {
+  /** If true, a separator will render at the end of the section */
+  hasSeparator: _propTypes["default"].bool,
+
+  /** If present, this string will render at the top of the section */
+  title: _propTypes["default"].string,
+
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+  */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
+};
+var _default = NavBarSection;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarSection["default"];
+  }
+});
+
+var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));

package/lib/cjs/components/Separator/Separator.js

@@ -51,7 +51,7 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     className: classNames,
-    variant: "separator"
+    variant: "separator.base"
   }, others, separatorProps));
 });
 Separator.propTypes = {

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -59,7 +59,8 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
@@ -69,23 +70,24 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _tooltip2.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -160,7 +162,10 @@ TooltipTrigger.propTypes = {
   placement: _propTypes["default"].string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: _propTypes["default"].string
+  trigger: _propTypes["default"].string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: _propTypes["default"].shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',