@pushwoosh/dumb-components 1.1.228 → 1.1.230

package/RichMessageEditor/RichMessageEditor.js

@@ -25,7 +25,9 @@ export const RichMessageEditor = ({
   title,
   initialValue,
   minHeight,
+  placeholder,
   error,
+  isErrored,
   canUsePersonalization,
   canUseEmoji,
   onChange,
@@ -123,6 +125,8 @@ export const RichMessageEditor = ({
       }),
       children: [_jsx(SlateEditable, {
         minHeight: minHeight,
+        placeholder: placeholder,
+        isErrored: isErrored || !!error,
         onFocus: () => {
           setIsFocused(true);
           const {

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -24,8 +24,12 @@ export type RichMessageEditorProps = {
     onChange: (value: string) => void;
     /** Minimum editor height (CSS value). */
     minHeight?: string;
+    /** Hint shown while the editor is empty. */
+    placeholder?: string;
     /** Error message; switches the field to the error state. */
     error?: ReactNode;
+    /** Draw the error border without an error message. */
+    isErrored?: boolean;
     /** Enable inserting personalization (dynamic-content) tokens. */
     canUsePersonalization?: boolean;
     /** Enable the emoji picker. */

package/RichMessageEditor/slate/SlateEditor.d.ts

@@ -12,6 +12,8 @@ type SlateEditor = {
 export declare const SlateEditor: FC<SlateEditor>;
 type SlateEditableProps = {
     minHeight?: string;
+    placeholder?: string;
+    isErrored?: boolean;
     onFocus?: () => void;
     onDelete: () => void;
 };

package/RichMessageEditor/slate/SlateEditor.js

@@ -26,6 +26,8 @@ export const SlateEditor = ({
 };
 export const SlateEditable = ({
   minHeight,
+  placeholder,
+  isErrored,
   onFocus,
   onDelete
 }) => {
@@ -34,6 +36,8 @@ export const SlateEditable = ({
   });
   return _jsx(EditableStyled, {
     "$minHeight": minHeight,
+    "$isErrored": isErrored,
+    placeholder: placeholder,
     renderElement: renderElementPersistent,
     onFocus: onFocus
   });

package/RichMessageEditor/slate/SlateEditor.styled.d.ts

@@ -15,4 +15,5 @@ export declare const EditableStyled: import("styled-components").StyledComponent
     disableDefaultStyles?: boolean | undefined;
 } & import("react").TextareaHTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $minHeight?: string;
+    $isErrored?: boolean;
 }, never>;

package/RichMessageEditor/slate/SlateEditor.styled.js

@@ -4,6 +4,8 @@ import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constan
 export const EditableStyled = styled(Editable).withConfig({
   displayName: "EditableStyled",
   componentId: "sc-1frhl1f-0"
-})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " &:focus{border-color:", ";outline:none;}& > p{margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FORM, ShapeRadius.CONTROL, ({
+})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " & [data-slate-placeholder='true']{color:", ";opacity:1 !important;}&:focus{border-color:", ";outline:none;}& > p{position:relative;margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, ({
   $minHeight
-}) => $minHeight && `min-height: ${$minHeight};`, Color.BRIGHT);
+}) => $minHeight && `min-height: ${$minHeight};`, Color.PHANTOM, Color.BRIGHT);

package/WhatsAppPreview/WhatsAppPreview.js

@@ -6,7 +6,7 @@ import { WhatsAppMessageContent } from './components/WhatsAppMessageContent';
 import { WHATSAPP_CARD_PADDING } from './constants';
 import { isMessageDrawable } from './helpers';
 import { Lang } from './polyglot';
-import { AppBar, AppName, Card, MissedGlyph, MissedHint, MissedRow, MissedTitle, PreviewText } from './styles';
+import { AppBar, AppName, Backdrop, Card, MissedGlyph, MissedHint, MissedRow, MissedTitle, PreviewText } from './styles';
 import { Spinner } from '../Spinner';
 /** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export function WhatsAppPreview(props) {
@@ -18,46 +18,48 @@ export function WhatsAppPreview(props) {
     isContentMissing = false
   } = props;
   const isDrawable = !isContentMissing && message !== undefined && isMessageDrawable(message);
-  return _jsxs(Card, {
-    children: [applicationName && _jsxs(AppBar, {
-      children: [_jsx(WhatsappIcon, {
-        size: "small",
-        view: "filled"
-      }), _jsx(AppName, {
-        children: applicationName
-      })]
-    }), isLoading && _jsx(Horizontal, {
-      "$alignItems": "center",
-      "$justifyContent": "center",
-      "$padding": WHATSAPP_CARD_PADDING,
-      children: _jsx(Spinner, {
-        color: Color.LOCKED,
-        size: "medium"
-      })
-    }), !isLoading && isContentMissing && _jsxs(MissedRow, {
-      children: [_jsx(MissedGlyph, {
-        children: _jsx(CloseIcon, {
+  return _jsx(Backdrop, {
+    children: _jsxs(Card, {
+      children: [applicationName && _jsxs(AppBar, {
+        children: [_jsx(WhatsappIcon, {
+          size: "small",
+          view: "filled"
+        }), _jsx(AppName, {
+          children: applicationName
+        })]
+      }), isLoading && _jsx(Horizontal, {
+        "$alignItems": "center",
+        "$justifyContent": "center",
+        "$padding": WHATSAPP_CARD_PADDING,
+        children: _jsx(Spinner, {
+          color: Color.LOCKED,
           size: "medium"
         })
-      }), _jsxs(Vertical, {
-        children: [_jsx(MissedTitle, {
-          children: _jsx(Lang, {
-            message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE"
-          })
-        }), _jsx(MissedHint, {
-          children: _jsx(Lang, {
-            message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT"
+      }), !isLoading && isContentMissing && _jsxs(MissedRow, {
+        children: [_jsx(MissedGlyph, {
+          children: _jsx(CloseIcon, {
+            size: "medium"
           })
+        }), _jsxs(Vertical, {
+          children: [_jsx(MissedTitle, {
+            children: _jsx(Lang, {
+              message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE"
+            })
+          }), _jsx(MissedHint, {
+            children: _jsx(Lang, {
+              message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT"
+            })
+          })]
         })]
+      }), !isLoading && !isContentMissing && !isDrawable && _jsx(PreviewText, {
+        "$color": Color.LOCKED,
+        "$ellipsis": true,
+        children: emptyText ?? _jsx(Lang, {
+          message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
+        })
+      }), !isLoading && isDrawable && _jsx(WhatsAppMessageContent, {
+        message: message
       })]
-    }), !isLoading && !isContentMissing && !isDrawable && _jsx(PreviewText, {
-      "$color": Color.LOCKED,
-      "$ellipsis": true,
-      children: emptyText ?? _jsx(Lang, {
-        message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
-      })
-    }), !isLoading && isDrawable && _jsx(WhatsAppMessageContent, {
-      message: message
-    })]
+    })
   });
 }

package/WhatsAppPreview/constants.d.ts

@@ -13,6 +13,8 @@ export declare const WHATSAPP_COLOR: {
 /** Card geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
 export declare const WHATSAPP_CARD_WIDTH = 306;
 export declare const WHATSAPP_CARD_PADDING = 12;
+export declare const WHATSAPP_BACKDROP_PADDING = 24;
+export declare const WHATSAPP_BACKDROP_WIDTH: number;
 export declare const WHATSAPP_APP_BAR_GAP = 6;
 export declare const WHATSAPP_APP_BAR_PADDING: {
     vertical: number;

package/WhatsAppPreview/constants.js

@@ -13,6 +13,8 @@ export const WHATSAPP_COLOR = {
 /** Card geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
 export const WHATSAPP_CARD_WIDTH = 306;
 export const WHATSAPP_CARD_PADDING = 12;
+export const WHATSAPP_BACKDROP_PADDING = 24;
+export const WHATSAPP_BACKDROP_WIDTH = WHATSAPP_CARD_WIDTH + WHATSAPP_BACKDROP_PADDING * 2;
 export const WHATSAPP_APP_BAR_GAP = 6;
 export const WHATSAPP_APP_BAR_PADDING = {
   vertical: 8,

package/WhatsAppPreview/styles.d.ts

@@ -1,4 +1,23 @@
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export declare const Backdrop: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignContent: string;
+    $justifyItems: string;
+    $bgColor: Color;
+    $borderRadius: ShapeRadius;
+    $padding: number;
+    $width: number;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$padding" | "$width" | "$alignContent" | "$justifyItems">;
 export declare const Card: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;

package/WhatsAppPreview/styles.js

@@ -2,7 +2,18 @@ import styled from 'styled-components';
 import { Color, FontFamily, FontSize, FontWeight, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
-import { WHATSAPP_APP_BAR_GAP, WHATSAPP_APP_BAR_PADDING, WHATSAPP_CARD_PADDING, WHATSAPP_CARD_WIDTH, WHATSAPP_MISSED_GAP, WHATSAPP_MISSED_GLYPH_SIZE } from './constants';
+import { WHATSAPP_APP_BAR_GAP, WHATSAPP_BACKDROP_PADDING, WHATSAPP_BACKDROP_WIDTH, WHATSAPP_APP_BAR_PADDING, WHATSAPP_CARD_PADDING, WHATSAPP_CARD_WIDTH, WHATSAPP_MISSED_GAP, WHATSAPP_MISSED_GLYPH_SIZE } from './constants';
+export const Backdrop = styled(Vertical).attrs({
+  $alignContent: 'start',
+  $justifyItems: 'center',
+  $bgColor: Color.SOFT_LIGHT,
+  $borderRadius: ShapeRadius.SECTION,
+  $padding: WHATSAPP_BACKDROP_PADDING,
+  $width: WHATSAPP_BACKDROP_WIDTH
+}).withConfig({
+  displayName: "Backdrop",
+  componentId: "sc-15y0kbp-0"
+})(["-webkit-font-smoothing:antialiased;&,*{box-sizing:border-box;}"]);
 export const Card = styled(Vertical).attrs({
   $alignContent: 'start',
   $bgColor: Color.CLEAR,
@@ -13,8 +24,8 @@ export const Card = styled(Vertical).attrs({
   $width: WHATSAPP_CARD_WIDTH
 }).withConfig({
   displayName: "Card",
-  componentId: "sc-15y0kbp-0"
-})(["-webkit-font-smoothing:antialiased;box-shadow:", ";overflow-wrap:anywhere;&,*{box-sizing:border-box;}"], Shadow.LARGE);
+  componentId: "sc-15y0kbp-1"
+})(["box-shadow:", ";overflow-wrap:anywhere;"], Shadow.LARGE);
 // styled-components merges attrs OVER incoming props, so a plain object here would
 // silently clobber every call-site `$color`; the callback keeps MAIN as a default only.
 export const PreviewText = styled(Text).attrs(props => ({
@@ -22,7 +33,7 @@ export const PreviewText = styled(Text).attrs(props => ({
   $color: props.$color ?? Color.MAIN
 })).withConfig({
   displayName: "PreviewText",
-  componentId: "sc-15y0kbp-1"
+  componentId: "sc-15y0kbp-2"
 })(["overflow:hidden;line-height:18px;text-overflow:ellipsis;"]);
 export const AppBar = styled(Horizontal).attrs({
   $alignItems: 'center',
@@ -31,14 +42,14 @@ export const AppBar = styled(Horizontal).attrs({
   $padding: WHATSAPP_APP_BAR_PADDING
 }).withConfig({
   displayName: "AppBar",
-  componentId: "sc-15y0kbp-2"
+  componentId: "sc-15y0kbp-3"
 })(["margin:-", "px -", "px 0;border-bottom:1px solid ", ";color:", ";svg{display:block;}"], WHATSAPP_CARD_PADDING, WHATSAPP_CARD_PADDING, Color.DIVIDER, Color.SUCCESS);
 export const AppName = styled(Text).attrs({
   $color: Color.MAIN,
   $ellipsis: true
 }).withConfig({
   displayName: "AppName",
-  componentId: "sc-15y0kbp-3"
+  componentId: "sc-15y0kbp-4"
 })(["overflow:hidden;font-family:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:18px;text-overflow:ellipsis;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.MEDIUM);
 export const MissedRow = styled(Columns).attrs({
   $alignItems: 'center',
@@ -46,7 +57,7 @@ export const MissedRow = styled(Columns).attrs({
   $sizes: `${WHATSAPP_MISSED_GLYPH_SIZE}px minmax(0, 1fr)`
 }).withConfig({
   displayName: "MissedRow",
-  componentId: "sc-15y0kbp-4"
+  componentId: "sc-15y0kbp-5"
 })([""]);
 export const MissedGlyph = styled(Horizontal).attrs({
   $alignItems: 'center',
@@ -57,18 +68,18 @@ export const MissedGlyph = styled(Horizontal).attrs({
   $height: WHATSAPP_MISSED_GLYPH_SIZE
 }).withConfig({
   displayName: "MissedGlyph",
-  componentId: "sc-15y0kbp-5"
+  componentId: "sc-15y0kbp-6"
 })(["color:", ";svg{display:block;}"], Color.LOCKED);
 export const MissedTitle = styled(Text).attrs({
   $color: Color.MAIN,
   $ellipsis: true
 }).withConfig({
   displayName: "MissedTitle",
-  componentId: "sc-15y0kbp-6"
+  componentId: "sc-15y0kbp-7"
 })(["overflow:hidden;font-family:", ";font-size:", ";font-weight:", ";line-height:18px;text-overflow:ellipsis;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.MEDIUM);
 export const MissedHint = styled(Text).attrs({
   $color: Color.LOCKED
 }).withConfig({
   displayName: "MissedHint",
-  componentId: "sc-15y0kbp-7"
+  componentId: "sc-15y0kbp-8"
 })(["font-family:", ";font-size:", ";font-weight:", ";line-height:18px;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR);

package/package.json

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