newspack-components 4.5.0 → 4.6.0

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

@@ -2,17 +2,19 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 /**
- * WordPress dependencies.
+ * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { category } from '@wordpress/icons';
+import { cloneElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
+import { Button, Handoff, Notice, HandoffMessage, TabbedNavigation, Page } from '../';
+import { activeBreadcrumbs } from '../wizard/breadcrumbs-select';
 import { buttonProps } from '../button-props';
+import Router from '../proxied-imports/router';
 import './style.scss';
+var useLocation = Router.useLocation;
 
 /**
  * External dependencies
@@ -20,12 +22,31 @@ import './style.scss';
 import classnames from 'classnames';
 
 /**
- * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ * Derives the active-tab breadcrumb trail from the current route. Only rendered
+ * for tabbed wizards, which always mount inside a Router, so calling useLocation
+ * here keeps router-free consumers (e.g. standalone multibranded) from crashing.
+ *
+ * @param {Object}   props          Component props.
+ * @param {Array}    props.sections Tabbed navigation sections.
+ * @param {Function} props.render   Renders the page given the breadcrumb trail.
+ * @return {JSX.Element} The rendered page.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var RouteBreadcrumbs = function RouteBreadcrumbs(_ref) {
+  var sections = _ref.sections,
+    render = _ref.render;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  return render(activeBreadcrumbs(sections, pathname));
+};
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
 export default function withWizardScreen(WrappedComponent) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    hidePrimaryButton = _ref.hidePrimaryButton;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    hidePrimaryButton = _ref2.hidePrimaryButton,
+    hideHeader = _ref2.hideHeader;
   var WrappedWithWizardScreen = function WrappedWithWizardScreen(props) {
     var className = props.className,
       buttonText = props.buttonText,
@@ -34,6 +55,8 @@ export default function withWizardScreen(WrappedComponent) {
       headerText = props.headerText,
       subHeaderText = props.subHeaderText,
       tabbedNavigation = props.tabbedNavigation,
+      breadcrumbItems = props.breadcrumbItems,
+      headerActions = props.headerActions,
       secondaryButtonText = props.secondaryButtonText,
       secondaryButtonAction = props.secondaryButtonAction,
       renderAboveContent = props.renderAboveContent,
@@ -59,40 +82,14 @@ export default function withWizardScreen(WrappedComponent) {
         children: buttonText
       }, retrievedButtonProps), overridingProps));
     };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
-        debugMode: true
-      }), /*#__PURE__*/_jsx("div", {
-        className: "newspack-wizard__header",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "newspack-wizard__header__inner",
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "newspack-wizard__title",
-            children: [/*#__PURE__*/_jsx(Button, {
-              isLink: true,
-              href: newspack_urls.dashboard,
-              label: __('Return to Dashboard', 'newspack-plugin'),
-              showTooltip: true,
-              icon: category,
-              iconSize: 36,
-              children: /*#__PURE__*/_jsx(NewspackIcon, {
-                size: 36
-              })
-            }), /*#__PURE__*/_jsxs("div", {
-              children: [headerText && /*#__PURE__*/_jsx("h2", {
-                children: headerText
-              }), subHeaderText && /*#__PURE__*/_jsx("span", {
-                children: subHeaderText
-              })]
-            })]
-          })
-        })
-      }), tabbedNavigation && /*#__PURE__*/_jsx(TabbedNavigation, {
-        disableUpcoming: disableUpcomingInTabbedNavigation,
-        items: tabbedNavigation.filter(function (item) {
-          return !item.isHiddenInNav;
-        })
-      }), /*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs("div", {
+    var tabbedNavigationRegion = tabbedNavigation && /*#__PURE__*/_jsx(TabbedNavigation, {
+      disableUpcoming: disableUpcomingInTabbedNavigation,
+      items: tabbedNavigation.filter(function (item) {
+        return !item.isHiddenInNav;
+      })
+    });
+    var content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs("div", {
         className: classnames('newspack-wizard newspack-wizard__content', className),
         children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/_jsx(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
           renderPrimaryButton: renderPrimaryButton
@@ -106,6 +103,46 @@ export default function withWizardScreen(WrappedComponent) {
         })]
       })]
     });
+    var renderPage = function renderPage(crumbs) {
+      var pageBreadcrumbs = crumbs !== null && crumbs !== void 0 ? crumbs : [];
+      if (!pageBreadcrumbs.length && headerText) {
+        pageBreadcrumbs = [{
+          label: headerText
+        }];
+      }
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
+          debugMode: true
+        }), hideHeader ?
+        /*#__PURE__*/
+        // Without the Page shell the tabs still own the content: it
+        // renders inside the active tab's panel.
+        _jsx(_Fragment, {
+          children: tabbedNavigationRegion ? cloneElement(tabbedNavigationRegion, {
+            content: content
+          }) : content
+        }) : /*#__PURE__*/_jsx(Page, {
+          breadcrumbItems: pageBreadcrumbs,
+          subTitle: subHeaderText,
+          actions: headerActions,
+          tabbedNavigation: tabbedNavigationRegion,
+          children: content
+        })]
+      });
+    };
+    if (hideHeader) {
+      return renderPage();
+    }
+    if (breadcrumbItems) {
+      return renderPage(breadcrumbItems);
+    }
+    if (tabbedNavigation) {
+      return /*#__PURE__*/_jsx(RouteBreadcrumbs, {
+        sections: tabbedNavigation,
+        render: renderPage
+      });
+    }
+    return renderPage();
   };
   return WrappedWithWizardScreen;
 }

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+import { HashRouter } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import withWizardScreen from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+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() {
+      return /*#__PURE__*/_jsx("div", {
+        children: "Body content"
+      });
+    };
+    var ScreenWithHeader = withWizardScreen(WrappedComponent);
+    render(/*#__PURE__*/_jsx(HashRouter, {
+      children: /*#__PURE__*/_jsx(ScreenWithHeader, {
+        headerText: "Brands"
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Brands');
+  });
+  it('renders without a Router when no tabbed navigation is provided', function () {
+    var WrappedComponent = function WrappedComponent() {
+      return /*#__PURE__*/_jsx("div", {
+        children: "Body content"
+      });
+    };
+    var ScreenWithHeader = withWizardScreen(WrappedComponent);
+    render(/*#__PURE__*/_jsx(ScreenWithHeader, {
+      headerText: "Brands"
+    }));
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Brands');
+  });
+});

package/dist/esm/with-wizard-screen/style.scss

@@ -45,129 +45,12 @@
 		}
 	}
 
-	&__header {
-		align-items: center;
-		background: white;
-		border-bottom: 1px solid wp-colors.$gray-300;
-		display: flex;
-		.newspack-wizard__fixed-header & {
-			position: sticky;
-			top: 0;
-			width: 100%;
-			z-index: 1000;
-			.admin-bar & {
-				@media only screen and ( min-width: 601px ) {
-					top: 46px;
-				}
-				@media only screen and ( min-width: 782px ) {
-					top: 32px;
-				}
-			}
-		}
-		&__inner {
-			flex: 1 1 100%;
-		}
-		&__actions {
-			align-items: center;
-			display: flex;
-			gap: 8px;
-			justify-content: flex-end;
-			padding: 0 24px 0 0;
-			> .newspack-wizard__header__actions__main {
-				display: none;
-			}
-			@media only screen and ( min-width: 782px ) {
-				flex: 1 1 auto;
-				> .newspack-wizard__header__actions__main {
-					display: flex;
-				}
-				&__more {
-					&--primary-only,
-					.newspack-wizard__header__actions__more__main {
-						display: none;
-					}
-				}
-			}
-		}
-	}
-
 	&__main {
-		overflow-x: hidden;
+		overflow: hidden;
 		padding-bottom: 1px; /* Prevents borders from being cut off */
 	}
 
 
-	&__title {
-		align-items: center;
-		display: flex;
-
-		h2 {
-			margin: 0;
-			padding: 0;
-		}
-
-		> div {
-			align-items: baseline;
-			display: flex;
-			padding: 0 24px;
-
-			> span {
-				color: wp-colors.$gray-700;
-				display: none;
-				margin-left: 8px;
-
-				@media screen and ( min-width: 744px ) {
-					display: block;
-				}
-			}
-		}
-
-		svg {
-			fill: white;
-			margin: 0 !important;
-
-			&.newspack-icon {
-				flex: 0 0 36px;
-				margin-bottom: -1px !important;
-			}
-
-			&:not(.newspack-icon) {
-				background: var(--wp-admin-theme-color);
-				left: 50%;
-				margin: -28px 0 0 -28px !important;
-				opacity: 0;
-				padding: 10px;
-				position: absolute;
-				top: 50%;
-				transition: opacity 125ms ease-in-out;
-			}
-		}
-
-		.components-button.has-icon {
-			padding: 0;
-			position: relative;
-
-			&:hover {
-				svg {
-					opacity: 1;
-				}
-			}
-
-			&:focus-visible {
-				outline: none !important;
-
-				&::before {
-					border: 2px solid white;
-					border-radius: 2px;
-					content: "";
-					display: block;
-					inset: 6px 6px 5px;
-					position: absolute;
-				}
-			}
-		}
-	}
-
 	&__section-header {
 		margin: 0 auto 32px;
 		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
@@ -182,6 +65,7 @@
 
 	&__content {
 		margin: 0 auto;
+		width: 100%;
 		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
 		padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
 
@@ -225,3 +109,16 @@
 		margin: 0;
 	}
 }
+
+/**
+ * Wizard header overflow ("More") menu, rendered by the Wizard component into
+ * admin-ui's Page actions slot. Hide the toggle when there are no overflow
+ * actions, and hide the duplicated primary items inside the menu on wide
+ * viewports.
+ */
+@media only screen and ( min-width: 782px ) {
+	.newspack-wizard__actions__more--primary-only,
+	.newspack-wizard__actions__more .newspack-wizard__actions__more__main {
+		display: none;
+	}
+}

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

@@ -0,0 +1,63 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Internal dependencies.
+ */
+import { matchesRoute } from '../route-match';
+
+/**
+ * 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? }`.
+ */
+export var 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 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).
+ */
+export var 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(_toConsumableArray(trail), [crumb]);
+  }, breadcrumbItems);
+};

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

@@ -0,0 +1,197 @@
+/**
+ * Internal dependencies.
+ */
+import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
+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(activeBreadcrumbs(SECTIONS, '/donations')).toEqual([{
+      label: 'Audience Management'
+    }, {
+      label: 'Donations'
+    }]);
+  });
+  it('falls back to the first section when no path matches', function () {
+    expect(activeBreadcrumbs(SECTIONS, '/nope')).toEqual(SECTIONS[0].breadcrumbs);
+  });
+  it('returns [] when sections is empty', function () {
+    expect(activeBreadcrumbs([], '/x')).toEqual([]);
+  });
+  it('returns [] when sections is null or undefined', function () {
+    expect(activeBreadcrumbs(null, '/x')).toEqual([]);
+    expect(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(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(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(activeBreadcrumbs(sections, '/segments/123')).toEqual([{
+      label: 'Root'
+    }, {
+      label: 'Segments'
+    }]);
+  });
+  it('prefers an exact path match over the first section', function () {
+    expect(activeBreadcrumbs(SECTIONS, '/')).toEqual(SECTIONS[0].breadcrumbs);
+  });
+  it('returns [] when the matched section has no breadcrumbs', function () {
+    expect(activeBreadcrumbs([{
+      path: '/'
+    }], '/')).toEqual([]);
+  });
+});
+describe('appendSectionName', function () {
+  var base = [{
+    label: 'Access Control'
+  }];
+  it('returns the base trail unchanged when sectionName is falsy', function () {
+    expect(appendSectionName(base, undefined)).toBe(base);
+    expect(appendSectionName(base, '')).toBe(base);
+    expect(appendSectionName(base, null)).toBe(base);
+  });
+  it('appends a string sectionName as a leaf crumb', function () {
+    expect(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(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(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(appendSectionName(trail, [{
+      label: 'Metered Countdown'
+    }])).toEqual(trail);
+  });
+  it('skips crumbs without a label', function () {
+    expect(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(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'
+    }];
+    appendSectionName(trail, 'Content Gifting');
+    expect(trail).toEqual([{
+      label: 'Access Control'
+    }]);
+  });
+});

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

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 
 /**
  * Internal dependencies.
  */
-import { Button, Card, Modal, Notice } from '../..';
+import { Button, Modal, Notice } from '../..';
 import { WIZARD_STORE_NAMESPACE } from '../store';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var parseError = function parseError(_ref) {
@@ -46,10 +47,11 @@ var WizardError = function WizardError() {
         noticeText: message,
         isError: true,
         rawHTML: true
-      }), fallbackURL && /*#__PURE__*/_jsx(Card, {
-        buttonsCard: true,
-        noBorder: true,
-        className: "justify-end",
+      }), fallbackURL && /*#__PURE__*/_jsx(HStack, {
+        justify: "flex-end",
+        spacing: 4,
+        wrap: true,
+        className: "newspack-modal__footer",
         children: /*#__PURE__*/_jsx(Button, {
           isPrimary: true,
           href: fallbackURL,