@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.2

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

@@ -32,13 +32,13 @@ export var defaultFocus = {
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
   justifyContent: 'center',
+  flexShrink: 0,
   minWidth: 'min-content',
   cursor: 'pointer',
   display: 'block',
   maxWidth: '100%',
   fontFamily: 'standard',
   fontSize: '.9375rem',
-  flexGrow: '1',
   fontWeight: 400,
   textAlign: 'center',
   verticalAlign: 'middle',
@@ -49,6 +49,7 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   borderColor: 'border.base',
   px: '20px',
   py: '12px',
+  maxHeight: '48.5px',
   height: '48.5px',
   '&.is-disabled': {
     opacity: 0.65
@@ -323,7 +324,7 @@ var baseIconButton = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '2px solid',
+  border: '1px solid',
   borderColor: 'transparent',
   path: {
     fill: 'dark'
@@ -377,6 +378,23 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var hintButton = {
+  backgroundColor: 'transparent',
+  path: {
+    fill: 'dark'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  }
+};
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   height: 14,
   p: 0,
@@ -539,11 +557,23 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: {
-    bg: 'gray-100',
-    '&.is-hovered': {
-      bg: 'gray-900'
-    }
+  hintButton: _objectSpread({}, hintButton)
+};
+var listBoxLink = {
+  color: 'active',
+  transition: 'color, .15s, ease-in-and-out',
+  fontSize: 'md',
+  textDecoration: 'none',
+  px: 'md',
+  pt: 'md',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none',
+    color: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-focused': {
+    textDecoration: 'underline',
+    outline: 'none'
   },
   badgeDeleteButton: badgeDeleteButton,
   invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
@@ -569,6 +599,7 @@ var buttons = {
   checkboxActiveButton: checkboxActiveButton,
   outlineCritical: outlineCritical,
   link: link,
+  listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   inlineWithIcon: inlineWithIcon,

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

@@ -24,7 +24,7 @@ var interactive = {
   },
   '&.is-hovered': {
     outline: 'none',
-    borderColor: 'blue',
+    borderColor: 'focus',
     bg: 'default'
   }
 };

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

@@ -105,14 +105,14 @@ export var fieldControlWrapper = {
   },
   '&.is-read-only': {
     '> input': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '> textarea': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '&:after': {
       display: 'none'
@@ -135,7 +135,6 @@ input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   }
 });
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
-  borderColor: 'border.input',
   borderStyle: 'solid',
   borderWidth: 1,
   flexDirection: 'row !important',
@@ -161,6 +160,18 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-error': {
     borderColor: 'critical.dark'
+  },
+  '&.is-read-only': {
+    alignItems: 'center',
+    boxShadow: 'inset 0 0 0 100px #F6F8FA',
+    border: '1px solid',
+    borderColor: 'gray-900',
+    '> input': {
+      backgroundColor: 'background.secondary'
+    },
+    '&:after': {
+      display: 'none'
+    }
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {

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

@@ -1,6 +1,6 @@
 export var label = {
   color: 'text.primary',
-  fontSize: '.9375rem',
+  fontSize: 'md',
   '&.is-float-label': {
     fontSize: 'md',
     fontWeight: 1,
@@ -12,7 +12,7 @@ export var label = {
   },
   opacity: 1,
   checkbox: {
-    fontSize: '.9375rem',
+    fontSize: 'md',
     display: 'inline-flex !important',
     div: {
       flexShrink: 0
@@ -22,6 +22,8 @@ export var label = {
     cursor: 'pointer'
   },
   radioGroup: {
-    fontSize: '.9375rem'
+    color: 'text.primary',
+    fontSize: 'md',
+    mb: 'md'
   }
 };

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

@@ -105,7 +105,7 @@ export var listView = {
   container: {
     borderRadius: borderRadius,
     border: '1px solid',
-    borderColor: '#e7eef4'
+    borderColor: 'border.hairline'
   }
 };
 export var lisViewItemChart = {

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

@@ -0,0 +1,18 @@
+var container = {
+  bg: 'background.base',
+  border: 'none',
+  minHeight: 72,
+  maxHeight: 72
+};
+var controls = {
+  alignSelf: 'start',
+  pt: 'xs'
+};
+var wrapper = {
+  mr: 'md'
+};
+export default {
+  container: container,
+  controls: controls,
+  wrapper: wrapper
+};

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

@@ -0,0 +1,66 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var line = {
+  mr: 'xs',
+  borderBottomWidth: '2px',
+  borderBottomColor: 'active',
+  '&.is-inactive': {
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'blue-200'
+  }
+};
+var stepBase = {
+  borderWidth: '2px',
+  width: 32,
+  height: 32,
+  minWidth: 32,
+  minHeight: 32,
+  position: 'relative',
+  fontWeight: 2,
+  fontSize: 'md'
+};
+var tab = {
+  mr: 'xs'
+};
+var step = {
+  active: _objectSpread(_objectSpread({
+    backgroundColor: 'active',
+    borderColor: 'active',
+    color: 'background.base'
+  }, stepBase), {}, {
+    '&:before': {
+      content: '""',
+      height: '24px',
+      width: '24px',
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      borderRadius: '100%',
+      borderStyle: 'solid',
+      borderColor: 'background.base',
+      borderWidth: '2px'
+    }
+  }),
+  completed: _objectSpread(_objectSpread({}, stepBase), {}, {
+    borderColor: 'active'
+  }),
+  inactive: _objectSpread({
+    backgroundColor: 'background.base',
+    borderColor: 'blue-200',
+    color: 'active'
+  }, stepBase)
+};
+export default {
+  tab: tab,
+  line: line,
+  step: step
+};

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

@@ -0,0 +1,36 @@
+export var switchable = {
+  container: {
+    minWidth: '32px',
+    color: 'neutral.80',
+    bg: 'backgorund.base',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 9999,
+    '&.is-selected': {
+      bg: 'active',
+      borderColor: 'active'
+    }
+  },
+  thumbContainer: {
+    bg: 'transparent',
+    border: 'none',
+    maxWidth: 24,
+    height: 16,
+    py: '3px',
+    px: '3px',
+    'label.is-selected &': {
+      bg: 'transparent'
+    }
+  },
+  thumb: {
+    bg: 'gray-500',
+    minHeight: 10,
+    maxHeight: 10,
+    width: 10,
+    border: 'none',
+    '&.is-selected': {
+      bg: 'white',
+      transform: 'translateX(15px)'
+    }
+  }
+};

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

@@ -10,45 +10,100 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var hTags = {
+  H1: {
+    fontSize: 'xxx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H2: {
+    fontSize: 'xx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H3: {
+    fontSize: 'xl',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H4: {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H5: {
+    fontSize: 'md',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H6: {
+    textTransform: 'uppercase',
+    color: 'text.primary',
+    fontFamily: 'standard',
+    fontWeight: 1,
+    fontSize: 'xs',
+    letterSpacing: '1px'
+  },
   h1: {
     fontSize: 'xxx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h2: {
     fontSize: 'xx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h3: {
     fontSize: 'xl',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h4: {
     fontSize: 'lg',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h5: {
     fontSize: 'md',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h6: {
     textTransform: 'uppercase',
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs'
+    fontSize: 'xs',
+    letterSpacing: '1px'
   }
 };
+var buttonTitle = {
+  fontSize: '13px'
+};
+var buttonSubtitle = {
+  fontSize: '13px',
+  fontWeight: 2
+};
 export var text = _objectSpread(_objectSpread({
+  base: {
+    lineHeight: 'body'
+  },
+  buttonSubtitle: buttonSubtitle,
+  buttonTitle: buttonTitle,
+  pageHeaderBody: {
+    lineHeight: '150%',
+    color: 'text.primary'
+  },
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -118,6 +173,11 @@ export var text = _objectSpread(_objectSpread({
     fontSize: 'lg',
     fontWeight: 2
   },
+  panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
       color: 'gray-700',

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

@@ -13,8 +13,9 @@ import attachment from '../../../../components/AIComponents/Attachment/Attachmen
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import colors from '../colors/colors';
+import accordion from './accordion';
 import { avatar } from './avatar';
-import { defaultFocus } from './button';
+import button, { defaultFocus } from './button';
 import callout from './callout';
 import { dataTable } from './dataTable';
 import { footer } from './footer';
@@ -23,9 +24,11 @@ import { listView, listViewItem, lisViewItemChart } from './listview';
 import { menu, menuItem } from './menu';
 import { message } from './messages';
 import { navBar } from './navbar';
+import panelHeader from './panelHeader';
 import popoverMenu from './popoverMenu';
 import prompt from './prompt';
 import response from './response';
+import stepper from './stepper';
 import suggestion from './suggestion';
 import suggestions from './suggestions';
 import { table } from './table';
@@ -51,6 +54,13 @@ var fieldHelperText = {
     }
   }
 };
+export var badgeDeleteButton = _objectSpread(_objectSpread({}, button.iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
 var modalSize = {
   xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
   sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
@@ -135,6 +145,16 @@ var listBox = {
     '&.is-pressed': {
       color: 'text.primary',
       bg: 'lightblue'
+    },
+    '&.is-condensed': {
+      pl: 'md',
+      bg: 'background.base',
+      '&.is-selected': {
+        bg: 'background.base'
+      },
+      '&.is-focused': {
+        bg: 'background.base'
+      }
     }
   }
 };
@@ -170,7 +190,7 @@ var progressBar = {
 var overlayPanel = {
   container: {
     backgroundColor: 'background.base',
-    border: 'none'
+    borderColor: 'border.hairline'
   },
   aiPanelContainer: {
     backgroundColor: 'background.base',
@@ -210,6 +230,16 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var buttonBar = {
+  container: {
+    gap: 'sm',
+    backgroundColor: 'background.base'
+  },
+  justifyRightContainer: {
+    gap: 'sm',
+    backgroundColor: 'background.base'
+  }
+};
 var rockerButton = {
   innerContainer: {
     boxShadow: 'none',
@@ -268,7 +298,17 @@ var rockerButton = {
 };
 var loader = {
   withinListView: {
-    color: 'active'
+    color: 'active',
+    py: 'sm'
+  },
+  circleSpinner: {
+    borderColor: 'background.base'
+  }
+};
+var breadcrumb = {
+  link: {
+    fontWeight: 2,
+    fontSize: 'lg'
   }
 };
 var statusIcon = {
@@ -332,41 +372,10 @@ var statusIcon = {
   }
 };
 export default {
+  accordion: accordion,
   attachment: attachment,
-  navBar: navBar,
-  fieldHelperText: fieldHelperText,
-  message: message,
-  modal: modal,
-  tab: tab,
-  menuTab: menuTab,
-  listBox: listBox,
-  separator: separator,
-  menuItem: menuItem,
   avatar: avatar,
-  listViewItem: listViewItem,
-  progressBar: progressBar,
-  listView: listView,
-  lisViewItemChart: lisViewItemChart,
-  dataTable: dataTable,
-  codeView: codeView,
-  popoverMenu: popoverMenu,
-  prompt: prompt,
-  tabs: tabs,
-  menu: menu,
-  iconWrapper: iconWrapper,
-  overlayPanel: overlayPanel,
-  suggestions: suggestions,
-  suggestion: suggestion,
-  response: response,
-  skeleton: skeleton,
-  rockerButton: rockerButton,
-  tooltip: tooltip,
-  footer: footer,
-  loader: loader,
-  callout: callout,
-  table: table,
-  tableBase: tableBase,
-  statusIcon: statusIcon,
+  breadcrumb: breadcrumb,
   box: {
     indeterminateCheckboxIcon: {
       height: '19.25px',
@@ -381,5 +390,41 @@ export default {
         boxShadow: "inset 0px 0px 0px 1px ".concat(colors.focus)
       }
     }
-  }
+  },
+  buttonBar: buttonBar,
+  callout: callout,
+  codeView: codeView,
+  dataTable: dataTable,
+  fieldHelperText: fieldHelperText,
+  footer: footer,
+  iconWrapper: iconWrapper,
+  listBox: listBox,
+  listView: listView,
+  listViewItem: listViewItem,
+  lisViewItemChart: lisViewItemChart,
+  loader: loader,
+  menu: menu,
+  menuItem: menuItem,
+  menuTab: menuTab,
+  message: message,
+  modal: modal,
+  navBar: navBar,
+  overlayPanel: overlayPanel,
+  panelHeader: panelHeader,
+  popoverMenu: popoverMenu,
+  progressBar: progressBar,
+  prompt: prompt,
+  response: response,
+  rockerButton: rockerButton,
+  separator: separator,
+  skeleton: skeleton,
+  stepper: stepper,
+  suggestion: suggestion,
+  suggestions: suggestions,
+  statusIcon: statusIcon,
+  tab: tab,
+  table: table,
+  tableBase: tableBase,
+  tabs: tabs,
+  tooltip: tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.143.0-alpha.0",
+  "version": "2.143.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -99,6 +99,7 @@
     "@react-stately/toggle": "^3.8.5",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
+    "@react-types/combobox": "^3.13.8",
     "@react-types/slider": "^3.7.9",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",