@automattic/jetpack-components 1.2.2 → 1.3.0
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.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [1.3.0] - 2025-08-25
|
|
6
|
+
### Changed
|
|
7
|
+
- Start using the improved PricingTable component for product interstitials. [#44801]
|
|
8
|
+
|
|
5
9
|
## [1.2.2] - 2025-08-25
|
|
6
10
|
### Changed
|
|
7
11
|
- Update dependencies.
|
|
@@ -1516,6 +1520,7 @@
|
|
|
1516
1520
|
### Changed
|
|
1517
1521
|
- Update node version requirement to 14.16.1
|
|
1518
1522
|
|
|
1523
|
+
[1.3.0]: https://github.com/Automattic/jetpack-components/compare/1.2.2...1.3.0
|
|
1519
1524
|
[1.2.2]: https://github.com/Automattic/jetpack-components/compare/1.2.1...1.2.2
|
|
1520
1525
|
[1.2.1]: https://github.com/Automattic/jetpack-components/compare/1.2.0...1.2.1
|
|
1521
1526
|
[1.2.0]: https://github.com/Automattic/jetpack-components/compare/1.1.19...1.2.0
|
|
@@ -32,6 +32,7 @@ const getItemLabels = (isComingSoon, isIncluded, featureNameLabel) => {
|
|
|
32
32
|
export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, index = 0, label = null, tooltipInfo, tooltipTitle, tooltipClassName = '', }) => {
|
|
33
33
|
const [isLg] = useBreakpointMatch('lg');
|
|
34
34
|
const item = useContext(PricingTableContext)[index];
|
|
35
|
+
const isExplicitlyEmpty = label === '';
|
|
35
36
|
const showTick = isComingSoon || isIncluded;
|
|
36
37
|
const featureNameLabel = item.name;
|
|
37
38
|
const defaultTooltipInfo = item.tooltipInfo;
|
|
@@ -39,6 +40,10 @@ export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, ind
|
|
|
39
40
|
const showTooltip = tooltipInfo || (!isLg && defaultTooltipInfo);
|
|
40
41
|
const labels = getItemLabels(isComingSoon, isIncluded, featureNameLabel);
|
|
41
42
|
const defaultLabel = isLg ? labels.lg : labels.default;
|
|
43
|
+
// Handle explicitly empty items (when label is empty string)
|
|
44
|
+
if (isExplicitlyEmpty) {
|
|
45
|
+
return (_jsx("div", { className: clsx(styles.item, styles.value, styles.empty) }));
|
|
46
|
+
}
|
|
42
47
|
return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [_jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
|
|
43
48
|
};
|
|
44
49
|
export const PricingTableHeader = ({ title, children }) => (_jsxs("div", { className: styles.headerContainer, children: [title && (_jsx(Text, { variant: "headline-small", className: styles.title, children: title })), _jsx("div", { className: styles.header, children: children })] }));
|
|
@@ -58,9 +63,15 @@ const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDiscla
|
|
|
58
63
|
return (_jsxs(PricingTableContext.Provider, { value: items, children: [_jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
|
|
59
64
|
'--rows': items.length + 1,
|
|
60
65
|
'--columns': Children.toArray(children).length + 1,
|
|
61
|
-
}, children: _jsxs("div", { className: styles.table, children: [_jsxs("div", { children: [headerLogo && _jsx("div", { className: styles['header-logo'], children: headerLogo }), _jsx(Text, { variant: "headline-small", children: title })] }), isLg &&
|
|
62
|
-
items.map((item, i) =>
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
}, children: _jsxs("div", { className: styles.table, children: [_jsxs("div", { children: [headerLogo && _jsx("div", { className: styles['header-logo'], children: headerLogo }), _jsx(Text, { variant: "headline-small", className: styles.tableTitle, children: title })] }), isLg &&
|
|
67
|
+
items.map((item, i) => {
|
|
68
|
+
// Skip rendering feature names that are empty
|
|
69
|
+
if (!item.name) {
|
|
70
|
+
return (_jsx("div", { className: clsx(styles.item, styles.feature, styles.empty) }, i));
|
|
71
|
+
}
|
|
72
|
+
return (_jsxs("div", { className: clsx(styles.item, styles.feature, {
|
|
73
|
+
[styles['last-feature']]: i === items.length - 1,
|
|
74
|
+
}), children: [_jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i));
|
|
75
|
+
}), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })] }) })] }));
|
|
65
76
|
};
|
|
66
77
|
export default PricingTable;
|
|
@@ -61,6 +61,7 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
|
|
|
61
61
|
} ) => {
|
|
62
62
|
const [ isLg ] = useBreakpointMatch( 'lg' );
|
|
63
63
|
const item = useContext( PricingTableContext )[ index ];
|
|
64
|
+
const isExplicitlyEmpty = label === '';
|
|
64
65
|
const showTick = isComingSoon || isIncluded;
|
|
65
66
|
|
|
66
67
|
const featureNameLabel = item.name;
|
|
@@ -73,6 +74,15 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
|
|
|
73
74
|
|
|
74
75
|
const defaultLabel = isLg ? labels.lg : labels.default;
|
|
75
76
|
|
|
77
|
+
// Handle explicitly empty items (when label is empty string)
|
|
78
|
+
if ( isExplicitlyEmpty ) {
|
|
79
|
+
return (
|
|
80
|
+
<div className={ clsx( styles.item, styles.value, styles.empty ) }>
|
|
81
|
+
{ /* No icon and no text for explicitly empty items */ }
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
|
|
76
86
|
return (
|
|
77
87
|
<div className={ clsx( styles.item, styles.value ) }>
|
|
78
88
|
<Icon
|
|
@@ -162,34 +172,45 @@ const PricingTable: FC< PricingTableProps > = ( {
|
|
|
162
172
|
<div className={ styles.table }>
|
|
163
173
|
<div>
|
|
164
174
|
{ headerLogo && <div className={ styles[ 'header-logo' ] }>{ headerLogo }</div> }
|
|
165
|
-
<Text variant="headline-small"
|
|
175
|
+
<Text variant="headline-small" className={ styles.tableTitle }>
|
|
176
|
+
{ title }
|
|
177
|
+
</Text>
|
|
166
178
|
</div>
|
|
167
179
|
{ isLg &&
|
|
168
|
-
items.map( ( item, i ) =>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
180
|
+
items.map( ( item, i ) => {
|
|
181
|
+
// Skip rendering feature names that are empty
|
|
182
|
+
if ( ! item.name ) {
|
|
183
|
+
return (
|
|
184
|
+
<div key={ i } className={ clsx( styles.item, styles.feature, styles.empty ) } />
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
return (
|
|
189
|
+
<div
|
|
190
|
+
className={ clsx( styles.item, styles.feature, {
|
|
191
|
+
[ styles[ 'last-feature' ] ]: i === items.length - 1,
|
|
192
|
+
} ) }
|
|
193
|
+
key={ i }
|
|
194
|
+
>
|
|
195
|
+
<Text variant="body-small">
|
|
196
|
+
<strong>{ item.name }</strong>
|
|
197
|
+
</Text>
|
|
198
|
+
{ item.tooltipInfo && (
|
|
199
|
+
<IconTooltip
|
|
200
|
+
title={ item.tooltipTitle }
|
|
201
|
+
iconClassName={ styles[ 'popover-icon' ] }
|
|
202
|
+
className={ styles.popover }
|
|
203
|
+
placement={ item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end' }
|
|
204
|
+
iconSize={ 14 }
|
|
205
|
+
offset={ 4 }
|
|
206
|
+
wide={ Boolean( item.tooltipTitle && item.tooltipInfo ) }
|
|
207
|
+
>
|
|
208
|
+
<Text variant="body-small">{ item.tooltipInfo }</Text>
|
|
209
|
+
</IconTooltip>
|
|
210
|
+
) }
|
|
211
|
+
</div>
|
|
212
|
+
);
|
|
213
|
+
} ) }
|
|
193
214
|
{ children }
|
|
194
215
|
</div>
|
|
195
216
|
</div>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
|
|
2
|
+
|
|
1
3
|
.container {
|
|
2
4
|
--padding: calc(var(--spacing-base) * 4);
|
|
3
5
|
color: var(--jp-black);
|
|
@@ -15,6 +17,13 @@
|
|
|
15
17
|
grid-template-rows: repeat(var(--rows), minmax(min-content, max-content));
|
|
16
18
|
column-gap: var(--gap);
|
|
17
19
|
}
|
|
20
|
+
|
|
21
|
+
.tableTitle {
|
|
22
|
+
font-size: 32px;
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
line-height: 40px;
|
|
25
|
+
word-wrap: break-word;
|
|
26
|
+
}
|
|
18
27
|
}
|
|
19
28
|
|
|
20
29
|
.header-logo {
|
|
@@ -54,10 +63,13 @@
|
|
|
54
63
|
border-inline: 1.5px solid var(--jp-gray-10);
|
|
55
64
|
}
|
|
56
65
|
|
|
66
|
+
> * {
|
|
67
|
+
background: var(--jp-white);
|
|
68
|
+
}
|
|
69
|
+
|
|
57
70
|
&.is-primary {
|
|
58
71
|
|
|
59
72
|
> * {
|
|
60
|
-
background: var(--jp-white);
|
|
61
73
|
position: relative;
|
|
62
74
|
|
|
63
75
|
&::after {
|
|
@@ -83,7 +95,11 @@
|
|
|
83
95
|
background-image: url(./gradient.svg);
|
|
84
96
|
background-repeat: no-repeat;
|
|
85
97
|
background-size: 450px;
|
|
86
|
-
background-position-x:
|
|
98
|
+
background-position-x: center;
|
|
99
|
+
|
|
100
|
+
@media (max-width: gb.$break-large) {
|
|
101
|
+
background-position-x: right;
|
|
102
|
+
}
|
|
87
103
|
}
|
|
88
104
|
|
|
89
105
|
> :last-child {
|
|
@@ -123,7 +139,7 @@
|
|
|
123
139
|
padding-bottom: calc(var(--spacing-base) * 2);
|
|
124
140
|
position: relative;
|
|
125
141
|
|
|
126
|
-
&:not(:nth-child(2)) {
|
|
142
|
+
&:not(:nth-child(2)):not(.empty) {
|
|
127
143
|
padding-top: calc(var(--spacing-base) * 2);
|
|
128
144
|
|
|
129
145
|
&::before {
|
|
@@ -86,12 +86,14 @@
|
|
|
86
86
|
|
|
87
87
|
> p {
|
|
88
88
|
font-weight: 500;
|
|
89
|
+
font-size: 32px;
|
|
90
|
+
line-height: 32px;
|
|
89
91
|
margin-right: 8px;
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
> div {
|
|
93
|
-
line-height:
|
|
94
|
-
margin
|
|
95
|
+
line-height: 16px;
|
|
96
|
+
margin: auto 0 0;
|
|
95
97
|
color: var(--jp-gray-50);
|
|
96
98
|
}
|
|
97
99
|
}
|
|
@@ -103,8 +105,8 @@
|
|
|
103
105
|
font-weight: 400;
|
|
104
106
|
margin-right: 8px;
|
|
105
107
|
color: var(--jp-gray-40);
|
|
106
|
-
font-size:
|
|
107
|
-
line-height:
|
|
108
|
+
font-size: 21px;
|
|
109
|
+
line-height: 35px;
|
|
108
110
|
|
|
109
111
|
&::after {
|
|
110
112
|
background: var(--jp-gray-40);
|
|
@@ -112,8 +114,8 @@
|
|
|
112
114
|
}
|
|
113
115
|
|
|
114
116
|
> div {
|
|
115
|
-
line-height:
|
|
116
|
-
margin
|
|
117
|
+
line-height: 16px;
|
|
118
|
+
margin: auto 0 0;
|
|
117
119
|
color: var(--jp-gray-50);
|
|
118
120
|
}
|
|
119
121
|
}
|
package/package.json
CHANGED