@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

package/lib/components/TextField/TextField.stories.js

@@ -8,6 +8,8 @@ import TextField from '.';
 import { modes as labelModes } from '../Label/constants';
 import statuses from '../../utils/devUtils/constants/statuses.js';
 import Box from '../Box';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import CopyButton from '../CopyText/CopyButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
@@ -186,4 +188,74 @@ export var MaxLength = function MaxLength() {
     label: "Example label",
     maxLength: 9
   });
+};
+export var WithSlots = function WithSlots() {
+  var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = _slicedToArray(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = useState("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = _slicedToArray(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = useCopyToClipboard(addressesValue);
+  var copyJsonToClipboard = useCopyToClipboard(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), ___EmotionJSX(TextField, {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
 };

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -7,8 +7,9 @@ import { useEffect } from 'react';
 */
 
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
+  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   useEffect(function () {
-    if (process.env.NODE_ENV === 'development' && !ariaLabel) {
+    if (process.env.NODE_ENV === 'development' && condition && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn("".concat(component, " requires an aria-label"), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
     }

package/lib/index.js

@@ -31,6 +31,7 @@ export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
 export { default as ColorField } from './components/ColorField';
+export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';

package/lib/styles/variants/boxes.js

@@ -252,6 +252,18 @@ var datePicker = {
     }
   }
 };
+
+var environmentChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+
 var fileInputFieldWrapper = {
   display: 'flex',
   border: '1px dashed',
@@ -280,6 +292,7 @@ export default {
   chip: chip,
   copy: copy,
   datePicker: datePicker,
+  environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,

package/lib/styles/variants/buttons.js

@@ -295,6 +295,11 @@ var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
   ml: '5px',
   maxWidth: '13px',
   maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
   'path': {
     fill: 'neutral.20'
   },
@@ -354,7 +359,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -463,6 +468,28 @@ var expandableRow = {
     }
   }
 };
+var environmentBreadcrumb = {
+  current: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.30',
+    fontSize: 'md',
+    fontWeight: 1,
+    '&.is-hovered, &.is-focused': {
+      color: 'active',
+      textDecoration: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-pressed': {
+      color: 'accent.20',
+      textDecoration: 'none'
+    }
+  }),
+  selectItem: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
 var fileInputField = {
   background: 'none',
   cursor: 'pointer',
@@ -512,6 +539,75 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -529,8 +625,10 @@ export default {
     '&.is-pressed': _objectSpread({}, defaultActive),
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
@@ -550,5 +648,6 @@ export default {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };

package/lib/styles/variants/text.js

@@ -119,6 +119,14 @@ var expandableRow = {
     }
   }
 };
+
+var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: 'sm',
+  fontWeight: 3,
+  color: 'secondary',
+  textTransform: 'capitalize'
+});
+
 var navBarSubtitle = {
   fontWeight: 3,
   fontSize: '11px',
@@ -150,11 +158,26 @@ export var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
   inputValue: {
     fontWeight: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.0-alpha.0",
+  "version": "1.2.0-alpha.12",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -132,7 +132,7 @@
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
-    "prism-react-renderer": "^1.2.1",
+    "prism-react-renderer": "1.2.1",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",