@pingux/astro 2.54.0 → 2.55.0-alpha.0

package/lib/recipes/PanelContent.stories.js

@@ -7,10 +7,11 @@ 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, Breadcrumbs, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, Item, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, 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';
+import { colorBlockButtons, editData, personalData } from './items';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Panel Content',
@@ -22,76 +23,6 @@ export 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,
-    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,
@@ -101,7 +32,7 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = useRef();
-  var personalInfo = data.personalInfo;
+  var personalInfo = personalData.personalInfo;
   var fields = personalInfo.fields;
   var renderBreadcrumbs = ___EmotionJSX(Breadcrumbs, {
     icon: ChevronRightIcon
@@ -166,31 +97,31 @@ export var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _mapInstanceProperty(_context4 = _Object$keys(data)).call(_context4, function (item) {
-      return data[item].key;
+    defaultExpandedKeys: _mapInstanceProperty(_context4 = _Object$keys(personalData)).call(_context4, function (item) {
+      return personalData[item].key;
     }),
     labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context5 = _Object$keys(data)).call(_context5, function (item) {
+  }, _mapInstanceProperty(_context5 = _Object$keys(personalData)).call(_context5, function (item) {
     var _context6;
     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, {
+      "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: data[item].fields
+      fields: personalData[item].fields
     })) : ___EmotionJSX(LabelValuePairs, {
-      fields: data[item].fields
-    }), data[item].badges && ___EmotionJSX(Box, {
+      fields: personalData[item].fields
+    }), personalData[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
-    }, _mapInstanceProperty(_context6 = data[item].badges).call(_context6, function (badge) {
+    }, _mapInstanceProperty(_context6 = personalData[item].badges).call(_context6, function (badge) {
       return ___EmotionJSX(Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -276,7 +207,7 @@ export var ColorBlockButton = function ColorBlockButton(_ref2) {
 };
 export 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 ? personalData.contactInfo.fields : _ref3$fields;
   return ___EmotionJSX(Box, {
     gap: "md",
     maxWidth: "675px"
@@ -306,79 +237,6 @@ export var LabelValuePairs = function LabelValuePairs(_ref3) {
     }, "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 _context7, _context8, _context9;
   return ___EmotionJSX(OverlayWrapper, {

package/lib/recipes/items.js

@@ -1,5 +1,9 @@
+import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import { CheckboxField } from '../index';
+import UserImage from '../utils/devUtils/assets/UserImage.png';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 export var items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -65,4 +69,147 @@ export var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   icon: AccountIcon
-}];
+}];
+export 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,
+    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: []
+  }
+};
+export var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+export 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: ''
+    }]
+  }
+};

package/package.json

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