@automattic/jetpack-components 0.52.0 → 0.53.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 +13 -0
- package/components/icons/index.tsx +3 -1
- package/components/pricing-card/index.tsx +22 -15
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.53.0] - 2024-05-08
|
|
6
|
+
### Added
|
|
7
|
+
- Social: Added add connection modal [#37211]
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
- Jetpack Backup: Add a LoadingPlaceholder while waiting for Jetpack Backup price [#37238]
|
|
11
|
+
|
|
12
|
+
## [0.52.1] - 2024-05-06
|
|
13
|
+
### Changed
|
|
14
|
+
- Updated package dependencies. [#37147] [#37148] [#37160]
|
|
15
|
+
|
|
5
16
|
## [0.52.0] - 2024-04-11
|
|
6
17
|
### Added
|
|
7
18
|
- Added connected card to the A4A plugin. [#36747]
|
|
@@ -1008,6 +1019,8 @@
|
|
|
1008
1019
|
### Changed
|
|
1009
1020
|
- Update node version requirement to 14.16.1
|
|
1010
1021
|
|
|
1022
|
+
[0.53.0]: https://github.com/Automattic/jetpack-components/compare/0.52.1...0.53.0
|
|
1023
|
+
[0.52.1]: https://github.com/Automattic/jetpack-components/compare/0.52.0...0.52.1
|
|
1011
1024
|
[0.52.0]: https://github.com/Automattic/jetpack-components/compare/0.51.0...0.52.0
|
|
1012
1025
|
[0.51.0]: https://github.com/Automattic/jetpack-components/compare/0.50.5...0.51.0
|
|
1013
1026
|
[0.50.5]: https://github.com/Automattic/jetpack-components/compare/0.50.4...0.50.5
|
|
@@ -278,11 +278,13 @@ export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[
|
|
|
278
278
|
export const SocialServiceIcon: React.FC< {
|
|
279
279
|
serviceName: React.ComponentProps< typeof SocialLogo >[ 'icon' ];
|
|
280
280
|
className?: string;
|
|
281
|
-
|
|
281
|
+
iconSize?: number;
|
|
282
|
+
} > = ( { serviceName, className, iconSize } ) => {
|
|
282
283
|
return (
|
|
283
284
|
<SocialLogo
|
|
284
285
|
className={ classNames( styles.socialIcon, styles[ serviceName ], className ) }
|
|
285
286
|
icon={ serviceName }
|
|
287
|
+
size={ iconSize || 24 }
|
|
286
288
|
/>
|
|
287
289
|
);
|
|
288
290
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { getCurrencyObject } from '@automattic/format-currency';
|
|
2
|
+
import { LoadingPlaceholder } from '@automattic/jetpack-components';
|
|
2
3
|
import { Button } from '@wordpress/components';
|
|
3
4
|
import { sprintf, __ } from '@wordpress/i18n';
|
|
4
5
|
import TermsOfService from '../terms-of-service';
|
|
@@ -54,7 +55,7 @@ const PricingCard: React.FC< PricingCardProps > = ( {
|
|
|
54
55
|
) }
|
|
55
56
|
<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
|
|
56
57
|
<div className="jp-components__pricing-card__pricing">
|
|
57
|
-
{ props.priceBefore !== props.priceAfter && (
|
|
58
|
+
{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 ? (
|
|
58
59
|
<div className="jp-components__pricing-card__price-before">
|
|
59
60
|
<span className="jp-components__pricing-card__currency">
|
|
60
61
|
{ currencyObjectBefore.symbol }
|
|
@@ -70,21 +71,27 @@ const PricingCard: React.FC< PricingCardProps > = ( {
|
|
|
70
71
|
) }
|
|
71
72
|
<div className="jp-components__pricing-card__price-strikethrough"></div>
|
|
72
73
|
</div>
|
|
74
|
+
) : (
|
|
75
|
+
<LoadingPlaceholder width="100%" height={ 48 } />
|
|
76
|
+
) }
|
|
77
|
+
{ props.priceAfter > 0 && (
|
|
78
|
+
<>
|
|
79
|
+
<div className="jp-components__pricing-card__price-after">
|
|
80
|
+
<span className="jp-components__pricing-card__currency">
|
|
81
|
+
{ currencyObjectAfter.symbol }
|
|
82
|
+
</span>
|
|
83
|
+
<span className="jp-components__pricing-card__price">
|
|
84
|
+
{ currencyObjectAfter.integer }
|
|
85
|
+
</span>
|
|
86
|
+
{ showPriceDecimals( currencyObjectAfter ) && (
|
|
87
|
+
<span className="jp-components__pricing-card__price-decimal">
|
|
88
|
+
{ currencyObjectAfter.fraction }
|
|
89
|
+
</span>
|
|
90
|
+
) }
|
|
91
|
+
</div>
|
|
92
|
+
<span className="jp-components__pricing-card__price-details">{ priceDetails }</span>
|
|
93
|
+
</>
|
|
73
94
|
) }
|
|
74
|
-
<div className="jp-components__pricing-card__price-after">
|
|
75
|
-
<span className="jp-components__pricing-card__currency">
|
|
76
|
-
{ currencyObjectAfter.symbol }
|
|
77
|
-
</span>
|
|
78
|
-
<span className="jp-components__pricing-card__price">
|
|
79
|
-
{ currencyObjectAfter.integer }
|
|
80
|
-
</span>
|
|
81
|
-
{ showPriceDecimals( currencyObjectAfter ) && (
|
|
82
|
-
<span className="jp-components__pricing-card__price-decimal">
|
|
83
|
-
{ currencyObjectAfter.fraction }
|
|
84
|
-
</span>
|
|
85
|
-
) }
|
|
86
|
-
</div>
|
|
87
|
-
<span className="jp-components__pricing-card__price-details">{ priceDetails }</span>
|
|
88
95
|
</div>
|
|
89
96
|
|
|
90
97
|
{ props.children && (
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.53.0",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.29",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
|
-
"@wordpress/browserslist-config": "5.
|
|
21
|
-
"@wordpress/components": "27.
|
|
22
|
-
"@wordpress/compose": "6.
|
|
23
|
-
"@wordpress/data": "9.
|
|
24
|
-
"@wordpress/date": "4.
|
|
25
|
-
"@wordpress/element": "5.
|
|
26
|
-
"@wordpress/i18n": "4.
|
|
27
|
-
"@wordpress/icons": "9.
|
|
20
|
+
"@wordpress/browserslist-config": "5.39.0",
|
|
21
|
+
"@wordpress/components": "27.4.0",
|
|
22
|
+
"@wordpress/compose": "6.33.0",
|
|
23
|
+
"@wordpress/data": "9.26.0",
|
|
24
|
+
"@wordpress/date": "4.56.0",
|
|
25
|
+
"@wordpress/element": "5.33.0",
|
|
26
|
+
"@wordpress/i18n": "4.56.0",
|
|
27
|
+
"@wordpress/icons": "9.47.0",
|
|
28
28
|
"classnames": "2.3.2",
|
|
29
29
|
"prop-types": "^15.7.2",
|
|
30
30
|
"qrcode.react": "3.1.0",
|
|
@@ -34,22 +34,22 @@
|
|
|
34
34
|
"uplot-react": "1.1.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@automattic/jetpack-base-styles": "^0.6.
|
|
37
|
+
"@automattic/jetpack-base-styles": "^0.6.24",
|
|
38
38
|
"@babel/core": "7.24.0",
|
|
39
39
|
"@babel/preset-react": "7.23.3",
|
|
40
40
|
"@jest/globals": "29.4.3",
|
|
41
|
-
"@storybook/addon-actions": "8.0.
|
|
42
|
-
"@storybook/blocks": "8.0.
|
|
43
|
-
"@storybook/react": "8.0.
|
|
41
|
+
"@storybook/addon-actions": "8.0.9",
|
|
42
|
+
"@storybook/blocks": "8.0.9",
|
|
43
|
+
"@storybook/react": "8.0.9",
|
|
44
44
|
"@testing-library/dom": "9.3.4",
|
|
45
45
|
"@testing-library/react": "14.2.1",
|
|
46
46
|
"@testing-library/user-event": "14.5.2",
|
|
47
47
|
"@types/jest": "29.5.12",
|
|
48
48
|
"@types/qrcode.react": "1.0.5",
|
|
49
|
-
"@types/react": "18.
|
|
50
|
-
"@types/react-dom": "18.
|
|
49
|
+
"@types/react": "18.3.1",
|
|
50
|
+
"@types/react-dom": "18.3.0",
|
|
51
51
|
"@types/react-slider": "1.3.6",
|
|
52
|
-
"@types/react-test-renderer": "18.0
|
|
52
|
+
"@types/react-test-renderer": "18.3.0",
|
|
53
53
|
"@types/testing-library__jest-dom": "5.14.9",
|
|
54
54
|
"jest": "29.7.0",
|
|
55
55
|
"jest-environment-jsdom": "29.7.0",
|