@pingux/astro 2.54.0 → 2.55.0-alpha.0

package/lib/recipes/ListAndPanel.stories.js

@@ -1,18 +1,21 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+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, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
-import PencilIcon from '@pingux/mdi-react/PencilIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { useOverlappingMenuHoverState, useOverlayPanelState } from '../hooks';
-import { Box, Icon, IconButton, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, EditButton, Icon, IconButton, Image, ImageUploadField, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, OverlayPanel, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SearchField, SelectField, Separator, Tab, Tabs, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
-import { items } from './items';
+import UserImage from '../utils/devUtils/assets/UserImage.png';
+import { colorBlockButtons, editData, items, personalData } from './items';
+import { AddAttributeButton, ColorBlockButton, LabelValuePairs } from './PanelContent.stories';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List And Panel',
@@ -120,15 +123,16 @@ var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
   }
 }, " Learn more")));
 export 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 = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -138,6 +142,10 @@ export var ListAndPanel = function ListAndPanel() {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedKeys = _useState4[0],
     setSelectedKeys = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isEditPanel = _useState6[0],
+    setEditPanel = _useState6[1];
   var _useOverlayPanelState = useOverlayPanelState(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
@@ -146,6 +154,7 @@ export var ListAndPanel = function ListAndPanel() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
     setSelectedKeys([]);
+    setEditPanel(false);
   };
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
@@ -153,11 +162,234 @@ export var ListAndPanel = function ListAndPanel() {
         return item.email === e.currentKey;
       }));
       setSelectedKeys([e.currentKey]);
+      setEditPanel(false);
       panelState.open();
     } else {
       closePanelHandler();
     }
   };
+  var renderProfileTab = selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "20px"
+  }, _mapInstanceProperty(colorBlockButtons).call(colorBlockButtons, function (tileData) {
+    return ___EmotionJSX(ColorBlockButton, {
+      buttonData: tileData,
+      key: "".concat(tileData.text, "-key")
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: _mapInstanceProperty(_context = _Object$keys(personalData)).call(_context, function (item) {
+      return personalData[item].key;
+    }),
+    labelHeadingTag: "h2"
+  }, _mapInstanceProperty(_context2 = _Object$keys(personalData)).call(_context2, function (item) {
+    var _context3;
+    return ___EmotionJSX(Item, {
+      "data-id": personalData[item].label,
+      key: personalData[item].key,
+      label: personalData[item].label,
+      textValue: personalData[item].label
+    }, personalData[item].image ? ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md"
+    }, ___EmotionJSX(Image, {
+      src: UserImage,
+      alt: "user"
+    }), ___EmotionJSX(LabelValuePairs, {
+      fields: personalData[item].fields
+    })) : ___EmotionJSX(LabelValuePairs, {
+      fields: personalData[item].fields
+    }), personalData[item].badges && ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "sm"
+    }, _mapInstanceProperty(_context3 = personalData[item].badges).call(_context3, function (badge) {
+      return ___EmotionJSX(Badge, {
+        label: badge,
+        variant: "defaultBadge",
+        key: "".concat(badge, "-key")
+      });
+    })));
+  })), ___EmotionJSX(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 && ___EmotionJSX(Box, {
+    sx: sx.tabsWrapper
+  }, ___EmotionJSX(Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, function (item) {
+    return ___EmotionJSX(Tab, _extends({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  }));
+  var renderHeader = function renderHeader() {
+    var selectedItem = items[selectedItemId];
+    if (selectedItem) {
+      var data = {
+        fname: selectedItem.firstName,
+        lname: selectedItem.lastName,
+        subtext: selectedItem.email,
+        icon: selectedItem.icon,
+        personalInfo: {
+          image: personalData.personalInfo.image
+        }
+      };
+      return ___EmotionJSX(OverlayPanelHeader, {
+        headerData: data,
+        isEditPanel: isEditPanel,
+        closePanelHandler: closePanelHandler
+      });
+    }
+    return null;
+  };
+  var renderEditPanel = selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    p: "lg",
+    pb: "50px"
+  }, ___EmotionJSX(Box, {
+    gap: "md",
+    mb: "20px",
+    width: "500px"
+  }, ___EmotionJSX(TextField, {
+    defaultValue: "ednepomuceno",
+    isRequired: true,
+    label: "Username"
+  }), ___EmotionJSX(SelectField, {
+    label: "Population",
+    isRequired: true,
+    defaultSelectedKey: "population"
+  }, ___EmotionJSX(Item, {
+    key: "population"
+  }, "Denver"))), ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: _concatInstanceProperty(_context4 = []).call(_context4, _mapInstanceProperty(_context5 = _Object$keys(editData)).call(_context5, function (item) {
+      return editData[item].key;
+    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
+    labelHeadingTag: "h2"
+  }, _mapInstanceProperty(_context6 = _Object$keys(editData)).call(_context6, function (item) {
+    var _context7;
+    return ___EmotionJSX(Item, {
+      "data-id": editData[item].label,
+      key: editData[item].key,
+      label: editData[item].label,
+      textValue: editData[item].label
+    }, ___EmotionJSX(Box, {
+      gap: "md",
+      width: "500px"
+    }, editData[item].image && ___EmotionJSX(ImageUploadField, {
+      label: "Photo",
+      previewHeight: 40,
+      previewWidth: 40,
+      previewImage: UserImage
+    }), _mapInstanceProperty(_context7 = editData[item].fields).call(_context7, function (_ref) {
+      var label = _ref.label,
+        value = _ref.value,
+        slot = _ref.slot;
+      return ___EmotionJSX(Box, {
+        key: "".concat(label, "-key")
+      }, ___EmotionJSX(TextField, {
+        label: label,
+        defaultValue: value
+      }), slot);
+    })));
+  }), ___EmotionJSX(Item, {
+    "data-id": "preferences",
+    key: "preferencesKey",
+    label: "Preferences",
+    textValue: "Preferences"
+  }, ___EmotionJSX(Box, {
+    gap: "md",
+    width: "500px"
+  }, ___EmotionJSX(SelectField, {
+    label: "Preferred Language",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a Language")), ___EmotionJSX(SelectField, {
+    label: "Locale",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a locale")), ___EmotionJSX(SelectField, {
+    label: "Timezone",
+    defaultSelectedKey: "language"
+  }, ___EmotionJSX(Item, {
+    key: "language"
+  }, "Select a timezone")))), ___EmotionJSX(Item, {
+    "data-id": "customAttributes",
+    key: "customAttributesKey",
+    label: "Custom Attributes",
+    textValue: "Custom Attributes"
+  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a custom attribute")), ___EmotionJSX(Item, {
+    "data-id": "jsonAttributes",
+    key: "jsonAttributesKey",
+    label: "JSON Attributes",
+    textValue: "JSON Attributes"
+  }, ___EmotionJSX(AddAttributeButton, null), ___EmotionJSX(Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a JSON attribute")))), ___EmotionJSX(ButtonBar, {
+    sx: {
+      position: 'fixed',
+      bottom: '0',
+      width: '100%'
+    }
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: function onPress() {
+      return setEditPanel(!isEditPanel);
+    }
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "link",
+    onPress: function onPress() {
+      return setEditPanel(!isEditPanel);
+    }
+  }, "Cancel")));
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
   }, title, ___EmotionJSX(SearchField, {
@@ -175,12 +407,12 @@ export var ListAndPanel = function ListAndPanel() {
     ref: panelTriggerRef,
     selectedKeys: selectedKeys
   }, function (item) {
-    var _context;
+    var _context8;
     return ___EmotionJSX(Item, {
       key: item.email
     }, ___EmotionJSX(ListElement, {
       data: {
-        text: _concatInstanceProperty(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
+        text: _concatInstanceProperty(_context8 = "".concat(item.lastName, ", ")).call(_context8, item.firstName),
         subtext: item.email,
         icon: item.icon
       }
@@ -195,67 +427,30 @@ export var ListAndPanel = function ListAndPanel() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, ___EmotionJSX(PanelHeader, {
-    item: selectedItemId >= 0 ? items[selectedItemId] : [],
-    onClosePanel: closePanelHandler
-  }), ___EmotionJSX(Separator, {
-    margin: 0,
-    sx: sx.separator
-  }), ___EmotionJSX(Box, {
-    sx: sx.tabsWrapper
-  }, ___EmotionJSX(Tabs, {
-    tabListProps: {
-      justifyContent: 'center'
-    },
-    tabPanelProps: {
-      sx: {
-        position: 'relative'
-      }
-    }
-  }, ___EmotionJSX(Tab, {
-    title: "Profile"
-  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
-    variant: "inverted",
-    "aria-label": "pencil icon button",
-    sx: sx.iconButton
-  }, ___EmotionJSX(Icon, {
-    icon: PencilIcon,
-    size: "sm"
-  })), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Full Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "First Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Last Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Email"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
-    title: "Group Memberships"
-  }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
-    title: "Account Info"
-  }, ___EmotionJSX(Text, null, "Account Info")))))));
+  }, renderHeader(), isEditPanel ? renderEditPanel : renderDisplayPanel)));
 };
 ListAndPanel.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.listAndPanel.listAndPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }] // Added to bypass color contrast issue due to virtualizer
+    }
   }
 };
-export var ListElement = function ListElement(_ref) {
-  var _ref$data = _ref.data,
-    data = _ref$data === void 0 ? {
+
+export var ListElement = function ListElement(_ref2) {
+  var _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? {
       subtext: 'dburkitt5@columbia.edu',
       text: 'Burkitt, Nicola',
       icon: AccountIcon
-    } : _ref$data;
+    } : _ref2$data;
   var listItemRef = useRef();
   var _useOverlappingMenuHo = useOverlappingMenuHoverState({
       listItemRef: listItemRef
@@ -284,57 +479,62 @@ export var ListElement = function ListElement(_ref) {
     key: "delete"
   }, "Delete user")));
 };
-export var PanelHeader = function PanelHeader(_ref2) {
-  var _context2;
-  var _ref2$item = _ref2.item,
-    item = _ref2$item === void 0 ? {
-      email: 'dburkitt5@columbia.edu',
-      icon: AccountIcon,
-      firstName: 'John',
-      lastName: 'Doe'
-    } : _ref2$item,
-    onClosePanel = _ref2.onClosePanel;
-  var email = item.email,
-    firstName = item.firstName,
-    lastName = item.lastName;
-  var text = _concatInstanceProperty(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
-  return ___EmotionJSX(Box, {
-    sx: sx.panelHeader.container
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.wrapper
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.data
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    sx: sx.panelHeader.title
-  }, text), ___EmotionJSX(Text, {
-    variant: "subtitle",
-    sx: sx.panelHeader.subtitle
-  }, email))), ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.controls
-  }, ___EmotionJSX(SwitchField, {
-    isDefaultSelected: true,
-    alignSelf: "center",
-    mr: "xs"
-  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
-    "aria-label": "more"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "md"
-  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+var renderBreadcrumbs = function renderBreadcrumbs(headerData) {
+  var _context9;
+  return ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    "aria-label": headerData.fname,
+    href: "https://www.pingidentity.com",
+    key: headerData.fname,
+    variant: "buttons.link"
+  }, _concatInstanceProperty(_context9 = "".concat(headerData.fname, " ")).call(_context9, headerData.lname)), ___EmotionJSX(Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+};
+export 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
+    } : _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: _concatInstanceProperty(_context10 = "".concat(fname, " ")).call(_context10, lname),
+        'aria-label': _concatInstanceProperty(_context11 = "".concat(fname, " ")).call(_context11, lname)
+      }
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs(headerData)
+    }
+  } : {
+    data: {
+      text: _concatInstanceProperty(_context12 = "".concat(lname, ", ")).call(_context12, fname),
+      subtext: subtext,
+      icon: icon
+    }
+  };
+  return ___EmotionJSX(PanelHeader, headerProps, !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(IconButton, {
-    "aria-label": "close icon button",
-    onPress: onClosePanel
-  }, ___EmotionJSX(Icon, {
-    size: "md",
-    icon: CloseIcon
-  })))));
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, {
+    onPress: closePanelHandler
+  }));
 };