@stokr/components-library 2.3.62 → 2.3.63-beta.2

package/dist/components/InfoIcon/InfoIcon.js

@@ -4,13 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTippy = require("react-tippy");
+var _reactTooltip = require("react-tooltip");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = require("./InfoIcon.styles");
-const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "containerStyle"];
+const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "containerStyle", "customStyles", "arrowColor"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const InfoIcon = _ref => {
@@ -24,26 +31,50 @@ const InfoIcon = _ref => {
       noIcon,
       disabled,
       fullWidth,
-      containerStyle
+      containerStyle,
+      customStyles,
+      arrowColor
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
+  // Generate stable ID for tooltip (once per component instance)
+  const tooltipIdRef = (0, _react.useRef)("info-icon-".concat(Math.random().toString(36).substr(2, 9)));
+  const tooltipId = tooltipIdRef.current;
+  const content = html || title;
+  const styles = _objectSpread({
+    borderRadius: '10px',
+    fontSize: '13px',
+    lineHeight: '20px',
+    letterSpacing: '0.4px',
+    padding: '20px',
+    wordBreak: 'break-word',
+    boxShadow: ['0 0 12px 8px rgba(0, 0, 0, 0.03)', '0 0 6px 3px rgba(0, 0, 0, 0.02)'],
+    fontWeight: 'normal',
+    width: 'auto'
+  }, customStyles);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
     noMargin: noMargin,
     noMarginLeft: noMarginLeft,
     noMarginRight: noMarginRight,
     fullWidth: fullWidth,
     style: containerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, _extends({}, props, {
-    position: position,
-    title: title,
-    html: html,
-    theme: "light",
-    arrow: true,
-    duration: 200
-    //  onRequestClose={() => console.log('request to close tooltip')}
-    ,
-    disabled: disabled
-  }), noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null)));
+  }, /*#__PURE__*/_react.default.createElement("span", _extends({
+    "data-tooltip-id": tooltipId
+  }, html ? {
+    'data-tooltip-html': html
+  } : {
+    'data-tooltip-content': title
+  }), noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null))), !disabled && content && /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, _extends({
+    id: tooltipId,
+    place: position,
+    variant: "light",
+    arrowColor: arrowColor || _colors.default.blue,
+    delayShow: 100,
+    delayHide: 100,
+    offset: 15,
+    opacity: 1,
+    arrowSize: 10,
+    style: styles
+  }, props)));
 };
 exports.InfoIcon = InfoIcon;
 InfoIcon.propTypes = {
@@ -52,7 +83,8 @@ InfoIcon.propTypes = {
   position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
   noMargin: _propTypes.default.bool,
   noMarginLeft: _propTypes.default.bool,
-  noMarginRight: _propTypes.default.bool
+  noMarginRight: _propTypes.default.bool,
+  arrowColor: _propTypes.default.string
 };
 InfoIcon.defaultProps = {
   title: null,

package/dist/components/InfoIcon/InfoIcon.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InfoIconTop = exports.InfoIconBottom = void 0;
+exports.default = exports.WithHTML = exports.RedArrow = exports.Positions = exports.NoMargins = exports.MultipleTooltips = exports.LongText = exports.InContext = exports.Disabled = exports.Default = exports.CustomChildren = exports.ArrowColorComparison = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _InfoIcon = require("./InfoIcon");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
@@ -15,35 +15,285 @@ var _default = exports.default = {
   argTypes: {
     title: {
       type: 'string',
-      defaultValue: 'default is null/ add some title'
+      description: 'Text content to display in the tooltip',
+      control: 'text'
     },
     html: {
-      type: 'node',
-      defaultValue: 'default is null/ add some html'
+      type: 'string',
+      description: 'HTML content to display in the tooltip (takes precedence over title)',
+      control: 'text'
     },
     position: {
-      type: 'string',
-      defaultValue: 'bottom'
+      type: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of the tooltip relative to the icon',
+      control: 'select'
     },
     noMargin: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove all margins from the container',
+      control: 'boolean'
     },
     noMarginLeft: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove left margin from the container',
+      control: 'boolean'
     },
     noMarginRight: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove right margin from the container',
+      control: 'boolean'
+    },
+    noIcon: {
+      type: 'boolean',
+      description: 'Hide the info icon and show children instead',
+      control: 'boolean'
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Disable the tooltip',
+      control: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean',
+      description: 'Make the container full width',
+      control: 'boolean'
     }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+}; // Default example
+const Default = exports.Default = {
+  args: {
+    title: 'This is a helpful tooltip with some information',
+    position: 'bottom'
   }
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, args)));
-const InfoIconBottom = exports.InfoIconBottom = Template.bind({});
-InfoIconBottom.args = {};
-const InfoIconTop = exports.InfoIconTop = Template.bind({});
-InfoIconTop.args = {
-  position: 'top',
-  title: 'This is a title'
-};
+
+// All positions
+const Positions = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    gap: '40px',
+    flexWrap: 'wrap',
+    padding: '60px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "top",
+  title: "Tooltip on top"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Top")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "bottom",
+  title: "Tooltip on bottom"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Bottom")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "left",
+  title: "Tooltip on left"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Left")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "right",
+  title: "Tooltip on right"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Right")));
+
+// With HTML content
+exports.Positions = Positions;
+const WithHTML = exports.WithHTML = {
+  args: {
+    html: '<strong>Bold text</strong> and <em>italic text</em><br/>With a line break',
+    position: 'bottom'
+  }
+};
+
+// With long text
+const LongText = exports.LongText = {
+  args: {
+    title: 'This is a very long tooltip text that demonstrates how the tooltip handles longer content. It should wrap nicely and maintain good readability.',
+    position: 'bottom'
+  }
+};
+
+// No margins
+const NoMargins = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    gap: '20px',
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement("span", null, "Text before"), /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "No margin",
+  noMargin: true
+}), /*#__PURE__*/_react.default.createElement("span", null, "Text after"));
+
+// Custom children (no icon)
+exports.NoMargins = NoMargins;
+const CustomChildren = exports.CustomChildren = {
+  args: {
+    title: 'Custom content instead of icon',
+    noIcon: true,
+    children: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        textDecoration: 'underline'
+      }
+    }, "Hover me")
+  }
+};
+
+// Disabled
+const Disabled = exports.Disabled = {
+  args: {
+    title: 'This tooltip is disabled',
+    disabled: true
+  }
+};
+
+// In context example
+const InContext = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px',
+    maxWidth: '500px'
+  }
+}, /*#__PURE__*/_react.default.createElement("h3", {
+  style: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '8px'
+  }
+}, "Investment Amount", /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Enter the amount you wish to invest in this project. Minimum investment is \u20AC1,000.",
+  position: "top"
+})), /*#__PURE__*/_react.default.createElement("input", {
+  type: "number",
+  placeholder: "Enter amount",
+  style: {
+    marginTop: '10px',
+    padding: '8px',
+    width: '100%',
+    border: '1px solid #ccc',
+    borderRadius: '4px'
+  }
+}), /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginTop: '20px',
+    fontSize: '14px',
+    color: '#666'
+  }
+}, "Need help?", ' ', /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Contact our support team for assistance",
+  noMarginLeft: true,
+  noMarginRight: true
+})));
+
+// Multiple tooltips
+exports.InContext = InContext;
+const MultipleTooltips = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginBottom: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "First tooltip",
+  position: "top"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "First example")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginBottom: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Second tooltip",
+  position: "bottom"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "Second example")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  html: "<strong>HTML</strong> tooltip with <em>formatting</em>",
+  position: "right"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "Third example with HTML")));
+
+// Custom arrow color (red)
+exports.MultipleTooltips = MultipleTooltips;
+const RedArrow = exports.RedArrow = {
+  args: {
+    title: 'This tooltip has a red arrow instead of the default blue',
+    position: 'bottom',
+    arrowColor: '#ee220d' // Using red from colors
+  }
+};
+
+// Comparison: Blue vs Red arrow
+const ArrowColorComparison = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px',
+    display: 'flex',
+    gap: '40px',
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Default blue arrow",
+  position: "bottom"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Blue (default)")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Custom red arrow",
+  position: "bottom",
+  arrowColor: "#ee220d"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Red (custom)")));
+exports.ArrowColorComparison = ArrowColorComparison;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.62",
+  "version": "2.3.63-beta.2",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -67,6 +67,7 @@
     "react-slick": "^0.31.0",
     "react-table": "^7.8.0",
     "react-tippy": "^1.4.0",
+    "react-tooltip": "^5.30.0",
     "react-transition-group": "^4.4.5",
     "react-visibility-sensor": "^5.1.1",
     "scroll-to-element": "^2.0.3",
@@ -75,6 +76,9 @@
     "styled-components": "^6.0.7",
     "yup": "^1.0.0"
   },
+  "peerDependencies": {
+    "react-tooltip": ">=5.0.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.12",