@stokr/components-library 3.0.37 → 3.0.38

package/dist/components/InfoIcon/InfoIcon.js

@@ -1,9 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "react";
+import DOMPurify from "dompurify";
 import PropTypes from "prop-types";
+import { useId } from "react";
+import parse from "html-react-parser";
 import { Tooltip } from "react-tippy";
-import { Container, Icon } from "./InfoIcon.styles.js";
+import { colors } from "../../styles/colors.js";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { Container, ArrowColorGlobalStyle, Icon } from "./InfoIcon.styles.js";
 const InfoIcon = ({
   title = null,
   html = null,
@@ -14,13 +17,20 @@ const InfoIcon = ({
   noIcon,
   disabled,
   fullWidth,
+  arrow = true,
+  arrowColor = colors.blue,
+  theme = "light",
+  trigger,
   outline = false,
   containerStyle,
   ...props
 }) => {
+  const htmlContent = typeof html === "string" ? parse(DOMPurify.sanitize(html)) : html;
+  const instanceToken = `info-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const tippyTheme = arrowColor ? `${theme} ${instanceToken}` : theme;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       Container,
       {
         noMargin,
@@ -28,20 +38,25 @@ const InfoIcon = ({
         noMarginRight,
         fullWidth,
         style: containerStyle,
-        children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            ...props,
-            position,
-            title,
-            html,
-            theme: "light",
-            arrow: true,
-            duration: 200,
-            disabled,
-            children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
-          }
-        )
+        children: [
+          arrowColor && /* @__PURE__ */ jsx(ArrowColorGlobalStyle, { themeName: instanceToken, color: arrowColor }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              ...props,
+              position,
+              title,
+              trigger,
+              html: htmlContent,
+              useContext: htmlContent != null,
+              theme: tippyTheme,
+              arrow: arrowColor ? true : arrow,
+              duration: 200,
+              disabled,
+              children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -53,7 +68,12 @@ InfoIcon.propTypes = {
   noMargin: PropTypes.bool,
   noMarginLeft: PropTypes.bool,
   noMarginRight: PropTypes.bool,
-  outline: PropTypes.bool
+  outline: PropTypes.bool,
+  children: PropTypes.node,
+  theme: PropTypes.string,
+  trigger: PropTypes.oneOf(["click", "focus"]),
+  arrow: PropTypes.bool,
+  arrowColor: PropTypes.string
 };
 export {
   InfoIcon,

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -1,5 +1,19 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import theme from "../../styles/theme.js";
+const ArrowColorGlobalStyle = createGlobalStyle`
+  .tippy-popper[x-placement^='top'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-top-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='bottom'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-bottom-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='left'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-left-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='right'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-right-color: ${(props) => props.color} !important;
+  }
+`;
 const Container = styled.div.withConfig({
   shouldForwardProp: (props) => !["noMargin", "noMarginLeft", "noMarginRight", "fullWidth"].includes(props)
 })`
@@ -59,6 +73,7 @@ const Icon = styled.i.withConfig({
   }
 `;
 export {
+  ArrowColorGlobalStyle,
   Container,
   Icon
 };

package/dist/static/images/face-scan-icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="87">
+  <g fill="none" stroke="#9b9b9b" strokeMiterlimit="10" strokeWidth="4">
+    <path data-name="Stroke 1" d="M17.176 74.939a32.212 32.212 0 0 1 29.087-17.606 32.217 32.217 0 0 1 29.09 17.606" />
+    <path data-name="Stroke 3" d="M88 43.5C88 66.42 68.751 85 45 85S2 66.42 2 43.5 21.249 2 45 2s43 18.58 43 41.5z" />
+    <path data-name="Stroke 5" d="M57.647 32.182a12.647 12.647 0 1 1-12.645-12.576" />
+  </g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.37",
+  "version": "3.0.38",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",