newspack-components 4.8.1-alpha.1 → 4.9.0

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

@@ -197,4 +197,21 @@ describe('appendSectionName', function () {
       label: 'Access Control'
     }]);
   });
+});
+describe('activeSection', function () {
+  var sections = [{
+    path: '/settings',
+    exact: true,
+    subHeaderText: 'Intro'
+  }, {
+    path: '/settings/:integrationId'
+  }];
+  it('returns the section matching the route', function () {
+    expect((0, _breadcrumbsSelect.activeSection)(sections, '/settings/esp')).toBe(sections[1]);
+    expect((0, _breadcrumbsSelect.activeSection)(sections, '/settings').subHeaderText).toBe('Intro');
+  });
+  it('falls back to the first section, or nothing without sections', function () {
+    expect((0, _breadcrumbsSelect.activeSection)(sections, '/unknown')).toBe(sections[0]);
+    expect((0, _breadcrumbsSelect.activeSection)([], '/settings')).toBeUndefined();
+  });
 });

package/dist/cjs/wizard/index.js

@@ -22,7 +22,10 @@ var _WizardError = _interopRequireDefault(require("./components/WizardError"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } /**
+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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /**
  * External dependencies.
  */ /**
  * WordPress dependencies.
@@ -58,6 +61,7 @@ var HashRouter = _router["default"].HashRouter,
   Redirect = _router["default"].Redirect,
   Route = _router["default"].Route,
   Switch = _router["default"].Switch,
+  matchPath = _router["default"].matchPath,
   useLocation = _router["default"].useLocation;
 
 /**
@@ -110,16 +114,46 @@ var ResetHeaderData = function ResetHeaderData() {
  * can read the current route and derive the active-tab breadcrumb.
  */
 var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
+  var _activeSection;
   var hideHeader = _ref.hideHeader,
     headerText = _ref.headerText,
     sections = _ref.sections,
     sectionName = _ref.sectionName,
     subTitle = _ref.subTitle,
     actions = _ref.actions,
-    tabbedNavigation = _ref.tabbedNavigation,
+    wizardTabbedNavigation = _ref.tabbedNavigation,
     children = _ref.children;
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
+
+  // A section can carry its own tabs, built from its route params, in place of
+  // the wizard's. The first match wins, as it does in the wizard's `<Switch>`.
+  var tabbedNavigation = wizardTabbedNavigation;
+  var _iterator = _createForOfIteratorHelper(sections),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _section$exact;
+      var section = _step.value;
+      var match = matchPath(pathname, {
+        path: section.path,
+        exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false
+      });
+      if (match) {
+        if (typeof section.tabbedNavigation === 'function') {
+          tabbedNavigation = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+            items: section.tabbedNavigation(match.params),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {})
+          });
+        }
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
   if (hideHeader) {
     // Without the Page shell the tabs still own the content: it renders
     // inside the active tab's panel.
@@ -139,9 +173,10 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
   // Append any render-time leaf crumb(s) the section supplied via
   // headerData.sectionName (deduped against the current trailing label).
   breadcrumbItems = (0, _breadcrumbsSelect.appendSectionName)(breadcrumbItems, sectionName);
+  var sectionSubTitle = (_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.subHeaderText;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
     breadcrumbItems: breadcrumbItems,
-    subTitle: subTitle,
+    subTitle: sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle,
     actions: actions,
     tabbedNavigation: tabbedNavigation,
     children: children
@@ -154,7 +189,8 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
  * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
@@ -332,11 +368,11 @@ var Wizard = function Wizard(_ref2, ref) {
         bubblesVirtually: true
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
         children: [routedSections.map(function (section, index) {
-          var _section$exact;
+          var _section$exact2;
           var SectionComponent = section.render;
           var sectionProps = section.props || {};
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
-            exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
+            exact: (_section$exact2 = section.exact) !== null && _section$exact2 !== void 0 ? _section$exact2 : false,
             path: section.path,
             render: function render(routerProps) {
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -402,4 +402,150 @@ describe('Wizard content width', function () {
       }
     }, _callee8);
   })));
+});
+describe('Wizard section tabs', function () {
+  var sections = [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "List content"
+      });
+    }
+  }, {
+    path: '/items/:itemId/logs/:tab?',
+    isHidden: true,
+    render: function render() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Logs content"
+      });
+    },
+    tabbedNavigation: function tabbedNavigation(_ref10) {
+      var itemId = _ref10.itemId;
+      return [{
+        label: 'First Tab',
+        path: "/items/".concat(itemId, "/logs"),
+        exact: true
+      }, {
+        label: 'Second Tab',
+        path: "/items/".concat(itemId, "/logs/second"),
+        exact: true
+      }];
+    }
+  }];
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+  });
+  afterEach(function () {
+    window.location.hash = '';
+  });
+  it('shows the tabs a section builds from its route params while it matches', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee9() {
+    var _t8;
+    return _regenerator().w(function (_context9) {
+      while (1) switch (_context9.n) {
+        case 0:
+          window.location.hash = '#/items/42/logs/second';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t8 = expect;
+          _context9.n = 1;
+          return _react.screen.findByText('Logs content');
+        case 1:
+          _t8(_context9.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'First Tab'
+          })).toHaveAttribute('href', '#/items/42/logs');
+          expect(_react.screen.getByRole('tab', {
+            name: 'Second Tab'
+          })).toHaveAttribute('aria-selected', 'true');
+        case 2:
+          return _context9.a(2);
+      }
+    }, _callee9);
+  })));
+  it('leaves the tabs out on a route the section does not match', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee0() {
+    var _t9;
+    return _regenerator().w(function (_context0) {
+      while (1) switch (_context0.n) {
+        case 0:
+          window.location.hash = '#/';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: sections
+          }));
+          _t9 = expect;
+          _context0.n = 1;
+          return _react.screen.findByText('List content');
+        case 1:
+          _t9(_context0.v).toBeInTheDocument();
+          expect(_react.screen.queryByRole('tab')).toBeNull();
+        case 2:
+          return _context0.a(2);
+      }
+    }, _callee0);
+  })));
+});
+describe('Wizard section subtitle', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+    _apiFetch["default"].mockResolvedValue({});
+  });
+  it("shows the active section's subHeaderText in the header, falling back to the wizard's", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee1() {
+    var _render4, container, subtitle, _t0, _t1;
+    return _regenerator().w(function (_context1) {
+      while (1) switch (_context1.n) {
+        case 0:
+          window.location.hash = '#/list';
+          _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            subHeaderText: "Wizard intro",
+            sections: [{
+              label: 'List',
+              path: '/list',
+              exact: true,
+              subHeaderText: 'List intro',
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "List view"
+                });
+              }
+            }, {
+              label: 'Item',
+              path: '/list/:id',
+              isHidden: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "Item view"
+                });
+              }
+            }]
+          })), container = _render4.container;
+          subtitle = function subtitle() {
+            var _container$querySelec;
+            return (_container$querySelec = container.querySelector('.newspack-page__header-subtitle')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.textContent;
+          };
+          _t0 = expect;
+          _context1.n = 1;
+          return _react.screen.findByText('List view');
+        case 1:
+          _t0(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('List intro');
+          (0, _react.act)(function () {
+            window.location.hash = '#/list/esp';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t1 = expect;
+          _context1.n = 2;
+          return _react.screen.findByText('Item view');
+        case 2:
+          _t1(_context1.v).toBeInTheDocument();
+          expect(subtitle()).toBe('Wizard intro');
+        case 3:
+          return _context1.a(2);
+      }
+    }, _callee1);
+  })));
 });

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { createElement, isValidElement } from '@wordpress/element';
+import { createElement, isValidElement, useCallback, useEffect, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
@@ -72,6 +72,30 @@ var _CardFeature = function CardFeature(_ref) {
   // translators: %1$s: the button's visible action label, e.g. "Enable". %2$s: the feature's name. The visible label must stay first (WCAG 2.5.3).
   _x('%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin'), buttonLabel, title);
   var showMoreControls = enabled && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && (!requirements || requirementsActionable);
+  // A Configure button with nothing behind it would click to nowhere.
+  var showPrimaryButton = !isConfigureState || !!onConfigure;
+
+  // Enabling a feature with nothing to configure removes the button that was
+  // just used, so its focus goes to the More menu instead of the page. React
+  // detaches a ref before removing the node, which is the last point the
+  // button can still be read as focused.
+  var actionsRef = useRef(null);
+  var primaryButtonNode = useRef(null);
+  var primaryButtonLeftWithFocus = useRef(false);
+  var primaryButtonRef = useCallback(function (node) {
+    if (!node && primaryButtonNode.current) {
+      primaryButtonLeftWithFocus.current = primaryButtonNode.current === primaryButtonNode.current.ownerDocument.activeElement;
+    }
+    primaryButtonNode.current = node;
+  }, []);
+  useEffect(function () {
+    var _actionsRef$current;
+    if (showPrimaryButton || !primaryButtonLeftWithFocus.current) {
+      return;
+    }
+    primaryButtonLeftWithFocus.current = false;
+    (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 || (_actionsRef$current = _actionsRef$current.querySelector('.components-dropdown-menu__toggle')) === null || _actionsRef$current === void 0 || _actionsRef$current.focus();
+  }, [showPrimaryButton]);
   var handleButtonClick = function handleButtonClick() {
     if (isConfigureState) {
       onConfigure === null || onConfigure === void 0 || onConfigure();
@@ -81,8 +105,7 @@ var _CardFeature = function CardFeature(_ref) {
   };
   var iconDescriptor = icon && !isValidElement(icon) ? icon : null;
   var iconClasses = iconDescriptor ? classnames('newspack-card-feature__icon', {
-    'newspack-card-feature__icon--radius-small': !!iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
-    'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full'
+    'newspack-card-feature__icon--has-background': !!iconDescriptor.backgroundColor
   }) : undefined;
   var renderedIcon = null;
   if (isValidElement(icon)) {
@@ -129,10 +152,12 @@ var _CardFeature = function CardFeature(_ref) {
         gap: "sm",
         wrap: "wrap",
         children: [/*#__PURE__*/_jsxs(Stack, {
+          ref: actionsRef,
           direction: "row",
           align: "center",
           gap: "sm",
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [showPrimaryButton && /*#__PURE__*/_jsx(Button, {
+            ref: primaryButtonRef,
             variant: isConfigureState ? 'tertiary' : 'secondary',
             accessibleWhenDisabled: true,
             "aria-describedby": describedById,

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

@@ -95,7 +95,8 @@ describe('CardFeature', function () {
     it('names the feature in the configure state too', function () {
       render(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content Gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(screen.getByRole('button', {
         name: 'Configure Content Gifting'
@@ -164,6 +165,72 @@ describe('CardFeature', function () {
       expect(onConfigure).toHaveBeenCalledTimes(1);
       expect(onEnable).not.toHaveBeenCalled();
     });
+
+    // A button reading Configure with nothing behind it would click to nowhere.
+    it('drops the primary button once enabled when there is nothing to configure', function () {
+      render(/*#__PURE__*/_jsx(CardFeature, {
+        title: "Content gifting",
+        enabled: true,
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      }));
+      expect(screen.queryByRole('button', {
+        name: /Configure/
+      })).toBeNull();
+      expect(moreMenu()).toBeInTheDocument();
+    });
+
+    // Enabling removes the button that was just used; without a hand-off,
+    // keyboard focus falls to the page.
+    it('hands focus to the More menu when enabling removes the focused button', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render2 = render(/*#__PURE__*/_jsx(CardFeature, _objectSpread({}, props))),
+        rerender = _render2.rerender;
+      primaryButton().focus();
+      rerender(/*#__PURE__*/_jsx(CardFeature, _objectSpread(_objectSpread({}, props), {}, {
+        enabled: true
+      })));
+      expect(moreMenu()).toHaveFocus();
+    });
+    it('leaves focus alone when the removed button did not have it', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render3 = render(/*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CardFeature, _objectSpread({}, props)), /*#__PURE__*/_jsx("button", {
+            children: "Elsewhere"
+          })]
+        })),
+        rerender = _render3.rerender;
+      screen.getByRole('button', {
+        name: 'Elsewhere'
+      }).focus();
+      rerender(/*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(CardFeature, _objectSpread(_objectSpread({}, props), {}, {
+          enabled: true
+        })), /*#__PURE__*/_jsx("button", {
+          children: "Elsewhere"
+        })]
+      }));
+      expect(screen.getByRole('button', {
+        name: 'Elsewhere'
+      })).toHaveFocus();
+    });
     it('still routes to onEnable when enabled with an unmet requirement, since the button reads Enable', function () {
       var onEnable = jest.fn();
       var onConfigure = jest.fn();
@@ -221,18 +288,19 @@ describe('CardFeature', function () {
     it('leaves the enabled badge unlinked, since it explains nothing about the button', function () {
       render(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(primaryButton()).not.toHaveAttribute('aria-describedby');
     });
     it('disables the button while an action is in flight, even with an actionable requirement', function () {
       var onEnable = jest.fn();
-      var _render2 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render4 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           busy: true,
           onEnable: onEnable
         })),
-        rerender = _render2.rerender;
+        rerender = _render4.rerender;
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(primaryButton());
       expect(onEnable).not.toHaveBeenCalled();
@@ -246,12 +314,12 @@ describe('CardFeature', function () {
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
     });
     it('accepts custom labels for both states', function () {
-      var _render3 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render5 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Apple News",
           enableLabel: "Connect",
           configureLabel: "Manage connection"
         })),
-        rerender = _render3.rerender;
+        rerender = _render5.rerender;
       expect(screen.getByRole('button', {
         name: 'Connect Apple News'
       })).toBeInTheDocument();
@@ -259,7 +327,8 @@ describe('CardFeature', function () {
         title: "Apple News",
         enabled: true,
         enableLabel: "Connect",
-        configureLabel: "Manage connection"
+        configureLabel: "Manage connection",
+        onConfigure: function onConfigure() {}
       }));
       expect(screen.getByRole('button', {
         name: 'Manage connection Apple News'
@@ -268,10 +337,10 @@ describe('CardFeature', function () {
   });
   describe('badge', function () {
     it('shows nothing when off, and the enabled badge when on', function () {
-      var _render4 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render6 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting"
         })),
-        rerender = _render4.rerender;
+        rerender = _render6.rerender;
       expect(screen.queryByText('Enabled')).not.toBeInTheDocument();
       rerender(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
@@ -306,11 +375,11 @@ describe('CardFeature', function () {
       onClick: jest.fn()
     }];
     it('appears only when enabled and controls are supplied', function () {
-      var _render5 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render7 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           moreControls: controls
         })),
-        rerender = _render5.rerender;
+        rerender = _render7.rerender;
       expect(moreMenu()).not.toBeInTheDocument();
       rerender(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
@@ -325,14 +394,14 @@ describe('CardFeature', function () {
       expect(moreMenu()).toBeInTheDocument();
     });
     it('stays available on an actionable requirement and hides on a locked one', function () {
-      var _render6 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render8 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           enabled: true,
           requirements: "Requires metering",
           requirementsActionable: true,
           moreControls: controls
         })),
-        rerender = _render6.rerender;
+        rerender = _render8.rerender;
       expect(moreMenu()).toBeInTheDocument();
       rerender(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
@@ -345,88 +414,74 @@ describe('CardFeature', function () {
   });
   describe('icon', function () {
     it('renders a ready element as-is, without the descriptor container', function () {
-      var _render7 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render9 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           icon: /*#__PURE__*/_jsx("span", {
             "data-testid": "ready-icon"
           })
         })),
-        container = _render7.container;
+        container = _render9.container;
       expect(screen.getByTestId('ready-icon')).toBeInTheDocument();
       expect(container.querySelector('.newspack-card-feature__icon')).toBeNull();
     });
-    it('applies the descriptor colours inline and rounds fully on request', function () {
-      var _render8 = render(/*#__PURE__*/_jsx(CardFeature, {
+    it('applies the descriptor colours inline and rounds a backed icon', function () {
+      var _render0 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/_jsx("span", {
               "data-testid": "descriptor-icon"
             }),
             fill: '#003da5',
-            backgroundColor: '#dfe7f4',
-            radius: 'full'
+            backgroundColor: '#dfe7f4'
           }
         })),
-        container = _render8.container;
+        container = _render0.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
       expect(screen.getByTestId('descriptor-icon')).toBeInTheDocument();
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-full');
+      expect(iconContainer).toHaveClass('newspack-card-feature__icon--has-background');
       expect(iconContainer).toHaveStyle({
         backgroundColor: '#dfe7f4',
         color: '#003da5'
       });
     });
     it('hides the descriptor container from assistive tech, since the title already names the feature', function () {
-      var _render9 = render(/*#__PURE__*/_jsx(CardFeature, {
+      var _render1 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/_jsx("svg", {})
           }
         })),
-        container = _render9.container;
+        container = _render1.container;
       expect(container.querySelector('.newspack-card-feature__icon')).toHaveAttribute('aria-hidden', 'true');
     });
-    it('falls back to small corners when a background is set without a radius', function () {
-      var _render0 = render(/*#__PURE__*/_jsx(CardFeature, {
-          title: "Content gifting",
-          icon: {
-            node: /*#__PURE__*/_jsx("span", {}),
-            backgroundColor: '#dfe7f4'
-          }
-        })),
-        container = _render0.container;
-      var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-small');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-full');
-    });
-    it('leaves an unbacked descriptor icon without a radius class', function () {
-      var _render1 = render(/*#__PURE__*/_jsx(CardFeature, {
+    it('leaves an unbacked descriptor icon without the background class', function () {
+      var _render10 = render(/*#__PURE__*/_jsx(CardFeature, {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/_jsx("span", {}),
             fill: '#003da5'
           }
         })),
-        container = _render1.container;
+        container = _render10.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-small');
+      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--has-background');
     });
   });
   it('passes className through to the card element', function () {
-    var _render10 = render(/*#__PURE__*/_jsx(CardFeature, {
+    var _render11 = render(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
         className: "newspack-subscribers__card"
       })),
-      container = _render10.container;
+      container = _render11.container;
     expect(container.querySelector('.newspack-card-feature')).toHaveClass('newspack-subscribers__card');
   });
   it('marks the card as muted only when requirements are set', function () {
-    var _render11 = render(/*#__PURE__*/_jsx(CardFeature, {
+    var _render12 = render(/*#__PURE__*/_jsx(CardFeature, {
         title: "Content gifting",
         enabled: true
       })),
-      container = _render11.container,
-      rerender = _render11.rerender;
+      container = _render12.container,
+      rerender = _render12.rerender;
     expect(container.querySelector('.newspack-card-feature--muted')).toBeNull();
     rerender(/*#__PURE__*/_jsx(CardFeature, {
       title: "Content gifting",

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

@@ -49,11 +49,7 @@
 			width: wp-vars.$grid-unit-30;
 		}
 
-		&--radius-small {
-			border-radius: wp-vars.$radius-small;
-		}
-
-		&--radius-full {
+		&--has-background {
 			border-radius: wp-vars.$radius-round;
 		}
 	}

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

@@ -6,20 +6,20 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { espProviderIcons } from '../integration-icons';
+import { providerIcons } 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,
+ * The single source for how a provider is shown: brand mark plus badge
+ * background. A new provider needs an icon file, a `providerIcons` 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;
+  var icons = providerIcons;
+  var node = Object.prototype.hasOwnProperty.call(providerIcons, provider) ? icons[provider] : null;
   if (!node) {
     return null;
   }