@pingux/astro 1.0.1 → 1.1.0-alpha.11

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.stories.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Earth from 'mdi-react/EarthIcon';
-import { Button, Icon, Tooltip, TooltipTrigger } from '../../index';
+import PersonIcon from 'mdi-react/PersonIcon';
+import { Box, Button, Icon, Tooltip, TooltipTrigger } from '../../index';
 import IconButton from '../IconButton';
+import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'TooltipTrigger',
@@ -44,4 +46,34 @@ Disabled.parameters = {
       story: 'The tooltip can be disabled without disabling the button press events.'
     }
   }
+};
+export var IconWithTooltip = function IconWithTooltip() {
+  return ___EmotionJSX(Box, {
+    pl: 50
+  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(IconButton, {
+    variant: "tooltipIconButton"
+  }, ___EmotionJSX(Icon, {
+    icon: PersonIcon
+  })), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
+};
+export var ChipWithTooltip = function ChipWithTooltip() {
+  return ___EmotionJSX(Box, {
+    pl: 50
+  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
+    variant: "tooltipChip",
+    bg: "neutral.10"
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    sx: {
+      textTransform: 'uppercase'
+    },
+    color: "white"
+  }, "Some text")), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
+};
+export var TextWithTooltip = function TextWithTooltip() {
+  return ___EmotionJSX(Box, {
+    pl: 50
+  }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
+    variant: "tooltipInline"
+  }, "Some text"), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };

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/boxes.js

@@ -86,7 +86,7 @@ var listBoxSectionTitle = {
   ml: 'sm',
   justifyContent: 'center'
 };
-var chip = {
+export var chip = {
   cursor: 'pointer',
   p: '3px 5px 4px 5px',
   alignItems: 'center',

package/lib/styles/variants/buttons.js

@@ -14,6 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { text as textVariants } from './text';
 import { neutral } from '../colors';
+import { chip } from './boxes';
 
 var base = _objectSpread({
   cursor: 'pointer',
@@ -66,7 +67,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -81,6 +82,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -218,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),
@@ -446,6 +455,36 @@ var fileInputField = {
     boxShadow: 'focus'
   }
 };
+
+var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+});
+
+var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -478,5 +517,10 @@ export default {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
-  applicationPortal: applicationPortal
+  applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
+  tooltipChip: tooltipChip,
+  tooltipIconButton: tooltipIconButton,
+  tooltipInline: tooltipInline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.0.1",
+  "version": "1.1.0-alpha.11",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",