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

package/lib/cjs/recipes/items.js

@@ -11,7 +11,26 @@ 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 _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
+var VerifiedValue = function VerifiedValue(_ref) {
+  var value = _ref.value;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Text, null, value), (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")));
+};
 var items = exports.items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -78,58 +97,47 @@ var items = exports.items = [{
   lastName: 'Idel',
   icon: _AccountIcon["default"]
 }];
+var H4Label = function H4Label(_ref2) {
+  var children = _ref2.children;
+  return (0, _react2.jsx)(_index.PairLabel, {
+    textProps: {
+      as: 'h3'
+    }
+  }, children);
+};
 var personalData = exports.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: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Email"), (0, _react2.jsx)(_index.PairValue, {
+      valueType: _index.ValueTypes.ELEMENT
+    }, (0, _react2.jsx)(VerifiedValue, {
+      value: "ednepomuceno@pingidentity.com"
+    }))), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Primary"), (0, _react2.jsx)(_index.PairValue, null, "+1 767-777-3333")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Address"), (0, _react2.jsx)(_index.PairValue, null, "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'
-    }]
+    givenName: 'Ed',
+    familyName: 'Nepomuceno',
+    rows: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Given Name"), (0, _react2.jsx)(_index.PairValue, null, "Ed")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Famile Name"), (0, _react2.jsx)(_index.PairValue, null, "Nepomuceno")))
   },
   companyInfo: {
     label: 'Company Info',
     key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
+    rows: (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Tile"), (0, _react2.jsx)(_index.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: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "T-Shirt Size"), (0, _react2.jsx)(_index.PairValue, null, "Large")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Example Multi-Value Attribute"), (0, _react2.jsx)(_index.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
   }
 };
 var colorBlockButtons = exports.colorBlockButtons = [{

package/lib/cjs/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -151,6 +151,47 @@ var forms = {
       }
     }
   },
+  comboBox: {
+    container: {
+      '& input[type=text]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500],
+        borderRadius: _onyxTokens.astroTokens.radius.input,
+        height: _onyxTokens.astroTokens.size.input.height,
+        fontSize: '15px',
+        bg: _onyxTokens.astroTokensDark.color.gray[900],
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=text]:focus': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      },
+      '&.is-focused input[type=text]': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      },
+      '& input[type=text].is-read-only, & input[type=text][readonly]': {
+        backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500]
+      },
+      '& input[type=text].is-disabled, & input[type=text][disabled]': {
+        backgroundColor: _onyxTokens.astroTokensDark.color.input['readonly-bg'],
+        borderColor: _onyxTokens.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/cjs/styles/themeOverrides/onyxUiLibraryOverride.d.ts

@@ -87,6 +87,43 @@ declare const _default: {
                 };
             };
         };
+        comboBox: {
+            container: {
+                '& input[type=text]': any;
+                '& input[type=text]:focus': {
+                    outline: string;
+                    outlineColor: any;
+                    outlineOffset: string;
+                    borderColor: string;
+                };
+                '&.is-focused input[type=text]': {
+                    outline: string;
+                    outlineColor: any;
+                    outlineOffset: string;
+                    borderColor: string;
+                };
+                '& input[type=text].is-read-only, & input[type=text][readonly]': {
+                    backgroundColor: any;
+                    borderColor: any;
+                };
+                '& input[type=text].is-disabled, & input[type=text][disabled]': {
+                    backgroundColor: any;
+                    borderColor: any;
+                    opacity: number;
+                };
+            };
+            button: {
+                border: string;
+                bg: string;
+                '&:not(.disabled):hover': {
+                    border: string;
+                    bg: string;
+                };
+                '&:focus': {
+                    border: string;
+                };
+            };
+        };
         label: {
             'body &': {
                 textTransform: string;

package/lib/cjs/styles/themeOverrides/onyxUiLibraryOverride.js

@@ -153,6 +153,53 @@ var forms = {
       }
     }
   },
+  comboBox: {
+    container: {
+      '& input[type=text]': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokens.color.input.border,
+        borderRadius: _onyxTokens.astroTokens.radius.input,
+        height: _onyxTokens.astroTokens.size.input.height,
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGen["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=text]:focus': {
+        outline: '1px solid',
+        outlineColor: _onyxTokens.astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      },
+      '&.is-focused input[type=text]': {
+        outline: '1px solid',
+        outlineColor: _onyxTokens.astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      },
+      '& input[type=text].is-read-only, & input[type=text][readonly]': {
+        backgroundColor: _onyxTokens.astroTokens.color.input['readonly-bg'],
+        borderColor: _onyxTokens.astroTokens.color.input.border
+      },
+      '& input[type=text].is-disabled, & input[type=text][disabled]': {
+        backgroundColor: _onyxTokens.astroTokens.color.input['readonly-bg'],
+        borderColor: _onyxTokens.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/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.onyxOnlyRecipes = exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-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'];
 var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -5761,6 +5761,23 @@ declare const _default: {
                 fontSize: any;
             };
         };
+        labelValuePairs: {
+            container: {
+                gap: string;
+            };
+            fieldItem: {
+                gap: string;
+            };
+            value: {
+                fontWeight: number;
+                color: string;
+            };
+            subLabel: {
+                fontSize: string;
+                fontWeight: number;
+                color: string;
+            };
+        };
         listBox: {
             container: {
                 p: any;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -832,6 +832,23 @@ declare const _default: {
             fontSize: any;
         };
     };
+    labelValuePairs: {
+        container: {
+            gap: string;
+        };
+        fieldItem: {
+            gap: string;
+        };
+        value: {
+            fontWeight: number;
+            color: string;
+        };
+        subLabel: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+        };
+    };
     listBox: {
         container: {
             p: any;

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

@@ -18,6 +18,7 @@ exports["default"] = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
+var _LabelValuePairs = _interopRequireDefault(require("../../../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _sizes = _interopRequireDefault(require("../sizes"));
@@ -479,6 +480,7 @@ var _default = exports["default"] = {
   footer: _footer.footer,
   helpHint: helpHint,
   iconWrapper: _iconWrapper["default"],
+  labelValuePairs: _LabelValuePairs["default"],
   listBox: listBox,
   listView: _listview.listView,
   listViewItem: _listview.listViewItem,

package/lib/cjs/styles/variants/variants.js

@@ -36,6 +36,7 @@ var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.sty
 var _GridList = _interopRequireDefault(require("../../components/GridList/GridList.styles"));
 var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHint.styles"));
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
+var _LabelValuePairs = _interopRequireDefault(require("../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
 var _ListItem = _interopRequireDefault(require("../../components/ListItem/ListItem.styles"));
 var _ListView = _interopRequireDefault(require("../../components/ListView/ListView.styles"));
@@ -95,6 +96,7 @@ var _default = exports["default"] = _objectSpread(_objectSpread({
   gridList: _GridList["default"],
   helpHint: _HelpHint["default"],
   imageUpload: _imageUpload["default"],
+  labelValuePairs: _LabelValuePairs["default"],
   listBox: _ListBox["default"],
   listItem: _ListItem["default"],
   listView: _ListView["default"],

package/lib/cjs/types/index.d.ts

@@ -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';