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

package/lib/components/PopoverContainer/PopoverContainer.test.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box } from '../../index';
+import { Box, OverlayPanel } from '../../index';
 import PopoverContainer from './PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -26,4 +33,12 @@ test('should render a popover with no arrow', function () {
   });
   var arrow = screen.queryByTestId('popover-arrow');
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/components/TextArea/TextArea.js

@@ -12,7 +12,11 @@ import { Textarea as ThemeUITextArea } from 'theme-ui';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUITextArea, _extends({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -32,7 +32,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -42,23 +43,24 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTooltipTriggerState(props);
   var tooltipTriggerRef = useRef();
   var overlayRef = useRef();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = useTooltipTrigger({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = useOverlayPosition({
     placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -134,7 +136,10 @@ TooltipTrigger.propTypes = {
   placement: PropTypes.string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: PropTypes.string
+  trigger: PropTypes.string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: PropTypes.shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',

package/lib/index.js

@@ -27,6 +27,7 @@ export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
 export { default as Chip } from './components/Chip';
 export * from './components/Chip';
+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';

package/lib/styles/variants/accordion.js

@@ -18,11 +18,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

package/lib/styles/variants/buttons.js

@@ -67,7 +67,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -82,6 +82,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -219,6 +223,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -510,6 +518,8 @@ export default {
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline

package/lib/styles/variants/codeView.js

@@ -0,0 +1,68 @@
+import 'a11y-syntax-highlighting/dist/prism/a11y-light.min.css';
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+export default {
+  wrapper: wrapper,
+  lineNo: lineNo
+};

package/lib/styles/variants/variants.js

@@ -14,6 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import accordion from './accordion';
 import boxes from './boxes';
+import codeView from './codeView';
 import images from './images';
 import imageUpload from './imageUpload';
 import link from './link';
@@ -35,6 +36,7 @@ import tooltip from './tooltip';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
+  codeView: codeView,
   images: images,
   imageUpload: imageUpload,
   loader: loader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0-alpha.12",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -126,12 +126,14 @@
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "@tippyjs/react": "4.2.0",
+    "a11y-syntax-highlighting": "0.2.0",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
+    "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",