@automattic/jetpack-components 5.0.1 → 6.1.0

package/build/components/selectable-card/_selectable-card.scss

@@ -0,0 +1,57 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+// Shared by CheckboxCard and RadioCard, which differ only in their control.
+
+@mixin grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	column-gap: var(--wpds-dimension-gap-md);
+	row-gap: var(--wpds-dimension-gap-2xl);
+
+	@media (max-width: 720px) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+// $selected matches the card while its control is selected.
+@mixin card($selected) {
+
+	&#{$selected} {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not(#{$selected}) {
+		border-color: var(--wpds-color-stroke-surface-neutral-strong);
+	}
+
+	&:has(:focus-visible) {
+
+		@include gb.outset-ring__focus();
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: border-color 0.15s ease-out;
+	}
+}
+
+@mixin surface {
+	position: relative;
+}
+
+@mixin illustration {
+	display: flex;
+	aspect-ratio: 294 / 192;
+	background: var(--wpds-color-background-surface-neutral-weak);
+	cursor: var(--wpds-cursor-control);
+
+	> svg {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+}
+
+@mixin control {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}

package/build/components/terms-of-service/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Link } from '@wordpress/ui';
+import { Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 // Deep import rather than the package barrel (`../../index.ts`): the barrel
 // pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
 // wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
 // that deep-imports pricing-table (which renders TermsOfService).
 import getRedirectUrl from '../../tools/jp-redirect/index.js';
-import Text from '../text/index.js';
 import './styles.scss';
-const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
+const TermsOfService = ({ className, variant = 'body-lg', multipleButtons, agreeButtonLabel, isTextOnly, }) => {
     const getTOSContent = () => {
         if (isTextOnly) {
             return _jsx(TermsOfServiceTextOnly, {});
@@ -20,7 +19,7 @@ const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOn
         }
         return _jsx(SingleButtonText, { agreeButtonLabel: agreeButtonLabel });
     };
-    return (_jsx(Text, { className: clsx(className, 'terms-of-service'), ...textProps, children: getTOSContent() }));
+    return (_jsx(Text, { variant: variant, render: _jsx("p", {}), className: clsx(className, 'terms-of-service'), children: getTOSContent() }));
 };
 const MultipleButtonsText = ({ multipleButtonsLabels }) => {
     if (Array.isArray(multipleButtonsLabels) && multipleButtonsLabels.length > 1) {

package/build/components/terms-of-service/styles.scss

@@ -1,6 +1,9 @@
-.terms-of-service {
-	font-size: var(--font-body);
+// No specificity, so any consumer class sets the colour without a tie.
+:where(.terms-of-service) {
 	color: var(--jp-black);
+}
+
+.terms-of-service {
 
 	.terms-of-service__link {
 		white-space: nowrap;

package/build/components/terms-of-service/types.d.ts

@@ -1,4 +1,5 @@
-import { TextProps } from '../text/types.ts';
+import type { Text } from '@wordpress/ui';
+import type { ComponentProps } from 'react';
 type MultipleButtonsProps = {
     /**
      * Indicates whether there are multiple buttons present that would imply agreement if clicked.
@@ -29,5 +30,14 @@ type OnlyTextProps = {
     multipleButtons?: undefined;
     agreeButtonLabel?: undefined;
 };
-export type TermsOfServiceProps = Pick<TextProps, 'variant' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'className' | 'component'> & (MultipleButtonsProps | SingleButtonProps | OnlyTextProps);
+export type TermsOfServiceProps = {
+    /**
+     * HTML class.
+     */
+    className?: string;
+    /**
+     * The `@wordpress/ui` Text variant. Defaults to `body-lg`.
+     */
+    variant?: ComponentProps<typeof Text>['variant'];
+} & (MultipleButtonsProps | SingleButtonProps | OnlyTextProps);
 export {};

package/build/index.d.ts

@@ -11,12 +11,15 @@ export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
 export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
+export { default as RadioCard, RadioCardGrid } from './components/radio-card/index.tsx';
+export type { RadioCardProps, RadioCardGridProps } from './components/radio-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.tsx';
 export { default as AdminPage } from './components/admin-page/index.tsx';
+export { default as PageActionButton } from './components/admin-page/page-action-button.tsx';
 export { default as DecorativeCard } from './components/decorative-card/index.tsx';
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
@@ -26,7 +29,6 @@ export { default as JitmSlot } from './components/jitm-slot/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
-export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';
@@ -45,6 +47,8 @@ export { default as ActionPopover } from './components/action-popover/index.tsx'
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
 export { default as StatCard } from './components/stat-card/index.tsx';
+export { default as PeriodSelector } from './components/period-selector/index.tsx';
+export type { PeriodPreset, PeriodSelectorProps } from './components/period-selector/types.ts';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';

package/build/index.js

@@ -23,12 +23,14 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
 export { default as Gravatar } from './components/gravatar/index.js';
 export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.js';
+export { default as RadioCard, RadioCardGrid } from './components/radio-card/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
 export { default as PricingCard } from './components/pricing-card/index.js';
 export { default as AdminSection } from './components/admin-section/basic/index.js';
 export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
 export { default as AdminPage } from './components/admin-page/index.js';
+export { default as PageActionButton } from './components/admin-page/page-action-button.js';
 export { default as DecorativeCard } from './components/decorative-card/index.js';
 export { default as Col } from './components/layout/col/index.js';
 export { default as Testimonials } from './components/testimonials/index.js';
@@ -38,7 +40,6 @@ export { default as JitmSlot } from './components/jitm-slot/index.js';
 export * from './components/icons/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
-export { default as NumberControl } from './components/number-control/index.js';
 export { default as QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
@@ -56,6 +57,7 @@ export { default as ActionPopover } from './components/action-popover/index.js';
 export { default as UpsellBanner } from './components/upsell-banner/index.js';
 export { getUserLocale, cleanLocale } from './lib/locale/index.js';
 export { default as StatCard } from './components/stat-card/index.js';
+export { default as PeriodSelector } from './components/period-selector/index.js';
 export { default as DiffViewer } from './components/diff-viewer/index.js';
 export { default as MarkedLines } from './components/marked-lines/index.js';
 export { default as DetailsViewer } from './components/details-viewer/index.js';

package/components/admin-page/index.tsx

@@ -36,13 +36,19 @@ const AdminPage: FC< AdminPageProps > = ( {
 	actions,
 	globalControls,
 	breadcrumbs,
+	ariaLabel,
 	tabs,
 	showBottomBorder = true,
 	unwrapped = false,
 } ) => {
+	// Only set what was passed: the client is shared, so an empty default would wipe what the page set.
 	useEffect( () => {
-		restApi.setApiRoot( apiRoot );
-		restApi.setApiNonce( apiNonce );
+		if ( apiRoot ) {
+			restApi.setApiRoot( apiRoot );
+		}
+		if ( apiNonce ) {
+			restApi.setApiNonce( apiNonce );
+		}
 	}, [ apiRoot, apiNonce ] );
 
 	// `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
@@ -80,6 +86,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 					visual={ logo || <JetpackLogo showText={ false } height={ 20 } /> }
 					breadcrumbs={ breadcrumbs }
 					title={ title }
+					ariaLabel={ ariaLabel }
 					subTitle={ subTitle }
 					actions={
 						globalControls ? (
@@ -104,7 +111,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 					{ unwrapped ? (
 						children
 					) : (
-						<Container fluid horizontalSpacing={ 0 }>
+						<Container className="jp-admin-page__content" fluid horizontalSpacing={ 0 }>
 							<Col>{ children }</Col>
 						</Container>
 					) }
@@ -146,3 +153,4 @@ const AdminPage: FC< AdminPageProps > = ( {
 };
 
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.tsx';

package/components/admin-page/page-action-button.tsx

@@ -0,0 +1,69 @@
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { Button, IconButton } from '@wordpress/ui';
+import { forwardRef, useCallback, useRef } from 'react';
+import type { ComponentProps, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from 'react';
+
+type PageActionButtonProps = ComponentProps< typeof IconButton >;
+
+/**
+ * A page action for `AdminPage`'s `actions`: a labelled button, or an icon button on narrow screens.
+ *
+ * The label stays the button's accessible name, and becomes its tooltip when only the icon shows.
+ *
+ * @param props            - Any `Button` prop, passed to whichever button renders, plus the ones below.
+ * @param props.label      - The button's text, or its tooltip when only the icon shows.
+ * @param props.icon       - The icon shown on narrow screens.
+ * @param props.shortcut   - Shown in the icon button's tooltip, so on narrow screens only.
+ * @param props.positioner - Positions the icon button's tooltip, so on narrow screens only.
+ * @param ref              - Forwarded to the rendered button.
+ * @return The button.
+ */
+function PageActionButton(
+	{ label, icon, shortcut, positioner, ...buttonProps }: PageActionButtonProps,
+	ref: ForwardedRef< HTMLButtonElement >
+) {
+	// On phones, page actions show only their icon so the header's title keeps its room.
+	const isNarrowScreen = useViewportMatch( 'mobile', '<' );
+
+	// Crossing the breakpoint swaps in a new button: move focus to it if the old one had it.
+	const button = useRef< HTMLButtonElement | null >( null );
+	const hadFocus = useRef( false );
+	const keepFocus = useCallback( ( node: HTMLButtonElement | null ) => {
+		const previous = button.current;
+		if ( node ) {
+			if ( hadFocus.current ) {
+				node.focus();
+			}
+			hadFocus.current = false;
+		} else {
+			hadFocus.current = previous?.ownerDocument.activeElement === previous;
+		}
+		button.current = node;
+	}, [] );
+	const mergedRef = useMergeRefs( [ ref, keepFocus ] );
+
+	if ( isNarrowScreen ) {
+		return (
+			<IconButton
+				ref={ mergedRef }
+				label={ label }
+				icon={ icon }
+				shortcut={ shortcut }
+				positioner={ positioner }
+				{ ...buttonProps }
+			/>
+		);
+	}
+
+	return (
+		<Button ref={ mergedRef } { ...buttonProps }>
+			{ label }
+		</Button>
+	);
+}
+
+const ForwardedPageActionButton: ForwardRefExoticComponent<
+	PageActionButtonProps & RefAttributes< HTMLButtonElement >
+> = forwardRef( PageActionButton );
+
+export default ForwardedPageActionButton;

package/components/admin-page/types.ts

@@ -51,6 +51,11 @@ export type AdminPageProps = {
 	 */
 	breadcrumbs?: ReactNode;
 
+	/**
+	 * Accessible name of the page region. Defaults to `title`, so pass it when the header shows `breadcrumbs` instead.
+	 */
+	ariaLabel?: string;
+
 	/**
 	 * Tab navigation displayed below the title/tagline in the unified header.
 	 */

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

@@ -4,14 +4,16 @@ import type { ReactElement } from 'react';
 /**
  * Automattic Icon Logo component
  *
+ * The Automattic logo is black or white only: pass white for both colors on dark backgrounds.
+ *
  * @param {object} props            - Component props
- * @param {string} props.innerColor - Color code for the line in the middle of the logo.
- * @param {string} props.outerColor - Color code for the logo's outer
+ * @param {string} props.innerColor - Color code for the logo's ring.
+ * @param {string} props.outerColor - Color code for the slash inside the ring.
  * @return {ReactElement} Component template
  */
 export default function AutomatticIconLogo( {
-	innerColor = '#00A3E0',
-	outerColor = '#FFFFFF',
+	innerColor = '#000000',
+	outerColor = '#000000',
 }: {
 	innerColor: string;
 	outerColor: string;
@@ -22,20 +24,20 @@ export default function AutomatticIconLogo( {
 			fill="none"
 			fillRule="evenodd"
 			height="43"
-			viewBox="0 0 47 43"
+			viewBox="0 0 171 156"
 			width="47"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<Path
 				fillRule="evenodd"
 				clipRule="evenodd"
-				d="M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z"
+				d="M85.398 155.632C34.1992 155.632 1.01562 118.788 1.01562 80.3993V75.6007C1.01562 36.5611 34.1992 0.368164 85.398 0.368164C136.597 0.368164 169.984 36.5611 169.984 75.6007V80.3993C169.984 118.666 136.8 155.632 85.398 155.632ZM145.191 76.048C145.191 48.0696 122.323 23.1819 85.398 23.1819C48.4731 23.1819 25.9304 48.1103 25.9304 76.048V79.5047C25.9304 107.483 48.7984 132.859 85.398 132.859C121.998 132.859 145.191 107.483 145.191 79.5047V76.048Z"
 				fill={ innerColor }
 			/>
 			<Path
 				fillRule="evenodd"
 				clipRule="evenodd"
-				d="M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z"
+				d="M62.7978 91.4965L87.6364 53.0284C91.1593 47.5724 98.4381 46.0054 103.894 49.5283L103.928 49.5504C109.384 53.0732 110.951 60.352 107.428 65.808L82.5899 104.276C79.067 109.732 71.7882 111.299 66.3322 107.776L66.298 107.754C60.842 104.231 59.275 96.9525 62.7978 91.4965Z"
 				fill={ outerColor }
 			/>
 		</SVG>

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

@@ -1,11 +1,19 @@
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __ } from '@wordpress/i18n';
 import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
 import type { BoostScoreBarProps } from './types.ts';
+import type { ScoreTier } from '@automattic/jetpack-boost-score-api';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';
 
+const TIER_FILLS: Record< ScoreTier, string > = {
+	good: 'fill-good',
+	medium: 'fill-mediocre',
+	poor: 'fill-bad',
+};
+
 export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 	score,
 	isLoading,
@@ -38,15 +46,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 			return 'fill-loading';
 		}
 
-		if ( score > 70 ) {
-			return 'fill-good';
-		}
-
-		if ( score > 50 ) {
-			return 'fill-mediocre';
-		}
-
-		return 'fill-bad';
+		return TIER_FILLS[ getScoreTier( score ) ];
 	};
 
 	return (

package/components/checkbox-card/style.scss

@@ -1,54 +1,26 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "../selectable-card/selectable-card";
 
 .jp-checkbox-card-grid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	column-gap: var(--wpds-dimension-gap-md);
-	row-gap: var(--wpds-dimension-gap-2xl);
-
-	@media (max-width: 720px) {
-		grid-template-columns: minmax(0, 1fr);
-	}
+
+	@include selectable-card.grid;
 }
 
 .jp-checkbox-card {
 
-	&[data-checked="true"] {
-		border-color: var(--wpds-color-stroke-interactive-brand-active);
-	}
-
-	&:hover:not([data-checked="true"]) {
-		border-color: var(--wpds-color-stroke-surface-neutral-strong);
-	}
-
-	&:has(:focus-visible) {
-
-		@include gb.outset-ring__focus();
-	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		transition: border-color 0.15s ease-out;
-	}
+	@include selectable-card.card('[data-checked="true"]');
 }
 
 .jp-checkbox-card__surface {
-	position: relative;
+
+	@include selectable-card.surface;
 }
 
 .jp-checkbox-card__illustration {
-	display: flex;
-	aspect-ratio: 294 / 192;
-	background: var(--wpds-color-background-surface-neutral-weak);
-	cursor: var(--wpds-cursor-control);
-
-	> svg {
-		inline-size: 100%;
-		block-size: 100%;
-	}
+
+	@include selectable-card.illustration;
 }
 
 .jp-checkbox-card__checkbox {
-	position: absolute;
-	inset-block-start: var(--wpds-dimension-padding-md);
-	inset-inline-start: var(--wpds-dimension-padding-md);
+
+	@include selectable-card.control;
 }

package/components/jetpack-footer/README.md

@@ -29,6 +29,15 @@ const menu = [
 <JetpackFooter menu={ menu } className="my-footer" />
 ```
 
+### Script-module builds
+
+Builds that can't bundle Sass imported from a dependency, such as wp-build script modules, can import the component and its stylesheet separately. Use the two together, since `unstyled` ships no styles:
+
+```js
+import '@automattic/jetpack-components/jetpack-footer/style.scss';
+import JetpackFooter from '@automattic/jetpack-components/jetpack-footer/unstyled';
+```
+
 ## Props
 
 - `className`: String - (default: `jetpack-footer`) the additional class name set on the element.

package/components/jetpack-footer/index.tsx

@@ -1,114 +1,3 @@
-import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
-import { __ } from '@wordpress/i18n';
-import { Stack, Text, Link } from '@wordpress/ui';
-import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.ts';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.tsx';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
-import type { FC } from 'react';
 
-declare global {
-	interface Window {
-		JetpackNetworkAdminData?: {
-			sitesUrl: string;
-			settingsUrl: string;
-		};
-	}
-}
-
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
-	let items: JetpackFooterMenuItem[] = [];
-
-	if (
-		getScriptData()?.myJetpack?.isAvailable === true &&
-		! isWpcomPlatformSite() &&
-		! window?.JetpackNetworkAdminData
-	) {
-		items = [
-			{
-				label: __( 'Features', 'jetpack-components' ),
-				href: getAdminUrl( 'admin.php?page=my-jetpack#/features' ),
-			},
-			{
-				label: __( 'Help', 'jetpack-components' ),
-				href: getAdminUrl( 'admin.php?page=my-jetpack#/help' ),
-			},
-			...items,
-		];
-	}
-
-	if ( menu ) {
-		items = [ ...items, ...menu ];
-	}
-
-	return (
-		<Stack
-			render={ <footer /> }
-			className={ clsx( 'jetpack-footer', className ) }
-			aria-label={ __( 'Jetpack', 'jetpack-components' ) }
-			role="contentinfo"
-			direction="row"
-			justify="flex-start"
-			align="center"
-			wrap="wrap"
-			gap="xl"
-			{ ...otherProps }
-		>
-			<Stack className="jetpack-footer__logo" direction="row" gap="sm" align="center">
-				<JetpackLogo showText={ false } height={ 16 } aria-hidden="true" />
-				<Text variant="body-md">Jetpack</Text>
-			</Stack>
-			<Stack render={ <ul /> } direction="row" gap="lg" wrap="wrap">
-				{ items.map( item => {
-					return (
-						<li key={ item.label }>
-							<Text
-								variant="body-md"
-								className="jetpack-footer__menu-item"
-								render={
-									! item.href ? (
-										<Link
-											render={ <span /> }
-											tabIndex={ 0 }
-											title={ item.title || '' }
-											onClick={ item.onClick || undefined }
-											onKeyDown={ item.onKeyDown || undefined }
-											role="button"
-										/>
-									) : (
-										<Link
-											href={ item.href }
-											title={ item.title || '' }
-											onClick={ item.onClick || undefined }
-											onKeyDown={ item.onKeyDown || undefined }
-										/>
-									)
-								}
-							>
-								{ item.label }
-							</Text>
-						</li>
-					);
-				} ) }
-			</Stack>
-			<a
-				className="jetpack-footer__a8c"
-				href={ getRedirectUrl( 'a8c-about' ) }
-				rel="noopener noreferrer"
-				target="_blank"
-			>
-				<AutomatticBylineLogo height={ 8 } />
-			</a>
-		</Stack>
-	);
-};
-
-export default JetpackFooter;
+export { default } from './jetpack-footer.tsx';