@pingux/astro 2.96.0 → 2.97.0-alpha.1

package/lib/cjs/components/SelectField/SelectField.stories.d.ts

@@ -48,3 +48,4 @@ export declare const DynamicItems: {
 };
 export declare const AsyncLoading: () => React.JSX.Element;
 export declare const WithoutStatusIndicator: () => React.JSX.Element;
+export declare const WithHelpHint: () => React.JSX.Element;

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -443,4 +443,18 @@ var WithoutStatusIndicator = function WithoutStatusIndicator() {
     key: "yellow"
   }, "Yellow"));
 };
-exports.WithoutStatusIndicator = WithoutStatusIndicator;
+exports.WithoutStatusIndicator = WithoutStatusIndicator;
+var WithHelpHint = function WithHelpHint() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+    width: "100%",
+    hintText: "Example Hint",
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+exports.WithHelpHint = WithHelpHint;

package/lib/cjs/components/SelectField/SelectField.test.js

@@ -171,4 +171,14 @@ test('renders default placeholder text', function () {
   });
   var placeholder = _testWrapper.screen.getByText(placeholderText);
   expect(placeholder).toBeInTheDocument();
+});
+test('should show hintText text if prop is passed', function () {
+  var hintText = 'some hint text';
+  getComponent({
+    hintText: hintText
+  });
+  var helpHintButton = _testWrapper.screen.getByTestId('help-hint__button');
+  _testWrapper.fireEvent.mouseMove(helpHintButton);
+  _testWrapper.fireEvent.mouseEnter(helpHintButton);
+  expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
 });

package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.container = exports.button = void 0;
+exports["default"] = exports.container = exports.button = exports.badgeTooltipContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Badge = require("../Badge/Badge.styles");
 var _Buttons = require("../Button/Buttons.styles");
@@ -30,6 +30,12 @@ var container = {
   }
 };
 exports.container = container;
+var badgeTooltipContainer = _objectSpread(_objectSpread({}, container), {}, {
+  fontSize: 'sm',
+  fontWeight: '1',
+  lineHeight: '15.87px'
+});
+exports.badgeTooltipContainer = badgeTooltipContainer;
 var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
   cursor: 'default',
   '&.is-hovered, &.is-pressed': {
@@ -59,6 +65,7 @@ var inline = _objectSpread(_objectSpread({}, _Buttons.text), {}, {
 });
 var _default = {
   container: container,
+  badgeTooltipContainer: badgeTooltipContainer,
   badge: badge,
   button: button,
   inline: inline

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

@@ -11,6 +11,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _TooltipTrigger = _interopRequireDefault(require("./TooltipTrigger.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
@@ -112,9 +113,17 @@ var BadgeWithTooltip = function BadgeWithTooltip() {
       textTransform: 'uppercase'
     },
     color: "white"
-  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, {
+    variant: "variants.tooltip.badgeTooltipContainer"
+  }, "Useful tooltip")));
 };
 exports.BadgeWithTooltip = BadgeWithTooltip;
+BadgeWithTooltip.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.tooltipTrigger.badgeWithTooltip
+  }
+};
 var TextWithTooltip = function TextWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50

package/lib/cjs/types/selectField.d.ts

@@ -10,6 +10,7 @@ export interface SelectFieldProps<T> extends Omit<StyleProps, 'direction'>, UseS
         inContainer?: React.ReactNode;
     };
     'data-testid'?: string;
+    hintText?: string;
 }
 export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>, SharedFieldProps {
     slots?: {

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -181,6 +181,9 @@ export declare const FIGMA_LINKS: {
         withoutButton: string;
         withoutLink: string;
     };
+    tooltipTrigger: {
+        badgeWithTooltip: string;
+    };
     editButton: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -188,6 +188,9 @@ var FIGMA_LINKS = {
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
   },
+  tooltipTrigger: {
+    badgeWithTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=59201-5404&t=wsQsGpX0SmOiAweL-4'
+  },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
   }

package/lib/components/SelectField/SelectField.stories.js

@@ -417,4 +417,17 @@ export var WithoutStatusIndicator = function WithoutStatusIndicator() {
   }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
   }, "Yellow"));
+};
+export var WithHelpHint = function WithHelpHint() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
+    width: "100%",
+    hintText: "Example Hint",
+    label: "What's your favorite color?"
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
 };

package/lib/components/SelectField/SelectField.test.js

@@ -4,7 +4,7 @@ import { OverlayProvider } from 'react-aria';
 import userEvent from '@testing-library/user-event';
 import { Item, Section, SelectField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
@@ -168,4 +168,14 @@ test('renders default placeholder text', function () {
   });
   var placeholder = screen.getByText(placeholderText);
   expect(placeholder).toBeInTheDocument();
+});
+test('should show hintText text if prop is passed', function () {
+  var hintText = 'some hint text';
+  getComponent({
+    hintText: hintText
+  });
+  var helpHintButton = screen.getByTestId('help-hint__button');
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(hintText)).toBeInTheDocument();
 });

package/lib/components/TooltipTrigger/Tooltip.styles.js

@@ -22,6 +22,11 @@ export var container = {
     WebkitLineClamp: '4'
   }
 };
+export var badgeTooltipContainer = _objectSpread(_objectSpread({}, container), {}, {
+  fontSize: 'sm',
+  fontWeight: '1',
+  lineHeight: '15.87px'
+});
 var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   cursor: 'default',
   '&.is-hovered, &.is-pressed': {
@@ -50,6 +55,7 @@ var inline = _objectSpread(_objectSpread({}, text), {}, {
 });
 export default {
   container: container,
+  badgeTooltipContainer: badgeTooltipContainer,
   badge: badge,
   button: button,
   inline: inline

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

@@ -3,6 +3,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import TooltipTriggerReadme from './TooltipTrigger.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -94,7 +95,15 @@ export var BadgeWithTooltip = function BadgeWithTooltip() {
       textTransform: 'uppercase'
     },
     color: "white"
-  }, "Some text")), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
+  }, "Some text")), ___EmotionJSX(Tooltip, {
+    variant: "variants.tooltip.badgeTooltipContainer"
+  }, "Useful tooltip")));
+};
+BadgeWithTooltip.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.tooltipTrigger.badgeWithTooltip
+  }
 };
 export var TextWithTooltip = function TextWithTooltip() {
   return ___EmotionJSX(Box, {

package/lib/utils/designUtils/figmaLinks.js

@@ -181,6 +181,9 @@ export var FIGMA_LINKS = {
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
   },
+  tooltipTrigger: {
+    badgeWithTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=59201-5404&t=wsQsGpX0SmOiAweL-4'
+  },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
   }

package/package.json

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