@pingux/astro 2.211.0-alpha.0 → 2.212.1-alpha.0

package/lib/recipes/PanelContent.stories.js

@@ -7,10 +7,9 @@ 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, 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, LabelValuePairs, 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 {
@@ -33,7 +32,8 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     state = _useOverlayPanelState.state;
   var triggerRef = useRef();
   var personalInfo = personalData.personalInfo;
-  var fields = personalInfo.fields;
+  var givenName = personalInfo.givenName,
+    familyName = personalInfo.familyName;
   var renderBreadcrumbs = ___EmotionJSX(Box, {
     width: "100%"
   }, ___EmotionJSX(Breadcrumbs, {
@@ -42,7 +42,7 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     "aria-label": personalInfo.label,
     href: "https://www.pingidentity.com",
     key: personalInfo.key
-  }, _concatInstanceProperty(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), ___EmotionJSX(Item, {
+  }, _concatInstanceProperty(_context = "".concat(givenName, " ")).call(_context, familyName)), ___EmotionJSX(Item, {
     "aria-label": "Edit",
     key: "editKey"
   }, "Edit")));
@@ -60,8 +60,8 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
   } : {
     data: {
       image: image,
-      text: _concatInstanceProperty(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
-      subtext: _concatInstanceProperty(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+      text: _concatInstanceProperty(_context2 = "".concat(givenName, " ")).call(_context2, familyName),
+      subtext: _concatInstanceProperty(_context3 = "".concat(givenName.toLowerCase())).call(_context3, familyName.toLowerCase())
     }
   };
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
@@ -114,11 +114,7 @@ export var DisplayPanel = function DisplayPanel() {
     }, ___EmotionJSX(Image, {
       src: UserImage,
       alt: "user"
-    }), ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    })) : ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    }), personalData[item].badges && ___EmotionJSX(Box, {
+    }), ___EmotionJSX(LabelValuePairs, null, personalData[item].rows)) : ___EmotionJSX(LabelValuePairs, null, personalData[item].rows), personalData[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
     }, _mapInstanceProperty(_context6 = personalData[item].badges).call(_context6, function (badge) {
@@ -208,38 +204,6 @@ export var ColorBlockButton = function ColorBlockButton(_ref2) {
     }
   }));
 };
-export var LabelValuePairs = function LabelValuePairs(_ref3) {
-  var _ref3$fields = _ref3.fields,
-    fields = _ref3$fields === void 0 ? personalData.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"))));
-  }));
-};
 export var EditPanel = function EditPanel() {
   var _context7, _context8, _context9;
   return ___EmotionJSX(OverlayWrapper, {
@@ -281,10 +245,10 @@ export var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: UserImage
-    }), _mapInstanceProperty(_context0 = editData[item].fields).call(_context0, function (_ref5) {
-      var label = _ref5.label,
-        value = _ref5.value,
-        slot = _ref5.slot;
+    }), _mapInstanceProperty(_context0 = editData[item].fields).call(_context0, function (_ref3) {
+      var label = _ref3.label,
+        value = _ref3.value,
+        slot = _ref3.slot;
       return ___EmotionJSX(Box, {
         key: "".concat(label, "-key")
       }, ___EmotionJSX(TextField, {

package/lib/recipes/items.js

@@ -1,9 +1,28 @@
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import { CheckboxField } from '../index';
+import { Box, CheckboxField, NoticeIcon, Pair, PairLabel, PairValue, Text, ValueTypes } from '../index';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
+import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var VerifiedValue = function VerifiedValue(_ref) {
+  var value = _ref.value;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(Text, null, value), ___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")));
+};
 export var items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -70,58 +89,47 @@ export var items = [{
   lastName: 'Idel',
   icon: AccountIcon
 }];
+var H4Label = function H4Label(_ref2) {
+  var children = _ref2.children;
+  return ___EmotionJSX(PairLabel, {
+    textProps: {
+      as: 'h3'
+    }
+  }, children);
+};
 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'
-    }]
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Email"), ___EmotionJSX(PairValue, {
+      valueType: ValueTypes.ELEMENT
+    }, ___EmotionJSX(VerifiedValue, {
+      value: "ednepomuceno@pingidentity.com"
+    }))), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Primary"), ___EmotionJSX(PairValue, null, "+1 767-777-3333")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Address"), ___EmotionJSX(PairValue, null, "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'
-    }]
+    givenName: 'Ed',
+    familyName: 'Nepomuceno',
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Given Name"), ___EmotionJSX(PairValue, null, "Ed")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Famile Name"), ___EmotionJSX(PairValue, null, "Nepomuceno")))
   },
   companyInfo: {
     label: 'Company Info',
     key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
+    rows: ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Tile"), ___EmotionJSX(PairValue, null, "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,'
-    }]
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "T-Shirt Size"), ___EmotionJSX(PairValue, null, "Large")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Example Multi-Value Attribute"), ___EmotionJSX(PairValue, null, "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: []
+    rows: null
   }
 };
 export var colorBlockButtons = [{

package/lib/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -144,6 +144,47 @@ var forms = {
       }
     }
   },
+  comboBox: {
+    container: {
+      '& input[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: astroTokensDark.color.gray[500],
+        borderRadius: astroTokens.radius.input,
+        height: astroTokens.size.input.height,
+        fontSize: '15px',
+        bg: astroTokensDark.color.gray[900],
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=text]:focus': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      },
+      '&.is-focused input[type=text]': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      },
+      '& input[type=text].is-read-only, & input[type=text][readonly]': {
+        backgroundColor: astroTokensDark.color.input['readonly-bg'],
+        borderColor: astroTokensDark.color.gray[500]
+      },
+      '& input[type=text].is-disabled, & input[type=text][disabled]': {
+        backgroundColor: astroTokensDark.color.input['readonly-bg'],
+        borderColor: astroTokensDark.color.gray[500],
+        opacity: 1
+      }
+    },
+    button: {
+      border: 'none !important',
+      bg: 'transparent',
+      '&:not(.disabled):hover': {
+        border: 'none !important',
+        bg: 'transparent'
+      },
+      '&:focus': {
+        border: 'none !important'
+      }
+    }
+  },
   label: {
     'body &': {
       textTransform: 'none'

package/lib/styles/themeOverrides/onyxUiLibraryOverride.js

@@ -146,6 +146,53 @@ var forms = {
       }
     }
   },
+  comboBox: {
+    container: {
+      '& input[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: astroTokens.color.input.border,
+        borderRadius: astroTokens.radius.input,
+        height: astroTokens.size.input.height,
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=text]:focus': {
+        outline: '1px solid',
+        outlineColor: astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      },
+      '&.is-focused input[type=text]': {
+        outline: '1px solid',
+        outlineColor: astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      },
+      '& input[type=text].is-read-only, & input[type=text][readonly]': {
+        backgroundColor: astroTokens.color.input['readonly-bg'],
+        borderColor: astroTokens.color.input.border
+      },
+      '& input[type=text].is-disabled, & input[type=text][disabled]': {
+        backgroundColor: astroTokens.color.input['readonly-bg'],
+        borderColor: astroTokens.color.input.border,
+        opacity: 1
+      }
+    },
+    button: {
+      border: 'none !important',
+      bg: 'transparent',
+      '&:not(.disabled):hover': {
+        border: 'none !important',
+        bg: 'transparent'
+      },
+      '&:focus': {
+        border: 'none !important'
+      }
+    }
+  },
   label: {
     'body &': {
       textTransform: 'none'

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/themes/next-gen/variants/variants.js

@@ -11,6 +11,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
+import labelValuePairs from '../../../../components/LabelValuePairs/LabelValuePairs.styles';
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import sizes from '../sizes';
@@ -469,6 +470,7 @@ export default {
   footer: footer,
   helpHint: helpHint,
   iconWrapper: iconWrapper,
+  labelValuePairs: labelValuePairs,
   listBox: listBox,
   listView: listView,
   listViewItem: listViewItem,

package/lib/styles/variants/variants.js

@@ -29,6 +29,7 @@ import footer from '../../components/Footer/Footer.styles';
 import gridList from '../../components/GridList/GridList.styles';
 import helpHint from '../../components/HelpHint/HelpHint.styles';
 import imageUpload from '../../components/ImageUploadField/imageUpload';
+import labelValuePairs from '../../components/LabelValuePairs/LabelValuePairs.styles';
 import listBox from '../../components/ListBox/ListBox.styles';
 import listItem from '../../components/ListItem/ListItem.styles';
 import listView from '../../components/ListView/ListView.styles';
@@ -85,6 +86,7 @@ export default _objectSpread(_objectSpread({
   gridList: gridList,
   helpHint: helpHint,
   imageUpload: imageUpload,
+  labelValuePairs: labelValuePairs,
   listBox: listBox,
   listItem: listItem,
   listView: listView,

package/lib/types/index.js

@@ -29,6 +29,7 @@ export * from './iconWrapper';
 export * from './input';
 export * from './item';
 export * from './label';
+export * from './labelValuePairs';
 export * from './link';
 export * from './listBox';
 export * from './listItem';

package/lib/types/labelValuePairs.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -116,6 +116,9 @@ export var FIGMA_LINKS = {
   inlineEditing: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
   },
+  labelValuePairs: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },

package/package.json

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