@pushwoosh/dumb-components 1.1.25 → 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/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.25",
+  "version": "1.1.26",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",