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

package/lib/styles/themes/next-gen/stories/OnyxInputPatterns.chromatic.stories.js

@@ -0,0 +1,178 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import EyeOffOutlineIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
+import EyeOutlineIcon from '@pingux/mdi-react/EyeOutlineIcon';
+import { Box, Button, IconButtonToggle, Item, SelectField, Text } from '../../../..';
+import TextField from '../../../../components/TextField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/Onyx Input Patterns',
+  component: TextField
+};
+var items = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}];
+export var Default = function Default() {
+  return ___EmotionJSX(TextField, {
+    label: "Label",
+    helperText: "Help text for this field."
+  });
+};
+export var PasswordInput = function PasswordInput() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var handleVisible = function handleVisible() {
+    setIsVisible(!isVisible);
+  };
+  return ___EmotionJSX(TextField, {
+    label: "Password",
+    type: "password",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '60px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(IconButtonToggle, {
+        toggledIcon: EyeOutlineIcon,
+        defaultIcon: EyeOffOutlineIcon,
+        onToggle: handleVisible,
+        isToggled: isVisible,
+        variant: "passwordVisibilityIcon",
+        buttonProps: {
+          'aria-label': 'eye icon'
+        },
+        iconProps: {
+          size: 'xs'
+        }
+      })
+    }
+  });
+};
+export var InputGroup = function InputGroup() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Label",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingLeft: '70px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: ___EmotionJSX(Box, {
+        variant: "box.inputGroupContentLeft",
+        p: "12px 20px"
+      }, ___EmotionJSX(Text, null, "@"))
+    }
+  }), ___EmotionJSX(TextField, {
+    label: "Label",
+    mt: "xl",
+    helperText: "Help text for this field.",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Box, {
+        variant: "box.inputGroupContentRight",
+        p: "12px 20px"
+      }, ___EmotionJSX(Text, null, "@example.com"))
+    }
+  }));
+};
+export var ButtonInputGroup = function ButtonInputGroup() {
+  return ___EmotionJSX(TextField, {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& input': {
+          paddingRight: '100px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Button, {
+        variant: "ButtonInputGroupContentRight"
+      }, "Button")
+    }
+  });
+};
+export var DropdownInputGroup = function DropdownInputGroup() {
+  var _useState3 = useState(items[0].name),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var handleSelectionChange = function handleSelectionChange(key) {
+    return setSelectedKey(key);
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Label",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingRight: '160px'
+        }
+      }
+    },
+    slots: {
+      inContainer: ___EmotionJSX(Box, {
+        variant: "box.inputDropDownContentRight",
+        width: "150px",
+        mt: "-2px"
+      }, ___EmotionJSX(SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentRight"
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }), ___EmotionJSX(TextField, {
+    label: "Label",
+    mt: "xl",
+    containerProps: {
+      sx: {
+        '& > .field-control-wrapper > input': {
+          paddingLeft: '160px'
+        }
+      }
+    },
+    slots: {
+      beforeInput: ___EmotionJSX(Box, {
+        variant: "box.inputDropDownContentLeft",
+        width: "150px",
+        mt: "-2px"
+      }, ___EmotionJSX(SelectField, {
+        items: items,
+        selectedKey: selectedKey,
+        onSelectionChange: handleSelectionChange,
+        variant: "forms.input.dropDownContentLeft"
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          "data-id": item.name
+        }, item.name);
+      }))
+    }
+  }));
+};

package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -55,7 +55,7 @@ var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'ic
 var StickerSheetComponent = function StickerSheetComponent() {
   return ___EmotionJSX(Box, {
     sx: {
-      backgroundColor: 'background.base'
+      backgroundColor: 'backgroundBase'
     },
     height: "100%",
     p: "lg",

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

@@ -0,0 +1,49 @@
+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; }
+import colors from '../colors/colors';
+export var commonContentProps = {
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  height: '100%',
+  width: 'max-content',
+  justifyContent: 'center'
+};
+export var box = {
+  indeterminateCheckboxIcon: {
+    height: '19.25px',
+    width: '19.25px',
+    '&.is-disabled': {
+      '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+        fill: 'gray-500',
+        stroke: 'gray-500'
+      }
+    },
+    '&.is-focused': {
+      boxShadow: "inset 0px 0px 0px 1px ".concat(colors.focus)
+    }
+  },
+  inputDropDownContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0
+  }),
+  inputGroupContentLeft: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    left: 0,
+    borderRight: "1px solid ".concat(colors['gray-500'])
+  }),
+  inputDropDownContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0
+  }),
+  inputGroupContentRight: _objectSpread(_objectSpread({}, commonContentProps), {}, {
+    right: 0,
+    borderLeft: "1px solid ".concat(colors['gray-500'])
+  })
+};

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

@@ -13,6 +13,7 @@ import chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
 import colors from '../colors/colors';
 import tShirtSizes from '../customProperties/tShirtSizes';
+import { commonContentProps } from './box';
 var primaryBlue = colors.primary,
   primaryBlueHover = colors.active_hover,
   primaryBluePress = colors.active_pressed,
@@ -109,8 +110,19 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'text.secondary',
-  '&.is-hovered': _objectSpread({}, boxShadowNone)
+  color: 'font.base',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineColor: 'gray-700',
+    backgroundColor: 'background.secondary'
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'background.secondary',
+    color: 'font.base'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: 'background.secondary',
+    color: 'font.base'
+  }, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
@@ -500,7 +512,21 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: _objectSpread({}, hintButton)
+  hintButton: _objectSpread({}, hintButton),
+  passwordVisibilityIcon: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), commonContentProps), {}, {
+    right: 0,
+    padding: '12px 20px',
+    border: '0px solid !important',
+    '&:hover, &.is-pressed': {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  })
 };
 var listBoxLink = {
   color: 'active',
@@ -529,6 +555,15 @@ var listBoxLink = {
     }
   })
 };
+var ButtonInputGroupContentRight = _objectSpread(_objectSpread(_objectSpread({}, tertiary), commonContentProps), {}, {
+  right: 0,
+  padding: '12px 20px',
+  borderRadius: '0px 4px 4px 0px !important',
+  borderWidth: '0px !important',
+  borderLeftWidth: '1px !important',
+  borderRightWidth: '1px !important',
+  borderLeftColor: 'gray-500'
+});
 var buttons = {
   neutral: neutral,
   primary: primary,
@@ -552,6 +587,7 @@ var buttons = {
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
-  paginationMenu: paginationMenu
+  paginationMenu: paginationMenu,
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight
 };
 export default buttons;

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

@@ -1,7 +1,7 @@
 import tShirtSizes from '../customProperties/tShirtSizes';
 var base = {
   width: '100%',
-  backgroundColor: 'background.secondary',
+  backgroundColor: 'light',
   lineHeight: 'md',
   p: 'md',
   border: 'none',

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

@@ -17,7 +17,7 @@ var interactive = {
   borderColor: 'border.base',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     outline: '2px solid',
     outlineColor: 'focus',
     outlineOffset: '0px'

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

@@ -25,7 +25,7 @@ var tableRow = {
   }
 };
 var selectableTableRow = _objectSpread(_objectSpread({}, tableRow), {}, {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   '&.is-hovered': {
     bg: 'gray-100'
   },

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

@@ -24,7 +24,7 @@ export var input = {
   fontSize: 'md',
   fontFamily: 'standard',
   p: '0.75rem',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
@@ -167,7 +167,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
     border: '1px solid',
     borderColor: 'gray-900',
     '> input': {
-      backgroundColor: 'background.secondary'
+      backgroundColor: 'backgroundSecondary'
     },
     '&:after': {
       display: 'none'
@@ -192,4 +192,25 @@ input.promptInputAttachmentWrapper = {
   overflowY: 'hidden',
   whiteSpace: 'nowrap',
   px: '.75rem'
+};
+input.dropDownContentRight = {
+  background: 'inherit',
+  '& button': {
+    borderRadius: '0px 4px 4px 0px !important',
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  }
+};
+input.dropDownContentLeft = {
+  '& button': {
+    borderRadius: '4px 0px 0px 4px !important',
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineOffset: '2px',
+      outlineColor: 'gray-700'
+    }
+  }
 };

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

@@ -48,7 +48,7 @@ export var listViewItem = {
   },
   expandableStyledListItem: {
     px: 'lg',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
       borderTopRightRadius: borderRadius

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

@@ -23,7 +23,7 @@ export var navBar = {
     fontFamily: 'standard',
     width: '252px',
     p: 'sm',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
   sectionContainer: {

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

@@ -57,7 +57,7 @@ var navigationHeader = {
     fontFamily: 'standard',
     borderBottom: '1px solid',
     borderColor: 'border.base',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     height: '4.5rem',
     justifyContent: 'center'
   },
@@ -66,10 +66,10 @@ var navigationHeader = {
     maxWidth: '1540px',
     mx: 'auto',
     width: '100%',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   dropdownMenu: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     maxWidth: 'unset',
     p: 'sm',
     '&:focus': _objectSpread({}, defaultFocus),

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

@@ -1,5 +1,5 @@
 var container = {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   border: 'none',
   minHeight: 72,
   maxHeight: 72

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

@@ -35,7 +35,7 @@ var step = {
   active: _objectSpread(_objectSpread({
     backgroundColor: 'active',
     borderColor: 'active',
-    color: 'background.base'
+    color: 'backgroundBase'
   }, stepBase), {}, {
     '&:before': {
       content: '""',
@@ -46,7 +46,7 @@ var step = {
       position: 'absolute',
       borderRadius: '100%',
       borderStyle: 'solid',
-      borderColor: 'background.base',
+      borderColor: 'backgroundBase',
       borderWidth: '2px'
     }
   }),
@@ -54,7 +54,7 @@ var step = {
     borderColor: 'active'
   }),
   inactive: _objectSpread({
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     borderColor: 'blue-200',
     color: 'active'
   }, stepBase)

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

@@ -29,7 +29,7 @@ var head = {
 var body = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: '16px',
   borderBottomRightRadius: '16px',
   '&& > tr:not(:last-child)': {
@@ -37,7 +37,7 @@ var body = {
     borderBottomColor: 'border.base'
   },
   '&& > tr:nth-of-type(odd) ': {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   '&& > tr:last-child': {
     borderBottomLeftRadius: '16px',

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

@@ -46,7 +46,7 @@ var container = {
   }
 };
 var caption = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   px: 'lg',
   color: 'text.primary',
   borderBottom: '1px solid',
@@ -62,7 +62,7 @@ var row = {
     bg: 'background.hover'
   },
   '&:nth-of-type(odd)': {
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-hovered': {
       bg: 'background.hover'
     }
@@ -70,7 +70,7 @@ var row = {
 };
 var thead = {
   borderBottomColor: 'border.base',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   '&.is-sticky': {
     boxShadow: "0 1px 0 ".concat(colors.border.base)
   }
@@ -87,7 +87,7 @@ var head = {
 var tbody = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
   borderBottomRightRadius: borderRadius
 };

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

@@ -12,9 +12,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
 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 { box } from './box';
 import button, { defaultFocus } from './button';
 import callout from './callout';
 import { dataTable } from './dataTable';
@@ -111,12 +111,18 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
+  headingContainer: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    bg: 'backgroundBase',
+    borderRadius: '1em 1em 0px 0px'
+  },
   container: {
     justifyContent: 'start'
   },
   header: {
     pt: 'lg',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     mb: 'lg'
   }
 };
@@ -148,12 +154,12 @@ var listBox = {
     },
     '&.is-condensed': {
       pl: 'md',
-      bg: 'background.base',
+      bg: 'backgroundBase',
       '&.is-selected': {
-        bg: 'background.base'
+        bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'background.base'
+        bg: 'backgroundBase'
       }
     }
   }
@@ -189,11 +195,11 @@ var progressBar = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     borderColor: 'border.hairline'
   },
   aiPanelContainer: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     border: 'none',
     borderLeft: 'none',
     position: 'fixed',
@@ -227,30 +233,30 @@ var overlayPanel = {
     alignSelf: 'center'
   },
   innerPanel: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   }
 };
 var buttonBar = {
   container: {
     gap: 'sm',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   justifyRightContainer: {
     gap: 'sm',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   }
 };
 var rockerButton = {
   innerContainer: {
     boxShadow: 'none',
-    backgroundColor: 'common.background.base',
+    backgroundColor: 'common.backgroundBase',
     borderRadius: '50px',
     padding: 0,
     border: 'none'
   },
   thumbSwitch: {
     textTransform: 'none',
-    backgroundColor: 'common.background.base',
+    backgroundColor: 'common.backgroundBase',
     padding: 'md',
     height: '50px',
     color: 'active',
@@ -302,7 +308,7 @@ var loader = {
     py: 'sm'
   },
   circleSpinner: {
-    borderColor: 'background.base'
+    borderColor: 'backgroundBase'
   }
 };
 var breadcrumb = {
@@ -376,21 +382,7 @@ export default {
   attachment: attachment,
   avatar: avatar,
   breadcrumb: breadcrumb,
-  box: {
-    indeterminateCheckboxIcon: {
-      height: '19.25px',
-      width: '19.25px',
-      '&.is-disabled': {
-        '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
-          fill: 'gray-500',
-          stroke: 'gray-500'
-        }
-      },
-      '&.is-focused': {
-        boxShadow: "inset 0px 0px 0px 1px ".concat(colors.focus)
-      }
-    }
-  },
+  box: box,
   buttonBar: buttonBar,
   callout: callout,
   codeView: codeView,

package/package.json

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