newspack-components 4.8.0 → 4.9.0-alpha.1

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

@@ -207,7 +207,7 @@ var PluginToggle = /*#__PURE__*/function (_Component) {
             return _this2.managePlugin(slug, value);
           },
           notification: error,
-          notificationHTML: error,
+          notificationHTML: true,
           notificationLevel: "error"
         }, index);
       });

package/dist/cjs/with-wizard-screen/index.js

@@ -115,9 +115,7 @@ function withWizardScreen(WrappedComponent) {
         }];
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          debugMode: true
-        }), hideHeader ?
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DebugBadge, {}), hideHeader ?
         /*#__PURE__*/
         // Without the Page shell the tabs still own the content: it
         // renders inside the active tab's panel.

package/dist/cjs/with-wizard-screen/index.test.js

@@ -13,9 +13,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies.
  */
 
-global.newspack_aux_data = {
-  is_debug_mode: false
-};
 describe('withWizardScreen', function () {
   it('falls back to a single headerText breadcrumb when no breadcrumbItems are provided', function () {
     var WrappedComponent = function WrappedComponent() {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.appendSectionName = exports.activeBreadcrumbs = void 0;
+exports.appendSectionName = exports.activeSection = exports.activeBreadcrumbs = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _routeMatch = require("../route-match");
 /**
@@ -20,15 +20,28 @@ var _routeMatch = require("../route-match");
  * @return {Array} Breadcrumb items `{ label, url? }`.
  */
 var activeBreadcrumbs = exports.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.
+ */
+var activeSection = exports.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 (0, _routeMatch.matchesRoute)(section, pathname);
   }) || sections[0];
-  return match.breadcrumbs || [];
 };
 
 /**

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

@@ -197,4 +197,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((0, _breadcrumbsSelect.activeSection)(sections, '/settings/esp')).toBe(sections[1]);
+    expect((0, _breadcrumbsSelect.activeSection)(sections, '/settings').subHeaderText).toBe('Intro');
+  });
+  it('falls back to the first section, or nothing without sections', function () {
+    expect((0, _breadcrumbsSelect.activeSection)(sections, '/unknown')).toBe(sections[0]);
+    expect((0, _breadcrumbsSelect.activeSection)([], '/settings')).toBeUndefined();
+  });
 });

package/dist/cjs/wizard/index.js

@@ -22,12 +22,14 @@ var _WizardError = _interopRequireDefault(require("./components/WizardError"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } /**
+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; }
+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.
  */ /**
  * WordPress dependencies.
- */ // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-/**
+ */ /**
  * Internal dependencies
  */
 (0, _store["default"])();
@@ -59,6 +61,7 @@ var HashRouter = _router["default"].HashRouter,
   Redirect = _router["default"].Redirect,
   Route = _router["default"].Route,
   Switch = _router["default"].Switch,
+  matchPath = _router["default"].matchPath,
   useLocation = _router["default"].useLocation;
 
 /**
@@ -96,7 +99,10 @@ var ResetHeaderData = function ResetHeaderData() {
   var location = useLocation();
   var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
     resetHeaderData = _useDispatch.resetHeaderData;
-  (0, _element.useEffect)(function () {
+
+  // Must stay before paint: a passive effect here would run after a section that
+  // publishes from a layout effect, wiping the header it just set.
+  (0, _element.useLayoutEffect)(function () {
     resetHeaderData();
     window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
@@ -108,16 +114,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__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+            items: section.tabbedNavigation(match.params),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
+          });
+        }
+        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.
@@ -137,9 +173,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 = (0, _breadcrumbsSelect.appendSectionName)(breadcrumbItems, sectionName);
+  var sectionSubTitle = (_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.subHeaderText;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
     breadcrumbItems: breadcrumbItems,
-    subTitle: subTitle,
+    subTitle: sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle,
     actions: actions,
     tabbedNavigation: tabbedNavigation,
     children: children
@@ -152,7 +189,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.
@@ -202,6 +240,7 @@ var Wizard = function Wizard(_ref2, ref) {
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
+    headerFullWidth = headerData.fullWidth,
     sectionDescription = headerData.sectionDescription,
     sectionMenu = headerData.sectionMenu,
     sectionName = headerData.sectionName,
@@ -329,16 +368,16 @@ var Wizard = function Wizard(_ref2, ref) {
         bubblesVirtually: true
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
         children: [routedSections.map(function (section, index) {
-          var _section$exact;
+          var _section$exact2;
           var SectionComponent = section.render;
           var sectionProps = section.props || {};
           return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames["default"])('newspack-wizard__content', className, {
-                  'newspack-wizard__content--full-width': section.fullWidth
+                  'newspack-wizard__content--full-width': headerFullWidth !== null && headerFullWidth !== void 0 ? headerFullWidth : section.fullWidth
                 }),
                 children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
                   className: "newspack-wizard__section-header",
@@ -419,9 +458,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
           hashType: "slash",
-          children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-            debugMode: true
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DebugBadge, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
             hideHeader: hideHeader,
             headerText: headerText,
             sections: routedSections,

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

@@ -5,8 +5,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@testing-library/react");
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
 var _ = _interopRequireDefault(require("./"));
 var _utils = require("./store/utils");
+var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
@@ -20,14 +23,12 @@ jest.mock('@wordpress/api-fetch', function () {
   return jest.fn();
 });
 
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = {
-  is_debug_mode: false
-};
+// Localized onto every real wizard screen; the footer's ExternalLink needs a
+// string href.
 window.newspack_urls = {
   support: 'https://help.newspack.com/'
 };
+window.scrollTo = jest.fn();
 var SETTINGS = {
   minimumDonation: '5'
 };
@@ -249,4 +250,302 @@ describe('Wizard', function () {
       }
     }, _callee4);
   })));
+});
+var NarrowingSection = function NarrowingSection() {
+  var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch.setHeaderData;
+  (0, _element.useLayoutEffect)(function () {
+    setHeaderData({
+      fullWidth: false
+    });
+  }, [setHeaderData]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "Narrowing section"
+  });
+};
+var RecoveringSection = function RecoveringSection() {
+  var _useDispatch2 = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch2.setHeaderData;
+  var _useState = (0, _element.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    failed = _useState2[0],
+    setFailed = _useState2[1];
+  (0, _element.useLayoutEffect)(function () {
+    setHeaderData({
+      fullWidth: failed ? false : undefined
+    });
+  }, [setHeaderData, failed]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    onClick: function onClick() {
+      return setFailed(false);
+    },
+    children: "Retry"
+  });
+};
+
+// Two sections, because that is what mounts ResetHeaderData: a single-section
+// wizard never exercises the reset these overrides have to survive.
+var widthSections = function widthSections(renderSection) {
+  return [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    fullWidth: true,
+    render: renderSection
+  }, {
+    label: 'Other',
+    path: '/other',
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Other section"
+      });
+    }
+  }];
+};
+describe('Wizard content width', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+  });
+  it('renders full-width when the section declares it and nothing overrides it', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _render, container, _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: "List content"
+              });
+            })
+          })), container = _render.container;
+          _t5 = expect;
+          _context5.n = 1;
+          return _react.screen.findByText('List content');
+        case 1:
+          _t5(_context5.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  })));
+  it('falls back to the standard width when a section overrides fullWidth before paint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var _render2, container, _t6;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(NarrowingSection, {});
+            })
+          })), container = _render2.container;
+          _t6 = expect;
+          _context6.n = 1;
+          return _react.screen.findByText('Narrowing section');
+        case 1:
+          _t6(_context6.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  })));
+  it('restores the declared width when the section clears its override', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee7() {
+    var _render3, container, retry;
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
+        case 0:
+          _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(RecoveringSection, {});
+            })
+          })), container = _render3.container;
+          _context7.n = 1;
+          return _react.screen.findByRole('button', {
+            name: 'Retry'
+          });
+        case 1:
+          retry = _context7.v;
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+          _react.fireEvent.click(retry);
+          _context7.n = 2;
+          return (0, _react.waitFor)(function () {
+            return expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+          });
+        case 2:
+          return _context7.a(2);
+      }
+    }, _callee7);
+  })));
+  it('keeps a section header published from a layout effect through the mount reset', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee8() {
+    var _t7;
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(NarrowingSection, {});
+            })
+          }));
+          _t7 = expect;
+          _context8.n = 1;
+          return _react.screen.findByText('Narrowing section');
+        case 1:
+          _t7(_context8.v).toBeInTheDocument();
+          expect((0, _data.select)(_store.WIZARD_STORE_NAMESPACE).getHeaderData().fullWidth).toBe(false);
+        case 2:
+          return _context8.a(2);
+      }
+    }, _callee8);
+  })));
+});
+describe('Wizard section tabs', function () {
+  var sections = [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "List content"
+      });
+    }
+  }, {
+    path: '/items/:itemId/logs/:tab?',
+    isHidden: true,
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.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["default"].mockReset();
+  });
+  afterEach(function () {
+    window.location.hash = '';
+  });
+  it('shows the tabs a section builds from its route params while it matches', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t8 = expect;
+          _context9.n = 1;
+          return _react.screen.findByText('Logs content');
+        case 1:
+          _t8(_context9.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'First Tab'
+          })).toHaveAttribute('href', '#/items/42/logs');
+          expect(_react.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__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee0() {
+    var _t9;
+    return _regenerator().w(function (_context0) {
+      while (1) switch (_context0.n) {
+        case 0:
+          window.location.hash = '#/';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t9 = expect;
+          _context0.n = 1;
+          return _react.screen.findByText('List content');
+        case 1:
+          _t9(_context0.v).toBeInTheDocument();
+          expect(_react.screen.queryByRole('tab')).toBeNull();
+        case 2:
+          return _context0.a(2);
+      }
+    }, _callee0);
+  })));
+});
+describe('Wizard section subtitle', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+    _apiFetch["default"].mockResolvedValue({});
+  });
+  it("shows the active section's subHeaderText in the header, falling back to the wizard's", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            subHeaderText: "Wizard intro",
+            sections: [{
+              label: 'List',
+              path: '/list',
+              exact: true,
+              subHeaderText: 'List intro',
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "List view"
+                });
+              }
+            }, {
+              label: 'Item',
+              path: '/list/:id',
+              isHidden: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.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 _react.screen.findByText('List view');
+        case 1:
+          _t0(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('List intro');
+          (0, _react.act)(function () {
+            window.location.hash = '#/list/esp';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t1 = expect;
+          _context1.n = 2;
+          return _react.screen.findByText('Item view');
+        case 2:
+          _t1(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('Wizard intro');
+        case 3:
+          return _context1.a(2);
+      }
+    }, _callee1);
+  })));
 });

package/dist/cjs/wizard/store/index.js

@@ -23,6 +23,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var WIZARD_STORE_NAMESPACE = exports.WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 var DEFAULT_STATE = {
+  // `fullWidth` is deliberately absent: a default here would narrow every
+  // full-width section on reset, since Wizard only falls back when it is unset.
   headerData: {
     actions: [],
     backNav: '',