newspack-components 4.5.0 → 4.6.0

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.appendSectionName = exports.activeBreadcrumbs = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _routeMatch = require("../route-match");
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Select the active section's explicit breadcrumb trail by current route. Falls
+ * back to the first section, then to an empty trail.
+ *
+ * @param {Array}  sections Wizard sections (`{ path, breadcrumbs, exact?, activeTabPaths? }`).
+ * @param {string} pathname Current router pathname.
+ * @return {Array} Breadcrumb items `{ label, url? }`.
+ */
+var activeBreadcrumbs = exports.activeBreadcrumbs = function activeBreadcrumbs() {
+  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 [];
+  }
+  var match = sections.find(function (section) {
+    return (0, _routeMatch.matchesRoute)(section, pathname);
+  }) || sections[0];
+  return match.breadcrumbs || [];
+};
+
+/**
+ * Append a section's render-time current-page breadcrumb(s) to a trail.
+ *
+ * A section can supply a leaf via `headerData.sectionName` — either a single
+ * label (e.g. an integration name, or Add/Edit) or an ordered array of
+ * `{ label, url? }` crumbs when the leaf needs its own linked ancestors. Each
+ * crumb is appended in turn.
+ *
+ * Convention: a route authors its current-page leaf in exactly ONE place —
+ * the static `breadcrumbs` array for a constant label, or `sectionName` for a
+ * render-time label (e.g. Add/Edit) whose static trail then holds ancestors
+ * only. Never both. The trailing-label skip below is a defensive guard against
+ * a route accidentally doing both; it is not a supported pattern to rely on.
+ *
+ * @param {Array}                  breadcrumbItems Base trail `{ label, url? }[]`.
+ * @param {string|Array|undefined} sectionName     A label, an array of crumbs, or falsy.
+ * @return {Array} A new trail with the section crumb(s) appended (deduped).
+ */
+var appendSectionName = exports.appendSectionName = function appendSectionName() {
+  var breadcrumbItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var sectionName = arguments.length > 1 ? arguments[1] : undefined;
+  if (!sectionName) {
+    return breadcrumbItems;
+  }
+  var extraCrumbs = (Array.isArray(sectionName) ? sectionName : [{
+    label: sectionName
+  }]).filter(function (crumb) {
+    return crumb === null || crumb === void 0 ? void 0 : crumb.label;
+  });
+  return extraCrumbs.reduce(function (trail, crumb) {
+    var _trail;
+    if (((_trail = trail[trail.length - 1]) === null || _trail === void 0 ? void 0 : _trail.label) === crumb.label) {
+      return trail;
+    }
+    return [].concat((0, _toConsumableArray2["default"])(trail), [crumb]);
+  }, breadcrumbItems);
+};

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

@@ -0,0 +1,200 @@
+"use strict";
+
+var _breadcrumbsSelect = require("./breadcrumbs-select");
+/**
+ * Internal dependencies.
+ */
+
+var SECTIONS = [{
+  path: '/',
+  breadcrumbs: [{
+    label: 'Audience Management'
+  }, {
+    label: 'Configuration'
+  }]
+}, {
+  path: '/donations',
+  breadcrumbs: [{
+    label: 'Audience Management'
+  }, {
+    label: 'Donations'
+  }]
+}];
+describe('activeBreadcrumbs', function () {
+  it('returns the matching section breadcrumbs by exact path', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(SECTIONS, '/donations')).toEqual([{
+      label: 'Audience Management'
+    }, {
+      label: 'Donations'
+    }]);
+  });
+  it('falls back to the first section when no path matches', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(SECTIONS, '/nope')).toEqual(SECTIONS[0].breadcrumbs);
+  });
+  it('returns [] when sections is empty', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)([], '/x')).toEqual([]);
+  });
+  it('returns [] when sections is null or undefined', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(null, '/x')).toEqual([]);
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(undefined, '/x')).toEqual([]);
+  });
+  it('matches a non-exact section by path prefix', function () {
+    var sections = [{
+      path: '/',
+      breadcrumbs: [{
+        label: 'Root'
+      }]
+    }, {
+      path: '/access',
+      exact: false,
+      breadcrumbs: [{
+        label: 'Root'
+      }, {
+        label: 'Access control'
+      }]
+    }];
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(sections, '/access/institutions')).toEqual([{
+      label: 'Root'
+    }, {
+      label: 'Access control'
+    }]);
+  });
+  it('matches a parameterized route to its own breadcrumbs', function () {
+    var sections = [{
+      path: '/content-gates',
+      breadcrumbs: [{
+        label: 'Access control'
+      }]
+    }, {
+      path: '/institutions/:id',
+      exact: true,
+      breadcrumbs: [{
+        label: 'Access control'
+      }, {
+        label: 'Edit institution'
+      }]
+    }];
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(sections, '/institutions/123')).toEqual([{
+      label: 'Access control'
+    }, {
+      label: 'Edit institution'
+    }]);
+  });
+  it('matches via activeTabPaths wildcard', function () {
+    var sections = [{
+      path: '/',
+      breadcrumbs: [{
+        label: 'Root'
+      }]
+    }, {
+      path: '/segments',
+      activeTabPaths: ['/segments/*'],
+      breadcrumbs: [{
+        label: 'Root'
+      }, {
+        label: 'Segments'
+      }]
+    }];
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(sections, '/segments/123')).toEqual([{
+      label: 'Root'
+    }, {
+      label: 'Segments'
+    }]);
+  });
+  it('prefers an exact path match over the first section', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)(SECTIONS, '/')).toEqual(SECTIONS[0].breadcrumbs);
+  });
+  it('returns [] when the matched section has no breadcrumbs', function () {
+    expect((0, _breadcrumbsSelect.activeBreadcrumbs)([{
+      path: '/'
+    }], '/')).toEqual([]);
+  });
+});
+describe('appendSectionName', function () {
+  var base = [{
+    label: 'Access Control'
+  }];
+  it('returns the base trail unchanged when sectionName is falsy', function () {
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, undefined)).toBe(base);
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, '')).toBe(base);
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, null)).toBe(base);
+  });
+  it('appends a string sectionName as a leaf crumb', function () {
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, 'Content Gifting')).toEqual([{
+      label: 'Access Control'
+    }, {
+      label: 'Content Gifting'
+    }]);
+  });
+  it('appends an array of crumbs in order', function () {
+    var sectionName = [{
+      label: 'Mailchimp',
+      url: '/mailchimp'
+    }, {
+      label: 'Logs'
+    }];
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, sectionName)).toEqual([{
+      label: 'Access Control'
+    }, {
+      label: 'Mailchimp',
+      url: '/mailchimp'
+    }, {
+      label: 'Logs'
+    }]);
+  });
+  it('dedupes a string leaf that repeats the current trailing label', function () {
+    var trail = [{
+      label: 'Access Control'
+    }, {
+      label: 'Metered Countdown'
+    }];
+    expect((0, _breadcrumbsSelect.appendSectionName)(trail, 'Metered Countdown')).toEqual(trail);
+  });
+  it('dedupes an array leaf that repeats the current trailing label', function () {
+    var trail = [{
+      label: 'Access Control'
+    }, {
+      label: 'Metered Countdown'
+    }];
+    expect((0, _breadcrumbsSelect.appendSectionName)(trail, [{
+      label: 'Metered Countdown'
+    }])).toEqual(trail);
+  });
+  it('skips crumbs without a label', function () {
+    expect((0, _breadcrumbsSelect.appendSectionName)(base, [{
+      url: '/no-label'
+    }, {
+      label: 'Edit'
+    }])).toEqual([{
+      label: 'Access Control'
+    }, {
+      label: 'Edit'
+    }]);
+  });
+  it('only dedupes against the immediate predecessor, not earlier crumbs', function () {
+    var trail = [{
+      label: 'Access Control'
+    }, {
+      label: 'Institutions'
+    }];
+    // 'Access Control' repeats an earlier (non-adjacent) crumb, so it is kept.
+    expect((0, _breadcrumbsSelect.appendSectionName)(trail, [{
+      label: 'Access Control'
+    }])).toEqual([{
+      label: 'Access Control'
+    }, {
+      label: 'Institutions'
+    }, {
+      label: 'Access Control'
+    }]);
+  });
+  it('does not mutate the input trail', function () {
+    var trail = [{
+      label: 'Access Control'
+    }];
+    (0, _breadcrumbsSelect.appendSectionName)(trail, 'Content Gifting');
+    expect(trail).toEqual([{
+      label: 'Access Control'
+    }]);
+  });
+});

package/dist/cjs/wizard/components/WizardError.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
+var _components = require("@wordpress/components");
 var _ = require("../..");
 var _store = require("../store");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -13,6 +14,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies.
  */
 
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
 /**
  * Internal dependencies.
  */
@@ -53,10 +56,11 @@ var WizardError = function WizardError() {
         noticeText: message,
         isError: true,
         rawHTML: true
-      }), fallbackURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
-        buttonsCard: true,
-        noBorder: true,
-        className: "justify-end",
+      }), fallbackURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+        justify: "flex-end",
+        spacing: 4,
+        wrap: true,
+        className: "newspack-modal__footer",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
           isPrimary: true,
           href: fallbackURL,

package/dist/cjs/wizard/index.js

@@ -14,6 +14,7 @@ var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _ = require("../");
+var _breadcrumbsSelect = require("./breadcrumbs-select");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _store = _interopRequireWildcard(require("./store"));
 var _WizardSnackbar = _interopRequireDefault(require("./components/WizardSnackbar"));
@@ -66,6 +67,49 @@ var ResetHeaderData = function ResetHeaderData() {
   return null;
 };
 
+/**
+ * Wizard header + content region. Rendered inside the wizard's HashRouter so it
+ * can read the current route and derive the active-tab breadcrumb.
+ */
+var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
+  var hideHeader = _ref.hideHeader,
+    headerText = _ref.headerText,
+    sections = _ref.sections,
+    sectionName = _ref.sectionName,
+    subTitle = _ref.subTitle,
+    actions = _ref.actions,
+    tabbedNavigation = _ref.tabbedNavigation,
+    children = _ref.children;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  if (hideHeader) {
+    // Without the Page shell the tabs still own the content: it renders
+    // inside the active tab's panel.
+    if ((0, _element.isValidElement)(tabbedNavigation)) {
+      return (0, _element.cloneElement)(tabbedNavigation, {
+        content: children
+      });
+    }
+    return children;
+  }
+  var breadcrumbItems = (0, _breadcrumbsSelect.activeBreadcrumbs)(sections, pathname);
+  if (!breadcrumbItems.length && headerText) {
+    breadcrumbItems = [{
+      label: headerText
+    }];
+  }
+  // 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);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+    breadcrumbItems: breadcrumbItems,
+    subTitle: subTitle,
+    actions: actions,
+    tabbedNavigation: tabbedNavigation,
+    children: children
+  });
+};
+
 /**
  * @typedef  {Object}     WizardProps
  * @property {string}     headerText                The header text.
@@ -87,23 +131,23 @@ var ResetHeaderData = function ResetHeaderData() {
  * @param {WizardProps} props
  * @return {JSX.Element} Wizard component
  */
-var Wizard = function Wizard(_ref, ref) {
-  var _ref$sections = _ref.sections,
-    sections = _ref$sections === void 0 ? [] : _ref$sections,
-    headerText = _ref.headerText,
-    apiSlug = _ref.apiSlug,
-    _ref$sharedProps = _ref.sharedProps,
-    sharedProps = _ref$sharedProps === void 0 ? {} : _ref$sharedProps,
-    subHeaderText = _ref.subHeaderText,
-    hasSimpleFooter = _ref.hasSimpleFooter,
-    className = _ref.className,
-    renderAboveSections = _ref.renderAboveSections,
-    _ref$requiredPlugins = _ref.requiredPlugins,
-    requiredPlugins = _ref$requiredPlugins === void 0 ? [] : _ref$requiredPlugins,
-    _ref$isInitialFetchTr = _ref.isInitialFetchTriggered,
-    isInitialFetchTriggered = _ref$isInitialFetchTr === void 0 ? true : _ref$isInitialFetchTr,
-    _ref$fixedHeader = _ref.fixedHeader,
-    fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
+var Wizard = function Wizard(_ref2, ref) {
+  var _ref2$sections = _ref2.sections,
+    sections = _ref2$sections === void 0 ? [] : _ref2$sections,
+    headerText = _ref2.headerText,
+    apiSlug = _ref2.apiSlug,
+    _ref2$sharedProps = _ref2.sharedProps,
+    sharedProps = _ref2$sharedProps === void 0 ? {} : _ref2$sharedProps,
+    subHeaderText = _ref2.subHeaderText,
+    hasSimpleFooter = _ref2.hasSimpleFooter,
+    className = _ref2.className,
+    renderAboveSections = _ref2.renderAboveSections,
+    _ref2$requiredPlugins = _ref2.requiredPlugins,
+    requiredPlugins = _ref2$requiredPlugins === void 0 ? [] : _ref2$requiredPlugins,
+    _ref2$isInitialFetchT = _ref2.isInitialFetchTriggered,
+    isInitialFetchTriggered = _ref2$isInitialFetchT === void 0 ? true : _ref2$isInitialFetchT,
+    _ref2$hideHeader = _ref2.hideHeader,
+    hideHeader = _ref2$hideHeader === void 0 ? false : _ref2$hideHeader;
   var isLoading = (0, _data.useSelect)(function (select) {
     return select(_store.WIZARD_STORE_NAMESPACE).isLoading();
   });
@@ -151,8 +195,8 @@ var Wizard = function Wizard(_ref, ref) {
       render: function render() {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref2) {
-            var complete = _ref2.complete;
+          onStatus: function onStatus(_ref3) {
+            var complete = _ref3.complete;
             return setPluginRequirementsSatisfied(complete);
           }
         });
@@ -163,137 +207,114 @@ var Wizard = function Wizard(_ref, ref) {
   // When plugins are required but not yet satisfied, `displayedSections` is replaced with
   // the PluginInstaller. Use it for routing so the installer actually mounts and runs.
   var routedSections = pluginRequirementsSatisfied ? sections : displayedSections;
-  var urlWithoutHash = window.location.href.split('#')[0];
+  var tabbedNavigation = displayedSections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+    items: displayedSections,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
+  });
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-wizard__main",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
+        children: [routedSections.map(function (section, index) {
+          var _section$exact;
+          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,
+            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
+                }),
+                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
+                  className: "newspack-wizard__section-header",
+                  backNav: backNav || section.backNav,
+                  title: sectionTitle || section.title,
+                  description: sectionDescription || section.description,
+                  badges: badges || section.badges,
+                  menu: sectionMenu || section.menu,
+                  primaryAction: sectionPrimaryAction || section.primaryAction,
+                  secondaryAction: sectionSecondaryAction || section.secondaryAction,
+                  heading: 2,
+                  noMargin: true
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
+              });
+            }
+          }, index);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
+          to: displayedSections[0].path
+        })]
+      })
+    })]
+  });
+  var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [mainActions.map(function (action, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        className: "newspack-wizard__actions__main",
+        href: action.href,
+        icon: resolveIcon(action.icon),
+        variant: action.type,
+        onClick: action.action,
+        disabled: action.disabled || false,
+        isDestructive: action.destructive || false,
+        children: action.label
+      }, index);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+      className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__actions__more--primary-only' : '',
+      icon: _icons.moreVertical,
+      label: (0, _i18n.__)('More', 'newspack-plugin'),
+      popoverProps: {
+        className: 'newspack-wizard__actions__more'
+      },
+      children: function children() {
+        return (
+          // Split actions into groups whenever an action opts in via `separator: true`.
+          // Consecutive MenuGroups render the WordPress-standard divider between them.
+          actions.reduce(function (groups, action) {
+            if (action.separator || groups.length === 0) {
+              groups.push([]);
+            }
+            groups[groups.length - 1].push(action);
+            return groups;
+          }, []).map(function (group, groupIndex) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
+              children: group.map(function (action, index) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                  className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__actions__more__main' : 'newspack-wizard__actions__more__more',
+                  icon: action.icon,
+                  href: action.href,
+                  onClick: action.action,
+                  disabled: action.disabled || false,
+                  isDestructive: action.destructive || false,
+                  children: action.label
+                }, index);
+              })
+            }, groupIndex);
+          })
+        );
+      }
+    })]
+  }) : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading,
-        'newspack-wizard__fixed-header': fixedHeader
+        'newspack-wizard__is-loading-quiet': isQuietLoading
       }),
       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.jsxs)("div", {
-          className: "newspack-wizard__header",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "newspack-wizard__header__inner",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "newspack-wizard__title",
-              children: [newspack_urls.dashboard !== urlWithoutHash ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                isLink: true,
-                href: newspack_urls.dashboard,
-                label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
-                showTooltip: true,
-                icon: _icons.category,
-                iconSize: 36,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                  size: 36
-                })
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                size: 36
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-                  className: "newspack-wizard__header__title",
-                  children: [headerText, sectionName && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    className: "newspack-wizard__header__section",
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "newspack-wizard__header__section__separator",
-                      children: " / "
-                    }), " ", sectionName]
-                  })]
-                }), subHeaderText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: subHeaderText
-                })]
-              })]
-            })
-          }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-wizard__header__actions",
-            children: [mainActions.map(function (action, index) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                className: "newspack-wizard__header__actions__main",
-                href: action.href,
-                icon: resolveIcon(action.icon),
-                variant: action.type,
-                onClick: action.action,
-                disabled: action.disabled || false,
-                isDestructive: action.destructive || false,
-                children: action.label
-              }, index);
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-              className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '',
-              icon: _icons.moreVertical,
-              label: (0, _i18n.__)('More', 'newspack-plugin'),
-              popoverProps: {
-                className: 'newspack-wizard__header__actions__more'
-              },
-              children: function children() {
-                return (
-                  // Split actions into groups whenever an action opts in via `separator: true`.
-                  // Consecutive MenuGroups render the WordPress-standard divider between them.
-                  actions.reduce(function (groups, action) {
-                    if (action.separator || groups.length === 0) {
-                      groups.push([]);
-                    }
-                    groups[groups.length - 1].push(action);
-                    return groups;
-                  }, []).map(function (group, groupIndex) {
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
-                      children: group.map(function (action, index) {
-                        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-                          className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
-                          icon: action.icon,
-                          href: action.href,
-                          onClick: action.action,
-                          disabled: action.disabled || false,
-                          isDestructive: action.destructive || false,
-                          children: action.label
-                        }, index);
-                      })
-                    }, groupIndex);
-                  })
-                );
-              }
-            })]
-          })]
-        }), displayedSections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
-          items: displayedSections,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-wizard__main",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
-            children: [routedSections.map(function (section, index) {
-              var _section$exact;
-              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,
-                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
-                    }),
-                    children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
-                      className: "newspack-wizard__section-header",
-                      backNav: backNav || section.backNav,
-                      title: sectionTitle || section.title,
-                      description: sectionDescription || section.description,
-                      badges: badges || section.badges,
-                      menu: sectionMenu || section.menu,
-                      primaryAction: sectionPrimaryAction || section.primaryAction,
-                      secondaryAction: sectionSecondaryAction || section.secondaryAction,
-                      heading: 1,
-                      noMargin: true
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
-                  });
-                }
-              }, index);
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
-              to: displayedSections[0].path
-            })]
-          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
+          hideHeader: hideHeader,
+          headerText: headerText,
+          sections: routedSections,
+          sectionName: sectionName,
+          subTitle: subHeaderText,
+          actions: headerActions,
+          tabbedNavigation: tabbedNavigation,
+          children: content
         })]
       }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-wizard__snackbar-list",