@pushwoosh/dumb-components 1.1.22 → 1.1.24

package/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { NativeLabel, NativeCheckbox } from './styles';
-import { HelpTooltip } from '../Tooltip';
+import { TooltipTrigger } from '../Tooltip';
 let counter = 0;
 export function Checkbox(props) {
   const {
@@ -52,9 +52,11 @@ export function Checkbox(props) {
     return React.createElement(Horizontal, {
       "$gap": 4,
       "$alignItems": "start"
-    }, checkboxMarkup, React.createElement(HelpTooltip, {
+    }, checkboxMarkup, React.createElement(TooltipTrigger, {
       content: tooltip,
-      "$iconPadding": "4px 0"
+      padding: "4px 0",
+      view: "question",
+      color: Color.PHANTOM
     }));
   }
   return checkboxMarkup;

package/Radio/Radio.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { InputContainer, NativeLabel, NativeRadio } from './styles';
-import { HelpTooltip } from '../Tooltip';
+import { TooltipTrigger } from '../Tooltip';
 let counter = 0;
 export function Radio(props) {
   const {
@@ -49,10 +49,12 @@ export function Radio(props) {
     return React.createElement(Horizontal, {
       "$gap": 4,
       "$alignItems": "start"
-    }, radioMarkup, React.createElement(HelpTooltip, {
+    }, radioMarkup, React.createElement(TooltipTrigger, {
       content: tooltip,
-      "$iconPadding": size === 'compact' ? '0' : '4px 0',
-      position: "top-middle"
+      padding: size === 'compact' ? '0' : '4px 0',
+      position: "top-middle",
+      view: "question",
+      color: Color.PHANTOM
     }));
   }
   return radioMarkup;

package/Tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+import { type Color } from '@pushwoosh/kit-constants';
+import type { TooltipProps } from './types';
+export type TooltipTriggerView = 'question' | 'info' | 'warning' | 'error';
+type TooltipBaseProps = TooltipProps & {
+    padding?: string | number;
+    size?: 'small' | 'medium';
+    hover?: boolean;
+};
+type TooltipTriggerWithColor = TooltipBaseProps & {
+    view: 'question' | 'info';
+    color: Color.MAIN | Color.PHANTOM;
+};
+type TooltipTriggerWithoutColor = TooltipBaseProps & {
+    view: 'warning' | 'error';
+};
+export type TooltipTriggerProps = TooltipTriggerWithColor | TooltipTriggerWithoutColor;
+export declare function TooltipTrigger({ padding, view, size, hover, ...tooltipProps }: TooltipTriggerProps): ReactElement;
+export {};

package/Tooltip/TooltipTrigger.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TooltipTriggerViewMap } from './maps';
+import { HelpIconWrapper } from './styles';
+import { Tooltip } from './Tooltip';
+export function TooltipTrigger({
+  padding = 0,
+  view,
+  size = 'small',
+  hover = true,
+  ...tooltipProps
+}) {
+  const color = view === 'error' || view === 'warning' ? TooltipTriggerViewMap[view].color : tooltipProps.color;
+  const hoverColor = hover ? TooltipTriggerViewMap[view].hoverColor : undefined;
+  const {
+    icon: Icon
+  } = TooltipTriggerViewMap[view];
+  return React.createElement(Tooltip, {
+    ...tooltipProps
+  }, React.createElement(HelpIconWrapper, {
+    "$padding": padding,
+    "$color": color,
+    "$hoverColor": hoverColor
+  }, React.createElement(Icon, {
+    size: size,
+    view: "lined"
+  })));
+}

package/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { Tooltip } from './Tooltip';
-export { HelpTooltip } from './HelpTooltip';
+export { TooltipTrigger } from './TooltipTrigger';
 export type { TooltipPosition } from './types';

package/Tooltip/index.js

@@ -1,2 +1,2 @@
 export { Tooltip } from './Tooltip';
-export { HelpTooltip } from './HelpTooltip';
+export { TooltipTrigger } from './TooltipTrigger';

package/Tooltip/maps.d.ts

@@ -1,3 +1,5 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { type TooltipTriggerView } from './TooltipTrigger';
 import type { TooltipPosition } from './types';
 export declare const TooltipPositionToTippyPlacementMap: {
     'top-start': "top-start";
@@ -33,3 +35,11 @@ export declare function getTopPosition(position: TooltipPosition, offset: string
 export declare function getRightPosition(position: TooltipPosition, offset: string): string;
 export declare function getBottomPosition(position: TooltipPosition, offset: string): string;
 export declare function getLeftPosition(position: TooltipPosition, offset: string): string;
+export declare const TooltipTriggerViewMap: Record<TooltipTriggerView, {
+    color: Color;
+    hoverColor: Color;
+    icon: React.FC<{
+        size: 'small' | 'medium';
+        view: 'lined' | 'filled';
+    }>;
+}>;

package/Tooltip/maps.js

@@ -1,3 +1,5 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { DangerTriangleIcon, HelpRoundIcon, InfoRoundIcon, WarningRoundIcon } from '@pushwoosh/kit-icons';
 export const TooltipPositionToTippyPlacementMap = {
   'top-start': 'top-start',
   'top-middle': 'top',
@@ -158,4 +160,26 @@ export function getLeftPosition(position, offset) {
       console.error(`[Tooltip]: unknown position: ${position}!`);
       return 'auto';
   }
-}
+}
+export const TooltipTriggerViewMap = {
+  info: {
+    color: Color.MAIN,
+    hoverColor: Color.PRIMARY_HOVER,
+    icon: InfoRoundIcon
+  },
+  question: {
+    color: Color.MAIN,
+    hoverColor: Color.PRIMARY_HOVER,
+    icon: HelpRoundIcon
+  },
+  warning: {
+    color: Color.WARNING,
+    hoverColor: Color.WARNING_HOVER,
+    icon: WarningRoundIcon
+  },
+  error: {
+    color: Color.DANGER,
+    hoverColor: Color.DANGER_HOVER,
+    icon: DangerTriangleIcon
+  }
+};

package/Tooltip/styles.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '@pushwoosh/kit-constants';
 import type { TooltipPosition } from './types';
 export declare const TooltipBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {
     $arrowOffset: string;
@@ -58,4 +59,7 @@ export declare const HelpIconWrapper: import("styled-components").StyledComponen
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
 } & {
     $gridAutoFlow: string;
+} & {
+    $color: Color;
+    $hoverColor?: Color;
 }, "$gridAutoFlow">;

package/Tooltip/styles.js

@@ -24,4 +24,12 @@ export const TooltipBox = styled(Tippy).withConfig({
 export const HelpIconWrapper = styled(Horizontal).withConfig({
   displayName: "HelpIconWrapper",
   componentId: "sc-1hariht-1"
-})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
+})(["color:", ";", ""], ({
+  $color
+}) => $color, ({
+  $hoverColor
+}) => $hoverColor && `
+    &:hover {
+      color: ${$hoverColor};
+      cursor: pointer;
+    }`);

package/index.d.ts

@@ -20,7 +20,7 @@ export { SortButton, type SortButtonParams } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX, type SelectBase, type MultiSelectOptions, } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip, type TooltipPosition } from './Tooltip';
+export { Tooltip, type TooltipPosition, TooltipTrigger } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';

package/index.js

@@ -20,7 +20,7 @@ export { SortButton } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX } from './Select';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip } from './Tooltip';
+export { Tooltip, TooltipTrigger } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/Tooltip/HelpTooltip.d.ts

@@ -1,6 +0,0 @@
-import { type ReactElement } from 'react';
-import type { TooltipProps } from './types';
-export type HelpTooltipProps = TooltipProps & {
-    $iconPadding?: string;
-};
-export declare function HelpTooltip({ $iconPadding, ...tooltipProps }: HelpTooltipProps): ReactElement;

package/Tooltip/HelpTooltip.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HelpRoundIcon } from '@pushwoosh/kit-icons';
-import { HelpIconWrapper } from './styles';
-import { Tooltip } from './Tooltip';
-export function HelpTooltip({
-  $iconPadding = '0',
-  ...tooltipProps
-}) {
-  return React.createElement(Tooltip, {
-    ...tooltipProps
-  }, React.createElement(HelpIconWrapper, {
-    "$padding": $iconPadding
-  }, React.createElement(HelpRoundIcon, {
-    size: "small",
-    view: "lined"
-  })));
-}