newspack-components 4.8.0 → 4.9.0-alpha.1

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.
  */
@@ -10,20 +13,19 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-// Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill,
+import { DropdownMenu, MenuGroup, MenuItem, Notice, SlotFillProvider, createSlotFill,
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 __experimentalVStack as VStack } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useLayoutEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
-import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+import { Footer, DebugBadge, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
+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';
@@ -60,6 +62,7 @@ var HashRouter = Router.HashRouter,
   Redirect = Router.Redirect,
   Route = Router.Route,
   Switch = Router.Switch,
+  matchPath = Router.matchPath,
   useLocation = Router.useLocation;
 
 /**
@@ -97,7 +100,10 @@ var ResetHeaderData = function ResetHeaderData() {
   var location = useLocation();
   var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
     resetHeaderData = _useDispatch.resetHeaderData;
-  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.
+  useLayoutEffect(function () {
     resetHeaderData();
     window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
@@ -109,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.
@@ -138,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
@@ -153,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.
@@ -203,6 +241,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,
@@ -307,7 +346,7 @@ var Wizard = function Wizard(_ref2, ref) {
   // describes the state of the whole site, not of the section below it, so it reads
   // as page chrome rather than as content.
   var inertGating = (_window$newspack_aux_ = window.newspack_aux_data) === null || _window$newspack_aux_ === void 0 ? void 0 : _window$newspack_aux_.inert_gating;
-  var inertGatingNotice = (inertGating === null || inertGating === void 0 ? void 0 : inertGating.show) && /*#__PURE__*/_jsx(CoreNotice, {
+  var inertGatingNotice = (inertGating === null || inertGating === void 0 ? void 0 : inertGating.show) && /*#__PURE__*/_jsx(Notice, {
     status: "warning",
     isDismissible: false,
     className: "newspack-wizard__inert-gating-notice",
@@ -330,16 +369,16 @@ 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", {
                 className: classnames('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__*/_jsx(SectionHeader, {
                   className: "newspack-wizard__section-header",
@@ -420,9 +459,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }),
         children: [/*#__PURE__*/_jsxs(HashRouter, {
           hashType: "slash",
-          children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
-            debugMode: true
-          }), /*#__PURE__*/_jsx(WizardHeaderRegion, {
+          children: [/*#__PURE__*/_jsx(DebugBadge, {}), /*#__PURE__*/_jsx(WizardHeaderRegion, {
             hideHeader: hideHeader,
             headerText: headerText,
             sections: routedSections,

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

@@ -11,25 +11,26 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
  * WordPress dependencies.
  */
 import apiFetch from '@wordpress/api-fetch';
+import { select, useDispatch } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
  */
 import Wizard from './';
 import { useWizardData } from './store/utils';
+import { WIZARD_STORE_NAMESPACE } from './store';
 import { jsx as _jsx } from "react/jsx-runtime";
 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'
 };
@@ -251,4 +252,302 @@ describe('Wizard', function () {
       }
     }, _callee4);
   })));
+});
+var NarrowingSection = function NarrowingSection() {
+  var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch.setHeaderData;
+  useLayoutEffect(function () {
+    setHeaderData({
+      fullWidth: false
+    });
+  }, [setHeaderData]);
+  return /*#__PURE__*/_jsx("div", {
+    children: "Narrowing section"
+  });
+};
+var RecoveringSection = function RecoveringSection() {
+  var _useDispatch2 = useDispatch(WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch2.setHeaderData;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    failed = _useState2[0],
+    setFailed = _useState2[1];
+  useLayoutEffect(function () {
+    setHeaderData({
+      fullWidth: failed ? false : undefined
+    });
+  }, [setHeaderData, failed]);
+  return /*#__PURE__*/_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__*/_jsx("div", {
+        children: "Other section"
+      });
+    }
+  }];
+};
+describe('Wizard content width', function () {
+  beforeEach(function () {
+    apiFetch.mockReset();
+  });
+  it('renders full-width when the section declares it and nothing overrides it', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _render, container, _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          _render = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx("div", {
+                children: "List content"
+              });
+            })
+          })), container = _render.container;
+          _t5 = expect;
+          _context5.n = 1;
+          return 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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var _render2, container, _t6;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          _render2 = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(NarrowingSection, {});
+            })
+          })), container = _render2.container;
+          _t6 = expect;
+          _context6.n = 1;
+          return 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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+    var _render3, container, retry;
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
+        case 0:
+          _render3 = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(RecoveringSection, {});
+            })
+          })), container = _render3.container;
+          _context7.n = 1;
+          return screen.findByRole('button', {
+            name: 'Retry'
+          });
+        case 1:
+          retry = _context7.v;
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+          fireEvent.click(retry);
+          _context7.n = 2;
+          return 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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+    var _t7;
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
+        case 0:
+          render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(NarrowingSection, {});
+            })
+          }));
+          _t7 = expect;
+          _context8.n = 1;
+          return screen.findByText('Narrowing section');
+        case 1:
+          _t7(_context8.v).toBeInTheDocument();
+          expect(select(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__*/_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/dist/esm/wizard/store/index.js

@@ -19,6 +19,8 @@ import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 import { createAction } from './utils.js';
 export var 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: '',

package/package.json

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

package/src/action-card/action-card.d.ts

@@ -10,8 +10,9 @@ export interface ActionCardProps {
 	badges?: CardBadge[];
 	className?: string;
 	indent?: string;
-	notification?: string | Error | null;
-	notificationLevel?: 'error' | 'warning' | 'info';
+	notification?: React.ReactNode | Error | null;
+	notificationLevel?: 'error' | 'warning' | 'info' | 'success';
+	notificationHTML?: boolean;
 	isMedium?: boolean;
 	disabled?: boolean | string;
 	hasGreyHeader?: boolean;