glints-aries 4.0.140 → 4.0.141

package/es/Display/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, FC } from 'react';
+import React, { HTMLAttributes, FC } from 'react';
 export declare const Tooltip: FC<Props>;
 export interface Classes {
     container?: string;
@@ -6,12 +6,17 @@ export interface Classes {
     message?: string;
 }
 export declare type Position = 'top' | 'right' | 'bottom' | 'left';
-export interface Props extends HTMLAttributes<HTMLHeadingElement> {
-    /** This is an object with three keys: <code>container</code>,
-     * <code>content</code> and <code>message</code>. Use them to attach
-     * additional classes to the respective elements. */
+interface BaseProps extends HTMLAttributes<HTMLHeadingElement> {
     classes?: Classes;
-    text: string;
     position?: Position;
 }
+export interface StringTooltip extends BaseProps {
+    text: string;
+    textAsString?: string;
+}
+export interface HtmlTooltip extends BaseProps {
+    text: React.ReactNode;
+    textAsString: string;
+}
+export declare type Props = StringTooltip | HtmlTooltip;
 export default Tooltip;

package/es/Display/Tooltip/Tooltip.js

@@ -8,9 +8,10 @@ export var Tooltip = function Tooltip(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       children = _ref.children,
       text = _ref.text,
+      textAsString = _ref.textAsString,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'top' : _ref$position,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["classes", "children", "text", "position"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, ["classes", "children", "text", "textAsString", "position"]);
 
   var contentRef = useRef(null);
 
@@ -42,11 +43,12 @@ export var Tooltip = function Tooltip(_ref) {
     }
   };
 
+  var arialLabel = typeof text === 'string' ? text : textAsString;
   return /*#__PURE__*/React.createElement(TooltipContainer, _extends({
     className: classNames('aries-tooltip', classes.container),
     role: "tooltip",
     "aria-hidden": isShow ? 'false' : 'true',
-    "aria-label": text // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
+    "aria-label": arialLabel // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
     // Adding onTouchStart and onTouchEnd as a workaround
     // On mobile, it shows the tooltip on touch and hides the tooltip when the touch is released
     ,
@@ -57,6 +59,7 @@ export var Tooltip = function Tooltip(_ref) {
     ref: contentRef,
     className: classNames('aries-tooltip-content', classes.content),
     text: text,
+    textAsString: textAsString,
     position: position
   }, /*#__PURE__*/React.createElement(TooltipMessage, {
     className: classNames('aries-tooltip-message', classes.message)

package/es/Display/Tooltip/Tooltip.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const DifferentPosition: any;
+export declare const WithHtmlContent: any;

package/es/Display/Tooltip/Tooltip.stories.js

@@ -18,7 +18,7 @@ export default {
   }]
 };
 
-var Template = function Template(_ref) {
+var StringTooltipTemplate = function StringTooltipTemplate(_ref) {
   var text = _ref.text,
       args = _objectWithoutPropertiesLoose(_ref, ["text"]);
 
@@ -27,12 +27,26 @@ var Template = function Template(_ref) {
   }), /*#__PURE__*/React.createElement(Tag, null, "Glints Aries"));
 };
 
-export var Interactive = Template.bind({});
+var HtmlTooltipTemplate = function HtmlTooltipTemplate(_ref2) {
+  var text = _ref2.text,
+      args = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, args, {
+    text: text || defaultText
+  }), /*#__PURE__*/React.createElement(Tag, null, "Glints Aries"));
+};
+
+export var Interactive = StringTooltipTemplate.bind({});
 Interactive.args = {
   text: defaultText,
   position: 'top'
 };
-export var DifferentPosition = Template.bind({});
+export var DifferentPosition = StringTooltipTemplate.bind({});
 DifferentPosition.args = {
   position: 'left'
+};
+export var WithHtmlContent = HtmlTooltipTemplate.bind({});
+WithHtmlContent.args = {
+  text: /*#__PURE__*/React.createElement("b", null, "Hello World"),
+  textAsString: 'Hello World'
 };

package/lib/Display/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, FC } from 'react';
+import React, { HTMLAttributes, FC } from 'react';
 export declare const Tooltip: FC<Props>;
 export interface Classes {
     container?: string;
@@ -6,12 +6,17 @@ export interface Classes {
     message?: string;
 }
 export declare type Position = 'top' | 'right' | 'bottom' | 'left';
-export interface Props extends HTMLAttributes<HTMLHeadingElement> {
-    /** This is an object with three keys: <code>container</code>,
-     * <code>content</code> and <code>message</code>. Use them to attach
-     * additional classes to the respective elements. */
+interface BaseProps extends HTMLAttributes<HTMLHeadingElement> {
     classes?: Classes;
-    text: string;
     position?: Position;
 }
+export interface StringTooltip extends BaseProps {
+    text: string;
+    textAsString?: string;
+}
+export interface HtmlTooltip extends BaseProps {
+    text: React.ReactNode;
+    textAsString: string;
+}
+export declare type Props = StringTooltip | HtmlTooltip;
 export default Tooltip;

package/lib/Display/Tooltip/Tooltip.js

@@ -22,9 +22,10 @@ var Tooltip = function Tooltip(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       children = _ref.children,
       text = _ref.text,
+      textAsString = _ref.textAsString,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'top' : _ref$position,
-      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["classes", "children", "text", "position"]);
+      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["classes", "children", "text", "textAsString", "position"]);
   var contentRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -55,11 +56,12 @@ var Tooltip = function Tooltip(_ref) {
     }
   };
 
+  var arialLabel = typeof text === 'string' ? text : textAsString;
   return /*#__PURE__*/_react["default"].createElement(_TooltipStyle.TooltipContainer, (0, _extends2["default"])({
     className: (0, _classnames["default"])('aries-tooltip', classes.container),
     role: "tooltip",
     "aria-hidden": isShow ? 'false' : 'true',
-    "aria-label": text // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
+    "aria-label": arialLabel // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
     // Adding onTouchStart and onTouchEnd as a workaround
     // On mobile, it shows the tooltip on touch and hides the tooltip when the touch is released
     ,
@@ -70,6 +72,7 @@ var Tooltip = function Tooltip(_ref) {
     ref: contentRef,
     className: (0, _classnames["default"])('aries-tooltip-content', classes.content),
     text: text,
+    textAsString: textAsString,
     position: position
   }, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.TooltipMessage, {
     className: (0, _classnames["default"])('aries-tooltip-message', classes.message)

package/lib/Display/Tooltip/Tooltip.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const DifferentPosition: any;
+export declare const WithHtmlContent: any;

package/lib/Display/Tooltip/Tooltip.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.DifferentPosition = exports.Interactive = exports["default"] = void 0;
+exports.WithHtmlContent = exports.DifferentPosition = exports.Interactive = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,7 +33,7 @@ var _default = {
 };
 exports["default"] = _default;
 
-var Template = function Template(_ref) {
+var StringTooltipTemplate = function StringTooltipTemplate(_ref) {
   var text = _ref.text,
       args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["text"]);
   return /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({}, args, {
@@ -41,14 +41,28 @@ var Template = function Template(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_BasicTag["default"], null, "Glints Aries"));
 };
 
-var Interactive = Template.bind({});
+var HtmlTooltipTemplate = function HtmlTooltipTemplate(_ref2) {
+  var text = _ref2.text,
+      args = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["text"]);
+  return /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({}, args, {
+    text: text || defaultText
+  }), /*#__PURE__*/_react["default"].createElement(_BasicTag["default"], null, "Glints Aries"));
+};
+
+var Interactive = StringTooltipTemplate.bind({});
 exports.Interactive = Interactive;
 Interactive.args = {
   text: defaultText,
   position: 'top'
 };
-var DifferentPosition = Template.bind({});
+var DifferentPosition = StringTooltipTemplate.bind({});
 exports.DifferentPosition = DifferentPosition;
 DifferentPosition.args = {
   position: 'left'
+};
+var WithHtmlContent = HtmlTooltipTemplate.bind({});
+exports.WithHtmlContent = WithHtmlContent;
+WithHtmlContent.args = {
+  text: /*#__PURE__*/_react["default"].createElement("b", null, "Hello World"),
+  textAsString: 'Hello World'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.140",
+  "version": "4.0.141",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",