@pushwoosh/dumb-components 2.8.0 → 2.8.1

package/PushStoriesPreview/components/PushStoriesPage/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { PLACEHOLDER_BACKGROUND } from '../../constants';
-import { scaled } from '../../helpers';
+import { placeholderOutline, scaled } from '../../helpers';
 export const PageImage = styled.img.withConfig({
   displayName: "PageImage",
   componentId: "sc-1q2ujdq-0"
@@ -8,11 +9,11 @@ export const PageImage = styled.img.withConfig({
 export const ImagePlaceholder = styled.div.withConfig({
   displayName: "ImagePlaceholder",
   componentId: "sc-1q2ujdq-1"
-})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:", ";color:rgba(255,255,255,0.45);"], PLACEHOLDER_BACKGROUND);
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;", " background:", ";color:", ";> div{transform:scale(1.5);}"], placeholderOutline, PLACEHOLDER_BACKGROUND, Color.PHANTOM);
 export const BottomArea = styled.div.withConfig({
   displayName: "BottomArea",
   componentId: "sc-1q2ujdq-2"
-})(["position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:", " ", " ", ";background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);pointer-events:none;"], scaled(44), scaled(24), scaled(24));
+})(["position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:", " ", " ", ";background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);pointer-events:none;", " ~ &:empty{background:none;}"], scaled(44), scaled(24), scaled(24), ImagePlaceholder);
 export const PageTitle = styled.div.withConfig({
   displayName: "PageTitle",
   componentId: "sc-1q2ujdq-3"

package/PushStoriesPreview/components/PushStoriesProgress/styles.js

@@ -1,5 +1,7 @@
 import styled, { css, keyframes } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { scaled } from '../../helpers';
+import { ImagePlaceholder } from '../PushStoriesPage/styles';
 const grow = keyframes(["from{width:0;}to{width:100%;}"]);
 export const ProgressRow = styled.div.withConfig({
   displayName: "ProgressRow",
@@ -8,10 +10,10 @@ export const ProgressRow = styled.div.withConfig({
 export const ProgressTrack = styled.div.withConfig({
   displayName: "ProgressTrack",
   componentId: "sc-1p5nb36-1"
-})(["flex:1;height:max(2px,", ");border-radius:", ";background:rgba(255,255,255,0.3);overflow:hidden;"], scaled(3), scaled(1.5));
+})(["flex:1;height:max(2px,", ");border-radius:", ";background:rgba(255,255,255,0.3);overflow:hidden;", " ~ ", " &{background:", ";}"], scaled(3), scaled(1.5), ImagePlaceholder, ProgressRow, Color.FORM);
 export const ProgressFill = styled.div.withConfig({
   displayName: "ProgressFill",
   componentId: "sc-1p5nb36-2"
-})(["width:100%;height:100%;background:#FFF;", ""], ({
+})(["width:100%;height:100%;background:#FFF;", " ~ ", " &{background:", ";}", ""], ImagePlaceholder, ProgressRow, Color.LOCKED, ({
   $duration
 }) => $duration !== undefined && css(["animation:", " ", "s linear both;"], grow, $duration));

package/PushStoriesPreview/constants.d.ts

@@ -5,4 +5,4 @@ export declare const PUSH_STORIES_DEFAULT_DURATION = 5;
 /** Longest page duration in seconds the iOS SDK honours. */
 export declare const PUSH_STORIES_MAX_DURATION = 30;
 export declare const REFERENCE_WIDTH = 375;
-export declare const PLACEHOLDER_BACKGROUND = "linear-gradient(160deg, #3A3A3C 0%, #1C1C1E 100%)";
+export declare const PLACEHOLDER_BACKGROUND = "linear-gradient(160deg, var(--pw-color-divider, #EBF0F5) 0%, var(--pw-color-frozen, #F7F9FA) 100%)";

package/PushStoriesPreview/constants.js

@@ -1,3 +1,4 @@
+import { Color } from '@pushwoosh/kit-constants';
 /** Height ÷ width of the stories area, the iOS SDK's default `storyAspectRatio`. */
 export const PUSH_STORIES_ASPECT_RATIO = 1.5;
 /** Seconds a page stays on screen when its duration is missing or invalid. */
@@ -5,4 +6,4 @@ export const PUSH_STORIES_DEFAULT_DURATION = 5;
 /** Longest page duration in seconds the iOS SDK honours. */
 export const PUSH_STORIES_MAX_DURATION = 30;
 export const REFERENCE_WIDTH = 375;
-export const PLACEHOLDER_BACKGROUND = 'linear-gradient(160deg, #3A3A3C 0%, #1C1C1E 100%)';
+export const PLACEHOLDER_BACKGROUND = `linear-gradient(160deg, ${Color.DIVIDER} 0%, ${Color.FROZEN} 100%)`;

package/PushStoriesPreview/helpers.d.ts

@@ -5,3 +5,5 @@ export declare function normalizeStoryDuration(duration?: number): number;
 export declare function hasStoryButton(page: PushStoriesPreviewPage): boolean;
 export declare function clampStoryIndex(index: number, length: number): number;
 export declare function scaled(points: number): string;
+/** Hairline outline that keeps a light placeholder visible on a white card. */
+export declare const placeholderOutline: import("styled-components").FlattenSimpleInterpolation;

package/PushStoriesPreview/helpers.js

@@ -1,3 +1,5 @@
+import { css } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION, REFERENCE_WIDTH } from './constants';
 const URL_SCHEME = /^[a-z][a-z\d+.-]*:/i;
 /** Page duration in seconds as the iOS SDK plays it. */
@@ -16,4 +18,6 @@ export function clampStoryIndex(index, length) {
 }
 export function scaled(points) {
   return `calc(${points} * 100cqw / ${REFERENCE_WIDTH})`;
-}
+}
+/** Hairline outline that keeps a light placeholder visible on a white card. */
+export const placeholderOutline = css(["border-radius:inherit;box-shadow:inset 0 0 0 1px ", ";"], Color.DIVIDER);

package/PushStoriesPreview/styles.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { FontFamily } from '@pushwoosh/kit-constants';
+import { Color, FontFamily } from '@pushwoosh/kit-constants';
 import { toCssValue } from '@pushwoosh/kit-helpers';
 import { PLACEHOLDER_BACKGROUND, PUSH_STORIES_ASPECT_RATIO } from './constants';
-import { scaled } from './helpers';
+import { placeholderOutline, scaled } from './helpers';
 export const StoriesFrame = styled.div.withConfig({
   displayName: "StoriesFrame",
   componentId: "sc-udrlhm-0"
@@ -20,4 +20,4 @@ export const TapZone = styled.button.withConfig({
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
   componentId: "sc-udrlhm-3"
-})(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:", ";padding:0 ", ";background:", ";color:rgba(255,255,255,0.7);font-size:", ";line-height:1.35;text-align:center;"], scaled(12), scaled(32), PLACEHOLDER_BACKGROUND, scaled(15));
+})(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:", ";padding:0 ", ";", " background:", ";color:", ";font-size:", ";line-height:1.35;text-align:center;> div{margin:", " 0;transform:scale(1.5);}"], scaled(12), scaled(32), placeholderOutline, PLACEHOLDER_BACKGROUND, Color.LOCKED, scaled(15), scaled(6));

package/package.json

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