@automattic/jetpack-components 0.63.0 → 0.64.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.64.1] - 2024-12-09
+### Removed
+- Remove bulk action support from the ThreatsDataViews component. [#40483]
+
+### Fixed
+- Fixed threat type values and labels. [#40467]
+
+## [0.64.0] - 2024-12-04
+### Changed
+- Changed text domain from 'jetpack' to 'jetpack-components'. [#40368]
+- Minor enhancements to the ThreatsDataViews component [#40398]
+- Updated package dependencies. [#40363]
+
 ## [0.63.0] - 2024-11-26
 ### Changed
 - Updates ThreatModal flow [#40214]
@@ -1230,6 +1243,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.64.1]: https://github.com/Automattic/jetpack-components/compare/0.64.0...0.64.1
+[0.64.0]: https://github.com/Automattic/jetpack-components/compare/0.63.0...0.64.0
 [0.63.0]: https://github.com/Automattic/jetpack-components/compare/0.62.0...0.63.0
 [0.62.0]: https://github.com/Automattic/jetpack-components/compare/0.61.0...0.62.0
 [0.61.0]: https://github.com/Automattic/jetpack-components/compare/0.60.0...0.61.0

package/components/action-button/index.jsx

@@ -30,7 +30,9 @@ const ActionButton = props => {
 		loadingText,
 		isDisabled,
 		displayError = false,
-		errorMessage = __( 'An error occurred. Please try again.', 'jetpack' ),
+		errorMessage = __( 'An error occurred. Please try again.', 'jetpack-components' ),
+		variant = 'primary',
+		isExternalLink = false,
 		customClass,
 	} = props;
 
@@ -43,7 +45,8 @@ const ActionButton = props => {
 					className={ clsx( styles.button, 'jp-action-button--button', customClass ) }
 					label={ label }
 					onClick={ onClick }
-					variant="primary"
+					variant={ isExternalLink ? 'link' : variant }
+					isExternalLink={ isExternalLink }
 					disabled={ isLoading || isDisabled }
 				>
 					{ isLoading ? loadingContent : label }
@@ -70,6 +73,10 @@ ActionButton.propTypes = {
 	displayError: PropTypes.bool,
 	/** The error message string */
 	errorMessage: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
+	/** The type/variant of button */
+	variant: PropTypes.arrayOf( PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ) ),
+	/** Will display the button as a link with an external icon. */
+	isExternalLink: PropTypes.bool,
 };
 
 export default ActionButton;

package/components/action-popover/index.tsx

@@ -54,7 +54,7 @@ const ActionPopover = ( {
 	if ( showSteps ) {
 		stepsText = sprintf(
 			/* translators: 1 Current step, 2 Total steps */
-			__( '%1$d of %2$d', 'jetpack' ),
+			__( '%1$d of %2$d', 'jetpack-components' ),
 			step,
 			totalSteps
 		);

package/components/admin-page/index.tsx

@@ -18,7 +18,7 @@ import type React from 'react';
  */
 const AdminPage: React.FC< AdminPageProps > = ( {
 	children,
-	moduleName = __( 'Jetpack', 'jetpack' ),
+	moduleName = __( 'Jetpack', 'jetpack-components' ),
 	moduleNameHref,
 	showHeader = true,
 	showFooter = true,

package/components/automattic-byline-logo/index.tsx

@@ -10,7 +10,7 @@ import { AutomatticBylineLogoProps } from './types';
  * @return {React.ReactNode} AutomatticBylineLogo component.
  */
 const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
-	title = __( 'An Automattic Airline', 'jetpack' ),
+	title = __( 'An Automattic Airline', 'jetpack-components' ),
 	height = 7,
 	className,
 	...otherProps

package/components/boost-score-bar/index.tsx

@@ -20,8 +20,8 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 	}
 
 	const prevScoreOffset = ( prevScore / score ) * 100;
-	const desktopIconLabel = __( 'Desktop score', 'jetpack' );
-	const mobileIconLabel = __( 'Mobile score', 'jetpack' );
+	const desktopIconLabel = __( 'Desktop score', 'jetpack-components' );
+	const mobileIconLabel = __( 'Mobile score', 'jetpack-components' );
 
 	const getIcon = () => {
 		if ( scoreBarType === 'desktop' ) {

package/components/boost-score-graph/tooltip.tsx

@@ -31,69 +31,79 @@ export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) =>
 		<div className="jb-score-tooltip">
 			<div className="jb-score-tooltip__date">{ date }</div>
 			<div className="jb-score-tooltip__row">
-				<div className="jb-score-tooltip__column">{ __( 'Overall score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{ __( 'Overall score', 'jetpack-components' ) }
+				</div>
 				<div className="jb-score-tooltip__column">{ scoreLetter }</div>
 			</div>
 			<hr />
 			<div className="jb-score-tooltip__row">
-				<div className="jb-score-tooltip__column">{ __( 'Desktop score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{ __( 'Desktop score', 'jetpack-components' ) }
+				</div>
 				<div className="jb-score-tooltip__column">
 					{
 						/* translators: %d is the score */
-						sprintf( __( '%d / 100', 'jetpack' ), desktop_overall_score )
+						sprintf( __( '%d / 100', 'jetpack-components' ), desktop_overall_score )
 					}
 				</div>
 			</div>
 			{ typeof desktop_lcp === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
 					<div className="jb-score-tooltip__column">
-						{ __( 'Largest Contentful Paint', 'jetpack' ) }
+						{ __( 'Largest Contentful Paint', 'jetpack-components' ) }
 					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_lcp ) }</div>
 				</div>
 			) }
 			{ typeof desktop_tbt === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
-					<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+					<div className="jb-score-tooltip__column">
+						{ __( 'Total Blocking Time', 'jetpack-components' ) }
+					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_tbt ) }</div>
 				</div>
 			) }
 			{ typeof desktop_cls === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
 					<div className="jb-score-tooltip__column">
-						{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+						{ __( 'Cumulative Layout Shift', 'jetpack-components' ) }
 					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', desktop_cls ) }</div>
 				</div>
 			) }
 			<hr />
 			<div className="jb-score-tooltip__row">
-				<div className="jb-score-tooltip__column">{ __( 'Mobile score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{ __( 'Mobile score', 'jetpack-components' ) }
+				</div>
 				<div className="jb-score-tooltip__column">
 					{
 						/* translators: %d is the score */
-						sprintf( __( '%d / 100', 'jetpack' ), mobile_overall_score )
+						sprintf( __( '%d / 100', 'jetpack-components' ), mobile_overall_score )
 					}
 				</div>
 			</div>
 			{ typeof mobile_lcp === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
 					<div className="jb-score-tooltip__column">
-						{ __( 'Largest Contentful Paint', 'jetpack' ) }
+						{ __( 'Largest Contentful Paint', 'jetpack-components' ) }
 					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_lcp ) }</div>
 				</div>
 			) }
 			{ typeof mobile_tbt === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
-					<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+					<div className="jb-score-tooltip__column">
+						{ __( 'Total Blocking Time', 'jetpack-components' ) }
+					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_tbt ) }</div>
 				</div>
 			) }
 			{ typeof mobile_cls === 'number' && (
 				<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
 					<div className="jb-score-tooltip__column">
-						{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+						{ __( 'Cumulative Layout Shift', 'jetpack-components' ) }
 					</div>
 					<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', mobile_cls ) }</div>
 				</div>

package/components/boost-score-graph/tooltips-plugin.ts

@@ -17,10 +17,9 @@ export function tooltipsPlugin( periods ) {
 	/**
 	 * Initializes the tooltips plugin.
 	 *
-	 * @param {uPlot}  u     - The uPlot instance.
-	 * @param {object} _opts - Options for the uPlot instance.
+	 * @param {uPlot} u - The uPlot instance.
 	 */
-	function init( u: uPlot, _opts: object ) {
+	function init( u: uPlot ) {
 		container.classList.add( 'jb-score-tooltips-container' );
 		if ( ! reactDom ) {
 			reactDom = ReactDOM.createRoot( reactRoot );

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -151,7 +151,7 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
 			},
 			series: [
 				{
-					label: __( 'Date', 'jetpack' ),
+					label: __( 'Date', 'jetpack-components' ),
 					value: ( self: uPlot, rawValue: number ) => {
 						// outputs legend content - value available when mouse is hovering the chart
 						if ( ! rawValue ) {
@@ -161,8 +161,8 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
 						return date.toLocaleDateString( getUserLocale() );
 					},
 				},
-				createSerieInfo( __( 'Desktop', 'jetpack' ), lastDesktopScore ),
-				createSerieInfo( __( 'Mobile', 'jetpack' ), lastMobileScore ),
+				createSerieInfo( __( 'Desktop', 'jetpack-components' ), lastDesktopScore ),
+				createSerieInfo( __( 'Mobile', 'jetpack-components' ), lastMobileScore ),
 			],
 			scales: {
 				x: {

package/components/button/index.tsx

@@ -55,7 +55,7 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 			<VisuallyHidden as="span">
 				{
 					/* translators: accessibility text */
-					__( '(opens in a new tab)', 'jetpack' )
+					__( '(opens in a new tab)', 'jetpack-components' )
 				}
 			</VisuallyHidden>
 		</>

package/components/copy-to-clipboard/index.tsx

@@ -47,10 +47,10 @@ export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {
 		icon = hasCopied ? <CheckmarkIcon /> : <ClipboardIcon />;
 	}
 
-	const defaultLabel = __( 'Copy to clipboard', 'jetpack' );
+	const defaultLabel = __( 'Copy to clipboard', 'jetpack-components' );
 
 	if ( 'icon' !== buttonStyle ) {
-		label = hasCopied ? __( 'Copied!', 'jetpack' ) : defaultLabel;
+		label = hasCopied ? __( 'Copied!', 'jetpack-components' ) : defaultLabel;
 	}
 
 	return (

package/components/gridicon/index.tsx

@@ -48,45 +48,45 @@ class Gridicon extends Component< GridiconProps > {
 			default:
 				return '';
 			case 'gridicons-audio':
-				return __( 'Has audio.', 'jetpack' );
+				return __( 'Has audio.', 'jetpack-components' );
 			case 'gridicons-arrow-left':
-				return __( 'Arrow left', 'jetpack' );
+				return __( 'Arrow left', 'jetpack-components' );
 			case 'gridicons-arrow-right':
-				return __( 'Arrow right', 'jetpack' );
+				return __( 'Arrow right', 'jetpack-components' );
 			case 'gridicons-calendar':
-				return __( 'Is an event.', 'jetpack' );
+				return __( 'Is an event.', 'jetpack-components' );
 			case 'gridicons-cart':
-				return __( 'Is a product.', 'jetpack' );
+				return __( 'Is a product.', 'jetpack-components' );
 			case 'chevron-down':
-				return __( 'Show filters', 'jetpack' );
+				return __( 'Show filters', 'jetpack-components' );
 			case 'gridicons-comment':
-				return __( 'Matching comment.', 'jetpack' );
+				return __( 'Matching comment.', 'jetpack-components' );
 			case 'gridicons-cross':
-				return __( 'Close.', 'jetpack' );
+				return __( 'Close.', 'jetpack-components' );
 			case 'gridicons-filter':
-				return __( 'Toggle search filters.', 'jetpack' );
+				return __( 'Toggle search filters.', 'jetpack-components' );
 			case 'gridicons-folder':
-				return __( 'Category', 'jetpack' );
+				return __( 'Category', 'jetpack-components' );
 			case 'gridicons-help-outline':
-				return __( 'Help', 'jetpack' );
+				return __( 'Help', 'jetpack-components' );
 			case 'gridicons-info':
 			case 'gridicons-info-outline':
-				return __( 'Information.', 'jetpack' );
+				return __( 'Information.', 'jetpack-components' );
 			case 'gridicons-image-multiple':
-				return __( 'Has multiple images.', 'jetpack' );
+				return __( 'Has multiple images.', 'jetpack-components' );
 			case 'gridicons-image':
-				return __( 'Has an image.', 'jetpack' );
+				return __( 'Has an image.', 'jetpack-components' );
 			case 'gridicons-page':
-				return __( 'Page', 'jetpack' );
+				return __( 'Page', 'jetpack-components' );
 			case 'gridicons-post':
-				return __( 'Post', 'jetpack' );
+				return __( 'Post', 'jetpack-components' );
 			case 'gridicons-jetpack-search':
 			case 'gridicons-search':
-				return __( 'Magnifying Glass', 'jetpack' );
+				return __( 'Magnifying Glass', 'jetpack-components' );
 			case 'gridicons-tag':
-				return __( 'Tag', 'jetpack' );
+				return __( 'Tag', 'jetpack-components' );
 			case 'gridicons-video':
-				return __( 'Has a video.', 'jetpack' );
+				return __( 'Has a video.', 'jetpack-components' );
 		}
 	}
 

package/components/indeterminate-progress-bar/index.tsx

@@ -20,7 +20,7 @@ const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( {
 	return (
 		<div
 			className={ clsx( className, styles[ 'indeterminate-progress-bar' ] ) }
-			aria-label={ __( 'Indeterminate Progress Bar', 'jetpack' ) }
+			aria-label={ __( 'Indeterminate Progress Bar', 'jetpack-components' ) }
 		/>
 	);
 };

package/components/jetpack-footer/index.tsx

@@ -22,7 +22,7 @@ const ExternalIcon: React.FC = () => (
 		<span className="jp-dashboard-footer__accessible-external-link">
 			{
 				/* translators: accessibility text */
-				__( '(opens in a new tab)', 'jetpack' )
+				__( '(opens in a new tab)', 'jetpack-components' )
 			}
 		</span>
 	</>
@@ -35,7 +35,7 @@ const ExternalIcon: React.FC = () => (
  * @return {React.ReactNode} JetpackFooter component.
  */
 const JetpackFooter: React.FC< JetpackFooterProps > = ( {
-	moduleName = __( 'Jetpack', 'jetpack' ),
+	moduleName = __( 'Jetpack', 'jetpack-components' ),
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,
@@ -69,8 +69,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 
 	let items: JetpackFooterMenuItem[] = [
 		{
-			label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack' ),
-			title: __( 'About Jetpack', 'jetpack' ),
+			label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack-components' ),
+			title: __( 'About Jetpack', 'jetpack-components' ),
 			href: areAdminLinksEnabled
 				? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
 				: getRedirectUrl( 'jetpack-about' ),
@@ -78,8 +78,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 			onClick: onAboutClick,
 		},
 		{
-			label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack' ),
-			title: __( "Automattic's Privacy Policy", 'jetpack' ),
+			label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components' ),
+			title: __( "Automattic's Privacy Policy", 'jetpack-components' ),
 			href: areAdminLinksEnabled
 				? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href
 				: getRedirectUrl( 'a8c-privacy' ),
@@ -87,8 +87,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 			onClick: onPrivacyClick,
 		},
 		{
-			label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack' ),
-			title: __( 'WordPress.com Terms of Service', 'jetpack' ),
+			label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack-components' ),
+			title: __( 'WordPress.com Terms of Service', 'jetpack-components' ),
 			href: getRedirectUrl( 'wpcom-tos' ),
 			target: '_blank',
 			onClick: onTermsClick,
@@ -117,7 +117,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 				},
 				className
 			) }
-			aria-label={ __( 'Jetpack', 'jetpack' ) }
+			aria-label={ __( 'Jetpack', 'jetpack-components' ) }
 			{ ...otherProps }
 		>
 			<ul>
@@ -160,7 +160,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 								? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
 								: getRedirectUrl( 'a8c-about' )
 						}
-						aria-label={ __( 'An Automattic Airline', 'jetpack' ) }
+						aria-label={ __( 'An Automattic Airline', 'jetpack-components' ) }
 					>
 						<AutomatticBylineLogo aria-hidden="true" />
 					</a>

package/components/jetpack-logo/index.tsx

@@ -25,7 +25,7 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
 			role="img"
 		>
-			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</title>
+			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack-components' ) }</title>
 			<path
 				fill={ logoColor }
 				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"

package/components/jetpack-protect-logo/index.tsx

@@ -25,7 +25,7 @@ const JetpackProtectLogo: React.FC< JetpackProtectLogoProps > = ( {
 			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
 			role="img"
 		>
-			<title id="jetpack-logo-title">{ __( 'Jetpack Protect Logo', 'jetpack' ) }</title>
+			<title id="jetpack-logo-title">{ __( 'Jetpack Protect Logo', 'jetpack-components' ) }</title>
 
 			<path
 				d="M20.1063 40.2111C31.2106 40.2111 40.2126 31.2091 40.2126 20.1048C40.2126 9.00048 31.2106 0 20.1063 0C9.00197 0 0 9.00197 0 20.1063C0 31.2106 9.00197 40.2111 20.1063 40.2111Z"

package/components/jetpack-search-logo/index.tsx

@@ -23,7 +23,7 @@ const JetpackSearchLogo: React.FC< JetpackSearchLogoProps > = ( {
 			aria-labelledby="jetpack-logo-title"
 			{ ...otherProps }
 		>
-			<desc id="jetpack-logo-title">{ __( 'Jetpack Search Logo', 'jetpack' ) }</desc>
+			<desc id="jetpack-logo-title">{ __( 'Jetpack Search Logo', 'jetpack-components' ) }</desc>
 			{ showText && (
 				<>
 					<path

package/components/jetpack-vaultpress-backup-logo/index.tsx

@@ -23,7 +23,7 @@ const JetpackVaultPressBackupLogo: React.FC< JetpackLogoProps > = ( {
 			{ ...otherProps }
 		>
 			<desc id="jetpack-vaultpress-backup-logo-title">
-				{ __( 'VaultPress Backup Logo', 'jetpack' ) }
+				{ __( 'VaultPress Backup Logo', 'jetpack-components' ) }
 			</desc>
 			<path
 				d="M2.88004 8.56455C2.86398 8.45217 2.85596 8.34783 2.85596 8.2515C2.85596 7.91438 2.93622 7.60134 3.09676 7.31237C3.30546 6.92709 3.6185 6.63813 4.03589 6.44548L15.1128 2.49632C15.3055 2.43211 15.5061 2.4 15.7148 2.4L16.3168 2.49632L27.3937 6.44548C27.8111 6.63813 28.1242 6.92709 28.3329 7.31237C28.4934 7.61739 28.5737 7.93043 28.5737 8.2515C28.5737 8.34783 28.5657 8.45217 28.5496 8.56455C28.5496 8.5806 28.5416 8.62876 28.5255 8.70903C28.3971 9.28696 28.2526 9.87291 28.0921 10.4669C27.9315 11.0448 27.6426 12.0321 27.2252 13.4288C26.8078 14.8254 26.2941 16.206 25.684 17.5706C25.0901 18.9351 24.3837 20.412 23.565 22.0013C22.7623 23.5746 21.775 25.1237 20.6031 26.6488C19.4473 28.1739 18.2111 29.5304 16.8948 30.7184C16.5737 31.0395 16.1723 31.2 15.6907 31.2C15.2412 31.2 14.856 31.0395 14.5349 30.7184C12.8974 29.2575 11.3804 27.4997 9.98372 25.4448C8.58706 23.39 7.47937 21.4796 6.66064 19.7137C5.84191 17.9478 5.1195 16.1579 4.49342 14.3438C3.88338 12.5137 3.47402 11.1813 3.26532 10.3465C3.07268 9.51171 2.94425 8.91773 2.88004 8.56455ZM3.93957 8.70903C3.97168 8.91773 4.03589 9.2388 4.13221 9.67224C4.24459 10.0896 4.44525 10.804 4.73422 11.8154C5.02318 12.8107 5.34425 13.8381 5.69743 14.8977C6.06666 15.9411 6.55629 17.1532 7.16632 18.5338C7.79241 19.8983 8.45863 21.2067 9.16499 22.4589C9.88739 23.711 10.7543 24.9953 11.7657 26.3117C12.777 27.6281 13.8446 28.792 14.9683 29.8033C15.1931 29.9639 15.4419 30.0441 15.7148 30.0441C15.9877 30.0441 16.2205 29.9639 16.4131 29.8033C17.9703 28.4067 19.4071 26.7291 20.7235 24.7706C22.056 22.812 23.0994 21.006 23.8539 19.3525C24.6245 17.6829 25.3068 15.9652 25.9008 14.1993C26.4948 12.4174 26.88 11.1572 27.0566 10.4187C27.2493 9.68027 27.3777 9.11037 27.4419 8.70903C27.458 8.62876 27.466 8.5485 27.466 8.46823C27.482 8.29164 27.4419 8.11505 27.3456 7.93846C27.2172 7.6816 27.0245 7.50502 26.7677 7.4087L16.076 3.55585C16.0279 3.55585 15.9636 3.54783 15.8834 3.53177C15.8031 3.51572 15.7389 3.50769 15.6907 3.50769L15.3536 3.55585L4.66198 7.4087C4.40512 7.50502 4.21248 7.6816 4.08405 7.93846C3.98773 8.11505 3.93154 8.29967 3.91549 8.49231C3.91549 8.57258 3.92352 8.64482 3.93957 8.70903ZM7.98505 9.67224H12.0305L15.6907 19.0635L19.3991 9.67224H23.4446C23.3483 9.91304 23.2198 10.2662 23.0593 10.7318C22.8988 11.1813 22.7463 11.5906 22.6018 11.9599C22.4573 12.3291 22.3048 12.6742 22.1442 12.9953C22.1121 13.0595 22.056 13.1077 21.9757 13.1398C21.9115 13.1719 21.8312 13.204 21.7349 13.2361C21.6386 13.2522 21.5663 13.2682 21.5182 13.2843C21.4379 13.3324 21.3657 13.3886 21.3014 13.4528C21.2533 13.501 21.2051 13.5732 21.157 13.6696C21.1249 13.7498 21.0927 13.814 21.0606 13.8622C21.0446 13.9104 21.0125 13.9987 20.9643 14.1271C20.9322 14.2395 20.9081 14.3117 20.8921 14.3438L20.3142 15.7886C18.5804 20.1712 17.5529 22.7719 17.2319 23.5906H14.1978L12.8974 20.412C12.769 20.0268 12.5443 19.4488 12.2232 18.6783C12.0948 18.293 11.87 17.715 11.5489 16.9445L10.8265 15.1625C10.7623 15.0181 10.6901 14.8254 10.6098 14.5846C10.5295 14.3438 10.4412 14.1271 10.3449 13.9344C10.2647 13.7418 10.1523 13.5572 10.0078 13.3806C9.94358 13.3164 9.87134 13.2763 9.79107 13.2602C9.71081 13.2281 9.62251 13.212 9.52619 13.212C9.42987 13.212 9.36565 13.204 9.33355 13.188C8.93221 12.2087 8.48271 11.0368 7.98505 9.67224Z"

package/components/jetpack-videopress-logo/index.tsx

@@ -22,7 +22,9 @@ const JetpackVideoPressLogo: React.FC< JetpackLogoProps > = ( {
 			height={ height }
 			{ ...otherProps }
 		>
-			<desc id="jetpack-videopress-logo-title">{ __( 'VideoPress Logo', 'jetpack' ) }</desc>
+			<desc id="jetpack-videopress-logo-title">
+				{ __( 'VideoPress Logo', 'jetpack-components' ) }
+			</desc>
 			{ showText ? (
 				<>
 					<path

package/components/number-slider/index.tsx

@@ -68,7 +68,7 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 				min={ minValue }
 				step={ step }
 				renderThumb={ renderThumbCallback } // eslint-disable-line react/jsx-no-bind
-				onChange={ onChange } // eslint-disable-line react/jsx-no-bind
+				onChange={ onChange }
 				onBeforeChange={ onBeforeChangeCallback } // eslint-disable-line react/jsx-no-bind
 				onAfterChange={ onAfterChangeCallback } // eslint-disable-line react/jsx-no-bind
 			/>

package/components/pricing-card/index.tsx

@@ -1,7 +1,7 @@
 import { getCurrencyObject } from '@automattic/format-currency';
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import TermsOfService from '../terms-of-service';
 import type { PricingCardProps } from './types';
 import type { CurrencyObject } from '@automattic/format-currency/src/types';
@@ -29,7 +29,7 @@ const showPriceDecimals = ( currencyObject: CurrencyObject ): boolean => {
  */
 const PricingCard: React.FC< PricingCardProps > = ( {
 	currencyCode = 'USD',
-	priceDetails = __( '/month, paid yearly', 'jetpack' ),
+	priceDetails = __( '/month, paid yearly', 'jetpack-components' ),
 	...props
 } ) => {
 	const currencyObjectBefore = getCurrencyObject( props.priceBefore, currencyCode );
@@ -44,7 +44,7 @@ const PricingCard: React.FC< PricingCardProps > = ( {
 							src={ props.icon }
 							alt={ sprintf(
 								/* translators: placeholder is a product name */
-								__( 'Icon for the product %s', 'jetpack' ),
+								__( 'Icon for the product %s', 'jetpack-components' ),
 								props.title
 							) }
 						/>

package/components/pricing-table/index.tsx

@@ -1,15 +1,15 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
-import {
+import React, {
 	createContext,
 	useContext,
 	Children,
 	cloneElement,
 	PropsWithChildren,
 	ReactElement,
+	CSSProperties,
 } from 'react';
-import React, { CSSProperties } from 'react';
 import IconTooltip from '../icon-tooltip';
 import useBreakpointMatch from '../layout/use-breakpoint-match';
 import TermsOfService from '../terms-of-service';
@@ -22,9 +22,9 @@ import {
 	PricingTableItemProps,
 } from './types';
 
-const INCLUDED_TEXT = __( 'Included', 'jetpack' );
-const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack' );
-const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack' );
+const INCLUDED_TEXT = __( 'Included', 'jetpack-components' );
+const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack-components' );
+const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack-components' );
 
 const PricingTableContext = createContext( undefined );
 
@@ -33,7 +33,7 @@ const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
 		return {
 			lg: COMING_SOON_TEXT,
 			// translators: Name of the current feature
-			default: sprintf( __( '%s coming soon', 'jetpack' ), featureNameLabel ),
+			default: sprintf( __( '%s coming soon', 'jetpack-components' ), featureNameLabel ),
 		};
 	}
 
@@ -43,7 +43,7 @@ const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
 			? featureNameLabel
 			: sprintf(
 					/* translators: Name of the current feature */
-					__( '%s not included', 'jetpack' ),
+					__( '%s not included', 'jetpack-components' ),
 					featureNameLabel
 			  ),
 	};
@@ -186,7 +186,7 @@ const PricingTable: React.FC< PricingTableProps > = ( {
 						<Text variant="body-small">
 							{ __(
 								'Reduced pricing is a limited offer for the first year and renews at regular price.',
-								'jetpack'
+								'jetpack-components'
 							) }
 						</Text>
 					) }

package/components/product-offer/index.tsx

@@ -43,7 +43,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 
 	const defautlButtonText = sprintf(
 		/* translators: placeholder is product name. */
-		__( 'Add %s', 'jetpack' ),
+		__( 'Add %s', 'jetpack-components' ),
 		title
 	);
 
@@ -79,7 +79,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 					<ProductPrice price={ price } offPrice={ offPrice } currency={ currency } />
 				) }
 
-				{ isFree && <H3>{ __( 'Free', 'jetpack' ) }</H3> }
+				{ isFree && <H3>{ __( 'Free', 'jetpack-components' ) }</H3> }
 
 				<Alert level="error" showIcon={ !! error }>
 					{ error }
@@ -103,7 +103,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 				{ isBundle && hasRequiredPlan && (
 					<div className={ styles[ 'product-has-required-plan' ] }>
 						<CheckmarkIcon size={ 36 } />
-						<Text>{ __( 'Active on your site', 'jetpack' ) }</Text>
+						<Text>{ __( 'Active on your site', 'jetpack-components' ) }</Text>
 					</div>
 				) }
 			</div>

package/components/product-offer/product-offer-header.tsx

@@ -12,7 +12,7 @@ import type React from 'react';
  * @return {React.ReactNode}  ProductOfferHeader react component.
  */
 export const ProductOfferHeader: React.FC< ProductOfferHeaderProps > = ( {
-	title = __( 'Popular upgrade', 'jetpack' ),
+	title = __( 'Popular upgrade', 'jetpack-components' ),
 } ) => {
 	return (
 		<div className={ styles[ 'card-header' ] }>

package/components/product-price/index.tsx

@@ -25,7 +25,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 	showNotOffPrice = true,
 	hideDiscountLabel = true,
 	promoLabel = '',
-	legend = __( '/month, paid yearly', 'jetpack' ),
+	legend = __( '/month, paid yearly', 'jetpack-components' ),
 	isNotConvenientPrice = false,
 	hidePriceFraction = false,
 	children,
@@ -43,7 +43,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 
 	const showDiscountLabel = ! hideDiscountLabel && discount && discount > 0;
 
-	const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack' ) : null;
+	const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack-components' ) : null;
 
 	return (
 		<>

package/components/record-meter-bar/index.tsx

@@ -139,11 +139,11 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 				</ul>
 			</div>
 			<table className="screen-reader-text">
-				<caption>{ tableCaption || __( 'Summary of the records', 'jetpack' ) }</caption>
+				<caption>{ tableCaption || __( 'Summary of the records', 'jetpack-components' ) }</caption>
 				<tbody>
 					<tr>
-						<th scope="col">{ recordTypeLabel || __( 'Record type', 'jetpack' ) }</th>
-						<th scope="col">{ recordCountLabel || __( 'Record count', 'jetpack' ) }</th>
+						<th scope="col">{ recordTypeLabel || __( 'Record type', 'jetpack-components' ) }</th>
+						<th scope="col">{ recordCountLabel || __( 'Record count', 'jetpack-components' ) }</th>
 					</tr>
 					{ itemsToRender.map( ( { label, count } ) => {
 						return (

package/components/status/index.tsx

@@ -11,11 +11,11 @@ interface StatusProps {
 
 const Status = ( { className, label, status = 'inactive' }: StatusProps ): React.JSX.Element => {
 	const defaultLabels: Record< string, string > = {
-		active: __( 'Active', 'jetpack' ),
-		error: __( 'Error', 'jetpack' ),
-		action: __( 'Action needed', 'jetpack' ),
-		inactive: __( 'Inactive', 'jetpack' ),
-		initializing: __( 'Setting up', 'jetpack' ),
+		active: __( 'Active', 'jetpack-components' ),
+		error: __( 'Error', 'jetpack-components' ),
+		action: __( 'Action needed', 'jetpack-components' ),
+		inactive: __( 'Inactive', 'jetpack-components' ),
+		initializing: __( 'Setting up', 'jetpack-components' ),
 	};
 
 	return (