@pushwoosh/dumb-components 1.1.24 → 1.1.26

package/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AlertProps } from './types';
+export declare const Alert: ({ isExpandedDefault, title, type, children }: AlertProps) => React.JSX.Element;

package/Alert/Alert.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { AlertTypeMap } from './maps';
+import { AccordionHeader, Container } from './styles';
+export const Alert = ({
+  isExpandedDefault,
+  title,
+  type,
+  children
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
+  const canCollapse = !!children;
+  const {
+    icon: Icon,
+    iconColor,
+    bgColor
+  } = AlertTypeMap[type];
+  return React.createElement(Container, {
+    "$borderRadius": ShapeRadius.SECTION,
+    "$bgColor": bgColor
+  }, React.createElement(AccordionHeader, {
+    onClick: () => canCollapse && setIsExpanded(!isExpanded),
+    "$canCollapse": canCollapse,
+    "$justifyContent": "space-between",
+    "$alignItems": "center",
+    "$gap": 8,
+    "$padding": "8px 12px 8px 16px"
+  }, React.createElement(Horizontal, {
+    "$gap": 8
+  }, React.createElement(Icon, {
+    size: "small",
+    view: "lined",
+    color: iconColor
+  }), title), canCollapse && React.createElement(Horizontal, {
+    "$justifyContent": "center"
+  }, React.createElement(ChevronIcon, {
+    size: "small",
+    direction: isExpanded ? 'up' : 'down',
+    color: iconColor
+  }))), isExpanded && React.createElement(Vertical, {
+    "$padding": "0 16px 16px"
+  }, children));
+};

package/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './types';

package/Alert/index.js

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/Alert/maps.d.ts

@@ -0,0 +1,10 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { type DangerTriangleIconProps, type InfoRoundIconProps, type WarningRoundIconProps } from '@pushwoosh/kit-icons';
+import { type AlertType } from './types';
+type AlertData = {
+    icon: React.FC<InfoRoundIconProps | WarningRoundIconProps | DangerTriangleIconProps>;
+    iconColor: Color;
+    bgColor: Color;
+};
+export declare const AlertTypeMap: Record<AlertType, AlertData>;
+export {};

package/Alert/maps.js

@@ -0,0 +1,19 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { DangerTriangleIcon, InfoRoundIcon, WarningRoundIcon } from '@pushwoosh/kit-icons';
+export const AlertTypeMap = {
+  info: {
+    icon: InfoRoundIcon,
+    iconColor: Color.BRIGHT,
+    bgColor: Color.BRIGHT_LIGHT
+  },
+  warning: {
+    icon: WarningRoundIcon,
+    iconColor: Color.WARNING,
+    bgColor: Color.WARNING_LIGHT
+  },
+  error: {
+    icon: DangerTriangleIcon,
+    iconColor: Color.DANGER,
+    bgColor: Color.DANGER_LIGHT
+  }
+};

package/Alert/styles.d.ts

@@ -0,0 +1,114 @@
+export declare const AccordionHeader: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $canCollapse?: boolean;
+}, "$gridAutoFlow">;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/Alert/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+export const AccordionHeader = styled(Horizontal).withConfig({
+  displayName: "AccordionHeader",
+  componentId: "sc-fpiqkp-0"
+})(["cursor:", ";"], ({
+  $canCollapse
+}) => $canCollapse ? 'pointer' : 'initial');
+export const Container = styled(Vertical).withConfig({
+  displayName: "Container",
+  componentId: "sc-fpiqkp-1"
+})(["width:100%;min-width:200px;"]);

package/Alert/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type AlertType = 'info' | 'warning' | 'error';
+export type AlertProps = {
+    title: ReactNode;
+    type: AlertType;
+    isExpandedDefault?: boolean;
+    readonly children?: ReactNode;
+};

package/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/Checkbox/Checkbox.js

@@ -55,8 +55,7 @@ export function Checkbox(props) {
     }, checkboxMarkup, React.createElement(TooltipTrigger, {
       content: tooltip,
       padding: "4px 0",
-      view: "question",
-      color: Color.PHANTOM
+      view: "question"
     }));
   }
   return checkboxMarkup;

package/Radio/Radio.js

@@ -53,8 +53,7 @@ export function Radio(props) {
       content: tooltip,
       padding: size === 'compact' ? '0' : '4px 0',
       position: "top-middle",
-      view: "question",
-      color: Color.PHANTOM
+      view: "question"
     }));
   }
   return radioMarkup;

package/Tooltip/TooltipTrigger.d.ts

@@ -1,19 +1,10 @@
 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 & {
+export type TooltipTriggerProps = TooltipProps & {
     padding?: string | number;
     size?: 'small' | 'medium';
     hover?: boolean;
+    view: TooltipTriggerView;
 };
-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

@@ -9,7 +9,6 @@ export function TooltipTrigger({
   hover = true,
   ...tooltipProps
 }) {
-  const color = view === 'error' || view === 'warning' ? TooltipTriggerViewMap[view].color : tooltipProps.color;
   const hoverColor = hover ? TooltipTriggerViewMap[view].hoverColor : undefined;
   const {
     icon: Icon
@@ -18,7 +17,7 @@ export function TooltipTrigger({
     ...tooltipProps
   }, React.createElement(HelpIconWrapper, {
     "$padding": padding,
-    "$color": color,
+    "$color": TooltipTriggerViewMap[view].color,
     "$hoverColor": hoverColor
   }, React.createElement(Icon, {
     size: size,

package/Tooltip/maps.js

@@ -163,12 +163,12 @@ export function getLeftPosition(position, offset) {
 }
 export const TooltipTriggerViewMap = {
   info: {
-    color: Color.MAIN,
+    color: Color.PHANTOM,
     hoverColor: Color.PRIMARY_HOVER,
     icon: InfoRoundIcon
   },
   question: {
-    color: Color.MAIN,
+    color: Color.PHANTOM,
     hoverColor: Color.PRIMARY_HOVER,
     icon: HelpRoundIcon
   },

package/index.d.ts

@@ -37,3 +37,4 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent } from './RichMessageEditor';
+export { Alert } from './Alert';

package/index.js

@@ -36,4 +36,5 @@ export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
-export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { Alert } from './Alert';

package/package.json

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