newspack-components 4.8.0 → 4.8.1-alpha.1

package/dist/cjs/empty-state/index.test.js

@@ -53,17 +53,30 @@ describe('EmptyState.Root', function () {
       gap: 'var(--wpds-dimension-gap-2xl, 32px)'
     });
   });
+  it('tightens the stack gap when small', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        size: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render4.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-xl, 24px)'
+    });
+  });
 
   // Consumers key `:has()` selectors off this class, so losing it changes their
   // layout without failing anything.
   it('merges className onto the grid', function () {
-    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         className: "consumer-empty-state",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: "body"
         })
       })),
-      container = _render4.container;
+      container = _render5.container;
     expect(container.querySelector('.newspack-empty-state')).toHaveClass('consumer-empty-state');
   });
 
@@ -80,13 +93,13 @@ describe('EmptyState.Root', function () {
 });
 describe('EmptyState.Header', function () {
   it('renders the title and description in the header', function () {
-    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters",
           description: "Compose and send."
         })
       })),
-      container = _render5.container;
+      container = _render6.container;
     expect(container.querySelector('.newspack-empty-state__title')).toHaveTextContent('Get started with newsletters');
     expect(container.querySelector('.newspack-empty-state__description')).toHaveTextContent('Compose and send.');
   });
@@ -94,13 +107,13 @@ describe('EmptyState.Header', function () {
   // Spacing comes from the stacks, so a margin creeping back onto the heading or
   // paragraph would silently widen every gap.
   it('spaces the header from its stacks rather than from margins', function () {
-    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters",
           description: "Compose and send."
         })
       })),
-      container = _render6.container;
+      container = _render7.container;
     var header = container.querySelector('.newspack-empty-state__header');
     expect(header).toHaveStyle({
       flexDirection: 'column',
@@ -114,33 +127,33 @@ describe('EmptyState.Header', function () {
     });
   });
   it('wraps the icon in the disc', function () {
-    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
         })
       })),
-      container = _render7.container;
+      container = _render8.container;
     expect(container.querySelector('.newspack-empty-state__icon svg')).toBeInTheDocument();
   });
   it('omits the description and the icon when they are not given', function () {
-    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters"
         })
       })),
-      container = _render8.container;
+      container = _render9.container;
     expect(container.querySelector('.newspack-empty-state__description')).not.toBeInTheDocument();
     expect(container.querySelector('.newspack-empty-state__icon')).not.toBeInTheDocument();
   });
   it('renders an h2 and a 48px icon at the default size', function () {
-    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
         })
       })),
-      container = _render9.container;
+      container = _render0.container;
     expect(_react.screen.getByRole('heading', {
       level: 2,
       name: 'Get started with newsletters'
@@ -149,14 +162,14 @@ describe('EmptyState.Header', function () {
     expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '48');
   });
   it('drops to an h3, the small modifier and a 24px icon when the root is small', function () {
-    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         size: "small",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "No products match this rule",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
         })
       })),
-      container = _render0.container;
+      container = _render1.container;
     expect(container.querySelector('.newspack-empty-state__header--small')).toBeInTheDocument();
     expect(_react.screen.getByRole('heading', {
       level: 3,
@@ -181,13 +194,13 @@ describe('EmptyState.Header', function () {
     })).toBeInTheDocument();
   });
   it('carries its own class hook alongside any className', function () {
-    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters",
           className: "consumer-header"
         })
       })),
-      container = _render1.container;
+      container = _render10.container;
     var header = container.querySelector('.newspack-empty-state__header');
     expect(header).toBeInTheDocument();
     expect(header).toHaveClass('consumer-header');
@@ -211,11 +224,11 @@ describe('EmptyState.Header', function () {
     var previous = process.env.NODE_ENV;
     process.env.NODE_ENV = 'production';
     try {
-      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+      var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Orphan",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
         })),
-        container = _render10.container;
+        container = _render11.container;
       expect(_react.screen.getByRole('heading', {
         level: 2,
         name: 'Orphan'
@@ -229,7 +242,7 @@ describe('EmptyState.Header', function () {
 });
 describe('EmptyState.Actions', function () {
   it('renders its children in a centred row', function () {
-    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             type: "button",
@@ -237,7 +250,7 @@ describe('EmptyState.Actions', function () {
           })
         })
       })),
-      container = _render11.container;
+      container = _render12.container;
     expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
     expect(container.querySelector('.newspack-empty-state__actions')).toHaveStyle({
       justifyContent: 'center',
@@ -248,7 +261,7 @@ describe('EmptyState.Actions', function () {
     })).toBeInTheDocument();
   });
   it('stacks into a column while keeping the hook class', function () {
-    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Actions, {
           orientation: "column",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -260,7 +273,7 @@ describe('EmptyState.Actions', function () {
           })]
         })
       })),
-      container = _render12.container;
+      container = _render13.container;
     var actions = container.querySelector('.newspack-empty-state__actions');
     expect(actions).toBeInTheDocument();
     expect(actions).toHaveStyle({
@@ -291,10 +304,10 @@ describe('EmptyState.Actions', function () {
     var previous = process.env.NODE_ENV;
     process.env.NODE_ENV = 'production';
     try {
-      var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
+      var _render14 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
           children: "x"
         })),
-        container = _render13.container;
+        container = _render14.container;
       expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
     } finally {
       process.env.NODE_ENV = previous;

package/dist/cjs/empty-state/root.js

@@ -37,6 +37,7 @@ var Root = function Root(_ref) {
       size: size
     };
   }, [size]);
+  var isSmall = size === 'small';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.EmptyStateContext.Provider, {
     value: context,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid["default"], {
@@ -46,7 +47,7 @@ var Root = function Root(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, _objectSpread(_objectSpread({
         className: "newspack-empty-state__stack",
         direction: "column",
-        gap: "2xl"
+        gap: isSmall ? 'xl' : '2xl'
       }, gridColumn), {}, {
         children: children
       }))

package/dist/cjs/footer/index.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _useConfirmDialog = _interopRequireDefault(require("../hooks/use-confirm-dialog"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -39,6 +41,18 @@ var Footer = function Footer(_ref) {
     _ref2$remove_starter_ = _ref2.remove_starter_content,
     removeStarterContent = _ref2$remove_starter_ === void 0 ? false : _ref2$remove_starter_,
     supportEmail = _ref2.support_email;
+  var resetDialog = (0, _useConfirmDialog["default"])({
+    title: (0, _i18n.__)('Reset Newspack?', 'newspack-plugin'),
+    message: (0, _i18n.__)('This deletes the Newspack settings on this site and returns you to the setup wizard. Your posts, pages and users are not affected. This cannot be undone.', 'newspack-plugin'),
+    confirmButtonText: (0, _i18n.__)('Reset Newspack', 'newspack-plugin'),
+    isDestructive: true
+  });
+  var starterContentDialog = (0, _useConfirmDialog["default"])({
+    title: (0, _i18n.__)('Remove Starter Content?', 'newspack-plugin'),
+    message: (0, _i18n.__)('This deletes the posts, pages and categories created as starter content. This cannot be undone.', 'newspack-plugin'),
+    confirmButtonText: (0, _i18n.__)('Remove Starter Content', 'newspack-plugin'),
+    isDestructive: true
+  });
   var footerElements = [{
     label: pluginVersion.label,
     url: 'https://newspack.com/category/release-notes/',
@@ -67,13 +81,15 @@ var Footer = function Footer(_ref) {
   if (resetUrl) {
     footerElements.push({
       label: (0, _i18n.__)('Reset Newspack', 'newspack-plugin'),
-      url: resetUrl
+      url: resetUrl,
+      confirm: resetDialog.requestConfirm
     });
   }
   if (removeStarterContent) {
     footerElements.push({
       label: (0, _i18n.__)('Remove Starter Content', 'newspack-plugin'),
-      url: removeStarterContent
+      url: removeStarterContent,
+      confirm: starterContentDialog.requestConfirm
     });
   }
   if (supportEmail) {
@@ -82,24 +98,44 @@ var Footer = function Footer(_ref) {
       url: "mailto:".concat(supportEmail)
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  var renderItem = function renderItem(_ref3) {
+    var url = _ref3.url,
+      label = _ref3.label,
+      external = _ref3.external,
+      confirm = _ref3.confirm;
+    if (external) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
+        href: url,
+        children: label
+      });
+    }
+    if (!confirm) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: url,
+        children: label
+      });
+    }
+    // onClick only sees primary clicks, so an href here would let a middle-click
+    // or "Open link in new tab" reach the URL unguarded.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: function onClick() {
+        return confirm(function () {
+          window.location.href = url;
+        });
+      },
+      children: label
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "newspack-footer",
-    children: !simple && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: footerElements.map(function (_ref3, index) {
-        var url = _ref3.url,
-          label = _ref3.label,
-          external = _ref3.external;
+    children: [!simple && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: footerElements.map(function (element, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: external ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-            href: url,
-            children: label
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-            href: url,
-            children: label
-          })
+          children: renderItem(element)
         }, index);
       })
-    })
+    }), resetDialog.confirmDialog, starterContentDialog.confirmDialog]
   });
 };
 var _default = exports["default"] = Footer;

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

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("./"));
+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); } /**
+ * External dependencies.
+ */ /**
+ * Internal dependencies.
+ */ // Footer renders outside the wizard's HashRouter, so there is no MemoryRouter
+// wrapper here on purpose.
+describe('Footer', function () {
+  var RESET_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=reset';
+  var STARTER_CONTENT_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=starter-content';
+  var assigned;
+  var originalLocation;
+  var originalUrls;
+  var confirmIn = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee(name) {
+      var _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _t = _react.within;
+            _context.n = 1;
+            return _react.screen.findByRole('dialog');
+          case 1:
+            return _context.a(2, _t(_context.v).getByRole('button', {
+              name: name
+            }));
+        }
+      }, _callee);
+    }));
+    return function confirmIn(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  beforeEach(function () {
+    assigned = [];
+    originalLocation = window.location;
+    originalUrls = window.newspack_urls;
+    delete window.location;
+    window.location = {
+      get href() {
+        return 'https://example.test/wp-admin/admin.php?page=newspack-dashboard';
+      },
+      set href(value) {
+        assigned.push(value);
+      }
+    };
+    window.newspack_urls = {
+      support: 'https://help.newspack.com/',
+      reset_url: RESET_URL,
+      remove_starter_content: STARTER_CONTENT_URL,
+      plugin_version: {
+        label: 'Newspack 1.0.0'
+      }
+    };
+  });
+  afterEach(function () {
+    delete window.location;
+    window.location = originalLocation;
+    if (undefined === originalUrls) {
+      delete window.newspack_urls;
+    } else {
+      window.newspack_urls = originalUrls;
+    }
+  });
+  it('offers no link for a browser gesture to follow', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    expect(_react.screen.getByRole('button', {
+      name: 'Reset Newspack'
+    })).not.toHaveAttribute('href');
+    expect(_react.screen.getByRole('button', {
+      name: 'Remove Starter Content'
+    })).not.toHaveAttribute('href');
+  });
+  it('does not reset on the first click', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Reset Newspack'
+    }));
+    expect(assigned).toEqual([]);
+  });
+  it('asks before resetting', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'Reset Newspack'
+          }));
+          _t2 = expect;
+          _context2.n = 1;
+          return _react.screen.findByText(/deletes the Newspack settings/);
+        case 1:
+          _t2(_context2.v).toBeInTheDocument();
+        case 2:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('leaves the site alone when the reset is cancelled', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var cancel;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'Reset Newspack'
+          }));
+          // The modal's close icon also carries aria-label="Cancel"; this is the text button.
+          _context3.n = 1;
+          return _react.screen.findAllByRole('button', {
+            name: 'Cancel'
+          });
+        case 1:
+          cancel = _context3.v.find(function (button) {
+            return 'Cancel' === button.textContent;
+          });
+          _react.fireEvent.click(cancel);
+          expect(assigned).toEqual([]);
+        case 2:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('resets once confirmed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var _t3;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'Reset Newspack'
+          }));
+          _t3 = _react.fireEvent;
+          _context4.n = 1;
+          return confirmIn('Reset Newspack');
+        case 1:
+          _t3.click.call(_t3, _context4.v);
+          expect(assigned).toEqual([RESET_URL]);
+        case 2:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+  it('does not remove the starter content on the first click', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Remove Starter Content'
+    }));
+    expect(assigned).toEqual([]);
+  });
+  it('asks before removing the starter content', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _t4;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'Remove Starter Content'
+          }));
+          _t4 = expect;
+          _context5.n = 1;
+          return _react.screen.findByText(/created as starter content/);
+        case 1:
+          _t4(_context5.v).toBeInTheDocument();
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  })));
+  it('removes the starter content once confirmed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var _t5;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+          _react.fireEvent.click(_react.screen.getByRole('button', {
+            name: 'Remove Starter Content'
+          }));
+          _t5 = _react.fireEvent;
+          _context6.n = 1;
+          return confirmIn('Remove Starter Content');
+        case 1:
+          _t5.click.call(_t5, _context6.v);
+          expect(assigned).toEqual([STARTER_CONTENT_URL]);
+        case 2:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  })));
+  it('does not guard the non-destructive links', function () {
+    window.newspack_urls.setup_wizard = 'https://example.test/wp-admin/admin.php?page=newspack-setup-wizard';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    var link = _react.screen.getByRole('link', {
+      name: 'Setup Wizard'
+    });
+    expect(link).toHaveAttribute('href', window.newspack_urls.setup_wizard);
+    _react.fireEvent.click(link);
+    expect(_react.screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

package/dist/cjs/footer/style.scss

@@ -2,6 +2,7 @@
  * Footer
  */
 
+@use "../mixins" as mixins;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
@@ -31,7 +32,8 @@
 	li {
 		margin: 8px;
 
-		a {
+		a,
+		button {
 			align-items: flex-end;
 			color: inherit;
 			display: flex;
@@ -42,5 +44,19 @@
 				color: wp-colors.$gray-900;
 			}
 		}
+
+		button {
+			appearance: none;
+			background: none;
+			border: 0;
+			cursor: pointer;
+			font: inherit;
+			padding: 0;
+			text-decoration: underline;
+
+			&:focus-visible {
+				@include mixins.wpds-focus-ring;
+			}
+		}
 	}
 }

package/dist/cjs/index.js

@@ -112,6 +112,12 @@ Object.defineProperty(exports, "DataViews", {
     return _dataviews["default"];
   }
 });
+Object.defineProperty(exports, "DebugBadge", {
+  enumerable: true,
+  get: function get() {
+    return _debugBadge["default"];
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function get() {
@@ -414,6 +420,7 @@ var _colorPicker = _interopRequireDefault(require("./color-picker"));
 var _confirmDialog = _interopRequireDefault(require("./confirm-dialog"));
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
 var _dataviews = _interopRequireDefault(require("./dataviews"));
+var _debugBadge = _interopRequireDefault(require("./debug-badge"));
 var _divider = _interopRequireDefault(require("./divider"));
 var _drawer = _interopRequireDefault(require("./drawer"));
 var _emptyState = _interopRequireDefault(require("./empty-state"));

package/dist/cjs/notice/index.js

@@ -40,7 +40,6 @@ var Notice = /*#__PURE__*/function (_Component) {
     function render() {
       var _this$props = this.props,
         className = _this$props.className,
-        debugMode = _this$props.debugMode,
         isError = _this$props.isError,
         isHandoff = _this$props.isHandoff,
         isHelp = _this$props.isHelp,
@@ -52,14 +51,12 @@ var Notice = /*#__PURE__*/function (_Component) {
         style = _this$props$style === void 0 ? {} : _this$props$style,
         _this$props$children = _this$props.children,
         children = _this$props$children === void 0 ? null : _this$props$children;
-      var classes = (0, _classnames["default"])('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+      var classes = (0, _classnames["default"])('newspack-notice', className, isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
       var noticeIcon;
       if (isHelp) {
         noticeIcon = _icons.help;
       } else if (isSuccess) {
         noticeIcon = _icons.check;
-      } else if (debugMode) {
-        noticeIcon = _icons.bug;
       } else {
         noticeIcon = _icons.info;
       }

package/dist/cjs/notice/style.scss

@@ -22,25 +22,6 @@
 		margin-right: 4px;
 	}
 
-	&__is-debug {
-		background: np-colors.$primary-600;
-		border-radius: 50%;
-		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		color: white;
-		font-weight: bold;
-		margin: 0 16px;
-		padding: 6px;
-		position: fixed;
-		text-transform: uppercase;
-		z-index: 9997;
-
-		> svg {
-			fill: white;
-			margin: 0;
-		}
-	}
-
 	&__is-error {
 		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 

package/dist/cjs/plugin-toggle/index.js

@@ -207,7 +207,7 @@ var PluginToggle = /*#__PURE__*/function (_Component) {
             return _this2.managePlugin(slug, value);
           },
           notification: error,
-          notificationHTML: error,
+          notificationHTML: true,
           notificationLevel: "error"
         }, index);
       });

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

@@ -115,9 +115,7 @@ function withWizardScreen(WrappedComponent) {
         }];
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          debugMode: true
-        }), hideHeader ?
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.DebugBadge, {}), hideHeader ?
         /*#__PURE__*/
         // Without the Page shell the tabs still own the content: it
         // renders inside the active tab's panel.