@automattic/jetpack-components 6.0.0 → 6.1.1

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/dot-pager/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 @use "@automattic/jetpack-base-styles/root-variables";
 
 .dot-pager {
@@ -13,7 +13,7 @@
 	opacity: 1;
 	visibility: visible;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .dot-pager__controls {

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

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .global-notices {
 
@@ -10,14 +10,14 @@
 		// Modals have 100000, so this needs to be above them
 		z-index: 100001;
 
-		@include gb.break-small {
+		@include mixins.break-small {
 			width: auto;
 			inset-inline: unset; // left and right
 			inset-block-start: 4rem;
 			inset-inline-end: 1rem;
 		}
 
-		@include gb.break-medium {
+		@include mixins.break-medium {
 			inset-block-start: 3rem;
 		}
 	}

package/components/icons/style.module.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/colors";
 
 .star-icon {
 	fill: #000;
@@ -10,7 +10,7 @@
 }
 
 .socialIcon {
-	fill: gb.$gray-700;
+	fill: colors.$gray-700;
 
 	&.bluesky {
 		fill: var(--jetpack-social-logo-color-bluesky);

package/components/navigator-modal/styles.scss

@@ -1,4 +1,6 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/breakpoints";
+@use "@wordpress/base-styles/colors";
+@use "@wordpress/base-styles/mixins";
 
 .components-modal__screen-overlay:has(.jp-navigator-modal) {
 	z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
@@ -9,7 +11,7 @@
 	container-name: navigator-modal;
 	width: 100%;
 
-	@include gb.break-medium() {
+	@include mixins.break-medium() {
 		max-height: 90%;
 	}
 
@@ -37,7 +39,7 @@
 		justify-content: space-between;
 		padding: 1.5rem;
 		height: 4.5rem;
-		border-bottom: 1px solid gb.$gray-200;
+		border-bottom: 1px solid colors.$gray-200;
 		flex-shrink: 0;
 
 		h1 {
@@ -45,7 +47,7 @@
 			font-size: 15px;
 			font-weight: 500;
 			line-height: 24px;
-			color: gb.$gray-900;
+			color: colors.$gray-900;
 		}
 	}
 
@@ -60,7 +62,7 @@
 		overflow: auto;
 		flex-direction: column;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-direction: row;
 		}
 	}
@@ -71,11 +73,11 @@
 		flex-direction: column;
 		gap: 1.5rem;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			flex-basis: 30%;
 			height: 100%;
 			flex-shrink: 0;
-			border-inline-end: 1px solid gb.$gray-300;
+			border-inline-end: 1px solid colors.$gray-300;
 			overflow: auto;
 		}
 	}
@@ -85,14 +87,14 @@
 		height: 100%;
 		flex: 1;
 
-		@container navigator-modal (width >= #{gb.$break-small}) {
+		@container navigator-modal (width >= #{breakpoints.$break-small}) {
 			overflow: auto;
 		}
 	}
 
 	&__footer {
 		padding: 1rem 1.5rem;
-		border-top: 1px solid gb.$gray-300;
+		border-top: 1px solid colors.$gray-300;
 		height: 4.5rem;
 		flex-shrink: 0;
 	}

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 "@wordpress/base-styles/mixins";
+
+// 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 mixins.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/swipeable/style.scss

@@ -1,4 +1,4 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@wordpress/base-styles/mixins";
 
 .swipeable__container {
 	width: 100%;
@@ -19,7 +19,7 @@
 	transition: all 0.5s ease-in-out;
 	transition-property: transform, height;
 
-	@include gb.reduce-motion( "transition" );
+	@include mixins.reduce-motion( "transition" );
 }
 
 .swipeable__page {

package/index.ts

@@ -26,6 +26,8 @@ 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';
@@ -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": "6.0.0",
+	"version": "6.1.1",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -67,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"
@@ -85,36 +89,36 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.2.3",
-		"@automattic/jetpack-boost-score-api": "^1.3.0",
-		"@automattic/jetpack-script-data": "^0.6.11",
-		"@automattic/number-formatters": "^1.2.12",
+		"@automattic/jetpack-api": "^2.2.4",
+		"@automattic/jetpack-boost-score-api": "^1.3.1",
+		"@automattic/jetpack-script-data": "^0.6.12",
+		"@automattic/number-formatters": "^1.3.0",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/a11y": "4.57.0",
-		"@wordpress/admin-ui": "2.12.0",
-		"@wordpress/browserslist-config": "6.57.0",
-		"@wordpress/components": "42.0.0",
-		"@wordpress/compose": "8.10.0",
-		"@wordpress/data": "10.57.0",
-		"@wordpress/date": "5.57.0",
-		"@wordpress/dom": "4.57.0",
-		"@wordpress/element": "9.0.0",
-		"@wordpress/i18n": "6.30.0",
-		"@wordpress/icons": "18.0.0",
-		"@wordpress/notices": "5.57.0",
-		"@wordpress/theme": "2.3.0",
-		"@wordpress/ui": "0.24.0",
+		"@wordpress/a11y": "5.0.0",
+		"@wordpress/admin-ui": "3.0.0",
+		"@wordpress/browserslist-config": "7.0.0",
+		"@wordpress/components": "43.0.0",
+		"@wordpress/compose": "9.0.0",
+		"@wordpress/data": "11.0.0",
+		"@wordpress/date": "6.0.0",
+		"@wordpress/dom": "5.0.0",
+		"@wordpress/element": "10.0.0",
+		"@wordpress/i18n": "7.0.0",
+		"@wordpress/icons": "19.0.0",
+		"@wordpress/notices": "6.0.0",
+		"@wordpress/theme": "3.0.0",
+		"@wordpress/ui": "0.25.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.4.2",
+		"social-logos": "^3.4.3",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.19",
+		"@automattic/jetpack-base-styles": "^2.0.0",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.2",
 		"@storybook/addon-docs": "10.6.3",
@@ -126,6 +130,7 @@
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
+		"@wordpress/base-styles": "14.0.0",
 		"jest": "30.5.2",
 		"react": "19.3.0",
 		"react-dom": "19.3.0",
@@ -133,7 +138,7 @@
 		"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": {