newspack-components 4.5.0 → 4.6.0

package/dist/esm/card-settings-group/index.js

@@ -22,6 +22,8 @@ var CardSettingsGroup = function CardSettingsGroup(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$iconElement = _ref.iconElement,
+    iconElement = _ref$iconElement === void 0 ? null : _ref$iconElement,
     headerAction = _ref.headerAction,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
@@ -50,6 +52,7 @@ var CardSettingsGroup = function CardSettingsGroup(_ref) {
       onToggle: onEnable,
       disabled: disabled,
       icon: icon,
+      iconElement: iconElement,
       iconBackgroundColor: true,
       isActive: isActive,
       title: title

package/dist/esm/confirm-dialog/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen"];
+var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen", "children"];
 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; }
 /**
@@ -52,6 +52,7 @@ function ConfirmDialog(_ref, ref) {
     when = _ref$when === void 0 ? false : _ref$when,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    children = _ref.children,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(isOpen),
     _useState2 = _slicedToArray(_useState, 2),
@@ -59,6 +60,9 @@ function ConfirmDialog(_ref, ref) {
     setShowDialog = _useState2[1];
   var history = useHistory();
   var pendingNavigation = useRef(null);
+  // While true, the blocker lets navigation through — used so the confirmed
+  // ("Discard changes") navigation isn't caught by the still-active blocker.
+  var bypassBlock = useRef(false);
   var handleOnConfirm = useCallback(function () {
     var _pendingNavigation$cu;
     setShowDialog(false);
@@ -69,8 +73,16 @@ function ConfirmDialog(_ref, ref) {
   var handleOnCancel = useCallback(function () {
     setShowDialog(false);
     pendingNavigation.current = null;
+    // A POP may have moved the URL to the target before it was blocked; put
+    // it back so the address bar matches the page the user chose to stay on.
+    bypassBlock.current = true;
+    try {
+      history.replace(history.location);
+    } finally {
+      bypassBlock.current = false;
+    }
     onCancel();
-  }, [onCancel, pendingNavigation]);
+  }, [onCancel, history]);
 
   // Block navigation when there are unsaved changes.
   useEffect(function () {
@@ -78,12 +90,25 @@ function ConfirmDialog(_ref, ref) {
       return;
     }
     var unblock = history.block(function (location, action) {
+      // Let our own confirmed navigation through instead of re-blocking it.
+      if (bypassBlock.current) {
+        return undefined;
+      }
       pendingNavigation.current = function () {
-        unblock();
-        if (action === 'REPLACE') {
-          history.replace(location);
-        } else {
-          history.push(location);
+        bypassBlock.current = true;
+        try {
+          // A browser/anchor POP (e.g. a breadcrumb or back link) moves the URL
+          // to the target before navigation is blocked, and v5 leaves the hash
+          // there, so pushing the target would be a no-op. Re-sync to the
+          // still-current location first so the real navigation actually fires.
+          history.replace(history.location);
+          if (action === 'REPLACE') {
+            history.replace(location);
+          } else {
+            history.push(location);
+          }
+        } finally {
+          bypassBlock.current = false;
         }
       };
       setShowDialog(true);
@@ -110,7 +135,8 @@ function ConfirmDialog(_ref, ref) {
     ref: ref,
     onConfirm: handleOnConfirm,
     onCancel: handleOnCancel,
-    __experimentalHideHeader: false
+    __experimentalHideHeader: false,
+    children: children
   }));
 }
 export default forwardRef(ConfirmDialog);

package/dist/esm/confirm-dialog/index.test.js

@@ -0,0 +1,173 @@
+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; }
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import ConfirmDialog from './';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HistoryGrabber = function HistoryGrabber(_ref) {
+  var historyRef = _ref.historyRef;
+  historyRef.current = useHistory();
+  return null;
+};
+var renderWithHistory = function renderWithHistory() {
+  var routerProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var historyRef = {
+    current: null
+  };
+  render(/*#__PURE__*/_jsxs(MemoryRouter, _objectSpread(_objectSpread({}, routerProps), {}, {
+    children: [/*#__PURE__*/_jsx(HistoryGrabber, {
+      historyRef: historyRef
+    }), /*#__PURE__*/_jsx(ConfirmDialog, {
+      when: true,
+      confirmButtonText: "Discard changes",
+      cancelButtonText: "Keep editing",
+      children: "Unsaved changes"
+    })]
+  })));
+  return historyRef.current;
+};
+
+// The modal's X close button reuses the cancel label as its aria-label, so
+// query by visible text to hit the actual footer buttons.
+var confirmNavigation = function confirmNavigation() {
+  return fireEvent.click(screen.getByText('Discard changes', {
+    selector: 'button'
+  }));
+};
+var cancelNavigation = function cancelNavigation() {
+  return fireEvent.click(screen.getByText('Keep editing', {
+    selector: 'button'
+  }));
+};
+var dialog = function dialog() {
+  return screen.queryByText('Unsaved changes');
+};
+describe('ConfirmDialog navigation blocking', function () {
+  it('blocks navigation and stays on the current page on cancel', function () {
+    var history = renderWithHistory();
+    act(function () {
+      return history.push('/next');
+    });
+    expect(dialog()).toBeInTheDocument();
+    expect(history.location.pathname).toBe('/');
+    var replaceSpy = jest.spyOn(history, 'replace');
+    cancelNavigation();
+    expect(dialog()).not.toBeInTheDocument();
+    // The URL is re-synced to the page the user chose to stay on.
+    expect(replaceSpy).toHaveBeenCalledTimes(1);
+    expect(history.location.pathname).toBe('/');
+  });
+  it('replays a blocked push on confirm: re-sync replace first, then push, and re-arms the blocker', function () {
+    var history = renderWithHistory();
+    var replaceSpy = jest.spyOn(history, 'replace');
+    var pushSpy = jest.spyOn(history, 'push');
+    act(function () {
+      return history.push('/next');
+    });
+    expect(history.location.pathname).toBe('/');
+    confirmNavigation();
+    expect(history.location.pathname).toBe('/next');
+
+    // Replay order: re-sync replace fires before the target push.
+    var resyncOrder = replaceSpy.mock.invocationCallOrder[0];
+    var replayOrder = pushSpy.mock.invocationCallOrder[1];
+    expect(replaceSpy).toHaveBeenCalledTimes(1);
+    expect(pushSpy).toHaveBeenCalledTimes(2);
+    expect(resyncOrder).toBeLessThan(replayOrder);
+
+    // The bypass only lets the confirmed navigation through; the next one is blocked again.
+    act(function () {
+      return history.push('/another');
+    });
+    expect(history.location.pathname).toBe('/next');
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('replays a blocked REPLACE with replace, not push', function () {
+    var history = renderWithHistory();
+    var pushSpy = jest.spyOn(history, 'push');
+    act(function () {
+      return history.replace('/replaced');
+    });
+    expect(dialog()).toBeInTheDocument();
+    expect(history.location.pathname).toBe('/');
+    confirmNavigation();
+    expect(history.location.pathname).toBe('/replaced');
+    expect(pushSpy).not.toHaveBeenCalled();
+    expect(history.length).toBe(1);
+  });
+  it('replays a blocked POP (back navigation) as a push after the re-sync', function () {
+    var history = renderWithHistory({
+      initialEntries: ['/start', '/current'],
+      initialIndex: 1
+    });
+    act(function () {
+      return history.goBack();
+    });
+    expect(dialog()).toBeInTheDocument();
+    expect(history.location.pathname).toBe('/current');
+    confirmNavigation();
+    expect(history.location.pathname).toBe('/start');
+    // Pushed rather than popped: the target becomes a new forward entry.
+    expect(history.length).toBe(3);
+  });
+
+  // React re-reports errors thrown in event handlers as uncaught window
+  // errors; swallow them so the intentional throws don't fail the test.
+  var withNavigationError = function withNavigationError(fn) {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var onWindowError = function onWindowError(event) {
+      return event.preventDefault();
+    };
+    window.addEventListener('error', onWindowError);
+    try {
+      fn();
+    } finally {
+      window.removeEventListener('error', onWindowError);
+      consoleError.mockRestore();
+    }
+  };
+  it('keeps blocking after a confirmed navigation throws', function () {
+    var history = renderWithHistory();
+    act(function () {
+      return history.push('/next');
+    });
+    jest.spyOn(history, 'push').mockImplementationOnce(function () {
+      throw new Error('nav failed');
+    });
+    withNavigationError(function () {
+      return confirmNavigation();
+    });
+
+    // bypassBlock was reset by the finally, so navigation is still protected.
+    act(function () {
+      return history.push('/elsewhere');
+    });
+    expect(history.location.pathname).toBe('/');
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('keeps blocking after a cancel URL re-sync throws', function () {
+    var history = renderWithHistory();
+    act(function () {
+      return history.push('/next');
+    });
+    jest.spyOn(history, 'replace').mockImplementationOnce(function () {
+      throw new Error('replace failed');
+    });
+    withNavigationError(function () {
+      return cancelNavigation();
+    });
+    act(function () {
+      return history.push('/elsewhere');
+    });
+    expect(history.location.pathname).toBe('/');
+    expect(dialog()).toBeInTheDocument();
+  });
+});

package/dist/esm/divider/style.scss

@@ -34,7 +34,7 @@
 	// Variant
 
 	&--variant-default {
-		background-color: wp-colors.$gray-300;
+		background-color: var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 	}
 
 	&--variant-primary {
@@ -46,6 +46,8 @@
 	}
 
 	&--variant-tertiary {
-		background-color: wp-colors.$gray-100;
+		// Fallback for consumers whose bundle doesn't carry the wpds token sheet
+		// (it ships with the Page header's stylesheet).
+		background-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
 	}
 }

package/dist/esm/grid/style.scss

@@ -61,6 +61,11 @@
 		grid-row-gap: 16px;
 	}
 
+	// Row Gap 24
+	&__row-gap-24 {
+		grid-row-gap: 24px;
+	}
+
 	// Row Gap 32
 	&__row-gap-32 {
 		grid-row-gap: 32px;

package/dist/esm/handoff/index.js

@@ -19,12 +19,13 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
  */
-import { Button, Card, Modal, Waiting } from '../';
+import { Button, Modal, Waiting } from '../';
 
 /**
  * External dependencies.
@@ -202,10 +203,11 @@ var Handoff = /*#__PURE__*/function (_Component) {
           },
           children: [/*#__PURE__*/_jsx("p", {
             children: modalBody
-          }), /*#__PURE__*/_jsxs(Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/_jsxs(HStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: [/*#__PURE__*/_jsx(Button, {
               variant: "secondary",
               onClick: function onClick() {

package/dist/esm/index.js

@@ -1,9 +1,10 @@
-export { default as Accordion } from './accordion';
+export { default as Accordion, AccordionPanel } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 export { default as Badge } from './badge';
+export { default as Breadcrumbs } from './breadcrumbs';
 export { default as Button } from './button';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
@@ -11,6 +12,7 @@ export { default as CardFeature } from './card-feature';
 export { default as CardForm } from './card-form';
 export { default as CardSettingsGroup } from './card-settings-group';
 export { default as CardSortableList } from './card-sortable-list';
+export { default as IntegrationIcon } from './integration-icon';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
@@ -28,6 +30,7 @@ export { default as Grid } from './grid';
 export { default as Modal } from './modal';
 export { default as NewspackIcon } from './newspack-icon';
 export { default as Notice } from './notice';
+export { default as Page } from './page';
 export { default as PluginInstaller } from './plugin-installer';
 export { default as PluginSettings } from './plugin-settings';
 export { default as PluginToggle } from './plugin-toggle';
@@ -53,5 +56,6 @@ export { default as useConfirmDialog } from './hooks/use-confirm-dialog';
 export { default as useUnsavedChangesDialog } from './hooks/use-unsaved-changes-dialog';
 import * as integrationIcons from './integration-icons';
 export { integrationIcons };
+export { espProviderOrder } from './integration-icons';
 export { default as utils } from './utils';
 import './style.scss';

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { espProviderIcons } from '../integration-icons';
+import './style.scss';
+
+/**
+ * The single source for how an ESP provider is shown: brand mark plus badge
+ * background. A new provider needs an icon file, an `espProviderIcons` entry,
+ * and a background rule in this component's stylesheet.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var IntegrationIcon = function IntegrationIcon(_ref) {
+  var provider = _ref.provider,
+    className = _ref.className;
+  var icons = espProviderIcons;
+  var node = Object.prototype.hasOwnProperty.call(espProviderIcons, provider) ? icons[provider] : null;
+  if (!node) {
+    return null;
+  }
+  // Decorative: the provider is always named in adjacent visible text (the card
+  // title), so hide the mark from assistive tech to avoid duplicate announcements.
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    className: classnames('newspack-integration-icon', "newspack-integration-icon--".concat(provider.replace(/_/g, '-')), className),
+    children: node
+  });
+};
+export default IntegrationIcon;

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

@@ -0,0 +1,42 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-integration-icon {
+	align-items: center;
+	border-radius: wp-vars.$radius-round;
+	display: flex;
+	flex: 0 0 wp-vars.$grid-unit-50;
+	height: wp-vars.$grid-unit-50;
+	justify-content: center;
+	width: wp-vars.$grid-unit-50;
+
+	svg {
+		display: block;
+		fill: currentcolor;
+		height: wp-vars.$grid-unit-30;
+		width: wp-vars.$grid-unit-30;
+	}
+
+	&--active-campaign {
+		background: #004cff;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
+	&--constant-contact {
+		background: wp-colors.$gray-100;
+	}
+
+	&--manual {
+		background: wp-colors.$gray-800;
+		color: wp-colors.$white;
+
+		// Set the fill on the path directly so the card's active/hover state
+		// (which recolours header svgs) can't override the white manual mark.
+		svg path {
+			fill: currentcolor;
+		}
+	}
+}

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

@@ -1,6 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { atSymbol } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import activeCampaign from './active-campaign';
+import constantContact from './constant-contact';
+import mailchimp from './mailchimp';
 export { default as activeCampaign } from './active-campaign';
 export { default as constantContact } from './constant-contact';
 export { default as fundraiseUp } from './fundraise-up';
 export { default as mailchimp } from './mailchimp';
 export { default as salesforce } from './salesforce';
-export { default as wisepops } from './wisepops';
+export { default as wisepops } from './wisepops';
+
+// ESP provider brand marks keyed by the slug the backend reports
+// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
+export var espProviderIcons = {
+  active_campaign: activeCampaign,
+  mailchimp: mailchimp,
+  constant_contact: constantContact,
+  manual: atSymbol
+};
+export var espProviderOrder = ['active_campaign', 'mailchimp', 'constant_contact', 'manual'];

package/dist/esm/modal/style.scss

@@ -99,3 +99,7 @@
 .modal-open .components-popover__content {
 	opacity: 0;
 }
+
+.newspack-modal__footer {
+	margin-top: 32px;
+}

package/dist/esm/page/index.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies.
+ */
+import { NavigableRegion } from '@wordpress/admin-ui';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { cloneElement, isValidElement } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+import { Stack, Text } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { newspack } from 'newspack-icons';
+
+/**
+ * Internal dependencies.
+ */
+import Breadcrumbs from '../breadcrumbs';
+import './style.scss';
+
+/**
+ * Newspack page region: a sticky header block (breadcrumbs, actions, optional
+ * tabbed navigation) followed by the page content.
+ *
+ * This intentionally does not use `@wordpress/admin-ui`'s `Page`: that
+ * component has no slot for content rendered between the header and the body
+ * inside the sticky region, which is exactly where the tab bar must live. Until
+ * admin-ui grows such a slot, the header markup is assembled here from the same
+ * design-system primitives and tokens, so it can be swapped back later.
+ *
+ * @param {Object} props
+ * @param {Array}  props.breadcrumbItems    Trail items: `{ label, url? }`.
+ * @param {*}      [props.badges]
+ * @param {*}      [props.subTitle]
+ * @param {*}      [props.actions]
+ * @param {*}      [props.tabbedNavigation] A `TabbedNavigation` element; its bar renders inside
+ *                                          the sticky header block and the page children render
+ *                                          inside its active tab panel — or, when no visible tab
+ *                                          owns the route, as a sibling of the panels.
+ * @param {string} [props.className]
+ * @param {*}      props.children
+ * @return {JSX.Element} Page component.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var Page = function Page(_ref) {
+  var _breadcrumbItems;
+  var _ref$breadcrumbItems = _ref.breadcrumbItems,
+    breadcrumbItems = _ref$breadcrumbItems === void 0 ? [] : _ref$breadcrumbItems,
+    badges = _ref.badges,
+    subTitle = _ref.subTitle,
+    actions = _ref.actions,
+    tabbedNavigation = _ref.tabbedNavigation,
+    className = _ref.className,
+    children = _ref.children;
+  var currentLabel = (_breadcrumbItems = breadcrumbItems[breadcrumbItems.length - 1]) === null || _breadcrumbItems === void 0 ? void 0 : _breadcrumbItems.label;
+  var renderShell = function renderShell(tabBar, content) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Stack, {
+        direction: "column",
+        className: "newspack-page__header-region",
+        children: [/*#__PURE__*/_jsxs(Stack, {
+          direction: "column",
+          className: "newspack-page__header",
+          children: [/*#__PURE__*/_jsxs(Stack, {
+            direction: "row",
+            gap: "sm",
+            justify: "space-between",
+            children: [/*#__PURE__*/_jsxs(Stack, {
+              direction: "row",
+              gap: "sm",
+              align: "center",
+              justify: "start",
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "newspack-page__header-visual",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: newspack
+                })
+              }), /*#__PURE__*/_jsx(HStack, {
+                className: "newspack-page__breadcrumbs",
+                justify: "flex-start",
+                children: /*#__PURE__*/_jsx(Breadcrumbs, {
+                  items: breadcrumbItems
+                })
+              }), badges]
+            }), actions && /*#__PURE__*/_jsx(Stack, {
+              direction: "row",
+              gap: "sm",
+              align: "center",
+              className: "newspack-page__header-actions",
+              children: actions
+            })]
+          }), subTitle && /*#__PURE__*/_jsx(Text, {
+            render: /*#__PURE__*/_jsx("p", {}),
+            variant: "body-md",
+            className: "newspack-page__header-subtitle",
+            children: subTitle
+          })]
+        }), tabBar]
+      }), content]
+    });
+  };
+  return /*#__PURE__*/_jsx(NavigableRegion, {
+    className: classnames('newspack-page', className),
+    ariaLabel: currentLabel,
+    children: isValidElement(tabbedNavigation) ? cloneElement(tabbedNavigation, {
+      renderShell: renderShell,
+      content: children
+    }) : renderShell(null, children)
+  });
+};
+export default Page;

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

@@ -0,0 +1,65 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+import { HashRouter } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import Page from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+var renderInRouter = function renderInRouter(ui) {
+  return render(/*#__PURE__*/_jsx(HashRouter, {
+    children: ui
+  }));
+};
+describe('Page', function () {
+  it('renders the breadcrumb current item as h1 and the content', function () {
+    renderInRouter(/*#__PURE__*/_jsx(Page, {
+      breadcrumbItems: [{
+        label: 'Audience',
+        url: '/'
+      }, {
+        label: 'Access control'
+      }],
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Body content"
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Access control');
+    expect(screen.getByText('Body content')).toBeInTheDocument();
+  });
+  it('renders actions and subtitle', function () {
+    renderInRouter(/*#__PURE__*/_jsx(Page, {
+      breadcrumbItems: [{
+        label: 'Audience'
+      }],
+      subTitle: "Manage readers",
+      actions: /*#__PURE__*/_jsx("button", {
+        children: "Add new"
+      }),
+      children: /*#__PURE__*/_jsx("div", {})
+    }));
+    expect(screen.getByRole('button', {
+      name: 'Add new'
+    })).toBeInTheDocument();
+    expect(screen.getByText('Manage readers')).toBeInTheDocument();
+  });
+  it('names the page region after the current breadcrumb item', function () {
+    renderInRouter(/*#__PURE__*/_jsx(Page, {
+      breadcrumbItems: [{
+        label: 'Audience',
+        url: '/'
+      }, {
+        label: 'Access control'
+      }],
+      children: /*#__PURE__*/_jsx("div", {})
+    }));
+    expect(screen.getByRole('region', {
+      name: 'Access control'
+    })).toBeInTheDocument();
+  });
+});