newspack-components 4.8.0 → 4.8.1-alpha.1

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

@@ -13,9 +13,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies.
  */
 
-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() {

package/dist/cjs/wizard/index.js

@@ -26,8 +26,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * External dependencies.
  */ /**
  * WordPress dependencies.
- */ // Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-/**
+ */ /**
  * Internal dependencies
  */
 (0, _store["default"])();
@@ -96,7 +95,10 @@ var ResetHeaderData = function ResetHeaderData() {
   var location = useLocation();
   var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
     resetHeaderData = _useDispatch.resetHeaderData;
-  (0, _element.useEffect)(function () {
+
+  // Must stay before paint: a passive effect here would run after a section that
+  // publishes from a layout effect, wiping the header it just set.
+  (0, _element.useLayoutEffect)(function () {
     resetHeaderData();
     window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
@@ -202,6 +204,7 @@ var Wizard = function Wizard(_ref2, ref) {
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
+    headerFullWidth = headerData.fullWidth,
     sectionDescription = headerData.sectionDescription,
     sectionMenu = headerData.sectionMenu,
     sectionName = headerData.sectionName,
@@ -338,7 +341,7 @@ var Wizard = function Wizard(_ref2, ref) {
             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
+                  'newspack-wizard__content--full-width': headerFullWidth !== null && headerFullWidth !== void 0 ? headerFullWidth : section.fullWidth
                 }),
                 children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
                   className: "newspack-wizard__section-header",
@@ -419,9 +422,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }),
         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.jsx)(WizardHeaderRegion, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DebugBadge, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WizardHeaderRegion, {
             hideHeader: hideHeader,
             headerText: headerText,
             sections: routedSections,

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

@@ -5,8 +5,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@testing-library/react");
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
 var _ = _interopRequireDefault(require("./"));
 var _utils = require("./store/utils");
+var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
@@ -20,14 +23,12 @@ jest.mock('@wordpress/api-fetch', function () {
   return jest.fn();
 });
 
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = {
-  is_debug_mode: false
-};
+// Localized onto every real wizard screen; the footer's ExternalLink needs a
+// string href.
 window.newspack_urls = {
   support: 'https://help.newspack.com/'
 };
+window.scrollTo = jest.fn();
 var SETTINGS = {
   minimumDonation: '5'
 };
@@ -249,4 +250,156 @@ describe('Wizard', function () {
       }
     }, _callee4);
   })));
+});
+var NarrowingSection = function NarrowingSection() {
+  var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch.setHeaderData;
+  (0, _element.useLayoutEffect)(function () {
+    setHeaderData({
+      fullWidth: false
+    });
+  }, [setHeaderData]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "Narrowing section"
+  });
+};
+var RecoveringSection = function RecoveringSection() {
+  var _useDispatch2 = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch2.setHeaderData;
+  var _useState = (0, _element.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    failed = _useState2[0],
+    setFailed = _useState2[1];
+  (0, _element.useLayoutEffect)(function () {
+    setHeaderData({
+      fullWidth: failed ? false : undefined
+    });
+  }, [setHeaderData, failed]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    onClick: function onClick() {
+      return setFailed(false);
+    },
+    children: "Retry"
+  });
+};
+
+// Two sections, because that is what mounts ResetHeaderData: a single-section
+// wizard never exercises the reset these overrides have to survive.
+var widthSections = function widthSections(renderSection) {
+  return [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    fullWidth: true,
+    render: renderSection
+  }, {
+    label: 'Other',
+    path: '/other',
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Other section"
+      });
+    }
+  }];
+};
+describe('Wizard content width', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+  });
+  it('renders full-width when the section declares it and nothing overrides it', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _render, container, _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: "List content"
+              });
+            })
+          })), container = _render.container;
+          _t5 = expect;
+          _context5.n = 1;
+          return _react.screen.findByText('List content');
+        case 1:
+          _t5(_context5.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  })));
+  it('falls back to the standard width when a section overrides fullWidth before paint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var _render2, container, _t6;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(NarrowingSection, {});
+            })
+          })), container = _render2.container;
+          _t6 = expect;
+          _context6.n = 1;
+          return _react.screen.findByText('Narrowing section');
+        case 1:
+          _t6(_context6.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  })));
+  it('restores the declared width when the section clears its override', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee7() {
+    var _render3, container, retry;
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
+        case 0:
+          _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(RecoveringSection, {});
+            })
+          })), container = _render3.container;
+          _context7.n = 1;
+          return _react.screen.findByRole('button', {
+            name: 'Retry'
+          });
+        case 1:
+          retry = _context7.v;
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+          _react.fireEvent.click(retry);
+          _context7.n = 2;
+          return (0, _react.waitFor)(function () {
+            return expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+          });
+        case 2:
+          return _context7.a(2);
+      }
+    }, _callee7);
+  })));
+  it('keeps a section header published from a layout effect through the mount reset', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee8() {
+    var _t7;
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(NarrowingSection, {});
+            })
+          }));
+          _t7 = expect;
+          _context8.n = 1;
+          return _react.screen.findByText('Narrowing section');
+        case 1:
+          _t7(_context8.v).toBeInTheDocument();
+          expect((0, _data.select)(_store.WIZARD_STORE_NAMESPACE).getHeaderData().fullWidth).toBe(false);
+        case 2:
+          return _context8.a(2);
+      }
+    }, _callee8);
+  })));
 });

package/dist/cjs/wizard/store/index.js

@@ -23,6 +23,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var WIZARD_STORE_NAMESPACE = exports.WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 var DEFAULT_STATE = {
+  // `fullWidth` is deliberately absent: a default here would narrow every
+  // full-width section on reset, since Wizard only falls back when it is unset.
   headerData: {
     actions: [],
     backNav: '',

package/dist/esm/action-card/index.js

@@ -9,8 +9,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * WordPress dependencies
  */
-import { Draggable, ExternalLink, ToggleControl } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { Draggable, ExternalLink, Notice, ToggleControl } from '@wordpress/components';
+import { RawHTML, useEffect, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icons';
 import { Badge } from '@wordpress/ui';
@@ -18,20 +19,90 @@ import { Badge } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
+import { Button, Card, Grid, Handoff, Waiting } from '../';
 import './style.scss';
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var NOTIFICATION_LEVELS = ['error', 'info', 'success', 'warning'];
+
+/**
+ * Collect a notification's text, including text nested inside React elements.
+ *
+ * Segments join with a space so that adjacent elements do not weld together: by the
+ * time speak() sees this string the markup that separated them is already gone.
+ *
+ * @param {*} value Notification content.
+ * @return {string} The collected text.
+ */
+var _getNotificationText = function getNotificationText(value) {
+  var _value$props;
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (value instanceof Error) {
+    return value.message;
+  }
+  if (Array.isArray(value)) {
+    return value.map(_getNotificationText).join(' ');
+  }
+  return (value === null || value === void 0 || (_value$props = value.props) === null || _value$props === void 0 ? void 0 : _value$props.children) === undefined ? '' : _getNotificationText(value.props.children);
+};
+
+/**
+ * Derive a plain-text announcement from a notification.
+ *
+ * Notice defaults spokenMessage to its children and runs renderToString over them
+ * during render, which corrupts the hook dispatcher when those children are
+ * components. A notification can be any element, so the announcement is always
+ * built from its text instead of letting that default apply. Tags in an HTML
+ * notification stay in, since speak() strips them itself. Entities are decoded so
+ * the announcement matches the text on screen, which getNotificationContent decodes
+ * for the same reason.
+ *
+ * @param {*} notification Notification content.
+ * @return {string} Message to announce.
+ */
+var getSpokenNotification = function getSpokenNotification(notification) {
+  return decodeEntities(_getNotificationText(notification)).replace(/\s+/g, ' ').trim();
+};
+
+/**
+ * Decode a notification's own text for display.
+ *
+ * React does not decode entities in text children, and notification text is often
+ * server-sourced, so a message carrying `&#8217;` would otherwise show the entity
+ * and announce the character. The HTML branch is left alone: there the browser's
+ * parser decodes as it renders.
+ *
+ * @param {*} value Notification content.
+ * @return {*} The content, with its own strings decoded.
+ */
+var _getNotificationContent = function getNotificationContent(value) {
+  if (value instanceof Error) {
+    return decodeEntities(value.message);
+  }
+  if (typeof value === 'string') {
+    return decodeEntities(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(_getNotificationContent);
+  }
+  return value;
+};
 
 /**
  * ActionCard component
+ *
  * @param {ActionCardProps} props Component props.
  * @return {JSX.Element} ActionCard component.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var ActionCard = function ActionCard(_ref) {
   var badges = _ref.badges,
     className = _ref.className,
@@ -125,6 +196,7 @@ var ActionCard = function ActionCard(_ref) {
     }
   }, [collapse]);
   var hasChildren = notification || children;
+  var notificationContent = _getNotificationContent(notification);
   var classes = classnames('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
   var backgroundImageStyles = function backgroundImageStyles(url) {
     return url ? {
@@ -248,24 +320,17 @@ var ActionCard = function ActionCard(_ref) {
           width: 24
         })
       })]
-    }), notification && /*#__PURE__*/_jsxs("div", {
+    }), notification && NOTIFICATION_LEVELS.includes(notificationLevel) && /*#__PURE__*/_jsx("div", {
       className: "newspack-action-card__notification newspack-action-card__region-children",
-      children: ['error' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isError: true,
-        rawHTML: notificationHTML
-      }), 'info' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        rawHTML: notificationHTML
-      }), 'success' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isSuccess: true,
-        rawHTML: notificationHTML
-      }), 'warning' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isWarning: true,
-        rawHTML: notificationHTML
-      })]
+      children: /*#__PURE__*/_jsx(Notice, {
+        status: notificationLevel,
+        isDismissible: false,
+        spokenMessage: getSpokenNotification(notification),
+        children: notificationHTML && typeof notification === 'string' ? /*#__PURE__*/_jsx(RawHTML, {
+          className: "newspack-action-card__notification-html",
+          children: notification
+        }) : notificationContent
+      })
     }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/_jsx("div", {
       className: "newspack-action-card__region-children",
       children: children

package/dist/esm/action-card/index.test.js

@@ -1,12 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies.
+ */
+import { speak } from '@wordpress/a11y';
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
 import ActionCard from './index';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@wordpress/a11y', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('@wordpress/a11y')), {}, {
+    speak: jest.fn()
+  });
+});
 
 /**
  * The library Badge styles its wrapper rather than its text, so a badge with no label
@@ -15,7 +31,6 @@ import ActionCard from './index';
  * can sit on a placement with no entry in the placement map — and an array literal is
  * always non-empty, so the component has to drop those itself.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 describe('ActionCard badges', function () {
   var badgeText = function badgeText() {
     return screen.queryAllByText(function (_, node) {
@@ -86,4 +101,180 @@ describe('ActionCard badges', function () {
     // An empty array used to fall through as a literal `0` in the heading.
     expect(withEmptyArray.textContent).not.toContain('0');
   });
+});
+
+/**
+ * ActionCard derives the notice's spoken message rather than letting core default it to
+ * the children. Core runs `renderToString` over that default during render, which corrupts
+ * the hook dispatcher when the children are components — so the derivation is what keeps a
+ * notification carrying a `<Button>` from crashing the card on a later re-render.
+ */
+describe('ActionCard notifications', function () {
+  beforeEach(function () {
+    speak.mockClear();
+  });
+  var spoken = function spoken() {
+    return speak.mock.calls.map(function (call) {
+      return call[0];
+    });
+  };
+  it('renders a notice for a recognised level', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Plugin cannot be installed",
+        notificationLevel: "error"
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
+  it('renders no notice for an unrecognised or absent level', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Something happened",
+        notificationLevel: "critical"
+      })),
+      unknown = _render6.container;
+    expect(unknown.querySelector('.components-notice')).not.toBeInTheDocument();
+    var _render7 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Something happened"
+      })),
+      absent = _render7.container;
+    expect(absent.querySelector('.components-notice')).not.toBeInTheDocument();
+  });
+  it('announces the text inside an element-only notification', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [/*#__PURE__*/_jsx("button", {
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()).toContain('Click here to connect your account.');
+  });
+  it('announces strings and element text together', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "success",
+      notification: ['Created custom targeting keys: ',
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      _jsx("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard")]
+    }));
+    expect(spoken()).toContain('Created custom targeting keys: Visit your GAM dashboard');
+  });
+  it('announces an Error and renders its message rather than throwing', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: new Error('Network unreachable')
+    }));
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(spoken()).toContain('Network unreachable');
+  });
+  it('renders HTML notifications in their own wrapper and hands speak() the tags to strip', function () {
+    var _render8 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: '<p>Install failed.</p><p>Try again.</p>',
+        notificationHTML: true
+      })),
+      container = _render8.container;
+    expect(container.querySelectorAll('.newspack-action-card__notification-html > p')).toHaveLength(2);
+    expect(spoken()[0]).toContain('<p>Install failed.</p>');
+  });
+  it('decodes entities in both the announcement and the visible text', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: 'Plugin &#8220;Foo&#8221; could not be activated'
+    }));
+    expect(screen.getByText('Plugin “Foo” could not be activated')).toBeInTheDocument();
+    expect(spoken()[0]).toContain('“Foo”');
+  });
+  it('decodes entities inside an array of notification parts', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: ['Could not reach the publisher&#8217;s network.', ' ']
+    }));
+    expect(screen.getByText(/Could not reach the publisher’s network\./)).toBeInTheDocument();
+    expect(spoken()[0]).toContain('publisher’s');
+  });
+  it('leaves entity decoding to the browser on the HTML branch', function () {
+    var _render9 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: 'Get it from <a href="https://example.org">the plugin&#8217;s site</a>',
+        notificationHTML: true
+      })),
+      container = _render9.container;
+    expect(container.querySelector('.newspack-action-card__notification-html a').textContent).toBe('the plugin’s site');
+    expect(spoken()[0]).toContain('plugin’s site');
+  });
+  it('renders a non-string notification as children even when notificationHTML is set', function () {
+    var _render0 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: /*#__PURE__*/_jsx("span", {
+          children: "Network unreachable"
+        }),
+        notificationHTML: true
+      })),
+      container = _render0.container;
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-action-card__notification-html')).not.toBeInTheDocument();
+  });
+  it('keeps adjacent element texts apart in the announcement', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      _jsx("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard"), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()[0]).toBe('Visit your GAM dashboard Click here to connect your account.');
+  });
+  it('survives a re-render that changes how many hooked components the notification holds', function () {
+    var HookedAction = function HookedAction(_ref) {
+      var children = _ref.children;
+      var _useState = useState(children),
+        _useState2 = _slicedToArray(_useState, 1),
+        label = _useState2[0];
+      return /*#__PURE__*/_jsx("button", {
+        type: "button",
+        children: label
+      });
+    };
+    var card = function card(notification) {
+      return /*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: notification
+      });
+    };
+    var _render1 = render(card([/*#__PURE__*/_jsx(HookedAction, {
+        children: "Retry"
+      }, "retry"), /*#__PURE__*/_jsx(HookedAction, {
+        children: "Documentation"
+      }, "docs")])),
+      rerender = _render1.rerender,
+      container = _render1.container;
+    expect(function () {
+      return rerender(card([/*#__PURE__*/_jsx(HookedAction, {
+        children: "Retry"
+      }, "retry")]));
+    }).not.toThrow();
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
 });

package/dist/esm/action-card/style.scss

@@ -339,18 +339,12 @@
 
 	/* Notifications */
 	.newspack-action-card__notification {
-		.newspack-notice {
+		.components-notice {
 			margin: 0;
-
-			&__heading {
-				margin-top: 0;
-			}
 		}
 
-		&.newspack-action-card__region-children {
-			.newspack-notice {
-				margin-top: 32px;
-			}
+		.newspack-action-card__notification-html > * {
+			margin: 0;
 		}
 	}