@pingux/astro 1.0.0-alpha.20 → 1.0.0-alpha.21

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.21](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.20...@pingux/astro@1.0.0-alpha.21) (2022-01-18)
+
+
+### Features
+
+* [UIP-5066] Add Icon, Chip, and Text with Tooltips ([1681083](https://gitlab.corp.pingidentity.com/ux/pingux/commit/168108386d77ef09635a177a35cb6d68cfad8bc2))
+
+
+
+
+
 # [1.0.0-alpha.20](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.19...@pingux/astro@1.0.0-alpha.20) (2022-01-17)
 
 **Note:** Version bump only for package @pingux/astro

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -8,16 +8,20 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
+exports.TextWithTooltip = exports.ChipWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
+var _PersonIcon = _interopRequireDefault(require("mdi-react/PersonIcon"));
+
 var _index = require("../../index");
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Text = _interopRequireDefault(require("../Text"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -80,4 +84,43 @@ Disabled.parameters = {
       story: 'The tooltip can be disabled without disabling the button press events.'
     }
   }
-};
+};
+
+var IconWithTooltip = function IconWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
+    variant: "tooltipIconButton"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PersonIcon["default"]
+  })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.IconWithTooltip = IconWithTooltip;
+
+var ChipWithTooltip = function ChipWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipChip",
+    bg: "neutral.10"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    sx: {
+      textTransform: 'uppercase'
+    },
+    color: "white"
+  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.ChipWithTooltip = ChipWithTooltip;
+
+var TextWithTooltip = function TextWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipInline"
+  }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.TextWithTooltip = TextWithTooltip;

package/lib/cjs/styles/variants/boxes.js

@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports["default"] = exports.chip = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 
@@ -131,6 +131,7 @@ var chip = {
     }
   }
 };
+exports.chip = chip;
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',

package/lib/cjs/styles/variants/buttons.js

@@ -32,6 +32,8 @@ var _text = require("./text");
 
 var _colors = require("../colors");
 
+var _boxes = require("./boxes");
+
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
@@ -467,6 +469,36 @@ var fileInputField = {
     boxShadow: 'focus'
   }
 };
+
+var tooltipChip = _objectSpread(_objectSpread({}, _boxes.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'
+  }
+});
+
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -499,6 +531,9 @@ var _default = {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
-  applicationPortal: applicationPortal
+  applicationPortal: applicationPortal,
+  tooltipChip: tooltipChip,
+  tooltipIconButton: tooltipIconButton,
+  tooltipInline: tooltipInline
 };
 exports["default"] = _default;

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/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',
@@ -446,6 +447,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 +509,8 @@ export default {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
-  applicationPortal: applicationPortal
+  applicationPortal: applicationPortal,
+  tooltipChip: tooltipChip,
+  tooltipIconButton: tooltipIconButton,
+  tooltipInline: tooltipInline
 };

package/package.json

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