@automattic/jetpack-components 0.52.1 → 0.53.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.53.1] - 2024-05-09
+### Added
+- Added GlobalNotices component and useGlobalNotices hook [#37286]
+
+## [0.53.0] - 2024-05-08
+### Added
+- Social: Added add connection modal [#37211]
+
+### Changed
+- Jetpack Backup: Add a LoadingPlaceholder while waiting for Jetpack Backup price [#37238]
+
 ## [0.52.1] - 2024-05-06
 ### Changed
 - Updated package dependencies. [#37147] [#37148] [#37160]
@@ -1012,6 +1023,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.53.1]: https://github.com/Automattic/jetpack-components/compare/0.53.0...0.53.1
+[0.53.0]: https://github.com/Automattic/jetpack-components/compare/0.52.1...0.53.0
 [0.52.1]: https://github.com/Automattic/jetpack-components/compare/0.52.0...0.52.1
 [0.52.0]: https://github.com/Automattic/jetpack-components/compare/0.51.0...0.52.0
 [0.51.0]: https://github.com/Automattic/jetpack-components/compare/0.50.5...0.51.0

package/components/global-notices/global-notices.tsx

@@ -0,0 +1,31 @@
+import { SnackbarList } from '@wordpress/components';
+import styles from './styles.module.scss';
+import { useGlobalNotices } from './use-global-notices';
+
+export type GlobalNoticesProps = {
+	maxVisibleNotices?: number;
+};
+
+/**
+ * Renders the global notices.
+ *
+ * @param {GlobalNoticesProps} props - Component props.
+ *
+ * @returns {import('react').ReactNode} The rendered notices list.
+ */
+export function GlobalNotices( { maxVisibleNotices = 3 }: GlobalNoticesProps ) {
+	const { getNotices, removeNotice } = useGlobalNotices();
+
+	const snackbarNotices = getNotices()
+		.filter( ( { type } ) => type === 'snackbar' )
+		// Slices from the tail end of the list.
+		.slice( -maxVisibleNotices );
+
+	return (
+		<SnackbarList
+			notices={ snackbarNotices }
+			className={ styles[ 'global-notices' ] }
+			onRemove={ removeNotice }
+		/>
+	);
+}

package/components/global-notices/index.ts

@@ -0,0 +1,3 @@
+export * from './global-notices';
+export * from './use-global-notices';
+export { store as globalNoticesStore } from '@wordpress/notices';

package/components/global-notices/styles.module.scss

@@ -0,0 +1,21 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.global-notices {
+	&:global(.components-snackbar-list) {
+		position: fixed;
+		inset-block-start: auto; // top
+		inset-block-end: 0; // bottom
+		inset-inline: 0; // left and right
+
+		@include break-small {
+			width: auto;
+			inset-inline: unset; // left and right
+			inset-block-start: 4rem;
+			inset-inline-end: 1rem;
+		}
+
+		@include break-medium {
+			inset-block-start: 3rem;
+		}
+	}
+}

package/components/global-notices/use-global-notices.ts

@@ -0,0 +1,37 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+type NoticesStore = ReturnType< ( typeof noticesStore )[ 'instantiate' ] >;
+
+export type TGlobalNotices = ReturnType< NoticesStore[ 'getActions' ] > &
+	ReturnType< NoticesStore[ 'getSelectors' ] >;
+
+/**
+ * The global notices hook.
+ *
+ * @returns {TGlobalNotices} The global notices selectors and actions.
+ */
+export function useGlobalNotices(): TGlobalNotices {
+	const actionCreators = useDispatch( noticesStore );
+	const notices = useSelect( select => select( noticesStore ).getNotices(), [] );
+
+	return {
+		...actionCreators,
+		createNotice( status, content, options ) {
+			return actionCreators.createNotice( status, content, { type: 'snackbar', ...options } );
+		},
+		createErrorNotice( content, options ) {
+			return actionCreators.createErrorNotice( content, { type: 'snackbar', ...options } );
+		},
+		createInfoNotice( content, options ) {
+			return actionCreators.createInfoNotice( content, { type: 'snackbar', ...options } );
+		},
+		createSuccessNotice( content, options ) {
+			return actionCreators.createSuccessNotice( content, { type: 'snackbar', ...options } );
+		},
+		createWarningNotice( content, options ) {
+			return actionCreators.createWarningNotice( content, { type: 'snackbar', ...options } );
+		},
+		getNotices: () => notices,
+	};
+}

package/components/icons/index.tsx

@@ -278,11 +278,13 @@ export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[
 export const SocialServiceIcon: React.FC< {
 	serviceName: React.ComponentProps< typeof SocialLogo >[ 'icon' ];
 	className?: string;
-} > = ( { serviceName, className } ) => {
+	iconSize?: number;
+} > = ( { serviceName, className, iconSize } ) => {
 	return (
 		<SocialLogo
 			className={ classNames( styles.socialIcon, styles[ serviceName ], className ) }
 			icon={ serviceName }
+			size={ iconSize || 24 }
 		/>
 	);
 };

package/components/pricing-card/index.tsx

@@ -1,4 +1,5 @@
 import { getCurrencyObject } from '@automattic/format-currency';
+import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import TermsOfService from '../terms-of-service';
@@ -54,7 +55,7 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 			) }
 			<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
 			<div className="jp-components__pricing-card__pricing">
-				{ props.priceBefore !== props.priceAfter && (
+				{ props.priceBefore !== props.priceAfter && props.priceAfter > 0 ? (
 					<div className="jp-components__pricing-card__price-before">
 						<span className="jp-components__pricing-card__currency">
 							{ currencyObjectBefore.symbol }
@@ -70,21 +71,27 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 						) }
 						<div className="jp-components__pricing-card__price-strikethrough"></div>
 					</div>
+				) : (
+					<LoadingPlaceholder width="100%" height={ 48 } />
+				) }
+				{ props.priceAfter > 0 && (
+					<>
+						<div className="jp-components__pricing-card__price-after">
+							<span className="jp-components__pricing-card__currency">
+								{ currencyObjectAfter.symbol }
+							</span>
+							<span className="jp-components__pricing-card__price">
+								{ currencyObjectAfter.integer }
+							</span>
+							{ showPriceDecimals( currencyObjectAfter ) && (
+								<span className="jp-components__pricing-card__price-decimal">
+									{ currencyObjectAfter.fraction }
+								</span>
+							) }
+						</div>
+						<span className="jp-components__pricing-card__price-details">{ priceDetails }</span>
+					</>
 				) }
-				<div className="jp-components__pricing-card__price-after">
-					<span className="jp-components__pricing-card__currency">
-						{ currencyObjectAfter.symbol }
-					</span>
-					<span className="jp-components__pricing-card__price">
-						{ currencyObjectAfter.integer }
-					</span>
-					{ showPriceDecimals( currencyObjectAfter ) && (
-						<span className="jp-components__pricing-card__price-decimal">
-							{ currencyObjectAfter.fraction }
-						</span>
-					) }
-				</div>
-				<span className="jp-components__pricing-card__price-details">{ priceDetails }</span>
 			</div>
 
 			{ props.children && (

package/index.ts

@@ -75,3 +75,4 @@ export { default as ProgressBar } from './components/progress-bar';
 export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';
 export { default as RadioControl } from './components/radio-control';
+export * from './components/global-notices';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.52.1",
+	"version": "0.53.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
 		"@wordpress/element": "5.33.0",
 		"@wordpress/i18n": "4.56.0",
 		"@wordpress/icons": "9.47.0",
+		"@wordpress/notices": "4.24.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",