@pushwoosh/dumb-components 1.1.213 → 1.1.214

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.js +9 -28
  2. package/WhatsAppPreview/components/WhatsAppStatusBar/styles.d.ts +55 -1
  3. package/WhatsAppPreview/components/WhatsAppStatusBar/styles.js +42 -5
  4. package/WhatsAppPreview/constants.d.ts +15 -0
  5. package/WhatsAppPreview/constants.js +15 -0
  6. package/WhatsAppPreview/icons/WhatsAppBatteryIcon.svg +1 -1
  7. package/WhatsAppPreview/icons/WhatsAppSignalIcon.svg +1 -1
  8. package/WhatsAppPreview/icons/WhatsAppWifiIcon.svg +1 -1
  9. package/WhatsAppPreview/styles.js +3 -3
  10. package/package.json +1 -1
package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.js CHANGED
@@ -1,37 +1,18 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Horizontal } from '@pushwoosh/kit-helpers';
3
- import { Text } from '@pushwoosh/kit-typography';
4
- import { StatusBarIndicators } from './styles';
5
- import { WHATSAPP_COLOR } from '../../constants';
2
+ import { StatusBarBox, StatusBarClock, StatusBarIndicators, StatusBarIsland, StatusBarRow } from './styles';
6
3
  import { WhatsAppBatteryIcon, WhatsAppSignalIcon, WhatsAppWifiIcon } from '../../icons';
7
4
  /** iOS status bar of the previewed device: clock, dynamic island and the signal indicators. */
8
5
  export function WhatsAppStatusBar(props) {
9
6
  const {
10
7
  time
11
8
  } = props;
12
- return _jsxs(Horizontal, {
13
- "$alignItems": "center",
14
- "$height": 44,
15
- "$justifyContent": "space-between",
16
- "$padding": {
17
- left: 28,
18
- right: 22
19
- },
20
- "$position": "relative",
21
- children: [_jsx(Text, {
22
- "$color": WHATSAPP_COLOR.STATUS_BAR,
23
- "$variant": "h4",
24
- children: time
25
- }), _jsx(Horizontal, {
26
- "$bgColor": WHATSAPP_COLOR.ISLAND,
27
- "$borderRadius": 13,
28
- "$height": 26,
29
- "$left": "calc(50% - 46px)",
30
- "$position": "absolute",
31
- "$top": 8,
32
- "$width": 92
33
- }), _jsxs(StatusBarIndicators, {
34
- children: [_jsx(WhatsAppSignalIcon, {}), _jsx(WhatsAppWifiIcon, {}), _jsx(WhatsAppBatteryIcon, {})]
35
- })]
9
+ return _jsx(StatusBarBox, {
10
+ children: _jsxs(StatusBarRow, {
11
+ children: [_jsx(StatusBarClock, {
12
+ children: time
13
+ }), _jsx(StatusBarIsland, {}), _jsxs(StatusBarIndicators, {
14
+ children: [_jsx(WhatsAppSignalIcon, {}), _jsx(WhatsAppWifiIcon, {}), _jsx(WhatsAppBatteryIcon, {})]
15
+ })]
16
+ })
36
17
  });
37
18
  }
package/WhatsAppPreview/components/WhatsAppStatusBar/styles.d.ts CHANGED
@@ -1,3 +1,56 @@
1
+ export declare const StatusBarBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
2
+ $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
3
+ $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
4
+ $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
5
+ $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
6
+ } & {
7
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
8
+ $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
9
+ $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
10
+ } & {
11
+ $gridAutoFlow: string;
12
+ }, "$gridAutoFlow">;
13
+ export declare const StatusBarRow: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
14
+ $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
15
+ $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
16
+ $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
17
+ $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
18
+ } & {
19
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
20
+ $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
21
+ $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
22
+ } & {
23
+ $gridAutoFlow: string;
24
+ } & {
25
+ $alignItems: string;
26
+ $justifyContent: string;
27
+ $position: string;
28
+ $height: string;
29
+ $padding: {
30
+ left: string;
31
+ right: string;
32
+ };
33
+ }, "$gridAutoFlow" | "$height" | "$padding" | "$position" | "$alignItems" | "$justifyContent">;
34
+ export declare const StatusBarIsland: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
35
+ $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
36
+ $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
37
+ $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
38
+ $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
39
+ } & {
40
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
41
+ $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
42
+ $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
43
+ } & {
44
+ $gridAutoFlow: string;
45
+ } & {
46
+ $position: string;
47
+ $bgColor: "#2B2F33";
48
+ $top: string;
49
+ $left: string;
50
+ $width: string;
51
+ $height: string;
52
+ $borderRadius: string;
53
+ }, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$left" | "$position" | "$top" | "$width">;
1
54
  export declare const StatusBarIndicators: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
2
55
  $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
3
56
  $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
@@ -11,5 +64,6 @@ export declare const StatusBarIndicators: import("styled-components").StyledComp
11
64
  $gridAutoFlow: string;
12
65
  } & {
13
66
  $alignItems: string;
14
- $gap: number;
67
+ $gap: string;
15
68
  }, "$gridAutoFlow" | "$alignItems" | "$gap">;
69
+ export declare const StatusBarClock: import("styled-components").StyledComponent<"span", any, {}, never>;
package/WhatsAppPreview/components/WhatsAppStatusBar/styles.js CHANGED
@@ -1,10 +1,47 @@
1
1
  import styled from 'styled-components';
2
- import { Horizontal } from '@pushwoosh/kit-helpers';
3
- import { WHATSAPP_COLOR } from '../../constants';
2
+ import { FontFamily, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
3
+ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
4
+ import { WHATSAPP_COLOR, WHATSAPP_SCREEN_WIDTH, WHATSAPP_STATUS_BAR } from '../../constants';
5
+ function scaled(value) {
6
+ return `${(value / WHATSAPP_SCREEN_WIDTH * 100).toFixed(4)}cqw`;
7
+ }
8
+ export const StatusBarBox = styled(Vertical).withConfig({
9
+ displayName: "StatusBarBox",
10
+ componentId: "sc-lua8an-0"
11
+ })(["container-type:inline-size;"]);
12
+ export const StatusBarRow = styled(Horizontal).attrs({
13
+ $alignItems: 'center',
14
+ $justifyContent: 'space-between',
15
+ $position: 'relative',
16
+ $height: scaled(WHATSAPP_STATUS_BAR.HEIGHT),
17
+ $padding: {
18
+ left: scaled(WHATSAPP_STATUS_BAR.PADDING_LEFT),
19
+ right: scaled(WHATSAPP_STATUS_BAR.PADDING_RIGHT)
20
+ }
21
+ }).withConfig({
22
+ displayName: "StatusBarRow",
23
+ componentId: "sc-lua8an-1"
24
+ })([""]);
25
+ export const StatusBarIsland = styled(Horizontal).attrs({
26
+ $position: 'absolute',
27
+ $bgColor: WHATSAPP_COLOR.ISLAND,
28
+ $top: scaled(WHATSAPP_STATUS_BAR.ISLAND_TOP),
29
+ $left: `calc(50% - ${scaled(WHATSAPP_STATUS_BAR.ISLAND_WIDTH / 2)})`,
30
+ $width: scaled(WHATSAPP_STATUS_BAR.ISLAND_WIDTH),
31
+ $height: scaled(WHATSAPP_STATUS_BAR.ISLAND_HEIGHT),
32
+ $borderRadius: scaled(WHATSAPP_STATUS_BAR.ISLAND_HEIGHT / 2)
33
+ }).withConfig({
34
+ displayName: "StatusBarIsland",
35
+ componentId: "sc-lua8an-2"
36
+ })([""]);
4
37
  export const StatusBarIndicators = styled(Horizontal).attrs({
5
38
  $alignItems: 'center',
6
- $gap: 5
39
+ $gap: scaled(WHATSAPP_STATUS_BAR.INDICATOR_GAP)
7
40
  }).withConfig({
8
41
  displayName: "StatusBarIndicators",
9
- componentId: "sc-lua8an-0"
10
- })(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.STATUS_BAR);
42
+ componentId: "sc-lua8an-3"
43
+ })(["color:", ";svg{display:block;width:auto;height:", ";}"], WHATSAPP_COLOR.STATUS_BAR, scaled(WHATSAPP_STATUS_BAR.INDICATOR_HEIGHT));
44
+ export const StatusBarClock = styled.span.withConfig({
45
+ displayName: "StatusBarClock",
46
+ componentId: "sc-lua8an-4"
47
+ })(["color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], WHATSAPP_COLOR.STATUS_BAR, FontFamily.MAIN, scaled(WHATSAPP_STATUS_BAR.CLOCK_FONT_SIZE), FontWeight.MEDIUM, LineHeight.HEADING4);
package/WhatsAppPreview/constants.d.ts CHANGED
@@ -32,6 +32,21 @@ export declare const WHATSAPP_COLOR: {
32
32
  };
33
33
  export declare const WHATSAPP_PREVIEW_WIDTH = 340;
34
34
  export declare const WHATSAPP_PREVIEW_HEIGHT = 640;
35
+ export declare const WHATSAPP_DEVICE_PADDING = 5;
36
+ export declare const WHATSAPP_DEVICE_BORDER = 1;
37
+ export declare const WHATSAPP_SCREEN_WIDTH: number;
38
+ /** Status bar geometry at {@link WHATSAPP_SCREEN_WIDTH}; a narrower device gets the same layout scaled down. */
39
+ export declare const WHATSAPP_STATUS_BAR: {
40
+ readonly HEIGHT: 44;
41
+ readonly PADDING_LEFT: 28;
42
+ readonly PADDING_RIGHT: 22;
43
+ readonly CLOCK_FONT_SIZE: 14;
44
+ readonly ISLAND_WIDTH: 92;
45
+ readonly ISLAND_HEIGHT: 26;
46
+ readonly ISLAND_TOP: 8;
47
+ readonly INDICATOR_GAP: 5;
48
+ readonly INDICATOR_HEIGHT: 12;
49
+ };
35
50
  export declare const WHATSAPP_STATUS_BAR_TIME = "12:02";
36
51
  export declare const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
37
52
  export declare const WHATSAPP_ATTACHMENT_EXTENSIONS: {
package/WhatsAppPreview/constants.js CHANGED
@@ -32,6 +32,21 @@ export const WHATSAPP_COLOR = {
32
32
  };
33
33
  export const WHATSAPP_PREVIEW_WIDTH = 340;
34
34
  export const WHATSAPP_PREVIEW_HEIGHT = 640;
35
+ export const WHATSAPP_DEVICE_PADDING = 5;
36
+ export const WHATSAPP_DEVICE_BORDER = 1;
37
+ export const WHATSAPP_SCREEN_WIDTH = WHATSAPP_PREVIEW_WIDTH - (WHATSAPP_DEVICE_PADDING + WHATSAPP_DEVICE_BORDER) * 2;
38
+ /** Status bar geometry at {@link WHATSAPP_SCREEN_WIDTH}; a narrower device gets the same layout scaled down. */
39
+ export const WHATSAPP_STATUS_BAR = {
40
+ HEIGHT: 44,
41
+ PADDING_LEFT: 28,
42
+ PADDING_RIGHT: 22,
43
+ CLOCK_FONT_SIZE: 14,
44
+ ISLAND_WIDTH: 92,
45
+ ISLAND_HEIGHT: 26,
46
+ ISLAND_TOP: 8,
47
+ INDICATOR_GAP: 5,
48
+ INDICATOR_HEIGHT: 12
49
+ };
35
50
  export const WHATSAPP_STATUS_BAR_TIME = '12:02';
36
51
  export const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
37
52
  const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
package/WhatsAppPreview/icons/WhatsAppBatteryIcon.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="25" height="12" fill="none"><rect width="21" height="10.8" x=".6" y=".6" stroke="currentColor" stroke-opacity=".4" stroke-width="1.2" rx="3"/><rect width="17.8" height="7.6" x="2.2" y="2.2" fill="currentColor" rx="1.8"/><path fill="currentColor" fill-opacity=".4" d="M23.2 4.2v3.6a2 2 0 0 0 0-3.6"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 12" fill="none"><rect width="21" height="10.8" x=".6" y=".6" stroke="currentColor" stroke-opacity=".4" stroke-width="1.2" rx="3"/><rect width="17.8" height="7.6" x="2.2" y="2.2" fill="currentColor" rx="1.8"/><path fill="currentColor" fill-opacity=".4" d="M23.2 4.2v3.6a2 2 0 0 0 0-3.6"/></svg>
package/WhatsAppPreview/icons/WhatsAppSignalIcon.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" fill="currentColor"><rect width="3" height="4" y="8" rx="1"/><rect width="3" height="6.5" x="5" y="5.5" rx="1"/><rect width="3" height="9" x="10" y="3" rx="1"/><rect width="3" height="12" x="15" rx="1"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="currentColor"><rect width="3" height="4" y="8" rx="1"/><rect width="3" height="6.5" x="5" y="5.5" rx="1"/><rect width="3" height="9" x="10" y="3" rx="1"/><rect width="3" height="12" x="15" rx="1"/></svg>
package/WhatsAppPreview/icons/WhatsAppWifiIcon.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"><path d="M1 4.2a11 11 0 0 1 14 0M3.6 7a7.2 7.2 0 0 1 8.8 0M6.2 9.7a3.3 3.3 0 0 1 3.6 0"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"><path d="M1 4.2a11 11 0 0 1 14 0M3.6 7a7.2 7.2 0 0 1 8.8 0M6.2 9.7a3.3 3.3 0 0 1 3.6 0"/></svg>
package/WhatsAppPreview/styles.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import styled from 'styled-components';
2
2
  import { Rows, Vertical } from '@pushwoosh/kit-helpers';
3
- import { WHATSAPP_COLOR } from './constants';
3
+ import { WHATSAPP_COLOR, WHATSAPP_DEVICE_BORDER, WHATSAPP_DEVICE_PADDING } from './constants';
4
4
  export const DeviceBox = styled(Rows).attrs({
5
5
  $sizes: 'minmax(0, 1fr)',
6
- $padding: 5,
6
+ $padding: WHATSAPP_DEVICE_PADDING,
7
7
  $borderRadius: 44,
8
8
  $bgColor: WHATSAPP_COLOR.DEVICE_SHELL,
9
- $border: `1px solid ${WHATSAPP_COLOR.DEVICE_EDGE}`
9
+ $border: `${WHATSAPP_DEVICE_BORDER}px solid ${WHATSAPP_COLOR.DEVICE_EDGE}`
10
10
  }).withConfig({
11
11
  displayName: "DeviceBox",
12
12
  componentId: "sc-15y0kbp-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.213",
3
+ "version": "1.1.214",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",