@pingux/astro 2.54.0 → 2.55.0-alpha.0

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

@@ -22,6 +22,7 @@ var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks.ts");
 var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
 var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
+var _items = require("./items");
 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; }
@@ -36,76 +37,6 @@ var _default = {
   }
 };
 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 _context, _context2, _context3;
   var children = _ref.children,
@@ -115,7 +46,7 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = (0, _react.useRef)();
-  var personalInfo = data.personalInfo;
+  var personalInfo = _items.personalData.personalInfo;
   var fields = personalInfo.fields;
   var renderBreadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
@@ -171,7 +102,7 @@ var DisplayPanel = function DisplayPanel() {
     isRow: true,
     gap: "md",
     mb: "20px"
-  }, (0, _map["default"])(colorBlockButtons).call(colorBlockButtons, function (tileData) {
+  }, (0, _map["default"])(_items.colorBlockButtons).call(_items.colorBlockButtons, function (tileData) {
     return (0, _react2.jsx)(ColorBlockButton, {
       buttonData: tileData,
       key: "".concat(tileData.text, "-key")
@@ -180,31 +111,31 @@ var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _map["default"])(_context4 = (0, _keys["default"])(data)).call(_context4, function (item) {
-      return data[item].key;
+    defaultExpandedKeys: (0, _map["default"])(_context4 = (0, _keys["default"])(_items.personalData)).call(_context4, function (item) {
+      return _items.personalData[item].key;
     }),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context5 = (0, _keys["default"])(data)).call(_context5, function (item) {
+  }, (0, _map["default"])(_context5 = (0, _keys["default"])(_items.personalData)).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,
-      textValue: data[item].label
-    }, data[item].image ? (0, _react2.jsx)(_index.Box, {
+      "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)(LabelValuePairs, {
-      fields: data[item].fields
+      fields: _items.personalData[item].fields
     })) : (0, _react2.jsx)(LabelValuePairs, {
-      fields: data[item].fields
-    }), data[item].badges && (0, _react2.jsx)(_index.Box, {
+      fields: _items.personalData[item].fields
+    }), _items.personalData[item].badges && (0, _react2.jsx)(_index.Box, {
       isRow: true,
       gap: "sm"
-    }, (0, _map["default"])(_context6 = data[item].badges).call(_context6, function (badge) {
+    }, (0, _map["default"])(_context6 = _items.personalData[item].badges).call(_context6, function (badge) {
       return (0, _react2.jsx)(_index.Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -274,7 +205,7 @@ DisplayPanel.parameters = {
 };
 var ColorBlockButton = function ColorBlockButton(_ref2) {
   var _ref2$buttonData = _ref2.buttonData,
-    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
+    buttonData = _ref2$buttonData === void 0 ? _items.colorBlockButtons[0] : _ref2$buttonData;
   return (0, _react2.jsx)(_index.Button, {
     variant: "colorBlock",
     className: buttonData.isConfigured ? 'is-configured' : ''
@@ -292,7 +223,7 @@ var ColorBlockButton = function ColorBlockButton(_ref2) {
 exports.ColorBlockButton = ColorBlockButton;
 var LabelValuePairs = function LabelValuePairs(_ref3) {
   var _ref3$fields = _ref3.fields,
-    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
+    fields = _ref3$fields === void 0 ? _items.personalData.contactInfo.fields : _ref3$fields;
   return (0, _react2.jsx)(_index.Box, {
     gap: "md",
     maxWidth: "675px"
@@ -323,79 +254,6 @@ var LabelValuePairs = function LabelValuePairs(_ref3) {
   }));
 };
 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 _context7, _context8, _context9;
   return (0, _react2.jsx)(OverlayWrapper, {
@@ -418,26 +276,26 @@ var EditPanel = function EditPanel() {
   }, (0, _react2.jsx)(_index.Item, {
     key: "population"
   }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _concat["default"])(_context7 = []).call(_context7, (0, _map["default"])(_context8 = (0, _keys["default"])(editData)).call(_context8, function (item) {
-      return editData[item].key;
+    defaultExpandedKeys: (0, _concat["default"])(_context7 = []).call(_context7, (0, _map["default"])(_context8 = (0, _keys["default"])(_items.editData)).call(_context8, function (item) {
+      return _items.editData[item].key;
     }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context9 = (0, _keys["default"])(editData)).call(_context9, function (item) {
+  }, (0, _map["default"])(_context9 = (0, _keys["default"])(_items.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,
-      textValue: editData[item].label
+      "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"
-    }, editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
+    }, _items.editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
       label: "Photo",
       previewHeight: 40,
       previewWidth: 40,
       previewImage: _UserImage["default"]
-    }), (0, _map["default"])(_context10 = editData[item].fields).call(_context10, function (_ref5) {
+    }), (0, _map["default"])(_context10 = _items.editData[item].fields).call(_context10, function (_ref5) {
       var label = _ref5.label,
         value = _ref5.value,
         slot = _ref5.slot;

package/lib/cjs/recipes/items.js

@@ -5,9 +5,13 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.items = void 0;
+exports.personalData = exports.items = exports.editData = exports.colorBlockButtons = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _index = require("../index");
+var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
+var _react2 = require("@emotion/react");
 var items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -74,4 +78,150 @@ var items = [{
   lastName: 'Idel',
   icon: _AccountIcon["default"]
 }];
-exports.items = items;
+exports.items = items;
+var personalData = {
+  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: []
+  }
+};
+exports.personalData = personalData;
+var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+exports.colorBlockButtons = colorBlockButtons;
+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: ''
+    }]
+  }
+};
+exports.editData = editData;