diff --git a/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx index 806566fe515d..9c8a96f81f71 100644 --- a/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Text } from '@automattic/jetpack-components'; +import { Text } from '@wordpress/ui'; import { useEffect } from 'react'; /** * Internal dependencies @@ -56,7 +56,7 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( { const cardDescription = preventWidows( defaultDescription ); return ( - + { cardDescription } ); diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx index 5931a76f22b7..9c2f0d47328c 100644 --- a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx @@ -1,9 +1,9 @@ -import { Text } from '@automattic/jetpack-components'; import { CONNECTION_STORE_ID, ManageConnectionDialog } from '@automattic/jetpack-connection'; import { currentUserCan, isWoASite } from '@automattic/jetpack-script-data'; import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { Text } from '@wordpress/ui'; import clsx from 'clsx'; import { useCallback, useMemo, useState } from 'react'; import { useAllProducts } from '../../data/products/use-all-products'; @@ -171,7 +171,7 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
- + { state.description } { state.action === 'CONNECT_USER' ? ( diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx index 85ae6d230321..3277569d2883 100644 --- a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx @@ -1,9 +1,10 @@ -import { Button, Text } from '@automattic/jetpack-components'; +// TODO: migrate Button usages to @wordpress/ui Link (handled in a separate PR — all Buttons here use variant="link" + href + isExternalLink + weight="regular", which @wordpress/ui Button does not support). +import { Button } from '@automattic/jetpack-components'; import { getUserConnectionUrl } from '@automattic/jetpack-connection'; import { getMyJetpackUrl } from '@automattic/jetpack-script-data'; import { dateI18n, getDate } from '@wordpress/date'; import { __, _n, _x, sprintf } from '@wordpress/i18n'; -import { Link } from '@wordpress/ui'; +import { Link, Text } from '@wordpress/ui'; import clsx from 'clsx'; import { useCallback } from 'react'; import { PRODUCT_STATUSES } from '../../constants'; @@ -124,7 +125,7 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => { if ( isLifetimePurchase( purchase ) ) { return ( - + { __( 'Never Expires', 'jetpack-my-jetpack' ) } @@ -135,7 +136,7 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => { return ( <> - + { expiryMessage() } { isExpiringPurchase && { expiryAction() } } @@ -324,7 +325,7 @@ const PlansSection: FC = () => { /> - + { __( 'Free', 'jetpack-my-jetpack' ) } diff --git a/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx b/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx index e01ebd9ba9b8..c68e3e271c5a 100644 --- a/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx @@ -1,4 +1,4 @@ -import { Button } from '@automattic/jetpack-components'; +import { Button } from '@wordpress/ui'; import clsx from 'clsx'; import styles from './style.module.scss'; import usePricingData from './use-pricing-data'; @@ -20,7 +20,7 @@ const RecommendationActions = ( { slug }: { slug: string } ) => { ) } { secondaryAction && ( - ) } diff --git a/projects/packages/my-jetpack/_inc/components/product-card/status.tsx b/projects/packages/my-jetpack/_inc/components/product-card/status.tsx index 6ef4c935173a..95daa980a890 100644 --- a/projects/packages/my-jetpack/_inc/components/product-card/status.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-card/status.tsx @@ -1,5 +1,5 @@ -import { Text } from '@automattic/jetpack-components'; import { __ } from '@wordpress/i18n'; +import { Text } from '@wordpress/ui'; import clsx from 'clsx'; import { PRODUCT_STATUSES } from '../../constants'; import styles from './style.module.scss'; @@ -113,7 +113,7 @@ const Status: FC< StatusProps > = ( { ); return ( - + { flagLabel } ); diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx index c1b960d17cc1..9b8c4a9184e5 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx @@ -1,7 +1,7 @@ -import { Text, getRedirectUrl } from '@automattic/jetpack-components'; +import { getRedirectUrl } from '@automattic/jetpack-components'; import { createInterpolateElement } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; -import { Link } from '@wordpress/ui'; +import { Link, Text } from '@wordpress/ui'; import Gridicon from 'gridicons'; import PropTypes from 'prop-types'; import { PRODUCT_STATUSES } from '../../../constants'; @@ -115,7 +115,7 @@ const BackupCard = props => { { isDeactivated && ! isBackupFailedReasonLoading && (
- + { createInterpolateElement( __( 'Backup was manually turned off. Please contact support to reactivate it.', @@ -135,7 +135,7 @@ const BackupCard = props => {
- + { __( 'The last backup attempt failed.', 'jetpack-my-jetpack' ) } { - + { __( 'Check out our troubleshooting guide.', 'jetpack-my-jetpack' ) }
@@ -203,7 +203,7 @@ const WithBackupsValueSection = props => { }; const WithBackupsDescription = () => ( - + { __( 'Activity Detected', 'jetpack-my-jetpack' ) } { getTimeSinceLastRenewableEvent( lastRewindableEventTime ) } diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx index 0146ab8b6f3e..330fdb3be51a 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx @@ -1,10 +1,11 @@ /** * External dependencies */ -import { Text, LoadingPlaceholder } from '@automattic/jetpack-components'; +import { LoadingPlaceholder } from '@automattic/jetpack-components'; import { formatNumberCompact } from '@automattic/number-formatters'; import { __, sprintf } from '@wordpress/i18n'; import { arrowUp, arrowDown, Icon } from '@wordpress/icons'; +import { Text } from '@wordpress/ui'; import clsx from 'clsx'; import PropTypes from 'prop-types'; /** diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx index 7e189910c777..8e19d7aec504 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Text } from '@automattic/jetpack-components'; +import { Text } from '@wordpress/ui'; import { useCallback, useMemo } from 'react'; import { PRODUCT_STATUSES } from '../../../constants'; import { @@ -56,7 +56,7 @@ const VideopressCard: ProductCardComponent = props => { const Description = useCallback( () => { return ( - + { descriptionText || detail.description } { isPluginActive && ! videoCount && (