@pingux/astro 2.54.0 → 2.55.0-alpha.0

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

@@ -8,22 +8,25 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PanelHeader = exports.ListElement = exports.ListAndPanel = void 0;
+exports["default"] = exports.OverlayPanelHeader = exports.ListElement = exports.ListAndPanel = void 0;
 var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
-var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
-var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks");
+var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
 var _items = require("./items");
+var _PanelContent = require("./PanelContent.stories");
 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; }
@@ -134,15 +137,16 @@ var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
   }
 }, " Learn more")));
 var ListAndPanel = function ListAndPanel() {
-  // Example of items data structure
-  // const items = [
-  //   {
-  //     email: 'dburkitt5@columbia.edu',
-  //     firstName: 'Nicola',
-  //     lastName: 'Burkitt',
-  //     icon: AccountIcon,
-  //   },
-  // ]
+  var _context, _context2, _context4, _context5, _context6;
+  /* Example of items data structure
+  const items = [
+    {
+      email: 'dburkitt5@columbia.edu',
+      firstName: 'Nicola',
+      lastName: 'Burkitt',
+      icon: AccountIcon,
+    },
+  ] */
 
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -152,6 +156,10 @@ var ListAndPanel = function ListAndPanel() {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     selectedKeys = _useState4[0],
     setSelectedKeys = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isEditPanel = _useState6[0],
+    setEditPanel = _useState6[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
@@ -160,6 +168,7 @@ var ListAndPanel = function ListAndPanel() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
     setSelectedKeys([]);
+    setEditPanel(false);
   };
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
@@ -167,11 +176,234 @@ var ListAndPanel = function ListAndPanel() {
         return item.email === e.currentKey;
       }));
       setSelectedKeys([e.currentKey]);
+      setEditPanel(false);
       panelState.open();
     } else {
       closePanelHandler();
     }
   };
+  var renderProfileTab = selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "20px"
+  }, (0, _map["default"])(_items.colorBlockButtons).call(_items.colorBlockButtons, function (tileData) {
+    return (0, _react2.jsx)(_PanelContent.ColorBlockButton, {
+      buttonData: tileData,
+      key: "".concat(tileData.text, "-key")
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, (0, _react2.jsx)(_index.AccordionGroup, {
+    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(_items.personalData)).call(_context, function (item) {
+      return _items.personalData[item].key;
+    }),
+    labelHeadingTag: "h2"
+  }, (0, _map["default"])(_context2 = (0, _keys["default"])(_items.personalData)).call(_context2, function (item) {
+    var _context3;
+    return (0, _react2.jsx)(_reactStately.Item, {
+      "data-id": _items.personalData[item].label,
+      key: _items.personalData[item].key,
+      label: _items.personalData[item].label,
+      textValue: _items.personalData[item].label
+    }, _items.personalData[item].image ? (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md"
+    }, (0, _react2.jsx)(_index.Image, {
+      src: _UserImage["default"],
+      alt: "user"
+    }), (0, _react2.jsx)(_PanelContent.LabelValuePairs, {
+      fields: _items.personalData[item].fields
+    })) : (0, _react2.jsx)(_PanelContent.LabelValuePairs, {
+      fields: _items.personalData[item].fields
+    }), _items.personalData[item].badges && (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "sm"
+    }, (0, _map["default"])(_context3 = _items.personalData[item].badges).call(_context3, function (badge) {
+      return (0, _react2.jsx)(_index.Badge, {
+        label: badge,
+        variant: "defaultBadge",
+        key: "".concat(badge, "-key")
+      });
+    })));
+  })), (0, _react2.jsx)(_index.EditButton, {
+    size: "lg",
+    onPress: function onPress() {
+      return setEditPanel(!isEditPanel);
+    }
+  })));
+  var tabs = [{
+    name: 'Profile',
+    children: renderProfileTab
+  }, {
+    name: 'Groups',
+    children: 'Groups'
+  }, {
+    name: 'Roles',
+    children: 'Roles'
+  }, {
+    name: 'Services',
+    list: [{
+      key: 'service1',
+      name: 'Service 1',
+      children: 'Service 1',
+      role: 'listitem'
+    }, {
+      key: 'service2',
+      name: 'Service 2',
+      children: 'Service 2',
+      role: 'listitem'
+    }]
+  }, {
+    name: 'API',
+    children: 'API'
+  }];
+  var renderDisplayPanel = selectedItemId >= 0 && (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabsWrapper
+  }, (0, _react2.jsx)(_index.Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, (0, _extends2["default"])({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  }));
+  var renderHeader = function renderHeader() {
+    var selectedItem = _items.items[selectedItemId];
+    if (selectedItem) {
+      var data = {
+        fname: selectedItem.firstName,
+        lname: selectedItem.lastName,
+        subtext: selectedItem.email,
+        icon: selectedItem.icon,
+        personalInfo: {
+          image: _items.personalData.personalInfo.image
+        }
+      };
+      return (0, _react2.jsx)(OverlayPanelHeader, {
+        headerData: data,
+        isEditPanel: isEditPanel,
+        closePanelHandler: closePanelHandler
+      });
+    }
+    return null;
+  };
+  var renderEditPanel = selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    p: "lg",
+    pb: "50px"
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    mb: "20px",
+    width: "500px"
+  }, (0, _react2.jsx)(_index.TextField, {
+    defaultValue: "ednepomuceno",
+    isRequired: true,
+    label: "Username"
+  }), (0, _react2.jsx)(_index.SelectField, {
+    label: "Population",
+    isRequired: true,
+    defaultSelectedKey: "population"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "population"
+  }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
+    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(_items.editData)).call(_context5, function (item) {
+      return _items.editData[item].key;
+    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
+    labelHeadingTag: "h2"
+  }, (0, _map["default"])(_context6 = (0, _keys["default"])(_items.editData)).call(_context6, function (item) {
+    var _context7;
+    return (0, _react2.jsx)(_reactStately.Item, {
+      "data-id": _items.editData[item].label,
+      key: _items.editData[item].key,
+      label: _items.editData[item].label,
+      textValue: _items.editData[item].label
+    }, (0, _react2.jsx)(_index.Box, {
+      gap: "md",
+      width: "500px"
+    }, _items.editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
+      label: "Photo",
+      previewHeight: 40,
+      previewWidth: 40,
+      previewImage: _UserImage["default"]
+    }), (0, _map["default"])(_context7 = _items.editData[item].fields).call(_context7, function (_ref) {
+      var label = _ref.label,
+        value = _ref.value,
+        slot = _ref.slot;
+      return (0, _react2.jsx)(_index.Box, {
+        key: "".concat(label, "-key")
+      }, (0, _react2.jsx)(_index.TextField, {
+        label: label,
+        defaultValue: value
+      }), slot);
+    })));
+  }), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "preferences",
+    key: "preferencesKey",
+    label: "Preferences",
+    textValue: "Preferences"
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    width: "500px"
+  }, (0, _react2.jsx)(_index.SelectField, {
+    label: "Preferred Language",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
+    label: "Locale",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
+    label: "Timezone",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "customAttributes",
+    key: "customAttributesKey",
+    label: "Custom Attributes",
+    textValue: "Custom Attributes"
+  }, (0, _react2.jsx)(_PanelContent.AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "jsonAttributes",
+    key: "jsonAttributesKey",
+    label: "JSON Attributes",
+    textValue: "JSON Attributes"
+  }, (0, _react2.jsx)(_PanelContent.AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a JSON attribute")))), (0, _react2.jsx)(_index.ButtonBar, {
+    sx: {
+      position: 'fixed',
+      bottom: '0',
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: function onPress() {
+      return setEditPanel(!isEditPanel);
+    }
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: function onPress() {
+      return setEditPanel(!isEditPanel);
+    }
+  }, "Cancel")));
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
   }, title, (0, _react2.jsx)(_index.SearchField, {
@@ -189,12 +421,12 @@ var ListAndPanel = function ListAndPanel() {
     ref: panelTriggerRef,
     selectedKeys: selectedKeys
   }, function (item) {
-    var _context;
+    var _context8;
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.email
     }, (0, _react2.jsx)(ListElement, {
       data: {
-        text: (0, _concat["default"])(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
+        text: (0, _concat["default"])(_context8 = "".concat(item.lastName, ", ")).call(_context8, item.firstName),
         subtext: item.email,
         icon: item.icon
       }
@@ -209,68 +441,31 @@ var ListAndPanel = function ListAndPanel() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(PanelHeader, {
-    item: selectedItemId >= 0 ? _items.items[selectedItemId] : [],
-    onClosePanel: closePanelHandler
-  }), (0, _react2.jsx)(_index.Separator, {
-    margin: 0,
-    sx: sx.separator
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_index.Tabs, {
-    tabListProps: {
-      justifyContent: 'center'
-    },
-    tabPanelProps: {
-      sx: {
-        position: 'relative'
-      }
-    }
-  }, (0, _react2.jsx)(_index.Tab, {
-    title: "Profile"
-  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
-    variant: "inverted",
-    "aria-label": "pencil icon button",
-    sx: sx.iconButton
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PencilIcon["default"],
-    size: "sm"
-  })), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel
-  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue
-  }, _items.items[selectedItemId].firstName, ' ', _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel
-  }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue
-  }, _items.items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel
-  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue
-  }, _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemLabel
-  }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.itemValue
-  }, _items.items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
-    title: "Group Memberships"
-  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
-    title: "Account Info"
-  }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
+  }, renderHeader(), isEditPanel ? renderEditPanel : renderDisplayPanel)));
 };
 exports.ListAndPanel = ListAndPanel;
 ListAndPanel.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.listAndPanel.listAndPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }] // Added to bypass color contrast issue due to virtualizer
+    }
   }
 };
-var ListElement = function ListElement(_ref) {
-  var _ref$data = _ref.data,
-    data = _ref$data === void 0 ? {
+
+var ListElement = function ListElement(_ref2) {
+  var _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? {
       subtext: 'dburkitt5@columbia.edu',
       text: 'Burkitt, Nicola',
       icon: _AccountIcon["default"]
-    } : _ref$data;
+    } : _ref2$data;
   var listItemRef = (0, _react.useRef)();
   var _useOverlappingMenuHo = (0, _hooks.useOverlappingMenuHoverState)({
       listItemRef: listItemRef
@@ -300,58 +495,63 @@ var ListElement = function ListElement(_ref) {
   }, "Delete user")));
 };
 exports.ListElement = ListElement;
-var PanelHeader = function PanelHeader(_ref2) {
-  var _context2;
-  var _ref2$item = _ref2.item,
-    item = _ref2$item === void 0 ? {
-      email: 'dburkitt5@columbia.edu',
-      icon: _AccountIcon["default"],
-      firstName: 'John',
-      lastName: 'Doe'
-    } : _ref2$item,
-    onClosePanel = _ref2.onClosePanel;
-  var email = item.email,
-    firstName = item.firstName,
-    lastName = item.lastName;
-  var text = (0, _concat["default"])(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
-  return (0, _react2.jsx)(_index.Box, {
-    sx: sx.panelHeader.container
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.panelHeader.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.panelHeader.data
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: sx.panelHeader.title
-  }, text), (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    sx: sx.panelHeader.subtitle
-  }, email))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.panelHeader.controls
-  }, (0, _react2.jsx)(_index.SwitchField, {
-    isDefaultSelected: true,
-    alignSelf: "center",
-    mr: "xs"
-  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "more"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "md"
-  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
+var renderBreadcrumbs = function renderBreadcrumbs(headerData) {
+  var _context9;
+  return (0, _react2.jsx)(_index.Breadcrumbs, {
+    icon: _ChevronRightIcon["default"]
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    "aria-label": headerData.fname,
+    href: "https://www.pingidentity.com",
+    key: headerData.fname,
+    variant: "buttons.link"
+  }, (0, _concat["default"])(_context9 = "".concat(headerData.fname, " ")).call(_context9, headerData.lname)), (0, _react2.jsx)(_reactStately.Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+};
+var OverlayPanelHeader = function OverlayPanelHeader(_ref3) {
+  var _context10, _context11, _context12;
+  var _ref3$headerData = _ref3.headerData,
+    headerData = _ref3$headerData === void 0 ? {
+      fname: 'John',
+      lname: 'Doe',
+      subtext: 'dburkitt5@columbia.edu',
+      icon: _AccountIcon["default"]
+    } : _ref3$headerData,
+    isEditPanel = _ref3.isEditPanel,
+    closePanelHandler = _ref3.closePanelHandler;
+  var fname = headerData.fname,
+    lname = headerData.lname,
+    subtext = headerData.subtext,
+    icon = headerData.icon,
+    personalInfo = headerData.personalInfo;
+  var headerProps = isEditPanel ? {
+    data: {
+      image: {
+        src: personalInfo.image,
+        alt: (0, _concat["default"])(_context10 = "".concat(fname, " ")).call(_context10, lname),
+        'aria-label': (0, _concat["default"])(_context11 = "".concat(fname, " ")).call(_context11, lname)
+      }
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs(headerData)
+    }
+  } : {
+    data: {
+      text: (0, _concat["default"])(_context12 = "".concat(lname, ", ")).call(_context12, fname),
+      subtext: subtext,
+      icon: icon
+    }
+  };
+  return (0, _react2.jsx)(_index.PanelHeader, headerProps, !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "disable"
   }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete"
-  }, "Delete user"))), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "close icon button",
-    onPress: onClosePanel
-  }, (0, _react2.jsx)(_index.Icon, {
-    size: "md",
-    icon: _CloseIcon["default"]
-  })))));
+  }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+    onPress: closePanelHandler
+  }));
 };
-exports.PanelHeader = PanelHeader;
+exports.OverlayPanelHeader = OverlayPanelHeader;