newspack-components 4.7.0 → 4.8.0

package/src/section-header/style.scss

@@ -2,10 +2,10 @@
  * Section Header
  */
 
+@use "~@wordpress/base-styles/breakpoints" as wp-breakpoints;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
-@use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
 	flex: 1;
@@ -22,6 +22,9 @@
 		&:has(> .newspack-section-header--no-margin) {
 			margin-top: 0;
 		}
+		&:has(> .newspack-section-header--hidden) {
+			margin-block: 0;
+		}
 		&.newspack-section-header--has-primary-action {
 			display: flex;
 			flex-direction: column;
@@ -32,7 +35,7 @@
 			}
 		}
 		&.newspack-section-header--has-back-nav {
-			@media (min-width: 782px) {
+			@include wp-mixins.break-wide {
 				.newspack-section-header__title-container,
 				p {
 					max-width: calc(50% - 16px);
@@ -42,7 +45,10 @@
 	}
 
 	&__back-nav {
-		@media (min-width: 1280px) {
+		@media (max-width: #{wp-breakpoints.$break-wide - 1px}) {
+			display: none;
+		}
+		@include wp-mixins.break-wide {
 			left: 0;
 			position: absolute;
 			top: 50%;
@@ -101,6 +107,18 @@
 		}
 	}
 
+	&#{&}--hidden {
+		.newspack-section-header__hidden-text {
+			display: none;
+		}
+
+		.newspack-section-header__back-nav {
+			@include wp-mixins.break-wide {
+				transform: translate(calc(-100% - 8px), calc(-50% + 12px));
+			}
+		}
+	}
+
 	&__icon {
 		background-color: var(--wp-admin-theme-color-lighter-10);
 		border-radius: 100%;
@@ -125,9 +143,7 @@
 		display: flex;
 		gap: 8px;
 
-		.newspack-section-header__menu,
-		.newspack-section-header__secondary-action,
-		.newspack-badge {
+		.newspack-section-header__secondary-action {
 			margin-top: 8px;
 		}
 	}

package/src/settings/DateRangeSetting.js

@@ -0,0 +1,266 @@
+/**
+ * WordPress dependencies.
+ */
+import { Fragment, useEffect, useState } from '@wordpress/element';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SelectControl, TextControl } from '../';
+
+/**
+ * A bound is stored as { type: 'absolute', date } or { type: 'relative', days },
+ * where days is negative for the past and positive for the future. The UI splits
+ * the relative case in two so a publisher never has to type a minus sign.
+ */
+const BOUND_TYPES = [
+	{ label: __( 'Any', 'newspack-plugin' ), value: '' },
+	{ label: __( 'Date', 'newspack-plugin' ), value: 'absolute' },
+	{ label: __( 'Days ago', 'newspack-plugin' ), value: 'past' },
+	{ label: __( 'Days from now', 'newspack-plugin' ), value: 'future' },
+];
+
+// Upper magnitude for a relative bound: ~273 years, far inside Date's range,
+// and it keeps the resolved year four digits so the matcher's lexicographic
+// compare stays valid. Import and REST bypass this input, so the matcher still
+// fails closed on larger offsets — this just turns a wild typo into
+// browser-level validation instead of a segment that matches nobody.
+const MAX_RELATIVE_DAYS = 100000;
+
+// Today as YYYY-MM-DD in local time. toISOString() converts to UTC and would give
+// the wrong day for anyone west of Greenwich.
+const today = () => {
+	const date = new Date();
+	const month = String( date.getMonth() + 1 ).padStart( 2, '0' );
+	const day = String( date.getDate() ).padStart( 2, '0' );
+	return `${ date.getFullYear() }-${ month }-${ day }`;
+};
+
+// Zero days is the same day either way, and normalizes to "Days ago".
+const boundTypeOf = bound => {
+	if ( ! bound || ! bound.type ) {
+		return '';
+	}
+	if ( 'absolute' === bound.type ) {
+		return 'absolute';
+	}
+	return bound.days > 0 ? 'future' : 'past';
+};
+
+const boundValueOf = bound => {
+	if ( ! bound ) {
+		return '';
+	}
+	return 'absolute' === bound.type ? bound.date || '' : String( Math.abs( bound.days || 0 ) );
+};
+
+// `seed` is set only when the publisher picks a bound type, so a newly chosen
+// bound starts on a usable value instead of being half-filled. It must stay off
+// for edits to the value itself: a date input reports '' both when cleared and
+// transiently while its value is being retyped, and substituting today() there
+// would silently move a saved window out from under the publisher.
+const makeBound = ( type, rawValue, seed = false ) => {
+	if ( 'absolute' === type ) {
+		const date = rawValue || ( seed ? today() : '' );
+		// An absolute bound with no date is not a bound: emitted and saved, it
+		// would reach the matcher as a bound it can only reject, silently
+		// shrinking the segment to nobody. The row itself stays open — the
+		// control falls back to the chosen bound type while the bound is absent.
+		return date ? { type: 'absolute', date } : undefined;
+	}
+	// A cleared magnitude mirrors a cleared date: no bound at all, not a
+	// zero-day bound — { days: 0 } would quietly move the window's edge to
+	// today and snap the emptied input back to '0' mid-retype. An explicit
+	// '0' is falsy-but-present, so the check is on emptiness, not truthiness.
+	const raw = '' === rawValue && seed ? '0' : rawValue;
+	if ( '' === raw ) {
+		return undefined;
+	}
+	// Number() rather than parseInt(): a number input accepts scientific
+	// notation, and parseInt( '1e2' ) reads it as 1 instead of 100.
+	const days = Math.abs( Math.trunc( Number( raw ) ) || 0 );
+	return { type: 'relative', days: 'future' === type ? days : -days };
+};
+
+const DateRangeBound = ( { label, testId, bound, onChange } ) => {
+	// The bound type is normally derived from the stored value, but a zero-magnitude
+	// relative bound (`days: 0`) is the same day whether the publisher chose "ago" or
+	// "from now" — the sign can't tell them apart. `chosenType` records the direction
+	// to fall back on while the bound stays ambiguous, and starts out `null` — no
+	// direction known yet — since the bound this control receives can arrive
+	// asynchronously (e.g. an existing segment fetched after first mount).
+	const [ chosenType, setChosenType ] = useState( null );
+	const derivedType = boundTypeOf( bound );
+	const isAmbiguous = 'relative' === bound?.type && 0 === bound.days;
+
+	// Keep chosenType in step with any unambiguous bound — freshly chosen by the
+	// publisher in this control, or loaded from storage — so the direction survives
+	// if the value is later cleared down to an ambiguous zero. A bound of '' (no
+	// bound at all, e.g. before an async load resolves) doesn't establish a
+	// direction; only a real, unambiguous one does.
+	useEffect( () => {
+		if ( '' !== derivedType && ! isAmbiguous ) {
+			setChosenType( derivedType );
+		}
+	}, [ derivedType, isAmbiguous ] );
+
+	// Also fall back while there is no bound at all: a cleared date emits no
+	// bound (see makeBound), and deriving from the absent value would collapse
+	// the row to "Any" mid-edit instead of leaving the empty input for retyping.
+	const type = null !== chosenType && ( isAmbiguous || ! bound ) ? chosenType : derivedType;
+	return (
+		<div className="newspack-settings__date-range-bound">
+			<SelectControl
+				label={ label }
+				// Without this the select renders at 32px while the sibling input is
+				// 40px, so the two boxes in a row don't match.
+				__next40pxDefaultSize
+				value={ type }
+				options={ BOUND_TYPES }
+				onChange={ nextType => {
+					setChosenType( nextType );
+					onChange( nextType ? makeBound( nextType, '', true ) : undefined );
+				} }
+			/>
+			{ '' !== type && (
+				<TextControl
+					data-testid={ testId }
+					// The visible label sits on the sibling select, so without one here
+					// the input has no accessible name at all. Composed with the row
+					// label so the two bound rows' inputs stay distinguishable — two
+					// bare "Days" spin buttons announce identically.
+					label={
+						'absolute' === type
+							? // translators: %s: the bound row label (From/To).
+							  sprintf( __( '%s date', 'newspack-plugin' ), label )
+							: // translators: %s: the bound row label (From/To).
+							  sprintf( __( '%s days', 'newspack-plugin' ), label )
+					}
+					hideLabelFromVision
+					type={ 'absolute' === type ? 'date' : 'number' }
+					min={ 'absolute' === type ? undefined : 0 }
+					max={ 'absolute' === type ? undefined : MAX_RELATIVE_DAYS }
+					value={ boundValueOf( bound ) }
+					onChange={ nextValue => onChange( makeBound( type, nextValue ) ) }
+				/>
+			) }
+		</div>
+	);
+};
+
+/**
+ * Rolling windows offered as one-click presets. Each is the trailing window
+ * ending today, i.e. `start: -N days`, `end: today` — the same shape the custom
+ * rows produce, so a preset is a shortcut rather than a separate stored format.
+ */
+const PRESET_DAYS = [ 7, 30, 365 ];
+
+const PRESETS = [
+	{ label: __( 'Any', 'newspack-plugin' ), value: '' },
+	/* translators: %d: number of days in a trailing date window. */
+	...PRESET_DAYS.map( days => ( { label: sprintf( _n( 'Last %d day', 'Last %d days', days, 'newspack-plugin' ), days ), value: String( days ) } ) ),
+	{ label: __( 'Custom', 'newspack-plugin' ), value: 'custom' },
+];
+
+/**
+ * Which preset a stored range corresponds to.
+ *
+ * @param {*} start The start bound.
+ * @param {*} end   The end bound.
+ * @return {string} A PRESETS value: '' when unbounded, the day count when the
+ *                  range is exactly one of the presets, otherwise 'custom'.
+ */
+const presetOf = ( start, end ) => {
+	if ( ! start && ! end ) {
+		return '';
+	}
+	if (
+		start &&
+		end &&
+		'relative' === start.type &&
+		'relative' === end.type &&
+		0 === end.days &&
+		start.days < 0 &&
+		PRESET_DAYS.includes( Math.abs( start.days ) )
+	) {
+		return String( Math.abs( start.days ) );
+	}
+	return 'custom';
+};
+
+const DateRangeSetting = ( { start, end, onChange, label, ...props } ) => {
+	const derivedPreset = presetOf( start, end );
+	// A range that matches a preset is indistinguishable from the same range built
+	// by hand, and an empty one is indistinguishable from "Custom, nothing filled
+	// in yet" — so a deliberate Custom choice has to be remembered rather than
+	// re-derived. Starts null: nothing chosen yet, so the stored value decides.
+	const [ chosenPreset, setChosenPreset ] = useState( null );
+
+	// Custom explains any range, so it is never overridden by what the value looks
+	// like. Every other selection stays in step with a range that arrived from
+	// storage or changed elsewhere.
+	useEffect( () => {
+		setChosenPreset( chosen => ( 'custom' === chosen ? chosen : derivedPreset ) );
+	}, [ derivedPreset ] );
+
+	const preset = null === chosenPreset ? derivedPreset : chosenPreset;
+
+	// Both keys are always emitted: the consumer merges the value into the stored
+	// criterion, so omitting one would leave a stale bound behind. An empty range
+	// emits nothing at all, which drops the criterion — an empty `{}` would reach
+	// the matcher as "no bounds to check" and match every reader with a date.
+	const changeRange = ( nextStart, nextEnd ) => onChange( nextStart || nextEnd ? { start: nextStart, end: nextEnd } : undefined );
+
+	const changePreset = next => {
+		setChosenPreset( next );
+		if ( 'custom' === next ) {
+			// Keep the current range so the rows open on what the preset meant.
+			return;
+		}
+		if ( '' === next ) {
+			onChange( undefined );
+			return;
+		}
+		changeRange( { type: 'relative', days: -Number( next ) }, { type: 'relative', days: 0 } );
+	};
+
+	return (
+		<div { ...props }>
+			<div className="newspack-settings__date-range-preset">
+				<SelectControl
+					// The criterion's own name is the visible heading of the section
+					// this renders into, so a visible label here would just repeat it —
+					// but the heading is a bare span with no label association, so the
+					// consumer-passed name is what keeps several date criteria's preset
+					// selectors distinguishable to a screen reader.
+					label={ label || __( 'Date range', 'newspack-plugin' ) }
+					hideLabelFromVision
+					__next40pxDefaultSize
+					data-testid="date-range-preset"
+					value={ preset }
+					options={ PRESETS }
+					onChange={ changePreset }
+				/>
+			</div>
+			{ 'custom' === preset && (
+				<Fragment>
+					<DateRangeBound
+						label={ __( 'From', 'newspack-plugin' ) }
+						testId="date-range-start-value"
+						bound={ start }
+						onChange={ nextStart => changeRange( nextStart, end ) }
+					/>
+					<DateRangeBound
+						label={ __( 'To', 'newspack-plugin' ) }
+						testId="date-range-end-value"
+						bound={ end }
+						onChange={ nextEnd => changeRange( start, nextEnd ) }
+					/>
+				</Fragment>
+			) }
+		</div>
+	);
+};
+
+export default DateRangeSetting;

package/src/settings/SettingsSection.js

@@ -1,14 +1,34 @@
+/**
+ * WordPress dependencies.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
+
 /**
  * Internal dependencies.
  */
-import { Grid, InfoButton } from '../';
+import Grid from '../grid';
+import InfoButton from '../info-button';
 
 const SettingSection = ( { title, description, children } ) => (
 	<Grid columns={ 1 } gutter={ 8 } className="newspack-settings__section">
-		<div className="newspack-settings__section__title">
+		<Stack direction="row" align="flex-start" gap="xs" className="newspack-settings__section__title">
 			<span>{ title }</span>
-			{ description && <InfoButton text={ description } /> }
-		</div>
+			{ description && (
+				<InfoButton
+					description={ description }
+					triggerLabel={
+						typeof title === 'string'
+							? sprintf(
+									// translators: %s is the name of the setting being explained.
+									__( 'More information about %s', 'newspack-plugin' ),
+									title
+							  )
+							: __( 'More information', 'newspack-plugin' )
+					}
+				/>
+			) }
+		</Stack>
 		<div className="newspack-settings__section__content">{ children }</div>
 	</Grid>
 );

package/src/settings/SettingsSection.test.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import SettingsSection from './SettingsSection';
+
+const DESCRIPTION = 'Number of articles read in the last 30 day period.';
+
+describe( 'SettingsSection', () => {
+	it( 'reveals the description from the info trigger', () => {
+		render(
+			<SettingsSection title="Articles read" description={ DESCRIPTION }>
+				<input />
+			</SettingsSection>
+		);
+		expect( screen.queryByText( DESCRIPTION ) ).not.toBeInTheDocument();
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'More information about Articles read' } ) );
+
+		expect( screen.getByText( DESCRIPTION ) ).toBeInTheDocument();
+	} );
+
+	it( 'falls back to a plain trigger name when the title is not a string', () => {
+		render(
+			<SettingsSection title={ <em>Articles read</em> } description={ DESCRIPTION }>
+				<input />
+			</SettingsSection>
+		);
+		expect( screen.getByRole( 'button', { name: 'More information' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders no info trigger without a description', () => {
+		render(
+			<SettingsSection title="Articles read">
+				<input />
+			</SettingsSection>
+		);
+		expect( screen.getByText( 'Articles read' ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/settings/index.js

@@ -1,6 +1,7 @@
 import SettingsCard from './SettingsCard';
 import SettingsSection from './SettingsSection';
 import MinMaxSetting from './MinMaxSetting';
+import DateRangeSetting from './DateRangeSetting';
 
 import './style.scss';
 
@@ -8,4 +9,5 @@ export default {
 	SettingsCard,
 	SettingsSection,
 	MinMaxSetting,
+	DateRangeSetting,
 };

package/src/settings/style.scss

@@ -1,3 +1,5 @@
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
 .newspack-settings {
 	&__card {
 		&.newspack-card.newspack-action-card {
@@ -28,17 +30,18 @@
 
 		.newspack-settings__section {
 			&__title {
-				align-items: center;
-				display: flex;
-				margin: 0;
-
 				span {
-					line-height: 24px;
+					line-height: wp-vars.$font-line-height-small;
+				}
+
+				.newspack-info-button {
+					margin-block: calc((#{wp-vars.$font-line-height-small} - #{wp-vars.$button-size-small}) / 2);
 				}
 			}
 			&__content {
 				> div,
-				.newspack-settings__min-max {
+				.newspack-settings__min-max,
+				.newspack-settings__date-range-bound {
 					margin: 0;
 					display: flex;
 					align-items: center;
@@ -49,7 +52,19 @@
 					}
 				}
 				.newspack-autocomplete-tokenfield,
-				.newspack-settings__min-max {
+				.newspack-settings__min-max,
+				.newspack-settings__date-range-bound {
+					width: 100%;
+				}
+				.newspack-settings__date-range-bound {
+					// Overrides the `center` above, which has to be beaten at this
+					// nesting level. The select carries the visible From/To label and
+					// the value input's is hidden, so the two controls differ in
+					// overall height; centering floats the input up against the label,
+					// while bottom-aligning lines the two boxes up with each other.
+					align-items: flex-end;
+				}
+				.newspack-settings__date-range-preset {
 					width: 100%;
 				}
 				.newspack-autocomplete-tokenfield {
@@ -90,6 +105,24 @@
 				margin-top: 16px !important;
 			}
 		}
+		.newspack-settings__date-range-preset + .newspack-settings__date-range-bound {
+			margin-top: 16px !important;
+		}
+		.newspack-settings__date-range-bound {
+			gap: 8px;
+
+			.newspack-select-control {
+				flex: 0 0 auto;
+			}
+
+			.newspack-text-control {
+				flex: 1 1 auto;
+			}
+
+			+ .newspack-settings__date-range-bound {
+				margin-top: 16px !important;
+			}
+		}
 	}
 
 	&__no-border {