@pingux/astro 2.3.0-alpha.0 → 2.3.0-alpha.2

package/lib/cjs/components/Badge/Badge.styles.js

@@ -120,7 +120,8 @@ var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
   minHeight: '17px',
-  p: '2px 5px 2px 5px',
+  px: '0',
+  py: '2px',
   '& span': {
     fontSize: '11px',
     textTransform: 'uppercase'
@@ -132,7 +133,7 @@ var countBadge = _objectSpread(_objectSpread({}, countDefault), {}, {
 var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
   backgroundColor: '#E4E6E9 !important',
   '& span': {
-    color: 'neutral.20',
+    color: 'neutral.30',
     fontSize: '11px',
     textTransform: 'uppercase'
   }

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

@@ -203,20 +203,14 @@ var ContentSlots = function ContentSlots() {
     }
   });
   var nodeSx = {
-    alignItems: 'center',
-    backgroundColor: 'neutral.95',
-    borderRadius: '50%',
-    color: 'neutral.30',
-    fontSize: 'sm',
-    height: 20,
-    justifyContent: 'center',
     marginLeft: 6,
-    marginTop: 10,
-    minWidth: 20
+    marginTop: 10
   };
   var afterTabNode = (0, _react2.jsx)(_index.Badge, {
-    sx: nodeSx
-  }, "14");
+    variant: "countNeutral",
+    sx: nodeSx,
+    label: "14"
+  });
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Tabs, {
     items: tabs,
     mb: 50

package/lib/cjs/components/TextField/TextField.js

@@ -36,6 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
+    helpHintProps = props.helpHintProps,
     slots = props.slots,
     status = props.status;
   var _useField = (0, _hooks.useField)(props),
@@ -67,7 +68,8 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: labelRef,
     sx: isLabelHigher && {
       gridRow: '1/5'
-    }
+    },
+    helpHintProps: helpHintProps
   })), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.input.fieldControlWrapper"
   }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -114,6 +116,8 @@ TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   hintText: _propTypes["default"].string,
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
+  /** Props object that is spread directly into the helphint element. */
+  helpHintProps: _propTypes["default"].shape({}),
   /** Whether the field is disabled. */
   isDisabled: _propTypes["default"].bool,
   /** Whether the input can be selected, but not changed by the user. */

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithHelpHint = exports.Warning = exports.Success = exports.SmallVariant = exports.Required = exports.ReadOnly = exports.Password = exports.MaxLength = exports.LeftLabel = exports.FloatLabel = exports.Error = exports.DynamicRequired = exports.Disabled = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithHelpHintCustomWidth = exports.WithHelpHint = exports.Warning = exports.Success = exports.SmallVariant = exports.Required = exports.ReadOnly = exports.Password = exports.MaxLength = exports.LeftLabel = exports.FloatLabel = exports.Error = exports.DynamicRequired = exports.Disabled = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
@@ -213,6 +213,18 @@ var WithHelpHint = function WithHelpHint() {
   });
 };
 exports.WithHelpHint = WithHelpHint;
+var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
+  return (0, _react2.jsx)(_index.TextField, {
+    id: "with-help-hint-id",
+    name: "custom-name",
+    hintText: "Example Hint",
+    label: "Example Label",
+    helpHintProps: {
+      width: '300px'
+    }
+  });
+};
+exports.WithHelpHintCustomWidth = WithHelpHintCustomWidth;
 var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return (0, _react2.jsx)(_index.TextField, {
     label: "Example Label",

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

@@ -14,7 +14,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _index = require("../../context/TooltipContext/index");
-var _Box = _interopRequireDefault(require("../Box"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
 var _excluded = ["children"];
@@ -33,12 +32,11 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return tooltipRef.current;
   });
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: tooltipRef,
-    variant: "tooltip.container"
-  }, tooltipProps, others), (0, _react2.jsx)(_Text["default"], {
-    variant: "variants.tooltip.content"
-  }, children));
+    variant: "variants.tooltip.container",
+    p: "sm"
+  }, tooltipProps, others), children);
 });
 var _default = Tooltip;
 exports["default"] = _default;

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

@@ -19,7 +19,19 @@ var _Buttons = require("../Button/Buttons.styles");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var container = {
-  p: 'sm'
+  maxWidth: '11.3em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
 };
 var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
   cursor: 'default',
@@ -48,26 +60,10 @@ var inline = _objectSpread(_objectSpread({}, _Buttons.text), {}, {
     textDecoration: 'inherit'
   }
 });
-var content = {
-  maxWidth: '10em',
-  maxHeight: '15em',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: '10',
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box !important',
-  wordBreak: 'break-word',
-  '.is-right > * > &, .is-left > * > &': {
-    maxWidth: '24em',
-    maxHeight: '6.5em',
-    WebkitLineClamp: '4'
-  }
-};
 var _default = {
   container: container,
   badge: badge,
   button: button,
-  inline: inline,
-  content: content
+  inline: inline
 };
 exports["default"] = _default;

package/lib/components/Badge/Badge.styles.js

@@ -110,7 +110,8 @@ var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
   minHeight: '17px',
-  p: '2px 5px 2px 5px',
+  px: '0',
+  py: '2px',
   '& span': {
     fontSize: '11px',
     textTransform: 'uppercase'
@@ -122,7 +123,7 @@ var countBadge = _objectSpread(_objectSpread({}, countDefault), {}, {
 var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
   backgroundColor: '#E4E6E9 !important',
   '& span': {
-    color: 'neutral.20',
+    color: 'neutral.30',
     fontSize: '11px',
     textTransform: 'uppercase'
   }

package/lib/components/Tabs/Tabs.stories.js

@@ -180,20 +180,14 @@ export var ContentSlots = function ContentSlots() {
     }
   });
   var nodeSx = {
-    alignItems: 'center',
-    backgroundColor: 'neutral.95',
-    borderRadius: '50%',
-    color: 'neutral.30',
-    fontSize: 'sm',
-    height: 20,
-    justifyContent: 'center',
     marginLeft: 6,
-    marginTop: 10,
-    minWidth: 20
+    marginTop: 10
   };
   var afterTabNode = ___EmotionJSX(Badge, {
-    sx: nodeSx
-  }, "14");
+    variant: "countNeutral",
+    sx: nodeSx,
+    label: "14"
+  });
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Tabs, {
     items: tabs,
     mb: 50

package/lib/components/TextField/TextField.js

@@ -26,6 +26,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
+    helpHintProps = props.helpHintProps,
     slots = props.slots,
     status = props.status;
   var _useField = useField(props),
@@ -57,7 +58,8 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: labelRef,
     sx: isLabelHigher && {
       gridRow: '1/5'
-    }
+    },
+    helpHintProps: helpHintProps
   })), ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldControlWrapper"
   }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
@@ -104,6 +106,8 @@ TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   hintText: PropTypes.string,
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
+  /** Props object that is spread directly into the helphint element. */
+  helpHintProps: PropTypes.shape({}),
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
   /** Whether the input can be selected, but not changed by the user. */

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

@@ -187,6 +187,17 @@ export var WithHelpHint = function WithHelpHint() {
     label: "Example Label"
   });
 };
+export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
+  return ___EmotionJSX(TextField, {
+    id: "with-help-hint-id",
+    name: "custom-name",
+    hintText: "Example Hint",
+    label: "Example Label",
+    helpHintProps: {
+      width: '300px'
+    }
+  });
+};
 export var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return ___EmotionJSX(TextField, {
     label: "Example Label",

package/lib/components/TooltipTrigger/Tooltip.js

@@ -4,7 +4,6 @@ var _excluded = ["children"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { useTooltip } from 'react-aria';
 import { TooltipContext } from '../../context/TooltipContext/index';
-import Box from '../Box';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -20,11 +19,10 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return tooltipRef.current;
   });
-  return ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Text, _extends({
     ref: tooltipRef,
-    variant: "tooltip.container"
-  }, tooltipProps, others), ___EmotionJSX(Text, {
-    variant: "variants.tooltip.content"
-  }, children));
+    variant: "variants.tooltip.container",
+    p: "sm"
+  }, tooltipProps, others), children);
 });
 export default Tooltip;

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

@@ -12,7 +12,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { baseBadge } from '../Badge/Badge.styles';
 import { text } from '../Button/Buttons.styles';
 var container = {
-  p: 'sm'
+  maxWidth: '11.3em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
 };
 var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   cursor: 'default',
@@ -40,25 +52,9 @@ var inline = _objectSpread(_objectSpread({}, text), {}, {
     textDecoration: 'inherit'
   }
 });
-var content = {
-  maxWidth: '10em',
-  maxHeight: '15em',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: '10',
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box !important',
-  wordBreak: 'break-word',
-  '.is-right > * > &, .is-left > * > &': {
-    maxWidth: '24em',
-    maxHeight: '6.5em',
-    WebkitLineClamp: '4'
-  }
-};
 export default {
   container: container,
   badge: badge,
   button: button,
-  inline: inline,
-  content: content
+  inline: inline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.3.0-alpha.0",
+  "version": "2.3.0-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",