@automattic/jetpack-components 0.52.1 → 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 +8 -0
- package/components/icons/index.tsx +3 -1
- package/components/pricing-card/index.tsx +22 -15
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
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
|
+
|
|
5
12
|
## [0.52.1] - 2024-05-06
|
|
6
13
|
### Changed
|
|
7
14
|
- Updated package dependencies. [#37147] [#37148] [#37160]
|
|
@@ -1012,6 +1019,7 @@
|
|
|
1012
1019
|
### Changed
|
|
1013
1020
|
- Update node version requirement to 14.16.1
|
|
1014
1021
|
|
|
1022
|
+
[0.53.0]: https://github.com/Automattic/jetpack-components/compare/0.52.1...0.53.0
|
|
1015
1023
|
[0.52.1]: https://github.com/Automattic/jetpack-components/compare/0.52.0...0.52.1
|
|
1016
1024
|
[0.52.0]: https://github.com/Automattic/jetpack-components/compare/0.51.0...0.52.0
|
|
1017
1025
|
[0.51.0]: https://github.com/Automattic/jetpack-components/compare/0.50.5...0.51.0
|
|
@@ -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 && (
|