@pingux/astro 2.40.0-alpha.0 → 2.40.0-alpha.1

package/lib/cjs/recipes/PanelContent.stories.js

@@ -10,11 +10,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.LabelValuePairs = exports.EditPanel = exports.DisplayPanel = exports.ColorBlockButton = exports.AddAttributeButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
@@ -107,12 +107,46 @@ var data = {
   }
 };
 var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
+  var _context, _context2, _context3;
+  var children = _ref.children,
+    isEditPanel = _ref.isEditPanel;
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
       isDefaultOpen: true
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = (0, _react.useRef)();
+  var personalInfo = data.personalInfo;
+  var fields = personalInfo.fields;
+  var renderBreadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
+    icon: _ChevronRightIcon["default"]
+  }, (0, _react2.jsx)(_index.Item, {
+    "aria-label": personalInfo.label,
+    href: "https://www.pingidentity.com",
+    key: personalInfo.key,
+    variant: "buttons.link"
+  }, (0, _concat["default"])(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), (0, _react2.jsx)(_index.Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+  var image = {
+    src: _UserImage["default"],
+    alt: 'user image'
+  };
+  var panelHeaderProps = isEditPanel ? {
+    data: {
+      image: image
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs
+    }
+  } : {
+    data: {
+      image: image,
+      text: (0, _concat["default"])(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
+      subtext: (0, _concat["default"])(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+    }
+  };
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
     ref: triggerRef,
     onPress: state.open
@@ -121,21 +155,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     isTransitioning: state.isTransitioning,
     size: "large",
     p: "0"
-  }, (0, _react2.jsx)(_index.PanelHeader, {
-    data: {
-      image: {
-        src: _UserImage["default"],
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+  }, (0, _react2.jsx)(_index.PanelHeader, panelHeaderProps, !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_index.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_index.Item, {
+    key: "delete"
+  }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
     onPress: state.close
   })), children));
 };
 var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
+  var _context4, _context5;
   var renderProfileTab = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
@@ -149,13 +180,13 @@ var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(data)).call(_context, function (item) {
+    defaultExpandedKeys: (0, _map["default"])(_context4 = (0, _keys["default"])(data)).call(_context4, function (item) {
       return data[item].key;
     }),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context2 = (0, _keys["default"])(data)).call(_context2, function (item) {
-    var _context3;
-    return (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _map["default"])(_context5 = (0, _keys["default"])(data)).call(_context5, function (item) {
+    var _context6;
+    return (0, _react2.jsx)(_index.Item, {
       "data-id": data[item].label,
       key: data[item].key,
       label: data[item].label,
@@ -173,7 +204,7 @@ var DisplayPanel = function DisplayPanel() {
     }), data[item].badges && (0, _react2.jsx)(_index.Box, {
       isRow: true,
       gap: "sm"
-    }, (0, _map["default"])(_context3 = data[item].badges).call(_context3, function (badge) {
+    }, (0, _map["default"])(_context6 = data[item].badges).call(_context6, function (badge) {
       return (0, _react2.jsx)(_index.Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -366,8 +397,10 @@ var editData = {
   }
 };
 var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+  var _context7, _context8, _context9;
+  return (0, _react2.jsx)(OverlayWrapper, {
+    isEditPanel: true
+  }, (0, _react2.jsx)(_index.Box, {
     p: "lg",
     pb: "0"
   }, (0, _react2.jsx)(_index.Box, {
@@ -382,16 +415,16 @@ var EditPanel = function EditPanel() {
     label: "Population",
     isRequired: true,
     defaultSelectedKey: "population"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "population"
   }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(editData)).call(_context5, function (item) {
+    defaultExpandedKeys: (0, _concat["default"])(_context7 = []).call(_context7, (0, _map["default"])(_context8 = (0, _keys["default"])(editData)).call(_context8, function (item) {
       return editData[item].key;
     }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context6 = (0, _keys["default"])(editData)).call(_context6, function (item) {
-    var _context7;
-    return (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _map["default"])(_context9 = (0, _keys["default"])(editData)).call(_context9, function (item) {
+    var _context10;
+    return (0, _react2.jsx)(_index.Item, {
       "data-id": editData[item].label,
       key: editData[item].key,
       label: editData[item].label,
@@ -404,7 +437,7 @@ var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: _UserImage["default"]
-    }), (0, _map["default"])(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+    }), (0, _map["default"])(_context10 = editData[item].fields).call(_context10, function (_ref5) {
       var label = _ref5.label,
         value = _ref5.value,
         slot = _ref5.slot;
@@ -415,7 +448,7 @@ var EditPanel = function EditPanel() {
         defaultValue: value
       }), slot);
     })));
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     "data-id": "preferences",
     key: "preferencesKey",
     label: "Preferences",
@@ -426,19 +459,19 @@ var EditPanel = function EditPanel() {
   }, (0, _react2.jsx)(_index.SelectField, {
     label: "Preferred Language",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
   }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
     label: "Locale",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
   }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
     label: "Timezone",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
-  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Select a timezone")))), (0, _react2.jsx)(_index.Item, {
     "data-id": "customAttributes",
     key: "customAttributesKey",
     label: "Custom Attributes",
@@ -447,7 +480,7 @@ var EditPanel = function EditPanel() {
     fontWeight: "-1",
     fontSize: "md",
     textAlign: "center"
-  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_index.Item, {
     "data-id": "jsonAttributes",
     key: "jsonAttributesKey",
     label: "JSON Attributes",

package/lib/recipes/PanelContent.stories.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useRef } from 'react';
-import { Item } from 'react-stately';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import PencilIcon from '@pingux/mdi-react/PencilIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { useOverlayPanelState } from '../hooks';
-import { AccordionGroup, Badge, Box, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, Item, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.ts';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
 import statuses from '../utils/devUtils/constants/statuses';
@@ -93,12 +93,46 @@ var data = {
   }
 };
 var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
+  var _context, _context2, _context3;
+  var children = _ref.children,
+    isEditPanel = _ref.isEditPanel;
   var _useOverlayPanelState = useOverlayPanelState({
       isDefaultOpen: true
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = useRef();
+  var personalInfo = data.personalInfo;
+  var fields = personalInfo.fields;
+  var renderBreadcrumbs = ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    "aria-label": personalInfo.label,
+    href: "https://www.pingidentity.com",
+    key: personalInfo.key,
+    variant: "buttons.link"
+  }, _concatInstanceProperty(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), ___EmotionJSX(Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+  var image = {
+    src: UserImage,
+    alt: 'user image'
+  };
+  var panelHeaderProps = isEditPanel ? {
+    data: {
+      image: image
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs
+    }
+  } : {
+    data: {
+      image: image,
+      text: _concatInstanceProperty(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
+      subtext: _concatInstanceProperty(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+    }
+  };
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     ref: triggerRef,
     onPress: state.open
@@ -107,21 +141,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     isTransitioning: state.isTransitioning,
     size: "large",
     p: "0"
-  }, ___EmotionJSX(PanelHeader, {
-    data: {
-      image: {
-        src: UserImage,
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null), ___EmotionJSX(PanelHeaderCloseButton, {
+  }, ___EmotionJSX(PanelHeader, panelHeaderProps, !isEditPanel && ___EmotionJSX(PanelHeaderSwitchField, null), !isEditPanel && ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, {
     onPress: state.close
   })), children));
 };
 export var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
+  var _context4, _context5;
   var renderProfileTab = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
@@ -135,12 +166,12 @@ export var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _mapInstanceProperty(_context = _Object$keys(data)).call(_context, function (item) {
+    defaultExpandedKeys: _mapInstanceProperty(_context4 = _Object$keys(data)).call(_context4, function (item) {
       return data[item].key;
     }),
     labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context2 = _Object$keys(data)).call(_context2, function (item) {
-    var _context3;
+  }, _mapInstanceProperty(_context5 = _Object$keys(data)).call(_context5, function (item) {
+    var _context6;
     return ___EmotionJSX(Item, {
       "data-id": data[item].label,
       key: data[item].key,
@@ -159,7 +190,7 @@ export var DisplayPanel = function DisplayPanel() {
     }), data[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
-    }, _mapInstanceProperty(_context3 = data[item].badges).call(_context3, function (badge) {
+    }, _mapInstanceProperty(_context6 = data[item].badges).call(_context6, function (badge) {
       return ___EmotionJSX(Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -349,8 +380,10 @@ var editData = {
   }
 };
 export var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+  var _context7, _context8, _context9;
+  return ___EmotionJSX(OverlayWrapper, {
+    isEditPanel: true
+  }, ___EmotionJSX(Box, {
     p: "lg",
     pb: "0"
   }, ___EmotionJSX(Box, {
@@ -368,12 +401,12 @@ export var EditPanel = function EditPanel() {
   }, ___EmotionJSX(Item, {
     key: "population"
   }, "Denver"))), ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _concatInstanceProperty(_context4 = []).call(_context4, _mapInstanceProperty(_context5 = _Object$keys(editData)).call(_context5, function (item) {
+    defaultExpandedKeys: _concatInstanceProperty(_context7 = []).call(_context7, _mapInstanceProperty(_context8 = _Object$keys(editData)).call(_context8, function (item) {
       return editData[item].key;
     }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
     labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context6 = _Object$keys(editData)).call(_context6, function (item) {
-    var _context7;
+  }, _mapInstanceProperty(_context9 = _Object$keys(editData)).call(_context9, function (item) {
+    var _context10;
     return ___EmotionJSX(Item, {
       "data-id": editData[item].label,
       key: editData[item].key,
@@ -387,7 +420,7 @@ export var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: UserImage
-    }), _mapInstanceProperty(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+    }), _mapInstanceProperty(_context10 = editData[item].fields).call(_context10, function (_ref5) {
       var label = _ref5.label,
         value = _ref5.value,
         slot = _ref5.slot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.40.0-alpha.0",
+  "version": "2.40.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",