newspack-components 4.7.0 → 4.8.0-alpha.1

package/dist/cjs/settings/SettingsSection.test.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var DESCRIPTION = 'Number of articles read in the last 30 day period.';
+describe('SettingsSection', function () {
+  it('reveals the description from the info trigger', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection["default"], {
+      title: "Articles read",
+      description: DESCRIPTION,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {})
+    }));
+    expect(_react.screen.queryByText(DESCRIPTION)).not.toBeInTheDocument();
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'More information about Articles read'
+    }));
+    expect(_react.screen.getByText(DESCRIPTION)).toBeInTheDocument();
+  });
+  it('falls back to a plain trigger name when the title is not a string', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection["default"], {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+        children: "Articles read"
+      }),
+      description: DESCRIPTION,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {})
+    }));
+    expect(_react.screen.getByRole('button', {
+      name: 'More information'
+    })).toBeInTheDocument();
+  });
+  it('renders no info trigger without a description', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection["default"], {
+      title: "Articles read",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {})
+    }));
+    expect(_react.screen.getByText('Articles read')).toBeInTheDocument();
+    expect(_react.screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/dist/cjs/settings/index.js

@@ -8,9 +8,11 @@ exports["default"] = void 0;
 var _SettingsCard = _interopRequireDefault(require("./SettingsCard"));
 var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
 var _MinMaxSetting = _interopRequireDefault(require("./MinMaxSetting"));
+var _DateRangeSetting = _interopRequireDefault(require("./DateRangeSetting"));
 require("./style.scss");
 var _default = exports["default"] = {
   SettingsCard: _SettingsCard["default"],
   SettingsSection: _SettingsSection["default"],
-  MinMaxSetting: _MinMaxSetting["default"]
+  MinMaxSetting: _MinMaxSetting["default"],
+  DateRangeSetting: _DateRangeSetting["default"]
 };

package/dist/cjs/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 {

package/dist/cjs/stat-card/body.js

@@ -0,0 +1,41 @@
+"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 _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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 Body = (0, _element.forwardRef)(function Body(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  (0, _context.useStatCardContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "column",
+    gap: "xs",
+    className: (0, _classnames["default"])('newspack-stat-card__body', className)
+  }, props), {}, {
+    children: children
+  }));
+});
+var _default = exports["default"] = Body;

package/dist/cjs/stat-card/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STAT_CARD_NULL_GLYPH = void 0;
+/**
+ * Stands in for a figure that does not exist, rather than a zero that does.
+ * Exported so tables can show the same glyph as the cards above them.
+ */
+var STAT_CARD_NULL_GLYPH = exports.STAT_CARD_NULL_GLYPH = '—';

package/dist/cjs/stat-card/context.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStatCardContext = exports.resolveStatCardLabels = exports.StatCardContext = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var ORPHAN_MESSAGE = 'StatCard subcomponents must be rendered inside StatCard.Root.';
+
+// Resolved per call rather than once at module load, so a locale switched after
+// the bundle evaluates still reaches the defaults. A blank override is a missing
+// one: the glyph and the arrow must never be left announcing nothing.
+var resolveStatCardLabels = exports.resolveStatCardLabels = function resolveStatCardLabels(labels) {
+  var _labels$notApplicable, _labels$up, _labels$down;
+  return {
+    notApplicable: (labels === null || labels === void 0 || (_labels$notApplicable = labels.notApplicable) === null || _labels$notApplicable === void 0 ? void 0 : _labels$notApplicable.trim()) || (0, _i18n._x)('Not applicable', 'a statistic with no number to show', 'newspack-plugin'),
+    up: (labels === null || labels === void 0 || (_labels$up = labels.up) === null || _labels$up === void 0 ? void 0 : _labels$up.trim()) || (0, _i18n._x)('Up', 'a statistic that has increased', 'newspack-plugin'),
+    down: (labels === null || labels === void 0 || (_labels$down = labels.down) === null || _labels$down === void 0 ? void 0 : _labels$down.trim()) || (0, _i18n._x)('Down', 'a statistic that has decreased', 'newspack-plugin')
+  };
+};
+var StatCardContext = exports.StatCardContext = (0, _element.createContext)(null);
+var useStatCardContext = exports.useStatCardContext = function useStatCardContext() {
+  var context = (0, _element.useContext)(StatCardContext);
+  var isOrphan = !context;
+  (0, _element.useEffect)(function () {
+    if (!isOrphan) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(ORPHAN_MESSAGE);
+  }, [isOrphan]);
+  if (!context) {
+    // A loose slot sizes its figure against the wrong container, which is
+    // cosmetic. Nothing above these cards catches an error, so throwing in
+    // production would blank an admin screen over it.
+    if ('production' !== process.env.NODE_ENV) {
+      throw new Error(ORPHAN_MESSAGE);
+    }
+    return {
+      heading: 3,
+      labels: resolveStatCardLabels()
+    };
+  }
+  return context;
+};

package/dist/cjs/stat-card/delta.js

@@ -0,0 +1,91 @@
+"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 _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["direction", "tone", "directionLabel", "label", "className", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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 glyphs = {
+  up: '↑',
+  down: '↓'
+};
+var tones = ['positive', 'negative', 'neutral'];
+var Delta = (0, _element.forwardRef)(function Delta(_ref, ref) {
+  var direction = _ref.direction,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
+    directionLabel = _ref.directionLabel,
+    label = _ref.label,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useStatCardContext = (0, _context.useStatCardContext)(),
+    labels = _useStatCardContext.labels;
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV) {
+      return;
+    }
+    if (!glyphs[direction]) {
+      // eslint-disable-next-line no-console
+      console.warn("StatCard.Delta: unknown direction \"".concat(direction, "\". Use one of ").concat(Object.keys(glyphs).join(', '), "."));
+    }
+    if (!tones.includes(tone)) {
+      // eslint-disable-next-line no-console
+      console.warn("StatCard.Delta: unknown tone \"".concat(tone, "\", falling back to neutral. Use one of ").concat(tones.join(', '), "."));
+    }
+  }, [direction, tone]);
+  var directions = {
+    up: labels.up,
+    down: labels.down
+  };
+  var glyph = glyphs[direction];
+  // Trimmed, and `||` not `??`: a blank label is a missing one. The fallback
+  // is keyed on the arrow's own direction, so an unrecognised one goes
+  // unspoken rather than announced as its opposite; words the caller wrote
+  // are honoured either way.
+  var named = label === null || label === void 0 ? void 0 : label.trim();
+  var spoken = (directionLabel === null || directionLabel === void 0 ? void 0 : directionLabel.trim()) || directions[direction];
+  var classes = (0, _classnames["default"])('newspack-stat-card__delta', 'neutral' !== tone && tones.includes(tone) && "newspack-stat-card__delta--".concat(tone), className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    ref: ref,
+    className: classes
+  }, props), {}, {
+    children: named ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        "aria-hidden": "true",
+        children: [glyph, children]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.VisuallyHidden, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
+        children: named
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [glyph && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": "true",
+        children: glyph
+      }), spoken && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.VisuallyHidden, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
+        children: "".concat(spoken, " ")
+      }), children]
+    })
+  }));
+});
+var _default = exports["default"] = Delta;

package/dist/cjs/stat-card/footer.js

@@ -0,0 +1,72 @@
+"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 _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+// A run of text shares one wrapper, so `Applies to { count } products` is one
+// sentence rather than three stacked paragraphs.
+var asParts = function asParts(children) {
+  var parts = [];
+  var text = [];
+  var flushText = function flushText() {
+    if (text.some(function (part) {
+      return '' !== String(part).trim();
+    })) {
+      parts.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "newspack-stat-card__description",
+        children: text
+      }, "text-".concat(parts.length)));
+    }
+    text = [];
+  };
+  _element.Children.toArray(children).forEach(function (child) {
+    // A Fragment is part of the run, not a block of its own:
+    // `createInterpolateElement` returns one, and the sentence it holds
+    // belongs in the description wrapper like any other text.
+    if ((0, _element.isValidElement)(child) && _element.Fragment !== child.type) {
+      flushText();
+      parts.push(child);
+    } else {
+      text.push(child);
+    }
+  });
+  flushText();
+  return parts;
+};
+var Footer = (0, _element.forwardRef)(function Footer(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  (0, _context.useStatCardContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, _objectSpread(_objectSpread({
+    ref: ref,
+    direction: "column",
+    align: "flex-start",
+    gap: "xs",
+    className: (0, _classnames["default"])('newspack-stat-card__footer', className)
+  }, props), {}, {
+    children: asParts(children)
+  }));
+});
+var _default = exports["default"] = Footer;

package/dist/cjs/stat-card/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "STAT_CARD_NULL_GLYPH", {
+  enumerable: true,
+  get: function get() {
+    return _constants.STAT_CARD_NULL_GLYPH;
+  }
+});
+exports["default"] = exports.StatCard = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _body = _interopRequireDefault(require("./body"));
+var _delta = _interopRequireDefault(require("./delta"));
+var _footer = _interopRequireDefault(require("./footer"));
+var _label = _interopRequireDefault(require("./label"));
+var _root = _interopRequireDefault(require("./root"));
+var _secondary = _interopRequireDefault(require("./secondary"));
+var _value = _interopRequireDefault(require("./value"));
+var _constants = require("./constants");
+/**
+ * StatCard
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+// Compound components here export one namespace object, as Drawer does.
+var StatCard = exports.StatCard = {
+  Root: _root["default"],
+  Label: _label["default"],
+  Body: _body["default"],
+  Value: _value["default"],
+  Delta: _delta["default"],
+  Secondary: _secondary["default"],
+  Footer: _footer["default"]
+};
+Object.entries(StatCard).forEach(function (_ref) {
+  var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+    name = _ref2[0],
+    part = _ref2[1];
+  part.displayName = "StatCard.".concat(name);
+});
+var _default = exports["default"] = StatCard;