newspack-components 4.7.0 → 4.8.0

package/dist/cjs/plugin-installer/index.js

@@ -14,7 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -256,14 +256,10 @@ var PluginInstaller = /*#__PURE__*/function (_Component) {
               })]
             });
           } else if (Status === 'active') {
-            actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              className: "newspack-plugin-installer__status",
-              children: [(0, _i18n.__)('Installed', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                  icon: _icons.check
-                })
-              })]
+            // Installed is a state, not an action, so the slot takes a badge.
+            actionText = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+              intent: "stable",
+              children: (0, _i18n.__)('Installed', 'newspack-plugin')
             });
           }
           var classes = (0, _classnames["default"])('newspack-action-card__plugin-installer', _this2.classForInstallationStatus(installationStatus));

package/dist/cjs/plugin-installer/style.scss

@@ -2,8 +2,6 @@
  * Plugin Installer
  */
 
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
 .newspack-card {
 	.newspack-plugin-installer__status {
 		align-items: center;
@@ -35,25 +33,16 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
-
-		.newspack-plugin-installer__checkbox {
-			background: wp-colors.$alert-green;
-			box-shadow: none;
-		}
-
-		svg {
-			fill: white;
-		}
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-success-strong, #008030 );
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-error-strong, #cc1818 );
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
+		box-shadow: inset 4px 0 0 var( --wpds-color-stroke-surface-neutral-weak, #f0f0f0 );
 	}
 
 	// Is Small

package/dist/cjs/section-header/index.js

@@ -9,7 +9,9 @@ var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
-var _ = require("..");
+var _ui = require("@wordpress/ui");
+var _button = _interopRequireDefault(require("../button"));
+var _grid = _interopRequireDefault(require("../grid"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,17 +38,19 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * @typedef {Object} SectionHeaderProps
  * @property {string}             [backNav='']       - URL to navigate back to.
- * @property {string|string[]}    [badge]            - Badge to display in the header.
- * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {Object[]}           [badges]           - Badges to display beside the title, each `{ label, intent }`.
  * @property {boolean}            [centered=false]   - Indicates if the header is centered.
- * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {?string}            [className=null]   - Additional CSS class name, applied to the outer container.
  * @property {string|Function|*}  [description]      - Description of the section.
  * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
  * @property {string|Function|*}  [icon]             - Icon to display in the header.
  * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {Object[]}           [menu]             - Overflow menu items.
  * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
  * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
- * @property {string}             [size='default']   - Size variant, either 'default' or 'small'. Scales the title, and the icon with it, independently of `pageHeader`.
+ * @property {Object}             [primaryAction]    - Primary button, `{ label, href, action }`.
+ * @property {Object}             [secondaryAction]  - Secondary link, `{ label, href, action }`.
+ * @property {string}             [size='default']   - Size variant: 'small', 'default', or 'hidden' to drop the title and description while the back nav stays visible.
  * @property {string}             title              - The title of the section.
  * @property {?string}            [id=null]          - Optional ID for the header element.
  * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
@@ -104,28 +108,34 @@ var _jsxRuntime = require("react/jsx-runtime");
       }, 250);
     }
   }, []);
-  var classes = (0, _classnames["default"])('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header', size === 'small' && 'newspack-section-header--small');
+  var classes = (0, _classnames["default"])('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header', size === 'small' && 'newspack-section-header--small', size === 'hidden' && 'newspack-section-header--hidden');
 
   // The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
   // is a secondary heading: its level follows `heading` (default 2). `pageHeader`
   // controls only the enlarged, centered styling — not the tag. Pass `heading={ 1 }`
   // on a headerless screen that needs the section header to be the page's h1.
   var HeadingTag = "h".concat(heading);
+  // `hidden` drops the title rather than announcing a level no reader can see.
+  var hiddenText = size === 'hidden' ? 'newspack-section-header__hidden-text' : undefined;
   var titleContent = null;
+  var renderBadge = function renderBadge(badge, i) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+      className: "newspack-section-header__badge",
+      intent: badge.intent || 'none',
+      children: badge.label
+    }, i);
+  };
   if (typeof title === 'string') {
     titleContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-section-header__title-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
-        className: "newspack-section-header__title",
-        children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
-            text: badge.label,
-            level: badge.level || 'default'
-          }, i);
-        }) : null]
+        className: (0, _classnames["default"])('newspack-section-header__title', hiddenText),
+        children: [title, (badges || []).filter(function (badge) {
+          return badge === null || badge === void 0 ? void 0 : badge.label;
+        }).map(renderBadge)]
       }), secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-section-header__secondary-action",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
           variant: "link",
           href: secondaryAction.href,
           onClick: secondaryAction.action,
@@ -151,7 +161,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     });
   } else if (typeof title === 'function') {
     titleContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
-      className: "newspack-section-header__title",
+      className: (0, _classnames["default"])('newspack-section-header__title', hiddenText),
       children: title()
     });
   }
@@ -159,7 +169,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     id: id,
     className: (0, _classnames["default"])('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid["default"], {
       columns: 1,
       gutter: 8,
       className: classes,
@@ -178,7 +188,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           className: "newspack-section-header__back-nav",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
             text: (0, _i18n.__)('Go back', 'newspack-plugin'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
               href: backNav,
               icon: _icons.chevronLeft,
               variant: "tertiary"
@@ -186,10 +196,13 @@ var _jsxRuntime = require("react/jsx-runtime");
           })
         }), titleContent]
       }) : titleContent, description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: hiddenText,
         children: description
       }), typeof description === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: hiddenText,
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: hiddenText,
         children: description
       }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-section-header__children",
@@ -197,7 +210,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       })]
     }), primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-section-header__primary-action",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
         href: primaryAction.href,
         variant: "primary",
         onClick: primaryAction.action,

package/dist/cjs/section-header/index.test.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _icons = require("@wordpress/icons");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('SectionHeader size', function () {
+  it('renders a 48px icon and no small modifier by default', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        title: "Get started",
+        icon: _icons.envelope
+      })),
+      container = _render.container;
+    expect(container.querySelector('.newspack-section-header--small')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-section-header__icon svg')).toHaveAttribute('width', '48');
+  });
+  it('renders a 24px icon and the small modifier at size="small"', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        title: "Get started",
+        icon: _icons.envelope,
+        size: "small"
+      })),
+      container = _render2.container;
+    expect(container.querySelector('.newspack-section-header--small')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-section-header__icon svg')).toHaveAttribute('width', '24');
+  });
+});

package/dist/cjs/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/dist/cjs/settings/DateRangeSetting.js

@@ -0,0 +1,309 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["start", "end", "onChange", "label"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+/**
+ * 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.
+ */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BOUND_TYPES = [{
+  label: (0, _i18n.__)('Any', 'newspack-plugin'),
+  value: ''
+}, {
+  label: (0, _i18n.__)('Date', 'newspack-plugin'),
+  value: 'absolute'
+}, {
+  label: (0, _i18n.__)('Days ago', 'newspack-plugin'),
+  value: 'past'
+}, {
+  label: (0, _i18n.__)('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.
+var 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.
+var today = function today() {
+  var date = new Date();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return "".concat(date.getFullYear(), "-").concat(month, "-").concat(day);
+};
+
+// Zero days is the same day either way, and normalizes to "Days ago".
+var boundTypeOf = function boundTypeOf(bound) {
+  if (!bound || !bound.type) {
+    return '';
+  }
+  if ('absolute' === bound.type) {
+    return 'absolute';
+  }
+  return bound.days > 0 ? 'future' : 'past';
+};
+var boundValueOf = function 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.
+var makeBound = function makeBound(type, rawValue) {
+  var seed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if ('absolute' === type) {
+    var 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: 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.
+  var 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.
+  var days = Math.abs(Math.trunc(Number(raw)) || 0);
+  return {
+    type: 'relative',
+    days: 'future' === type ? days : -days
+  };
+};
+var DateRangeBound = function DateRangeBound(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId,
+    bound = _ref.bound,
+    _onChange = _ref.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).
+  var _useState = (0, _element.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    chosenType = _useState2[0],
+    setChosenType = _useState2[1];
+  var derivedType = boundTypeOf(bound);
+  var isAmbiguous = 'relative' === (bound === null || bound === void 0 ? void 0 : 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.
+  (0, _element.useEffect)(function () {
+    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.
+  var type = null !== chosenType && (isAmbiguous || !bound) ? chosenType : derivedType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "newspack-settings__date-range-bound",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.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: true,
+      value: type,
+      options: BOUND_TYPES,
+      onChange: function onChange(nextType) {
+        setChosenType(nextType);
+        _onChange(nextType ? makeBound(nextType, '', true) : undefined);
+      }
+    }), '' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.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).
+      (0, _i18n.sprintf)((0, _i18n.__)('%s date', 'newspack-plugin'), label) :
+      // translators: %s: the bound row label (From/To).
+      (0, _i18n.sprintf)((0, _i18n.__)('%s days', 'newspack-plugin'), label),
+      hideLabelFromVision: true,
+      type: 'absolute' === type ? 'date' : 'number',
+      min: 'absolute' === type ? undefined : 0,
+      max: 'absolute' === type ? undefined : MAX_RELATIVE_DAYS,
+      value: boundValueOf(bound),
+      onChange: function onChange(nextValue) {
+        return _onChange(makeBound(type, nextValue));
+      }
+    })]
+  });
+};
+
+/**
+ * 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.
+ */
+var PRESET_DAYS = [7, 30, 365];
+var PRESETS = [{
+  label: (0, _i18n.__)('Any', 'newspack-plugin'),
+  value: ''
+}].concat((0, _toConsumableArray2["default"])(PRESET_DAYS.map(function (days) {
+  return {
+    label: (0, _i18n.sprintf)((0, _i18n._n)('Last %d day', 'Last %d days', days, 'newspack-plugin'), days),
+    value: String(days)
+  };
+})), [{
+  label: (0, _i18n.__)('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'.
+ */
+var presetOf = function 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';
+};
+var DateRangeSetting = function DateRangeSetting(_ref2) {
+  var start = _ref2.start,
+    end = _ref2.end,
+    onChange = _ref2.onChange,
+    label = _ref2.label,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var 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.
+  var _useState3 = (0, _element.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    chosenPreset = _useState4[0],
+    setChosenPreset = _useState4[1];
+
+  // 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.
+  (0, _element.useEffect)(function () {
+    setChosenPreset(function (chosen) {
+      return 'custom' === chosen ? chosen : derivedPreset;
+    });
+  }, [derivedPreset]);
+  var 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.
+  var changeRange = function changeRange(nextStart, nextEnd) {
+    return onChange(nextStart || nextEnd ? {
+      start: nextStart,
+      end: nextEnd
+    } : undefined);
+  };
+  var changePreset = function 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 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-settings__date-range-preset",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.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 || (0, _i18n.__)('Date range', 'newspack-plugin'),
+        hideLabelFromVision: true,
+        __next40pxDefaultSize: true,
+        "data-testid": "date-range-preset",
+        value: preset,
+        options: PRESETS,
+        onChange: changePreset
+      })
+    }), 'custom' === preset && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeBound, {
+        label: (0, _i18n.__)('From', 'newspack-plugin'),
+        testId: "date-range-start-value",
+        bound: start,
+        onChange: function onChange(nextStart) {
+          return changeRange(nextStart, end);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeBound, {
+        label: (0, _i18n.__)('To', 'newspack-plugin'),
+        testId: "date-range-end-value",
+        bound: end,
+        onChange: function onChange(nextEnd) {
+          return changeRange(start, nextEnd);
+        }
+      })]
+    })]
+  }));
+};
+var _default = exports["default"] = DateRangeSetting;

package/dist/cjs/settings/SettingsSection.js

@@ -1,11 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _ = require("../");
+var _i18n = require("@wordpress/i18n");
+var _ui = require("@wordpress/ui");
+var _grid = _interopRequireDefault(require("../grid"));
+var _infoButton = _interopRequireDefault(require("../info-button"));
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
 /**
  * Internal dependencies.
  */
@@ -14,16 +22,22 @@ var SettingSection = function SettingSection(_ref) {
   var title = _ref.title,
     description = _ref.description,
     children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid["default"], {
     columns: 1,
     gutter: 8,
     className: "newspack-settings__section",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+      direction: "row",
+      align: "flex-start",
+      gap: "xs",
       className: "newspack-settings__section__title",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: title
-      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
-        text: description
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_infoButton["default"], {
+        description: description,
+        triggerLabel: typeof title === 'string' ? (0, _i18n.sprintf)(
+        // translators: %s is the name of the setting being explained.
+        (0, _i18n.__)('More information about %s', 'newspack-plugin'), title) : (0, _i18n.__)('More information', 'newspack-plugin')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-settings__section__content",