newspack-components 4.5.0 → 4.6.0

package/dist/cjs/card-feature/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _badge = _interopRequireDefault(require("../badge"));
@@ -45,6 +46,8 @@ var CardFeature = function CardFeature(_ref) {
     _ref$requirementsActi = _ref.requirementsActionable,
     requirementsActionable = _ref$requirementsActi === void 0 ? false : _ref$requirementsActi,
     enableLabel = _ref.enableLabel,
+    _ref$busy = _ref.busy,
+    busy = _ref$busy === void 0 ? false : _ref$busy,
     configureLabel = _ref.configureLabel,
     onEnable = _ref.onEnable,
     onConfigure = _ref.onConfigure,
@@ -71,6 +74,7 @@ var CardFeature = function CardFeature(_ref) {
   }
   var isConfigureState = enabled && !requirements;
   var buttonLabel = isConfigureState ? configureLabel !== null && configureLabel !== void 0 ? configureLabel : (0, _i18n.__)('Configure', 'newspack-plugin') : enableLabel !== null && enableLabel !== void 0 ? enableLabel : (0, _i18n.__)('Enable', 'newspack-plugin');
+  var showMoreControls = enabled && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && (!requirements || requirementsActionable);
   var handleButtonClick = function handleButtonClick() {
     if (isConfigureState) {
       onConfigure === null || onConfigure === void 0 || onConfigure();
@@ -78,10 +82,24 @@ var CardFeature = function CardFeature(_ref) {
       onEnable === null || onEnable === void 0 || onEnable();
     }
   };
-  var iconClasses = icon ? (0, _classnames["default"])('newspack-card-feature__icon', {
-    'newspack-card-feature__icon--radius-small': !!icon.backgroundColor && icon.radius !== 'full',
-    'newspack-card-feature__icon--radius-full': icon.radius === 'full'
+  var iconDescriptor = icon && !(0, _element.isValidElement)(icon) ? icon : null;
+  var iconClasses = iconDescriptor ? (0, _classnames["default"])('newspack-card-feature__icon', {
+    'newspack-card-feature__icon--radius-small': !!iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
+    'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full'
   }) : undefined;
+  var renderedIcon = null;
+  if ((0, _element.isValidElement)(icon)) {
+    renderedIcon = icon;
+  } else if (iconDescriptor) {
+    renderedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: iconClasses,
+      style: {
+        backgroundColor: iconDescriptor.backgroundColor,
+        color: iconDescriptor.fill
+      },
+      children: iconDescriptor.node
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card["default"], {
     className: classes,
     __experimentalCoreCard: true,
@@ -102,14 +120,7 @@ var CardFeature = function CardFeature(_ref) {
               className: "newspack-card-feature__description",
               children: description
             })]
-          }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: iconClasses,
-            style: {
-              backgroundColor: icon.backgroundColor,
-              color: icon.fill
-            },
-            children: icon.node
-          })]
+          }), renderedIcon]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
           alignment: "edge",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
@@ -117,11 +128,12 @@ var CardFeature = function CardFeature(_ref) {
             spacing: "8px",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
               variant: isConfigureState ? 'tertiary' : 'secondary',
-              disabled: isMuted && !requirementsActionable,
+              disabled: isMuted && !requirementsActionable || busy,
+              isBusy: busy,
               onClick: handleButtonClick,
               size: "compact",
               children: buttonLabel
-            }), isConfigureState && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+            }), showMoreControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
               icon: _icons.moreVertical,
               label: (0, _i18n.__)('More', 'newspack-plugin'),
               controls: moreControls,

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

@@ -30,6 +30,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,
@@ -58,6 +60,7 @@ var CardSettingsGroup = function CardSettingsGroup(_ref) {
       onToggle: onEnable,
       disabled: disabled,
       icon: icon,
+      iconElement: iconElement,
       iconBackgroundColor: true,
       isActive: isActive,
       title: title

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

@@ -13,7 +13,7 @@ var _element = require("@wordpress/element");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen"];
+var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen", "children"];
 /**
  * Modal
  */
@@ -59,6 +59,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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useState = (0, _element.useState)(isOpen),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -66,6 +67,9 @@ function ConfirmDialog(_ref, ref) {
     setShowDialog = _useState2[1];
   var history = useHistory();
   var pendingNavigation = (0, _element.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 = (0, _element.useRef)(false);
   var handleOnConfirm = (0, _element.useCallback)(function () {
     var _pendingNavigation$cu;
     setShowDialog(false);
@@ -76,8 +80,16 @@ function ConfirmDialog(_ref, ref) {
   var handleOnCancel = (0, _element.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.
   (0, _element.useEffect)(function () {
@@ -85,12 +97,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);
@@ -117,7 +142,8 @@ function ConfirmDialog(_ref, ref) {
     ref: ref,
     onConfirm: handleOnConfirm,
     onCancel: handleOnCancel,
-    __experimentalHideHeader: false
+    __experimentalHideHeader: false,
+    children: children
   }));
 }
 var _default = exports["default"] = (0, _element.forwardRef)(ConfirmDialog);

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

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * External dependencies.
+ */ /**
+ * Internal dependencies.
+ */
+var HistoryGrabber = function HistoryGrabber(_ref) {
+  var historyRef = _ref.historyRef;
+  historyRef.current = (0, _reactRouterDom.useHistory)();
+  return null;
+};
+var renderWithHistory = function renderWithHistory() {
+  var routerProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var historyRef = {
+    current: null
+  };
+  (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, _objectSpread(_objectSpread({}, routerProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryGrabber, {
+      historyRef: historyRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      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 _react.fireEvent.click(_react.screen.getByText('Discard changes', {
+    selector: 'button'
+  }));
+};
+var cancelNavigation = function cancelNavigation() {
+  return _react.fireEvent.click(_react.screen.getByText('Keep editing', {
+    selector: 'button'
+  }));
+};
+var dialog = function dialog() {
+  return _react.screen.queryByText('Unsaved changes');
+};
+describe('ConfirmDialog navigation blocking', function () {
+  it('blocks navigation and stays on the current page on cancel', function () {
+    var history = renderWithHistory();
+    (0, _react.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');
+    (0, _react.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.
+    (0, _react.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');
+    (0, _react.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
+    });
+    (0, _react.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();
+    (0, _react.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.
+    (0, _react.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();
+    (0, _react.act)(function () {
+      return history.push('/next');
+    });
+    jest.spyOn(history, 'replace').mockImplementationOnce(function () {
+      throw new Error('replace failed');
+    });
+    withNavigationError(function () {
+      return cancelNavigation();
+    });
+    (0, _react.act)(function () {
+      return history.push('/elsewhere');
+    });
+    expect(history.location.pathname).toBe('/');
+    expect(dialog()).toBeInTheDocument();
+  });
+});

package/dist/cjs/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/cjs/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/cjs/handoff/index.js

@@ -14,6 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _ = require("../");
 var _assign = _interopRequireDefault(require("lodash/assign"));
@@ -27,7 +28,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Handoff
  */ /**
  * WordPress dependencies.
- */ /**
+ */ // eslint-disable-line @wordpress/no-unsafe-wp-apis
+/**
  * Internal dependencies.
  */ /**
  * External dependencies.
@@ -202,10 +204,11 @@ var Handoff = /*#__PURE__*/function (_Component) {
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             children: modalBody
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
               variant: "secondary",
               onClick: function onClick() {

package/dist/cjs/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Accordion", {
     return _accordion["default"];
   }
 });
+Object.defineProperty(exports, "AccordionPanel", {
+  enumerable: true,
+  get: function get() {
+    return _accordion.AccordionPanel;
+  }
+});
 Object.defineProperty(exports, "ActionCard", {
   enumerable: true,
   get: function get() {
@@ -46,6 +52,12 @@ Object.defineProperty(exports, "BoxContrast", {
     return _boxContrast["default"];
   }
 });
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function get() {
+    return _breadcrumbs["default"];
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
@@ -166,6 +178,12 @@ Object.defineProperty(exports, "InfoButton", {
     return _infoButton["default"];
   }
 });
+Object.defineProperty(exports, "IntegrationIcon", {
+  enumerable: true,
+  get: function get() {
+    return _integrationIcon["default"];
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
@@ -184,6 +202,12 @@ Object.defineProperty(exports, "Notice", {
     return _notice["default"];
   }
 });
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function get() {
+    return _page["default"];
+  }
+});
 Object.defineProperty(exports, "PluginInstaller", {
   enumerable: true,
   get: function get() {
@@ -292,6 +316,12 @@ Object.defineProperty(exports, "Wizard", {
     return _wizard["default"];
   }
 });
+Object.defineProperty(exports, "espProviderOrder", {
+  enumerable: true,
+  get: function get() {
+    return integrationIcons.espProviderOrder;
+  }
+});
 Object.defineProperty(exports, "hooks", {
   enumerable: true,
   get: function get() {
@@ -329,12 +359,13 @@ Object.defineProperty(exports, "withWizardScreen", {
     return _withWizardScreen["default"];
   }
 });
-var _accordion = _interopRequireDefault(require("./accordion"));
+var _accordion = _interopRequireWildcard(require("./accordion"));
 var _actionCard = _interopRequireDefault(require("./action-card"));
 var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tokenfield"));
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
 var _autocompleteWithLatestPosts = _interopRequireDefault(require("./autocomplete-with-latest-posts"));
 var _badge = _interopRequireDefault(require("./badge"));
+var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs"));
 var _button = _interopRequireDefault(require("./button"));
 var _boxContrast = _interopRequireDefault(require("./box-contrast"));
 var _card = _interopRequireDefault(require("./card"));
@@ -342,6 +373,7 @@ var _cardFeature = _interopRequireDefault(require("./card-feature"));
 var _cardForm = _interopRequireDefault(require("./card-form"));
 var _cardSettingsGroup = _interopRequireDefault(require("./card-settings-group"));
 var _cardSortableList = _interopRequireDefault(require("./card-sortable-list"));
+var _integrationIcon = _interopRequireDefault(require("./integration-icon"));
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
 var _confirmDialog = _interopRequireDefault(require("./confirm-dialog"));
@@ -359,6 +391,7 @@ var _grid = _interopRequireDefault(require("./grid"));
 var _modal = _interopRequireDefault(require("./modal"));
 var _newspackIcon = _interopRequireDefault(require("./newspack-icon"));
 var _notice = _interopRequireDefault(require("./notice"));
+var _page = _interopRequireDefault(require("./page"));
 var _pluginInstaller = _interopRequireDefault(require("./plugin-installer"));
 var _pluginSettings = _interopRequireDefault(require("./plugin-settings"));
 var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _integrationIcons = require("../integration-icons");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * 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.
+ */var IntegrationIcon = function IntegrationIcon(_ref) {
+  var provider = _ref.provider,
+    className = _ref.className;
+  var icons = _integrationIcons.espProviderIcons;
+  var node = Object.prototype.hasOwnProperty.call(_integrationIcons.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__*/(0, _jsxRuntime.jsx)("span", {
+    "aria-hidden": "true",
+    className: (0, _classnames["default"])('newspack-integration-icon', "newspack-integration-icon--".concat(provider.replace(/_/g, '-')), className),
+    children: node
+  });
+};
+var _default = exports["default"] = IntegrationIcon;

package/dist/cjs/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/cjs/integration-icons/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "constantContact", {
     return _constantContact["default"];
   }
 });
+exports.espProviderOrder = exports.espProviderIcons = void 0;
 Object.defineProperty(exports, "fundraiseUp", {
   enumerable: true,
   get: function get() {
@@ -40,9 +41,27 @@ Object.defineProperty(exports, "wisepops", {
     return _wisepops["default"];
   }
 });
+var _icons = require("@wordpress/icons");
 var _activeCampaign = _interopRequireDefault(require("./active-campaign"));
 var _constantContact = _interopRequireDefault(require("./constant-contact"));
-var _fundraiseUp = _interopRequireDefault(require("./fundraise-up"));
 var _mailchimp = _interopRequireDefault(require("./mailchimp"));
+var _fundraiseUp = _interopRequireDefault(require("./fundraise-up"));
 var _salesforce = _interopRequireDefault(require("./salesforce"));
-var _wisepops = _interopRequireDefault(require("./wisepops"));
+var _wisepops = _interopRequireDefault(require("./wisepops"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// ESP provider brand marks keyed by the slug the backend reports
+// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
+var espProviderIcons = exports.espProviderIcons = {
+  active_campaign: _activeCampaign["default"],
+  mailchimp: _mailchimp["default"],
+  constant_contact: _constantContact["default"],
+  manual: _icons.atSymbol
+};
+var espProviderOrder = exports.espProviderOrder = ['active_campaign', 'mailchimp', 'constant_contact', 'manual'];

package/dist/cjs/modal/style.scss

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