@pushwoosh/dumb-components 1.1.175 → 1.1.176

package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts

@@ -3,13 +3,16 @@ import type { NativeRichMediaPreviewProps } from './types';
 /**
  * Preview of a native rich media (modal, banner, stories, spinwheel, …)
  * rendered from its JSON config; lays out with plain CSS in the real pixels
- * of the given width/height box — there is no scaling and no fidelity to any
- * phone's pt-metrics, since this is a preview and devices vary. Content flows
- * inside a scrollable layer above a static backdrop (the dim overlay or, for
+ * of the given width/height box, with no fidelity to any phone's pt-metrics
+ * since this is a preview and devices vary. Content flows inside a scrollable
+ * layer above a static backdrop (the dim overlay or, for
  * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
  * content taller than the box scrolls, shorter content aligns per display
- * type while the backdrop stays put. Shows an invalid-config placeholder
- * when the config cannot be parsed or misses required contract fields.
+ * type while the backdrop stays put. Pass `scale` to lay the content out on a
+ * larger (or smaller) reference viewport and scale the whole preview to fill
+ * the box — the way to cram a phone-sized layout into a small preview box
+ * while keeping its proportions. Shows an invalid-config placeholder when the
+ * config cannot be parsed or misses required contract fields.
  *
  * @example
  * <NativeRichMediaPreview

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -9,7 +9,7 @@ import { NativeRichMediaMuteChip } from './components/NativeRichMediaMuteChip';
 import { EDGE_INSET, clampIndex } from './helpers';
 import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
-import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
+import { BackdropLayer, ContentFlow, PreviewHost, ScaleViewport, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
 function dimsScreen(config) {
   if (!config) {
@@ -153,13 +153,16 @@ function renderConfig(config, activeIndex) {
 /**
  * Preview of a native rich media (modal, banner, stories, spinwheel, …)
  * rendered from its JSON config; lays out with plain CSS in the real pixels
- * of the given width/height box — there is no scaling and no fidelity to any
- * phone's pt-metrics, since this is a preview and devices vary. Content flows
- * inside a scrollable layer above a static backdrop (the dim overlay or, for
+ * of the given width/height box, with no fidelity to any phone's pt-metrics
+ * since this is a preview and devices vary. Content flows inside a scrollable
+ * layer above a static backdrop (the dim overlay or, for
  * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
  * content taller than the box scrolls, shorter content aligns per display
- * type while the backdrop stays put. Shows an invalid-config placeholder
- * when the config cannot be parsed or misses required contract fields.
+ * type while the backdrop stays put. Pass `scale` to lay the content out on a
+ * larger (or smaller) reference viewport and scale the whole preview to fill
+ * the box — the way to cram a phone-sized layout into a small preview box
+ * while keeping its proportions. Shows an invalid-config placeholder when the
+ * config cannot be parsed or misses required contract fields.
  *
  * @example
  * <NativeRichMediaPreview
@@ -184,6 +187,7 @@ export function NativeRichMediaPreview(props) {
     language,
     width,
     height,
+    scale = 1,
     activeIndex = 0,
     isLoading = false,
     withBackground = true
@@ -200,18 +204,21 @@ export function NativeRichMediaPreview(props) {
     width: width,
     height: height,
     "$withBackground": withBackground,
-    children: [_jsxs(BackdropLayer, {
-      children: [shouldDim && _jsx(NativeRichMediaDim, {}), !isLoading && config && renderBackdrop(config, activeIndex)]
+    children: [_jsxs(ScaleViewport, {
+      "$scale": scale,
+      children: [_jsxs(BackdropLayer, {
+        children: [shouldDim && _jsx(NativeRichMediaDim, {}), !isLoading && config && renderBackdrop(config, activeIndex)]
+      }), !isLoading && config && _jsx(ScrollLayer, {
+        children: _jsx(ContentFlow, {
+          "$justify": justifyFor(config),
+          children: renderConfig(config, activeIndex)
+        })
+      }, config.displayType), !isLoading && config && renderChrome(config)]
     }), isLoading && _jsx(SpinnerLayer, {
       children: _jsx(Spinner, {
         size: "medium",
         color: Color.LOCKED
       })
-    }), !isLoading && !config && _jsx(NativeRichMediaInvalidView, {}), !isLoading && config && _jsx(ScrollLayer, {
-      children: _jsx(ContentFlow, {
-        "$justify": justifyFor(config),
-        children: renderConfig(config, activeIndex)
-      })
-    }, config.displayType), !isLoading && config && renderChrome(config)]
+    }), !isLoading && !config && _jsx(NativeRichMediaInvalidView, {})]
   });
 }

package/NativeRichMediaPreview/styles.d.ts

@@ -11,6 +11,9 @@ export declare const PreviewHost: import("styled-components").StyledComponent<"d
     height: string | number;
     $withBackground: boolean;
 }, never>;
+export declare const ScaleViewport: import("styled-components").StyledComponent<"div", any, {
+    $scale: number;
+}, never>;
 export declare const BackdropLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ScrollLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentFlow: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/styles.js

@@ -27,21 +27,31 @@ export const PreviewHost = styled.div.withConfig({
 }) => toCssValue(width), ({
   height
 }) => toCssValue(height), FontFamily.MAIN);
+export const ScaleViewport = styled.div.withConfig({
+  displayName: "ScaleViewport",
+  componentId: "sc-mc9ykd-2"
+})(["position:absolute;top:0;left:0;width:", "%;height:", "%;transform:scale(", ");transform-origin:top left;"], ({
+  $scale
+}) => 100 / $scale, ({
+  $scale
+}) => 100 / $scale, ({
+  $scale
+}) => $scale);
 export const BackdropLayer = styled.div.withConfig({
   displayName: "BackdropLayer",
-  componentId: "sc-mc9ykd-2"
+  componentId: "sc-mc9ykd-3"
 })(["position:absolute;inset:0;"]);
 export const ScrollLayer = styled.div.withConfig({
   displayName: "ScrollLayer",
-  componentId: "sc-mc9ykd-3"
+  componentId: "sc-mc9ykd-4"
 })(["position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;"]);
 export const ContentFlow = styled.div.withConfig({
   displayName: "ContentFlow",
-  componentId: "sc-mc9ykd-4"
+  componentId: "sc-mc9ykd-5"
 })(["position:relative;min-height:100%;width:100%;display:flex;flex-direction:column;justify-content:", ";"], ({
   $justify
 }) => $justify);
 export const SpinnerLayer = styled.div.withConfig({
   displayName: "SpinnerLayer",
-  componentId: "sc-mc9ykd-5"
+  componentId: "sc-mc9ykd-6"
 })(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);

package/NativeRichMediaPreview/types.d.ts

@@ -301,6 +301,8 @@ export type NativeRichMediaPreviewProps = {
     width: string | number;
     /** Preview box height; number is treated as px. */
     height: string | number;
+    /** Zoom of the rendered preview relative to the `width`/`height` box (default `1`). The content is laid out on a `box / scale` reference viewport and scaled to fill the box, so `0.5` fits a phone twice the box's size — the whole preview looks half as large while still filling the box. Use it to cram the layout into a small preview box without cramping its phone-sized proportions. Must be greater than `0`. */
+    scale?: number;
     /** Index of the slide shown for `carousel`/`stories` (clamped to the items range, default `0`); ignored by other display types. */
     activeIndex?: number;
     /** Show a spinner instead of the content. */

package/package.json

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