@automattic/jetpack-components 5.0.1 → 6.1.0

package/components/jetpack-footer/jetpack-footer.tsx

@@ -0,0 +1,113 @@
+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 '../../tools/jp-redirect/index.ts';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
+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;

package/components/period-selector/index.tsx

@@ -0,0 +1,84 @@
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { calendar, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Button, IconButton, Menu, Stack } from '@wordpress/ui';
+import type { PeriodSelectorProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * A dropdown of period presets, with optional buttons to step to the previous or next period.
+ *
+ * @param {PeriodSelectorProps} props - Component props.
+ * @return {JSX.Element} The selector.
+ */
+export default function PeriodSelector< Value extends string >( {
+	presets,
+	value,
+	label,
+	onChange,
+	onPrevious,
+	onNext,
+	isPreviousDisabled = false,
+	isNextDisabled = false,
+	disabled = false,
+	className,
+}: PeriodSelectorProps< Value > ): JSX.Element {
+	const selected = presets.find( preset => preset.value === value );
+	const selectedLabel = selected?.label ?? __( 'Select period', 'jetpack-components' );
+	const [ previousIcon, nextIcon ] = isRTL()
+		? [ chevronRight, chevronLeft ]
+		: [ chevronLeft, chevronRight ];
+
+	return (
+		<Stack direction="row" align="center" gap="xs" className={ className }>
+			<Menu.Root>
+				<Menu.Trigger
+					render={ <Button variant="outline" tone="neutral" size="compact" /> }
+					disabled={ disabled }
+					aria-label={
+						label &&
+						sprintf(
+							/* translators: %1$s: What the control picks, such as "Date range". %2$s: The selected period, such as "Last 30 days". */
+							__( '%1$s: %2$s', 'jetpack-components' ),
+							label,
+							selectedLabel
+						)
+					}
+				>
+					<Button.Icon icon={ calendar } />
+					{ selectedLabel }
+				</Menu.Trigger>
+				<Menu.Popup positioner={ <Menu.Positioner align="end" /> } aria-label={ label }>
+					<Menu.RadioGroup value={ value } onValueChange={ onChange }>
+						{ presets.map( preset => (
+							<Menu.RadioItem key={ preset.value } value={ preset.value } closeOnClick>
+								<Menu.ItemLabel>{ preset.label }</Menu.ItemLabel>
+							</Menu.RadioItem>
+						) ) }
+					</Menu.RadioGroup>
+				</Menu.Popup>
+			</Menu.Root>
+			{ onPrevious && (
+				<IconButton
+					variant="outline"
+					tone="neutral"
+					size="compact"
+					icon={ previousIcon }
+					label={ __( 'Previous period', 'jetpack-components' ) }
+					onClick={ onPrevious }
+					disabled={ disabled || isPreviousDisabled }
+				/>
+			) }
+			{ onNext && (
+				<IconButton
+					variant="outline"
+					tone="neutral"
+					size="compact"
+					icon={ nextIcon }
+					label={ __( 'Next period', 'jetpack-components' ) }
+					onClick={ onNext }
+					disabled={ disabled || isNextDisabled }
+				/>
+			) }
+		</Stack>
+	);
+}

package/components/period-selector/types.ts

@@ -0,0 +1,29 @@
+export type PeriodPreset< Value extends string = string > = {
+	/** Identifies the preset; passed to `onChange`. */
+	value: Value;
+	/** The preset's name, such as "Last 7 days". */
+	label: string;
+};
+
+export type PeriodSelectorProps< Value extends string = string > = {
+	/** The presets the dropdown offers, in order. */
+	presets: PeriodPreset< Value >[];
+	/** Names what the control picks, such as "Date range"; screen readers hear it before the selected period. */
+	label?: string;
+	/** The selected preset's value. */
+	value: Value;
+	/** Called with the chosen preset's value. */
+	onChange: ( value: Value ) => void;
+	/** Steps to the previous period; the button shows only when set. */
+	onPrevious?: () => void;
+	/** Steps to the next period; the button shows only when set. */
+	onNext?: () => void;
+	/** Whether there is no previous period to step to. */
+	isPreviousDisabled?: boolean;
+	/** Whether there is no next period to step to, such as on the latest one. */
+	isNextDisabled?: boolean;
+	/** Whether the dropdown and both step buttons are disabled. */
+	disabled?: boolean;
+	/** Class name for the wrapper. */
+	className?: string;
+};

package/components/radio-card/index.tsx

@@ -0,0 +1,72 @@
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, Field, Link, Radio, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
+import './style.scss';
+import type { RadioCardGridProps, RadioCardProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * Lays out radio cards in two columns, or one on narrow screens.
+ *
+ * @param {RadioCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export function RadioCardGrid( { children, className }: RadioCardGridProps ): JSX.Element {
+	return <div className={ clsx( 'jp-radio-card-grid', className ) }>{ children }</div>;
+}
+
+/**
+ * A card with a radio, picked by a click on its illustration. Render it in a `RadioGroup` inside a `Field.Root`.
+ *
+ * @param {RadioCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function RadioCard( {
+	id,
+	value,
+	title,
+	illustration,
+	previewUrl,
+	onPreviewClick,
+	disabled,
+}: RadioCardProps ): JSX.Element {
+	const titleId = `${ id }__title`;
+
+	const handlePreviewClick = useCallback( () => {
+		onPreviewClick?.( value );
+	}, [ value, onPreviewClick ] );
+
+	return (
+		<Field.Item disabled={ disabled }>
+			<Card.Root className="jp-radio-card">
+				<Card.Content>
+					<Card.FullBleed className="jp-radio-card__surface">
+						{ /* Only the illustration picks the card: the title and link sit outside the label. */ }
+						<Field.Label className="jp-radio-card__illustration">{ illustration }</Field.Label>
+						<Radio
+							id={ id }
+							className="jp-radio-card__radio"
+							value={ value }
+							disabled={ disabled }
+							aria-labelledby={ titleId }
+						/>
+					</Card.FullBleed>
+				</Card.Content>
+			</Card.Root>
+			<Stack gap="xs" direction="column">
+				<Text id={ titleId } variant="body-sm">
+					{ title }
+				</Text>
+				{ previewUrl && (
+					<Link href={ previewUrl } onClick={ handlePreviewClick }>
+						{ __( 'Preview and edit', 'jetpack-components' ) }
+					</Link>
+				) }
+			</Stack>
+		</Field.Item>
+	);
+}
+
+export { RadioCard };
+export type { RadioCardProps, RadioCardGridProps };

package/components/radio-card/style.scss

@@ -0,0 +1,26 @@
+@use "../selectable-card/selectable-card";
+
+.jp-radio-card-grid {
+
+	@include selectable-card.grid;
+}
+
+.jp-radio-card {
+
+	@include selectable-card.card( ":has(.jp-radio-card__radio[data-checked])" );
+}
+
+.jp-radio-card__surface {
+
+	@include selectable-card.surface;
+}
+
+.jp-radio-card__illustration {
+
+	@include selectable-card.illustration;
+}
+
+.jp-radio-card__radio {
+
+	@include selectable-card.control;
+}

package/components/radio-card/types.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+export type RadioCardProps = {
+	/**
+	 * Id of the radio; the title's id is built from it.
+	 */
+	id: string;
+	/**
+	 * The value the surrounding `RadioGroup` takes when this card is picked. Also passed to `onPreviewClick`.
+	 */
+	value: string;
+	/**
+	 * Caption under the card, and the radio's accessible name.
+	 */
+	title: string;
+	/**
+	 * Picture filling the card, drawn at a 294×192 aspect ratio.
+	 */
+	illustration?: ReactNode;
+	/**
+	 * Shows a "Preview and edit" link to this URL under the title.
+	 */
+	previewUrl?: string;
+	/**
+	 * Called with the card's `value` when the "Preview and edit" link is clicked.
+	 */
+	onPreviewClick?: ( value: string ) => void;
+	/**
+	 * Disables the radio.
+	 */
+	disabled?: boolean;
+};
+
+export type RadioCardGridProps = {
+	/**
+	 * The `RadioCard`s to lay out.
+	 */
+	children: ReactNode;
+	/**
+	 * Extra class for the grid.
+	 */
+	className?: string;
+};

package/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/components/terms-of-service/index.tsx

@@ -1,23 +1,22 @@
 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.ts';
-import Text from '../text/index.tsx';
 import type { TermsOfServiceProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
 import './styles.scss';
 
 const TermsOfService: FC< TermsOfServiceProps > = ( {
 	className,
+	variant = 'body-lg',
 	multipleButtons,
 	agreeButtonLabel,
 	isTextOnly,
-	...textProps
 } ) => {
 	const getTOSContent = () => {
 		if ( isTextOnly ) {
@@ -30,7 +29,7 @@ const TermsOfService: FC< TermsOfServiceProps > = ( {
 	};
 
 	return (
-		<Text className={ clsx( className, 'terms-of-service' ) } { ...textProps }>
+		<Text variant={ variant } render={ <p /> } className={ clsx( className, 'terms-of-service' ) }>
 			{ getTOSContent() }
 		</Text>
 	);

package/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/components/terms-of-service/types.ts

@@ -1,4 +1,5 @@
-import { TextProps } from '../text/types.ts';
+import type { Text } from '@wordpress/ui';
+import type { ComponentProps } from 'react';
 
 type MultipleButtonsProps = {
 	/**
@@ -37,24 +38,14 @@ type OnlyTextProps = {
 	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 );

package/index.ts

@@ -26,12 +26,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';
@@ -41,7 +44,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';
@@ -65,6 +67,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "5.0.1",
+	"version": "6.1.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -46,6 +46,11 @@
 			"types": "./build/components/jetpack-footer/index.d.ts",
 			"default": "./build/components/jetpack-footer/index.js"
 		},
+		"./jetpack-footer/style.scss": "./build/components/jetpack-footer/style.scss",
+		"./jetpack-footer/unstyled": {
+			"types": "./build/components/jetpack-footer/jetpack-footer.d.ts",
+			"default": "./build/components/jetpack-footer/jetpack-footer.js"
+		},
 		"./jetpack-logo": {
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
@@ -62,6 +67,10 @@
 			"types": "./build/components/product-price/index.d.ts",
 			"default": "./build/components/product-price/index.js"
 		},
+		"./radio-card": {
+			"types": "./build/components/radio-card/index.d.ts",
+			"default": "./build/components/radio-card/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -81,7 +90,7 @@
 	],
 	"dependencies": {
 		"@automattic/jetpack-api": "^2.2.3",
-		"@automattic/jetpack-boost-score-api": "^1.2.3",
+		"@automattic/jetpack-boost-score-api": "^1.3.0",
 		"@automattic/jetpack-script-data": "^0.6.11",
 		"@automattic/number-formatters": "^1.2.12",
 		"@babel/runtime": "^7",
@@ -104,35 +113,35 @@
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.4.1",
+		"social-logos": "^3.4.2",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.19",
+		"@automattic/jetpack-base-styles": "^1.2.20",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.2",
-		"@storybook/addon-docs": "10.4.6",
-		"@storybook/react": "10.4.6",
+		"@storybook/addon-docs": "10.6.3",
+		"@storybook/react": "10.6.3",
 		"@testing-library/dom": "10.4.2",
 		"@testing-library/react": "16.3.3",
 		"@testing-library/user-event": "14.6.8",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.31",
-		"@types/react-dom": "18.3.7",
+		"@types/react": "19.3.0",
+		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.5.2",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
 		"require-from-string": "2.0.2",
-		"storybook": "10.4.6",
+		"storybook": "10.6.3",
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
-		"webpack": "5.111.1",
+		"webpack": "5.112.2",
 		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	}
 }

package/build/components/number-control/index.d.ts

@@ -1,28 +0,0 @@
-import type { ComponentType, InputHTMLAttributes, ReactNode } from 'react';
-export type NumberControlProps = {
-    /**
-     * Matches common `@wordpress/components` control props without importing their internal types.
-     */
-    label?: ReactNode;
-    help?: ReactNode;
-    className?: string;
-    hideLabelFromVision?: boolean;
-    __nextHasNoMarginBottom?: boolean;
-    /**
-     * TextControl-style signature. (The experimental NumberControl can accept this too.)
-     */
-    onChange: (value: string) => void;
-    value: string | number;
-    __next40pxDefaultSize?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'className' | 'type' | 'children'>;
-/**
- * This uses the experimental NumberControl from the block
- * editor where available, otherwise it falls back to a
- * standard TextControl, limited to numbers.
- * @type {ComponentType<NumberControlProps>}
- *
- * @param {NumberControlProps} props - the NumberControl component props
- * @return {ReactNode} - NumberControl component
- */
-declare const NumberControl: ComponentType<NumberControlProps>;
-export default NumberControl;