newspack-components 4.8.1-alpha.1 → 4.9.0

package/dist/esm/integration-icon/style.scss

@@ -21,14 +21,26 @@
 		background: #004cff;
 	}
 
-	&--mailchimp {
-		background: #ffe01b;
+	&--beehiiv {
+		background: #060419;
 	}
 
 	&--constant-contact {
 		background: wp-colors.$gray-100;
 	}
 
+	&--fundraiseup {
+		background: #2bb77b;
+	}
+
+	&--gravity-forms {
+		background: #ff4f00;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
 	&--manual {
 		background: wp-colors.$gray-800;
 		color: wp-colors.$white;
@@ -39,4 +51,8 @@
 			fill: currentcolor;
 		}
 	}
+
+	&--salesforce {
+		background: #0d9dda;
+	}
 }

package/dist/esm/integration-icons/active-campaign.js

@@ -1,16 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var activeCampaign = /*#__PURE__*/_jsxs("svg", {
+import { jsx as _jsx } from "react/jsx-runtime";
+var activeCampaign = /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
   fill: "none",
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M16.6934 10.5811C17.1772 10.9036 17.4355 11.4194 17.4355 11.9678C17.4355 12.516 17.1449 13.0319 16.6934 13.3545L6.56445 20V18.6133C6.56445 18.1939 6.75844 17.7746 7.14551 17.5166L15.5 11.9678L7.14551 6.38672C6.79063 6.16086 6.56445 5.74175 6.56445 5.29004V4L16.6934 10.5811Z",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M17.28 10.4037C17.8244 10.7666 18.115 11.3468 18.115 11.9637C18.115 12.5805 17.788 13.1609 17.28 13.5238L5.88501 21V19.4399C5.88501 18.9681 6.10324 18.4965 6.5387 18.2062L15.9375 11.9637L6.5387 5.68506C6.13946 5.43097 5.88501 4.95947 5.88501 4.45129V3L17.28 10.4037ZM5.88501 8.37122C5.88501 7.89959 6.4296 7.64482 6.79248 7.8988L12.7438 11.9275L11.9451 12.4713C11.4371 12.7977 10.7842 12.7978 10.2762 12.4713L8.96997 11.6375L5.88501 9.56873V8.37122Z",
     fill: "white"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M6.56445 8.77441C6.56445 8.35519 7.04853 8.12873 7.37109 8.35449L12.6611 11.9355L11.9512 12.4189C11.4996 12.7091 10.9193 12.7092 10.4678 12.4189L9.30664 11.6777L6.56445 9.83887V8.77441Z",
-    fill: "white"
-  })]
+  })
 });
 export default activeCampaign;

package/dist/esm/integration-icons/beehiiv.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var beehiiv = /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M18.6602 11.4894H5.35668C5.19293 11.4883 5.03627 11.4225 4.92088 11.3063C4.80549 11.1901 4.74073 11.033 4.74073 10.8692V9.92487C4.7398 9.67122 4.78886 9.41988 4.88509 9.1852C4.98132 8.95052 5.12284 8.73709 5.30157 8.55712C5.4803 8.37714 5.69274 8.23414 5.92675 8.13629C6.16076 8.03843 6.41176 7.98764 6.6654 7.9868H17.3353C17.5889 7.98754 17.8398 8.03822 18.0738 8.13595C18.3078 8.23368 18.5203 8.37654 18.6991 8.55637C18.8779 8.7362 19.0195 8.94949 19.1158 9.18406C19.2122 9.41862 19.2614 9.66987 19.2607 9.92346V10.8685C19.2638 10.9491 19.2506 11.0296 19.2218 11.1049C19.193 11.1803 19.1492 11.249 19.0931 11.307C19.0369 11.365 18.9697 11.411 18.8953 11.4422C18.8209 11.4734 18.7409 11.4899 18.6602 11.4894ZM15.8574 6.96492H8.15947C7.99191 6.96343 7.8317 6.89593 7.71361 6.77704C7.59552 6.65816 7.52908 6.4975 7.52872 6.32994C7.52872 4.74919 8.80643 3.46302 10.3773 3.46302H13.641C15.2119 3.46302 16.4896 4.74919 16.4896 6.32994C16.4907 6.41334 16.4752 6.49613 16.4439 6.57345C16.4126 6.65077 16.3662 6.72106 16.3074 6.7802C16.2486 6.83934 16.1785 6.88615 16.1014 6.91787C16.0243 6.94959 15.9416 6.96558 15.8582 6.96492H15.8574ZM19.2755 12.5113H4.74073C3.7858 12.5113 3 13.3013 3 14.2619C3 15.2225 3.7858 16.0132 4.74073 16.0132H9.89879C10.0834 15.0216 10.9453 14.2619 11.9919 14.2619C12.4923 14.2631 12.9767 14.4386 13.3618 14.7582C13.7468 15.0778 14.0085 15.5216 14.1019 16.0132H19.2607C20.2149 16.0132 21 15.2225 21 14.2619C21 13.3013 20.2304 12.5113 19.2755 12.5113ZM18.6454 17.0358H14.1336V20.537H17.5214C18.4756 20.537 19.2607 19.7477 19.2607 18.7864V17.6708C19.2636 17.5882 19.2499 17.506 19.2202 17.4289C19.1906 17.3518 19.1457 17.2816 19.0883 17.2223C19.0308 17.163 18.962 17.1159 18.8859 17.0838C18.8098 17.0518 18.728 17.0354 18.6454 17.0358ZM5.35668 17.0358C5.189 17.0371 5.02861 17.1045 4.91037 17.2234C4.79213 17.3423 4.72559 17.5031 4.72523 17.6708V18.7864C4.72523 19.747 5.51102 20.537 6.46596 20.537H9.85298V17.0358H5.35668Z",
+    fill: "white"
+  })
+});
+export default beehiiv;

package/dist/esm/integration-icons/gravity-forms.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var gravityForms = /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M8.74072 8.98989H24V4.73383H8.77618C6.75022 4.67092 4.79489 5.46964 3.41 6.92583C0.0886559 10.4377 0 19.2696 0 19.2696H23.8818V11.2749H19.5912V15.0019H4.58018C4.67474 13.6123 5.31889 11.1296 6.53633 9.84462C7.10785 9.25496 7.91399 8.9424 8.74072 8.98989Z",
+    fill: "white"
+  })
+});
+export default gravityForms;

package/dist/esm/integration-icons/index.js

@@ -7,21 +7,32 @@ import { atSymbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import activeCampaign from './active-campaign';
+import beehiiv from './beehiiv';
 import constantContact from './constant-contact';
+import fundraiseUp from './fundraise-up';
+import gravityForms from './gravity-forms';
 import mailchimp from './mailchimp';
+import salesforce from './salesforce';
 export { default as activeCampaign } from './active-campaign';
+export { default as beehiiv } from './beehiiv';
 export { default as constantContact } from './constant-contact';
 export { default as fundraiseUp } from './fundraise-up';
+export { default as gravityForms } from './gravity-forms';
 export { default as mailchimp } from './mailchimp';
 export { default as salesforce } from './salesforce';
 export { default as wisepops } from './wisepops';
 
-// ESP provider brand marks keyed by the slug the backend reports
-// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
-export var espProviderIcons = {
+// Brand marks keyed by the ESP slug the backend reports
+// (`Newspack_Newsletters::service_provider()`), by integration ID, or by the
+// brand slug an integration maps to. Rendered via IntegrationIcon.
+export var providerIcons = {
   active_campaign: activeCampaign,
   mailchimp: mailchimp,
   constant_contact: constantContact,
-  manual: atSymbol
+  manual: atSymbol,
+  salesforce: salesforce,
+  beehiiv: beehiiv,
+  fundraiseup: fundraiseUp,
+  gravity_forms: gravityForms
 };
 export var espProviderOrder = ['active_campaign', 'mailchimp', 'constant_contact', 'manual'];

package/dist/esm/integration-icons/salesforce.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 var salesforce = /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
-    d: "M13.3173 7.24314C14.3498 6.16866 15.7848 5.50017 17.3737 5.50017C19.4877 5.50017 21.3287 6.67965 22.3122 8.42612C23.1661 8.04463 24.1111 7.83113 25.1016 7.83113C28.913 7.83113 32 10.9461 32 14.7925C32 18.639 28.9095 21.7539 25.1016 21.7539C24.6361 21.7539 24.1811 21.7084 23.7436 21.6174C22.8791 23.1574 21.2307 24.2004 19.3407 24.2004C18.5497 24.2004 17.8007 24.0184 17.1357 23.6929C16.2607 25.7543 14.2168 27.1998 11.8403 27.1998C9.46385 27.1998 7.25189 25.6319 6.4399 23.4339C6.0864 23.5074 5.71891 23.5494 5.34092 23.5494C2.39046 23.5494 0 21.1344 0 18.1525C0 16.154 1.07448 14.411 2.67046 13.4765C2.34146 12.7206 2.15947 11.8841 2.15947 11.0091C2.15947 7.57913 4.94192 4.80018 8.37537 4.80018C10.3913 4.80018 12.1833 5.75916 13.3173 7.24314Z",
-    fill: "var(--integration-icon-color, #0D9DDA)"
+    d: "M10.0838 5.745C10.8213 4.9775 11.8463 4.5 12.9813 4.5C14.4913 4.5 15.8063 5.3425 16.5088 6.59C17.1188 6.3175 17.7938 6.165 18.5013 6.165C21.2238 6.165 23.4288 8.39 23.4288 11.1375C23.4288 13.885 21.2213 16.11 18.5013 16.11C18.1688 16.11 17.8438 16.0775 17.5313 16.0125C16.9138 17.1125 15.7363 17.8575 14.3863 17.8575C13.8213 17.8575 13.2863 17.7275 12.8113 17.495C12.1863 18.9675 10.7263 20 9.02876 20C7.33126 20 5.75126 18.88 5.17126 17.31C4.91876 17.3625 4.65626 17.3925 4.38626 17.3925C2.27876 17.3925 0.571259 15.6675 0.571259 13.5375C0.571259 12.11 1.33876 10.865 2.47876 10.1975C2.24376 9.6575 2.11376 9.06 2.11376 8.435C2.11376 5.985 4.10126 4 6.55376 4C7.99376 4 9.27376 4.685 10.0838 5.745Z",
+    fill: "white"
   })
 });
 export default salesforce;

package/dist/esm/wizard/breadcrumbs-select.js

@@ -13,15 +13,28 @@ import { matchesRoute } from '../route-match';
  * @return {Array} Breadcrumb items `{ label, url? }`.
  */
 export var activeBreadcrumbs = function activeBreadcrumbs() {
+  var _activeSection;
+  var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var pathname = arguments.length > 1 ? arguments[1] : undefined;
+  return ((_activeSection = activeSection(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.breadcrumbs) || [];
+};
+
+/**
+ * Select the section matching the current route, falling back to the first.
+ *
+ * @param {Array}  sections Wizard sections.
+ * @param {string} pathname Current router pathname.
+ * @return {Object|undefined} The active section, if any.
+ */
+export var activeSection = function activeSection() {
   var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var pathname = arguments.length > 1 ? arguments[1] : undefined;
   if (!(sections !== null && sections !== void 0 && sections.length)) {
-    return [];
+    return undefined;
   }
-  var match = sections.find(function (section) {
+  return sections.find(function (section) {
     return matchesRoute(section, pathname);
   }) || sections[0];
-  return match.breadcrumbs || [];
 };
 
 /**

package/dist/esm/wizard/breadcrumbs-select.test.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies.
  */
-import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+import { activeBreadcrumbs, activeSection, appendSectionName } from './breadcrumbs-select';
 var SECTIONS = [{
   path: '/',
   breadcrumbs: [{
@@ -194,4 +194,21 @@ describe('appendSectionName', function () {
       label: 'Access Control'
     }]);
   });
+});
+describe('activeSection', function () {
+  var sections = [{
+    path: '/settings',
+    exact: true,
+    subHeaderText: 'Intro'
+  }, {
+    path: '/settings/:integrationId'
+  }];
+  it('returns the section matching the route', function () {
+    expect(activeSection(sections, '/settings/esp')).toBe(sections[1]);
+    expect(activeSection(sections, '/settings').subHeaderText).toBe('Intro');
+  });
+  it('falls back to the first section, or nothing without sections', function () {
+    expect(activeSection(sections, '/unknown')).toBe(sections[0]);
+    expect(activeSection([], '/settings')).toBeUndefined();
+  });
 });

package/dist/esm/wizard/index.js

@@ -2,6 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
  * External dependencies.
  */
@@ -22,7 +25,7 @@ import { category, chevronLeft, moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Footer, DebugBadge, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
-import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+import { activeBreadcrumbs, activeSection, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import WizardSnackbar from './components/WizardSnackbar';
@@ -59,6 +62,7 @@ var HashRouter = Router.HashRouter,
   Redirect = Router.Redirect,
   Route = Router.Route,
   Switch = Router.Switch,
+  matchPath = Router.matchPath,
   useLocation = Router.useLocation;
 
 /**
@@ -111,16 +115,46 @@ var ResetHeaderData = function ResetHeaderData() {
  * can read the current route and derive the active-tab breadcrumb.
  */
 var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
+  var _activeSection;
   var hideHeader = _ref.hideHeader,
     headerText = _ref.headerText,
     sections = _ref.sections,
     sectionName = _ref.sectionName,
     subTitle = _ref.subTitle,
     actions = _ref.actions,
-    tabbedNavigation = _ref.tabbedNavigation,
+    wizardTabbedNavigation = _ref.tabbedNavigation,
     children = _ref.children;
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
+
+  // A section can carry its own tabs, built from its route params, in place of
+  // the wizard's. The first match wins, as it does in the wizard's `<Switch>`.
+  var tabbedNavigation = wizardTabbedNavigation;
+  var _iterator = _createForOfIteratorHelper(sections),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _section$exact;
+      var section = _step.value;
+      var match = matchPath(pathname, {
+        path: section.path,
+        exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false
+      });
+      if (match) {
+        if (typeof section.tabbedNavigation === 'function') {
+          tabbedNavigation = /*#__PURE__*/_jsx(TabbedNavigation, {
+            items: section.tabbedNavigation(match.params),
+            children: /*#__PURE__*/_jsx(WizardError, {})
+          });
+        }
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
   if (hideHeader) {
     // Without the Page shell the tabs still own the content: it renders
     // inside the active tab's panel.
@@ -140,9 +174,10 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
   // Append any render-time leaf crumb(s) the section supplied via
   // headerData.sectionName (deduped against the current trailing label).
   breadcrumbItems = appendSectionName(breadcrumbItems, sectionName);
+  var sectionSubTitle = (_activeSection = activeSection(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.subHeaderText;
   return /*#__PURE__*/_jsx(Page, {
     breadcrumbItems: breadcrumbItems,
-    subTitle: subTitle,
+    subTitle: sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle,
     actions: actions,
     tabbedNavigation: tabbedNavigation,
     children: children
@@ -155,7 +190,8 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
  * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
@@ -333,11 +369,11 @@ var Wizard = function Wizard(_ref2, ref) {
         bubblesVirtually: true
       }), /*#__PURE__*/_jsxs(Switch, {
         children: [routedSections.map(function (section, index) {
-          var _section$exact;
+          var _section$exact2;
           var SectionComponent = section.render;
           var sectionProps = section.props || {};
           return /*#__PURE__*/_jsx(Route, {
-            exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
+            exact: (_section$exact2 = section.exact) !== null && _section$exact2 !== void 0 ? _section$exact2 : false,
             path: section.path,
             render: function render(routerProps) {
               return /*#__PURE__*/_jsxs("div", {

package/dist/esm/wizard/index.test.js

@@ -404,4 +404,150 @@ describe('Wizard content width', function () {
       }
     }, _callee8);
   })));
+});
+describe('Wizard section tabs', function () {
+  var sections = [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    render: function render() {
+      return /*#__PURE__*/_jsx("div", {
+        children: "List content"
+      });
+    }
+  }, {
+    path: '/items/:itemId/logs/:tab?',
+    isHidden: true,
+    render: function render() {
+      return /*#__PURE__*/_jsx("div", {
+        children: "Logs content"
+      });
+    },
+    tabbedNavigation: function tabbedNavigation(_ref10) {
+      var itemId = _ref10.itemId;
+      return [{
+        label: 'First Tab',
+        path: "/items/".concat(itemId, "/logs"),
+        exact: true
+      }, {
+        label: 'Second Tab',
+        path: "/items/".concat(itemId, "/logs/second"),
+        exact: true
+      }];
+    }
+  }];
+  beforeEach(function () {
+    apiFetch.mockReset();
+  });
+  afterEach(function () {
+    window.location.hash = '';
+  });
+  it('shows the tabs a section builds from its route params while it matches', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+    var _t8;
+    return _regenerator().w(function (_context9) {
+      while (1) switch (_context9.n) {
+        case 0:
+          window.location.hash = '#/items/42/logs/second';
+          render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t8 = expect;
+          _context9.n = 1;
+          return screen.findByText('Logs content');
+        case 1:
+          _t8(_context9.v).toBeInTheDocument();
+          expect(screen.getByRole('tab', {
+            name: 'First Tab'
+          })).toHaveAttribute('href', '#/items/42/logs');
+          expect(screen.getByRole('tab', {
+            name: 'Second Tab'
+          })).toHaveAttribute('aria-selected', 'true');
+        case 2:
+          return _context9.a(2);
+      }
+    }, _callee9);
+  })));
+  it('leaves the tabs out on a route the section does not match', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+    var _t9;
+    return _regenerator().w(function (_context0) {
+      while (1) switch (_context0.n) {
+        case 0:
+          window.location.hash = '#/';
+          render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t9 = expect;
+          _context0.n = 1;
+          return screen.findByText('List content');
+        case 1:
+          _t9(_context0.v).toBeInTheDocument();
+          expect(screen.queryByRole('tab')).toBeNull();
+        case 2:
+          return _context0.a(2);
+      }
+    }, _callee0);
+  })));
+});
+describe('Wizard section subtitle', function () {
+  beforeEach(function () {
+    apiFetch.mockReset();
+    apiFetch.mockResolvedValue({});
+  });
+  it("shows the active section's subHeaderText in the header, falling back to the wizard's", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+    var _render4, container, subtitle, _t0, _t1;
+    return _regenerator().w(function (_context1) {
+      while (1) switch (_context1.n) {
+        case 0:
+          window.location.hash = '#/list';
+          _render4 = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            subHeaderText: "Wizard intro",
+            sections: [{
+              label: 'List',
+              path: '/list',
+              exact: true,
+              subHeaderText: 'List intro',
+              render: function render() {
+                return /*#__PURE__*/_jsx("div", {
+                  children: "List view"
+                });
+              }
+            }, {
+              label: 'Item',
+              path: '/list/:id',
+              isHidden: true,
+              render: function render() {
+                return /*#__PURE__*/_jsx("div", {
+                  children: "Item view"
+                });
+              }
+            }]
+          })), container = _render4.container;
+          subtitle = function subtitle() {
+            var _container$querySelec;
+            return (_container$querySelec = container.querySelector('.newspack-page__header-subtitle')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.textContent;
+          };
+          _t0 = expect;
+          _context1.n = 1;
+          return screen.findByText('List view');
+        case 1:
+          _t0(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('List intro');
+          act(function () {
+            window.location.hash = '#/list/esp';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t1 = expect;
+          _context1.n = 2;
+          return screen.findByText('Item view');
+        case 2:
+          _t1(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('Wizard intro');
+        case 3:
+          return _context1.a(2);
+      }
+    }, _callee1);
+  })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.8.1-alpha.1",
+	"version": "4.9.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/card-feature/README.md

@@ -11,13 +11,15 @@ A card component for presenting a named feature or setting with a predictable, s
 
 Cards sit side by side, so a bare "Enable" names no feature out of context. The card appends `title` to the primary button's accessible name ("Enable Metered Countdown") and to the "More" menu ("More options for Metered Countdown"). The visible label leads, so voice control still matches on the word the user can see. Nothing to pass — this is automatic.
 
+When enabling leaves nothing to configure, the primary button goes away while it still has focus; the card moves that focus to the "More" menu rather than letting it fall to the page.
+
 ## States
 
 | State | Condition | Button | Dropdown | Badge |
 |---|---|---|---|---|
 | **Unmet requirements** | `requirements` is set | "Enable" — blocked but still focusable, and described by the badge (clickable if `requirementsActionable`) | Shown if `enabled` and `requirementsActionable` (and `moreControls` provided); otherwise hidden | High-intent badge with `requirements` text |
 | **Disabled** | `!enabled`, no requirements | "Enable" | Hidden | None |
-| **Enabled** | `enabled`, no requirements | "Configure" | Shown if `moreControls` provided | Stable-intent badge ("Enabled") |
+| **Enabled** | `enabled`, no requirements | "Configure", or none without `onConfigure` | Shown if `moreControls` provided | Stable-intent badge ("Enabled") |
 
 When `requirements` is set the title drops to the muted text colour. The description already uses that colour in every state, so the unmet-requirements state is signalled by the title colour plus the high-intent badge.
 
@@ -75,9 +77,9 @@ import { __ } from '@wordpress/i18n';
 
 ## With a custom icon
 
-`icon` takes either a descriptor object or a ready React element. A descriptor gets the standard treatment: pass `node` for the icon element, `fill` for the SVG colour, `backgroundColor` for a container background, and `radius` for the corner treatment. A ready element renders exactly as given, with no container, background or radius, which is the escape hatch for an icon that already carries its own chrome.
+`icon` takes either a descriptor object or a ready React element. A descriptor gets the standard treatment: pass `node` for the icon element, `fill` for the SVG colour, and `backgroundColor` for a container background. A ready element renders exactly as given, with no container or background, which is the escape hatch for an icon that already carries its own chrome.
 
-A descriptor's container is always **40 × 40 px** with the SVG at **24 × 24 px**. Setting `backgroundColor` without a `radius` gives 2px corners; pass `radius: 'full'` for a circle.
+A descriptor's container is always **40 × 40 px** with the SVG at **24 × 24 px**. Setting `backgroundColor` makes the container a circle.
 
 `fill` sets the container's `color`, which the SVG picks up through `fill: currentcolor`. That only recolours single-colour icons that inherit their fill, such as those from `@wordpress/icons`. A vendor's own mark carries `fill` on its paths and keeps its colours, so pair it with `backgroundColor` rather than trying to tint it.
 
@@ -101,9 +103,9 @@ import colors from 'newspack-colors';
 
 // A vendor mark on its own brand background, keeping the mark's colours
 <CardFeature
-	title={ __( 'Mailchimp', 'newspack-plugin' ) }
+	title="Mailchimp"
 	description={ __( 'Sync reader activity with your Mailchimp audience.', 'newspack-plugin' ) }
-	icon={ { node: <MailchimpMark />, backgroundColor: '#ffe01b', radius: 'full' } }
+	icon={ { node: <MailchimpMark />, backgroundColor: '#ffe01b' } }
 	enabled={ isEnabled }
 	onEnable={ handleEnable }
 	onConfigure={ handleConfigure }
@@ -112,7 +114,7 @@ import colors from 'newspack-colors';
 
 // A ready element, rendered as-is
 <CardFeature
-	title={ __( 'Mailchimp', 'newspack-plugin' ) }
+	title="Mailchimp"
 	description={ __( 'Sync reader activity with your Mailchimp audience.', 'newspack-plugin' ) }
 	icon={ <IntegrationIcon provider="mailchimp" /> }
 	enabled={ isEnabled }
@@ -203,7 +205,7 @@ The card is built on `Card.Root`, `Card.Header` and `Card.Content` from `@wordpr
 | `enableLabel` | `string` | `"Enable"` | Label for the primary button in its "Enable" states: not enabled, or enabled with an unmet requirement |
 | `configureLabel` | `string` | `"Configure"` | Label for the primary button in its "Configure" state: enabled, with no unmet requirement |
 | `onEnable` | `() => void` | — | Called when the primary button is clicked while it reads "Enable". That covers the not-enabled case and the enabled-with-unmet-requirements case, where the feature is on but the requirement is what the button acts on |
-| `onConfigure` | `() => void` | — | Called when the primary button is clicked while it reads "Configure", which is the enabled state with no unmet requirements |
+| `onConfigure` | `() => void` | — | Called when the primary button is clicked while it reads "Configure", which is the enabled state with no unmet requirements. Omit it for a feature with nothing to configure, and that state shows no primary button |
 | `moreControls` | `MoreControl[]` | — | Items for the "More" dropdown. Shown when `enabled` and either there are no `requirements` or `requirementsActionable` is set |
 | `badge` | `{ label?: string; intent?: BadgeIntent }` | `{ label: "Enabled", intent: "stable" }` | Badge shown when enabled. Ignored while `requirements` is set, which takes the badge |
 | `busy` | `boolean` | `false` | Shows the primary button as busy and blocks it while an action is in flight |
@@ -215,10 +217,7 @@ The card is built on `Card.Root`, `Card.Header` and `Card.Content` from `@wordpr
 type CardFeatureIcon = {
 	node: React.ReactNode;       // The icon element to render
 	fill?: string;               // SVG fill colour (applied via currentColor)
-	backgroundColor?: string;    // Background colour of the 40×40 container
-	radius?: 'small' | 'full';   // 'small' = 2px ($radius-small), 'full' = 50% ($radius-round)
-	                             // Defaults to 'small' whenever backgroundColor is set,
-	                             // and has nothing to round without one.
+	backgroundColor?: string;    // Background colour of the 40×40 container, always a circle
 };
 ```