@pingux/astro 1.11.1-alpha.1 → 1.12.0-alpha.2

package/lib/cjs/components/Image/Image.js

@@ -88,7 +88,12 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      setLoadedSuccessfully = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      hasTimedOut = _useState6[0],
+      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -99,11 +104,17 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isLoadingRef.current = newState;
   };
 
-  var _useState5 = (0, _react.useState)(fallbackImage || src),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      imgSrc = _useState6[0],
-      setImgSrc = _useState6[1];
+  var setImgSrc = function setImgSrc() {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+      return fallbackImage;
+    }
+
+    return src;
+  };
 
+  var imgSrc = (0, _react.useMemo)(function () {
+    return setImgSrc();
+  }, [src, isLoading, hasTimedOut]);
   var imgRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -126,20 +137,18 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(src);
       setLoadedSuccessfully(true);
     }
   };
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
-    setImgSrc(fallbackImage || null);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(fallbackImage || null);
+      setHasTimedOut(true);
     }
   };
 

package/lib/cjs/components/Image/Image.stories.js

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.UpdatingImageSrc = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
@@ -22,8 +30,14 @@ var _imageConstants = require("./imageConstants");
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Image',
   component: _["default"],
@@ -130,4 +144,33 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   });
 };
 
-exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+
+var UpdatingImageSrc = function UpdatingImageSrc() {
+  var _useState = (0, _react.useState)(_imageConstants.chiefIdentityChampions),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var handleButtonPress = function handleButtonPress() {
+    var src = image === _imageConstants.pingImg ? _imageConstants.chiefIdentityChampions : _imageConstants.pingImg;
+    setImage(src);
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: '200px'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: handleButtonPress
+  }, "Change Image"), (0, _react2.jsx)(_["default"], {
+    src: image,
+    sx: {
+      width: '200px',
+      height: '200px',
+      mt: '25px'
+    }
+  }));
+};
+
+exports.UpdatingImageSrc = UpdatingImageSrc;

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

@@ -48,7 +48,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -96,6 +101,26 @@ test('image shows disabled status', function () {
 
   expect(img).toHaveClass('is-disabled');
 });
+test('image source is able to be changed', function () {
+  var src2 = 'second-src';
+
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  getComponent({
+    src: src2
+  }, {
+    renderFn: rerender
+  });
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', src2);
+});
 describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();

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

@@ -20,12 +20,16 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _NavBarContext = require("../../context/NavBarContext");
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
+var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -43,23 +47,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  */
 var NavBar = function NavBar(props) {
-  var defaultSelectedKey = props.defaultSelectedKey,
+  var defaultSelectedKeys = props.defaultSelectedKeys,
+      selectedKeysProp = props.selectedKeys,
+      setSelectedKeysProp = props.setSelectedKeys,
       defaultExpandedKeys = props.defaultExpandedKeys;
 
-  var _useState = (0, _react.useState)(defaultSelectedKey),
+  var _useState = (0, _react.useState)(defaultExpandedKeys),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
+      expandedKeys = _useState2[0],
+      setExpandedKeys = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(defaultExpandedKeys),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      expandedKeys = _useState4[0],
-      setExpandedKeys = _useState4[1];
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeysProp, defaultSelectedKeys),
+      _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+      selectedKeys = _useProgressiveState2[0],
+      setSelectedKeys = _useProgressiveState2[1];
 
   return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
     value: {
-      selectedKey: selectedKey,
-      setSelectedKey: setSelectedKey,
+      selectedKey: selectedKeys,
+      setSelectedKey: setSelectedKeysProp || setSelectedKeys,
       expandedKeys: expandedKeys,
       setExpandedKeys: setExpandedKeys
     }
@@ -72,13 +78,15 @@ var NavBar = function NavBar(props) {
 
 NavBar.propTypes = {
   /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: _isIterable.isIterableProp,
+  defaultSelectedKeys: _isIterable.isIterableProp,
 
   /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: _isIterable.isIterableProp
+  defaultExpandedKeys: _isIterable.isIterableProp,
+  selectedKeys: _isIterable.isIterableProp,
+  setSelectedKeys: _propTypes["default"].func
 };
 NavBar.defaultProps = {
-  defaultSelectedKey: []
+  defaultSelectedKeys: []
 };
 var _default = NavBar;
 exports["default"] = _default;

package/lib/cjs/styles/variants/text.js

@@ -351,6 +351,11 @@ var text = {
     color: 'text.primary',
     fontFamily: 'standard'
   }),
+  textEllipsis: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
   title: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'xx',
     fontWeight: 1,

package/lib/cjs/templates/Nav/HeaderBar.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _HelpCircleOutlineIcon = _interopRequireDefault(require("mdi-react/HelpCircleOutlineIcon"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _CompassOutlineIcon = _interopRequireDefault(require("mdi-react/CompassOutlineIcon"));
+
+var _EnvironmentBreadcrumb = require("../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories");
+
+var _index = require("../../index");
+
+var _NavData = require("./NavData");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CustomPopoverMenu = function CustomPopoverMenu() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    onOpenChange: setIsOpen
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "default icon button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuDownIcon["default"],
+    size: 15,
+    color: "neutral.30",
+    sx: isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "option1"
+  }, "First Option"), (0, _react2.jsx)(_index.Item, {
+    key: "option2"
+  }, "Second Option"), (0, _react2.jsx)(_index.Item, {
+    key: "option3"
+  }, "Third Option"))));
+};
+
+var HeaderBar = function HeaderBar() {
+  var Rectangle = function Rectangle() {
+    return (0, _react2.jsx)(_index.Box, {
+      width: "1px",
+      height: 30,
+      bg: "neutral.80",
+      mx: 25
+    });
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    ml: 230,
+    px: 15,
+    bg: "white",
+    height: "40px",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, (0, _react2.jsx)(_EnvironmentBreadcrumb.WithSections, null), (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _HelpCircleOutlineIcon["default"],
+    size: 20,
+    color: "neutral.30"
+  }), (0, _react2.jsx)(CustomPopoverMenu, null)), (0, _react2.jsx)(Rectangle, null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CompassOutlineIcon["default"],
+    size: 20
+  }), (0, _react2.jsx)(_index.Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Explore"), (0, _react2.jsx)(CustomPopoverMenu, null)), (0, _react2.jsx)(Rectangle, null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _NavData.PersonIcon,
+    size: 20
+  }), (0, _react2.jsx)(_index.Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Alyssa Chambers"), (0, _react2.jsx)(CustomPopoverMenu, null))));
+};
+
+var _default = HeaderBar;
+exports["default"] = _default;

package/lib/cjs/templates/Nav/Nav.stories.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+
+var _index = require("../../index");
+
+var _NavData = require("./NavData");
+
+var _HeaderBar = _interopRequireDefault(require("./HeaderBar"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Templates/Nav',
+  parameters: {
+    backgrounds: {
+      "default": 'accent',
+      values: [{
+        name: 'accent',
+        value: '#F7F8FD'
+      }]
+    }
+  }
+};
+exports["default"] = _default;
+
+var SideNav = function SideNav(_ref) {
+  var setSelectedKeys = _ref.setSelectedKeys,
+      selectedKeys = _ref.selectedKeys;
+  return (0, _react2.jsx)(_index.NavBar, {
+    setSelectedKeys: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }, (0, _react2.jsx)(_index.Box, {
+    padding: "md"
+  }, (0, _react2.jsx)(_index.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link"
+  }, _NavData.logo)), (0, _react2.jsx)(_index.Separator, {
+    marginTop: "lg",
+    marginBottom: "sm"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, (0, _react2.jsx)(_index.NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: _GlobeIcon["default"]
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.data,
+    hasSeparator: true
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.secondData,
+    hasSeparator: true,
+    title: "PingOne Services"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.thirdData
+  })));
+};
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('Overview'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return (0, _react2.jsx)(_index.Box, {
+    bg: "accent.99",
+    height: "100vh"
+  }, (0, _react2.jsx)(SideNav, {
+    setSelectedKeys: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }), (0, _react2.jsx)(_HeaderBar["default"], null), (0, _react2.jsx)(_index.Box, {
+    ml: 255,
+    mt: 25
+  }, (0, _react2.jsx)(_index.Text, {
+    as: "h1",
+    variant: "title",
+    sx: {
+      fontWeight: 3
+    }
+  }, selectedKeys)));
+};
+
+exports.Default = Default;
+Default.decorators = [function (Story) {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      margin: '-50px'
+    }
+  }, (0, _react2.jsx)(Story, null));
+}];
+Default.parameters = {
+  layout: 'fullscreen'
+};