@pushwoosh/dumb-components 1.1.228 → 1.1.229

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.229",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",