@pingux/astro 2.30.1-alpha.0 → 2.31.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.js

@@ -42,6 +42,14 @@ var baseBadge = {
   }
 };
 exports.baseBadge = baseBadge;
+var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: 'white !important',
+  outline: '1px solid',
+  outlineColor: 'neutral.80',
+  '& span': {
+    color: 'text.primary'
+  }
+});
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -188,24 +196,25 @@ var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 var _default = {
+  activeStatusBadge: activeStatusBadge,
+  badgeDeleteButton: badgeDeleteButton,
   baseBadge: baseBadge,
+  convenienceDefault: convenienceDefault,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  criticalStatusBadge: criticalStatusBadge,
+  defaultBadge: defaultBadge,
+  deleteButton: deleteButton,
   environmentBadge: environmentBadge,
+  errorCalloutBadge: errorCalloutBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  infoCalloutBadge: infoCalloutBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
   selectedItemBadge: selectedItemBadge,
-  deleteButton: deleteButton,
-  countBadge: countBadge,
-  countNeutral: countNeutral,
-  badgeDeleteButton: badgeDeleteButton,
-  convenienceDefault: convenienceDefault,
-  errorCalloutBadge: errorCalloutBadge,
-  warningCalloutBadge: warningCalloutBadge,
   successCalloutBadge: successCalloutBadge,
-  infoCalloutBadge: infoCalloutBadge,
-  criticalStatusBadge: criticalStatusBadge,
-  warningStatusBadge: warningStatusBadge,
-  healthyStatusBadge: healthyStatusBadge,
-  activeStatusBadge: activeStatusBadge
+  warningCalloutBadge: warningCalloutBadge,
+  warningStatusBadge: warningStatusBadge
 };
 exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -65,6 +65,7 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
+export { NoticeIcon } from './components/Icon/NoticeIcon';
 export { default as IconBadge } from './components/IconBadge';
 export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';

package/lib/cjs/index.js

@@ -54,6 +54,7 @@ var _exportNames = {
   FileInputField: true,
   HelpHint: true,
   Icon: true,
+  NoticeIcon: true,
   IconBadge: true,
   IconButton: true,
   IconButtonToggle: true,
@@ -550,6 +551,12 @@ _Object$defineProperty(exports, "NavBarSection", {
     return _NavBarSection["default"];
   }
 });
+_Object$defineProperty(exports, "NoticeIcon", {
+  enumerable: true,
+  get: function get() {
+    return _NoticeIcon.NoticeIcon;
+  }
+});
 _Object$defineProperty(exports, "NumberField", {
   enumerable: true,
   get: function get() {
@@ -1147,6 +1154,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_Icon)).call(_context25, func
     }
   });
 });
+var _NoticeIcon = require("./components/Icon/NoticeIcon");
 var _IconBadge = _interopRequireWildcard(require("./components/IconBadge"));
 _forEachInstanceProperty(_context26 = _Object$keys(_IconBadge)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,496 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LabelValuePairs = exports.EditPanel = exports.DisplayPanel = exports.ColorBlockButton = exports.AddAttributeButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+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 _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
+var _hooks = require("../hooks");
+var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
+var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
+var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
+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: 'Experimental/PanelContent',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+var data = {
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      isVerified: true
+    }, {
+      label: 'Primary',
+      value: '+1 767-777-3333'
+    }, {
+      label: 'Address',
+      value: '1234 W California St, Denver CO 80101'
+    }]
+  },
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: _UserImage["default"],
+    fields: [{
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Famile Name',
+      value: 'Nepomuceno'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Tile',
+      value: 'Interaction Designer'
+    }]
+  },
+  customAttributes: {
+    label: 'Custom Attributes',
+    key: 'customAttributesKey',
+    fields: [{
+      label: 'T-Shirt Size',
+      value: 'Large'
+    }, {
+      label: 'Example Multi-Value Attribute',
+      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
+    }]
+  },
+  jsonAttributes: {
+    label: 'JSON Attributes',
+    key: 'jsonAttributesKey',
+    badges: ['Address', 'Contact', 'Another Json'],
+    fields: []
+  }
+};
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var children = _ref.children;
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
+      isDefaultOpen: true
+    }),
+    state = _useOverlayPanelState.state;
+  var triggerRef = (0, _react.useRef)();
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: state.isOpen,
+    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, {
+    onPress: state.close
+  })), children));
+};
+var DisplayPanel = function DisplayPanel() {
+  var _context, _context2;
+  var renderProfileTab = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "20px"
+  }, (0, _map["default"])(colorBlockButtons).call(colorBlockButtons, function (tileData) {
+    return (0, _react2.jsx)(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"])(data)).call(_context, 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, {
+      "data-id": data[item].label,
+      key: data[item].key,
+      label: data[item].label,
+      textValue: data[item].label
+    }, data[item].image ? (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md"
+    }, (0, _react2.jsx)(_index.Image, {
+      src: _UserImage["default"],
+      alt: "user"
+    }), (0, _react2.jsx)(LabelValuePairs, {
+      fields: data[item].fields
+    })) : (0, _react2.jsx)(LabelValuePairs, {
+      fields: data[item].fields
+    }), data[item].badges && (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "sm"
+    }, (0, _map["default"])(_context3 = data[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"
+  })));
+  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'
+  }];
+  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+    p: "lg",
+    pt: "xs"
+  }, (0, _react2.jsx)(_index.Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, (0, _extends2["default"])({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  })));
+};
+exports.DisplayPanel = DisplayPanel;
+DisplayPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelContent.displayPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var ColorBlockButton = function ColorBlockButton(_ref2) {
+  var _ref2$buttonData = _ref2.buttonData,
+    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "colorBlock",
+    className: buttonData.isConfigured ? 'is-configured' : ''
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, buttonData.text), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, buttonData.subtext)), (0, _react2.jsx)(_index.Icon, {
+    icon: _PencilIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  }));
+};
+exports.ColorBlockButton = ColorBlockButton;
+var LabelValuePairs = function LabelValuePairs(_ref3) {
+  var _ref3$fields = _ref3.fields,
+    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    maxWidth: "675px"
+  }, (0, _map["default"])(fields).call(fields, function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      isVerified = _ref4.isVerified;
+    return (0, _react2.jsx)(_index.Box, {
+      gap: "xs",
+      key: "".concat(label, "-key")
+    }, (0, _react2.jsx)(_index.Text, {
+      variant: "h4"
+    }, label), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md"
+    }, (0, _react2.jsx)(_index.Text, null, value), isVerified && (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "xs"
+    }, (0, _react2.jsx)(_index.NoticeIcon, {
+      color: "success.dark",
+      status: _statuses["default"].SUCCESS,
+      "aria-label": "".concat(_statuses["default"].SUCCESS, "-icon"),
+      size: "xs"
+    }), (0, _react2.jsx)(_index.Text, {
+      variant: "listSubtitle",
+      color: "success.dark"
+    }, "Verified"))));
+  }));
+};
+exports.LabelValuePairs = LabelValuePairs;
+var editData = {
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: _UserImage["default"],
+    fields: [{
+      label: 'Prefix',
+      value: ''
+    }, {
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Middle Name',
+      value: ''
+    }, {
+      label: 'Family Name',
+      value: 'Nepomuceno'
+    }, {
+      label: 'Suffix',
+      value: ''
+    }, {
+      label: 'Formatted',
+      value: ''
+    }, {
+      label: 'Nickname',
+      value: ''
+    }]
+  },
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      slot: (0, _react2.jsx)(_index.CheckboxField, {
+        mt: "xs",
+        label: "Require Email to be Verified"
+      })
+    }, {
+      label: 'Phone Number',
+      value: '123-456-7890'
+    }, {
+      label: 'Street Address',
+      value: '123 Example St'
+    }, {
+      label: 'Country Code',
+      value: ''
+    }, {
+      label: 'Loality',
+      value: ''
+    }, {
+      label: 'Region',
+      value: ''
+    }, {
+      label: 'Zip Code',
+      value: '12345'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Account ID',
+      value: ''
+    }, {
+      label: 'Type',
+      value: ''
+    }, {
+      label: 'Title',
+      value: ''
+    }]
+  }
+};
+var EditPanel = function EditPanel() {
+  var _context4, _context5, _context6;
+  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+    p: "lg",
+    pb: "0"
+  }, (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"])(editData)).call(_context5, 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, {
+      "data-id": editData[item].label,
+      key: editData[item].key,
+      label: editData[item].label,
+      textValue: editData[item].label
+    }, (0, _react2.jsx)(_index.Box, {
+      gap: "md",
+      width: "500px"
+    }, editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
+      label: "Photo",
+      previewHeight: 40,
+      previewWidth: 40,
+      previewImage: _UserImage["default"]
+    }), (0, _map["default"])(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+      var label = _ref5.label,
+        value = _ref5.value,
+        slot = _ref5.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)(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)(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, null, (0, _react2.jsx)(_index.Button, {
+    variant: "primary"
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    variant: "link"
+  }, "Cancel")));
+};
+exports.EditPanel = EditPanel;
+EditPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelContent.editPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var AddAttributeButton = function AddAttributeButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      position: 'relative',
+      left: '700px',
+      top: '-35px',
+      width: 0,
+      height: 0
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "inlineWithIcon"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    size: "xs"
+  }), "Add"));
+};
+exports.AddAttributeButton = AddAttributeButton;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -108,6 +108,10 @@ var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelContent: {
+    displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
+    editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
+  },
   panelHeader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
     withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',

package/lib/components/Badge/Badge.styles.js

@@ -34,6 +34,14 @@ export var baseBadge = {
     }
   }
 };
+var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: 'white !important',
+  outline: '1px solid',
+  outlineColor: 'neutral.80',
+  '& span': {
+    color: 'text.primary'
+  }
+});
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -178,23 +186,24 @@ var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 export default {
+  activeStatusBadge: activeStatusBadge,
+  badgeDeleteButton: badgeDeleteButton,
   baseBadge: baseBadge,
+  convenienceDefault: convenienceDefault,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  criticalStatusBadge: criticalStatusBadge,
+  defaultBadge: defaultBadge,
+  deleteButton: deleteButton,
   environmentBadge: environmentBadge,
+  errorCalloutBadge: errorCalloutBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  infoCalloutBadge: infoCalloutBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
   selectedItemBadge: selectedItemBadge,
-  deleteButton: deleteButton,
-  countBadge: countBadge,
-  countNeutral: countNeutral,
-  badgeDeleteButton: badgeDeleteButton,
-  convenienceDefault: convenienceDefault,
-  errorCalloutBadge: errorCalloutBadge,
-  warningCalloutBadge: warningCalloutBadge,
   successCalloutBadge: successCalloutBadge,
-  infoCalloutBadge: infoCalloutBadge,
-  criticalStatusBadge: criticalStatusBadge,
-  warningStatusBadge: warningStatusBadge,
-  healthyStatusBadge: healthyStatusBadge,
-  activeStatusBadge: activeStatusBadge
+  warningCalloutBadge: warningCalloutBadge,
+  warningStatusBadge: warningStatusBadge
 };

package/lib/index.js

@@ -69,6 +69,7 @@ export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
+export { NoticeIcon } from './components/Icon/NoticeIcon';
 export { default as IconBadge } from './components/IconBadge';
 export * from './components/IconBadge';
 export { default as IconButton } from './components/IconButton';

package/lib/recipes/PanelContent.stories.js

@@ -0,0 +1,477 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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 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 { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
+import UserImage from '../utils/devUtils/assets/UserImage.png';
+import statuses from '../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/PanelContent',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+var data = {
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      isVerified: true
+    }, {
+      label: 'Primary',
+      value: '+1 767-777-3333'
+    }, {
+      label: 'Address',
+      value: '1234 W California St, Denver CO 80101'
+    }]
+  },
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: UserImage,
+    fields: [{
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Famile Name',
+      value: 'Nepomuceno'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Tile',
+      value: 'Interaction Designer'
+    }]
+  },
+  customAttributes: {
+    label: 'Custom Attributes',
+    key: 'customAttributesKey',
+    fields: [{
+      label: 'T-Shirt Size',
+      value: 'Large'
+    }, {
+      label: 'Example Multi-Value Attribute',
+      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
+    }]
+  },
+  jsonAttributes: {
+    label: 'JSON Attributes',
+    key: 'jsonAttributesKey',
+    badges: ['Address', 'Contact', 'Another Json'],
+    fields: []
+  }
+};
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var children = _ref.children;
+  var _useOverlayPanelState = useOverlayPanelState({
+      isDefaultOpen: true
+    }),
+    state = _useOverlayPanelState.state;
+  var triggerRef = useRef();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), ___EmotionJSX(OverlayPanel, {
+    isOpen: state.isOpen,
+    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, {
+    onPress: state.close
+  })), children));
+};
+export var DisplayPanel = function DisplayPanel() {
+  var _context, _context2;
+  var renderProfileTab = ___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(data)).call(_context, function (item) {
+      return data[item].key;
+    }),
+    labelHeadingTag: "h2"
+  }, _mapInstanceProperty(_context2 = _Object$keys(data)).call(_context2, function (item) {
+    var _context3;
+    return ___EmotionJSX(Item, {
+      "data-id": data[item].label,
+      key: data[item].key,
+      label: data[item].label,
+      textValue: data[item].label
+    }, data[item].image ? ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md"
+    }, ___EmotionJSX(Image, {
+      src: UserImage,
+      alt: "user"
+    }), ___EmotionJSX(LabelValuePairs, {
+      fields: data[item].fields
+    })) : ___EmotionJSX(LabelValuePairs, {
+      fields: data[item].fields
+    }), data[item].badges && ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "sm"
+    }, _mapInstanceProperty(_context3 = data[item].badges).call(_context3, function (badge) {
+      return ___EmotionJSX(Badge, {
+        label: badge,
+        variant: "defaultBadge",
+        key: "".concat(badge, "-key")
+      });
+    })));
+  })), ___EmotionJSX(EditButton, {
+    size: "lg"
+  })));
+  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'
+  }];
+  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+    p: "lg",
+    pt: "xs"
+  }, ___EmotionJSX(Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Tab, _extends({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  })));
+};
+DisplayPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelContent.displayPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var ColorBlockButton = function ColorBlockButton(_ref2) {
+  var _ref2$buttonData = _ref2.buttonData,
+    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
+  return ___EmotionJSX(Button, {
+    variant: "colorBlock",
+    className: buttonData.isConfigured ? 'is-configured' : ''
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, buttonData.text), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, buttonData.subtext)), ___EmotionJSX(Icon, {
+    icon: PencilIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  }));
+};
+export var LabelValuePairs = function LabelValuePairs(_ref3) {
+  var _ref3$fields = _ref3.fields,
+    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    maxWidth: "675px"
+  }, _mapInstanceProperty(fields).call(fields, function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      isVerified = _ref4.isVerified;
+    return ___EmotionJSX(Box, {
+      gap: "xs",
+      key: "".concat(label, "-key")
+    }, ___EmotionJSX(Text, {
+      variant: "h4"
+    }, label), ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "md"
+    }, ___EmotionJSX(Text, null, value), isVerified && ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "xs"
+    }, ___EmotionJSX(NoticeIcon, {
+      color: "success.dark",
+      status: statuses.SUCCESS,
+      "aria-label": "".concat(statuses.SUCCESS, "-icon"),
+      size: "xs"
+    }), ___EmotionJSX(Text, {
+      variant: "listSubtitle",
+      color: "success.dark"
+    }, "Verified"))));
+  }));
+};
+var editData = {
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: UserImage,
+    fields: [{
+      label: 'Prefix',
+      value: ''
+    }, {
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Middle Name',
+      value: ''
+    }, {
+      label: 'Family Name',
+      value: 'Nepomuceno'
+    }, {
+      label: 'Suffix',
+      value: ''
+    }, {
+      label: 'Formatted',
+      value: ''
+    }, {
+      label: 'Nickname',
+      value: ''
+    }]
+  },
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      slot: ___EmotionJSX(CheckboxField, {
+        mt: "xs",
+        label: "Require Email to be Verified"
+      })
+    }, {
+      label: 'Phone Number',
+      value: '123-456-7890'
+    }, {
+      label: 'Street Address',
+      value: '123 Example St'
+    }, {
+      label: 'Country Code',
+      value: ''
+    }, {
+      label: 'Loality',
+      value: ''
+    }, {
+      label: 'Region',
+      value: ''
+    }, {
+      label: 'Zip Code',
+      value: '12345'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Account ID',
+      value: ''
+    }, {
+      label: 'Type',
+      value: ''
+    }, {
+      label: 'Title',
+      value: ''
+    }]
+  }
+};
+export var EditPanel = function EditPanel() {
+  var _context4, _context5, _context6;
+  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+    p: "lg",
+    pb: "0"
+  }, ___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 (_ref5) {
+      var label = _ref5.label,
+        value = _ref5.value,
+        slot = _ref5.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, null, ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "link"
+  }, "Cancel")));
+};
+EditPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelContent.editPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var AddAttributeButton = function AddAttributeButton() {
+  return ___EmotionJSX(Box, {
+    sx: {
+      position: 'relative',
+      left: '700px',
+      top: '-35px',
+      width: 0,
+      height: 0
+    }
+  }, ___EmotionJSX(Button, {
+    variant: "inlineWithIcon"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    size: "xs"
+  }), "Add"));
+};

package/lib/utils/designUtils/figmaLinks.js

@@ -101,6 +101,10 @@ export var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelContent: {
+    displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
+    editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
+  },
   panelHeader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
     withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',

package/package.json

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