newspack-components 4.7.0 → 4.8.0-alpha.1

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

@@ -8,11 +8,11 @@ exports["default"] = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
-var _badge = _interopRequireDefault(require("../badge"));
+var _ui = require("@wordpress/ui");
 var _button = _interopRequireDefault(require("../button"));
-var _card = _interopRequireDefault(require("../card"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -23,8 +23,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies
  */
 
-// eslint-disable-line @wordpress/no-unsafe-wp-apis
-
 /**
  * Internal dependencies
  */
@@ -36,8 +34,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * action model: a primary button, an optional "More" dropdown when enabled,
  * and an automatic badge reflecting the current state.
  */
-var CardFeature = function CardFeature(_ref) {
+var _CardFeature = function CardFeature(_ref) {
   var title = _ref.title,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 3 : _ref$headingLevel,
     description = _ref.description,
     icon = _ref.icon,
     _ref$enabled = _ref.enabled,
@@ -52,10 +52,11 @@ var CardFeature = function CardFeature(_ref) {
     onEnable = _ref.onEnable,
     onConfigure = _ref.onConfigure,
     moreControls = _ref.moreControls,
-    badgeText = _ref.badgeText,
-    _ref$badgeLevel = _ref.badgeLevel,
-    badgeLevel = _ref$badgeLevel === void 0 ? 'success' : _ref$badgeLevel,
+    badgeProp = _ref.badge,
     className = _ref.className;
+  var instanceId = (0, _compose.useInstanceId)(_CardFeature, 'newspack-card-feature');
+  var badgeId = "".concat(instanceId, "__badge");
+  var describedById = requirements ? badgeId : undefined;
   var isMuted = !!requirements;
   var classes = (0, _classnames["default"])('newspack-card-feature', className, {
     'newspack-card-feature--muted': isMuted
@@ -63,13 +64,14 @@ var CardFeature = function CardFeature(_ref) {
   var badge;
   if (requirements) {
     badge = {
-      text: requirements,
-      level: 'error'
+      label: requirements,
+      intent: 'high'
     };
   } else if (enabled) {
+    var _badgeProp$label, _badgeProp$intent;
     badge = {
-      text: badgeText !== null && badgeText !== void 0 ? badgeText : (0, _i18n.__)('Enabled', 'newspack-plugin'),
-      level: badgeLevel
+      label: (_badgeProp$label = badgeProp === null || badgeProp === void 0 ? void 0 : badgeProp.label) !== null && _badgeProp$label !== void 0 ? _badgeProp$label : (0, _i18n.__)('Enabled', 'newspack-plugin'),
+      intent: (_badgeProp$intent = badgeProp === null || badgeProp === void 0 ? void 0 : badgeProp.intent) !== null && _badgeProp$intent !== void 0 ? _badgeProp$intent : 'stable'
     };
   }
   var isConfigureState = enabled && !requirements;
@@ -94,7 +96,11 @@ var CardFeature = function CardFeature(_ref) {
   if ((0, _element.isValidElement)(icon)) {
     renderedIcon = icon;
   } else if (iconDescriptor) {
-    renderedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    renderedIcon =
+    /*#__PURE__*/
+    // Decorative: a vendor mark passed as `node` carries no aria-hidden of its own.
+    (0, _jsxRuntime.jsx)("div", {
+      "aria-hidden": "true",
       className: iconClasses,
       style: {
         backgroundColor: iconDescriptor.backgroundColor,
@@ -103,57 +109,65 @@ var CardFeature = function CardFeature(_ref) {
       children: iconDescriptor.node
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Card.Root, {
     className: classes,
-    __experimentalCoreCard: true,
-    __experimentalCoreProps: {
-      headerStyle: {
-        padding: 32
-      },
-      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-          alignment: "top",
-          spacing: 4,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-card-feature__content",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-              className: "newspack-card-feature__title",
-              children: title
-            }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              className: "newspack-card-feature__description",
-              children: description
-            })]
-          }), renderedIcon]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-          alignment: "edge",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-            expanded: false,
-            spacing: "8px",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
-              variant: isConfigureState ? 'tertiary' : 'secondary',
-              disabled: isMuted && !requirementsActionable || busy,
-              isBusy: busy,
-              onClick: handleButtonClick,
-              size: "compact",
-              "aria-label": buttonAccessibleLabel,
-              children: buttonLabel
-            }), showMoreControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-              icon: _icons.moreVertical,
-              label: (0, _i18n.sprintf)(
-              // translators: %s: the feature's name.
-              (0, _i18n.__)('More options for %s', 'newspack-plugin'), title),
-              controls: moreControls,
-              toggleProps: {
-                size: 'compact'
-              }
-            })]
-          }), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge["default"], {
-            text: badge.text,
-            level: badge.level
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.Header, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+        direction: "row",
+        align: "start",
+        gap: "lg",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+          className: "newspack-card-feature__content",
+          direction: "column",
+          gap: "sm",
+          children: [(0, _element.createElement)("h".concat(headingLevel), {
+            className: 'newspack-card-feature__title'
+          }, title), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "newspack-card-feature__description",
+            children: description
           })]
+        }), renderedIcon]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Card.Content, {
+      className: "newspack-card-feature__actions",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        gap: "sm",
+        wrap: "wrap",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+          direction: "row",
+          align: "center",
+          gap: "sm",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+            variant: isConfigureState ? 'tertiary' : 'secondary',
+            accessibleWhenDisabled: true,
+            "aria-describedby": describedById,
+            "aria-label": buttonAccessibleLabel,
+            disabled: isMuted && !requirementsActionable || busy,
+            isBusy: busy,
+            onClick: handleButtonClick,
+            size: "compact",
+            children: buttonLabel
+          }), showMoreControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+            icon: _icons.moreVertical,
+            label: (0, _i18n.sprintf)(
+            // translators: %s: the feature's name.
+            (0, _i18n.__)('More options for %s', 'newspack-plugin'), title),
+            controls: moreControls,
+            toggleProps: {
+              size: 'compact'
+            }
+          })]
+        }), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+          id: describedById,
+          className: "newspack-card-feature__badge",
+          intent: badge.intent,
+          children: badge.label
         })]
       })
-    }
+    })]
   });
 };
-var _default = exports["default"] = CardFeature;
+var _default = exports["default"] = _CardFeature;

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

@@ -23,70 +23,412 @@ jest.mock('@wordpress/i18n', function () {
     })
   });
 });
+var primaryButton = function primaryButton() {
+  return _react.screen.getByRole('button', {
+    name: /Enable|Configure/
+  });
+};
+var moreMenu = function moreMenu() {
+  return _react.screen.queryByRole('button', {
+    name: /^More options for/
+  });
+};
 describe('CardFeature', function () {
   beforeEach(function () {
     _i18n._x.mockClear();
   });
-  it('names the feature in the primary button, keeping the visible label first', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-      title: "Metered Countdown"
-    }));
-    var button = _react.screen.getByRole('button', {
-      name: 'Enable Metered Countdown'
+  describe('structure', function () {
+    it('renders the title as a level-3 heading and the description alongside it', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        description: "Let subscribers share gated articles."
+      }));
+      expect(_react.screen.getByRole('heading', {
+        level: 3
+      })).toHaveTextContent('Content gifting');
+      expect(_react.screen.getByText('Let subscribers share gated articles.')).toBeInTheDocument();
+    });
+    it('renders the title at the requested heading level', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        headingLevel: 4
+      }));
+      expect(_react.screen.getByRole('heading', {
+        level: 4
+      })).toHaveTextContent('Content gifting');
+      expect(_react.screen.queryByRole('heading', {
+        level: 3
+      })).not.toBeInTheDocument();
+    });
+    it('omits the description paragraph when none is passed', function () {
+      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting"
+        })),
+        container = _render.container;
+      expect(container.querySelector('.newspack-card-feature__description')).toBeNull();
     });
-    expect(button).toHaveTextContent('Enable');
-    expect(button.getAttribute('aria-label').startsWith(button.textContent)).toBe(true);
   });
-  it('carries a custom label into the accessible name', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-      title: "Subscription retention",
-      enableLabel: "Change"
-    }));
-    expect(_react.screen.getByRole('button', {
-      name: 'Change Subscription retention'
-    })).toHaveTextContent('Change');
+  describe('accessible names', function () {
+    it('names the feature in the primary button, keeping the visible label first', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Metered Countdown"
+      }));
+      var button = _react.screen.getByRole('button', {
+        name: 'Enable Metered Countdown'
+      });
+      expect(button).toHaveTextContent('Enable');
+      expect(button.getAttribute('aria-label').startsWith(button.textContent)).toBe(true);
+    });
+    it('carries a custom label into the accessible name', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Subscription retention",
+        enableLabel: "Change"
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Change Subscription retention'
+      })).toHaveTextContent('Change');
+    });
+    it('names the feature in the configure state too', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content Gifting",
+        enabled: true
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Configure Content Gifting'
+      })).toBeInTheDocument();
+    });
+    it('names the feature in the More menu', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content Gifting",
+        enabled: true,
+        moreControls: [{
+          title: 'Disable',
+          onClick: function onClick() {}
+        }]
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'More options for Content Gifting'
+      })).toBeInTheDocument();
+    });
+    it('gives the accessible-name order its own catalogue entry', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Metered Countdown"
+      }));
+      expect(_i18n._x).toHaveBeenCalledWith('%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin');
+    });
+    it('distinguishes two cards that share a button label', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Metered Countdown"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content Gifting"
+        })]
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Enable Metered Countdown'
+      })).toBeInTheDocument();
+      expect(_react.screen.getByRole('button', {
+        name: 'Enable Content Gifting'
+      })).toBeInTheDocument();
+    });
   });
-  it('names the feature in the configure state too', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-      title: "Content Gifting",
-      enabled: true
-    }));
-    expect(_react.screen.getByRole('button', {
-      name: 'Configure Content Gifting'
-    })).toBeInTheDocument();
+  describe('primary button', function () {
+    it('reads Enable and calls onEnable when the feature is off', function () {
+      var onEnable = jest.fn();
+      var onConfigure = jest.fn();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        onEnable: onEnable,
+        onConfigure: onConfigure
+      }));
+      expect(primaryButton()).toHaveTextContent('Enable');
+      _react.fireEvent.click(primaryButton());
+      expect(onEnable).toHaveBeenCalledTimes(1);
+      expect(onConfigure).not.toHaveBeenCalled();
+    });
+    it('reads Configure and calls onConfigure once enabled', function () {
+      var onEnable = jest.fn();
+      var onConfigure = jest.fn();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        onEnable: onEnable,
+        onConfigure: onConfigure
+      }));
+      expect(primaryButton()).toHaveTextContent('Configure');
+      _react.fireEvent.click(primaryButton());
+      expect(onConfigure).toHaveBeenCalledTimes(1);
+      expect(onEnable).not.toHaveBeenCalled();
+    });
+    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();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        requirements: "Requires metering",
+        requirementsActionable: true,
+        onEnable: onEnable,
+        onConfigure: onConfigure
+      }));
+      expect(primaryButton()).toHaveTextContent('Enable');
+      _react.fireEvent.click(primaryButton());
+      expect(onEnable).toHaveBeenCalledTimes(1);
+      expect(onConfigure).not.toHaveBeenCalled();
+    });
+    it('keeps the button live on an actionable requirement before the feature is on, which is how Activate reaches the user', function () {
+      var onEnable = jest.fn();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Mailchimp",
+        requirements: "Requires WooCommerce",
+        requirementsActionable: true,
+        enableLabel: "Activate",
+        onEnable: onEnable
+      }));
+      var button = _react.screen.getByRole('button', {
+        name: 'Activate Mailchimp'
+      });
+      expect(button).not.toHaveAttribute('aria-disabled');
+      _react.fireEvent.click(button);
+      expect(onEnable).toHaveBeenCalledTimes(1);
+      expect(_react.screen.getByText('Requires WooCommerce')).toBeInTheDocument();
+    });
+    it('does not fire when a requirement is not actionable, but stays reachable', function () {
+      var onEnable = jest.fn();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        requirements: "Managed by site configuration",
+        onEnable: onEnable
+      }));
+      expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
+      expect(primaryButton()).not.toHaveAttribute('disabled');
+      _react.fireEvent.click(primaryButton());
+      expect(onEnable).not.toHaveBeenCalled();
+    });
+    it('points the blocked button at the badge that explains why', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        requirements: "Managed by site configuration"
+      }));
+      var describedBy = primaryButton().getAttribute('aria-describedby');
+      expect(describedBy).toBeTruthy();
+      expect(document.getElementById(describedBy)).toHaveTextContent('Managed by site configuration');
+    });
+    it('leaves the enabled badge unlinked, since it explains nothing about the button', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true
+      }));
+      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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          busy: true,
+          onEnable: onEnable
+        })),
+        rerender = _render2.rerender;
+      expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
+      _react.fireEvent.click(primaryButton());
+      expect(onEnable).not.toHaveBeenCalled();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        busy: true,
+        requirements: "Requires metering",
+        requirementsActionable: true,
+        onEnable: onEnable
+      }));
+      expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
+    });
+    it('accepts custom labels for both states', function () {
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Apple News",
+          enableLabel: "Connect",
+          configureLabel: "Manage connection"
+        })),
+        rerender = _render3.rerender;
+      expect(_react.screen.getByRole('button', {
+        name: 'Connect Apple News'
+      })).toBeInTheDocument();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Apple News",
+        enabled: true,
+        enableLabel: "Connect",
+        configureLabel: "Manage connection"
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Manage connection Apple News'
+      })).toBeInTheDocument();
+    });
   });
-  it('names the feature in the More menu', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-      title: "Content Gifting",
-      enabled: true,
-      moreControls: [{
-        title: 'Disable',
-        onClick: function onClick() {}
-      }]
-    }));
-    expect(_react.screen.getByRole('button', {
-      name: 'More options for Content Gifting'
-    })).toBeInTheDocument();
+  describe('badge', function () {
+    it('shows nothing when off, and the enabled badge when on', function () {
+      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting"
+        })),
+        rerender = _render4.rerender;
+      expect(_react.screen.queryByText('Enabled')).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true
+      }));
+      expect(_react.screen.getByText('Enabled')).toBeInTheDocument();
+    });
+    it('lets the requirements badge win over the enabled badge', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        requirements: "Requires metering"
+      }));
+      expect(_react.screen.getByText('Requires metering')).toBeInTheDocument();
+      expect(_react.screen.queryByText('Enabled')).not.toBeInTheDocument();
+    });
+    it('accepts custom badge text', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Stripe",
+        enabled: true,
+        badge: {
+          label: 'Live mode',
+          intent: 'informational'
+        }
+      }));
+      expect(_react.screen.getByText('Live mode')).toBeInTheDocument();
+    });
   });
-  it('gives the accessible-name order its own catalogue entry', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-      title: "Metered Countdown"
-    }));
-    expect(_i18n._x).toHaveBeenCalledWith('%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin');
+  describe('More menu', function () {
+    var controls = [{
+      title: 'Disable',
+      onClick: jest.fn()
+    }];
+    it('appears only when enabled and controls are supplied', function () {
+      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          moreControls: controls
+        })),
+        rerender = _render5.rerender;
+      expect(moreMenu()).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true
+      }));
+      expect(moreMenu()).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        moreControls: controls
+      }));
+      expect(moreMenu()).toBeInTheDocument();
+    });
+    it('stays available on an actionable requirement and hides on a locked one', function () {
+      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          enabled: true,
+          requirements: "Requires metering",
+          requirementsActionable: true,
+          moreControls: controls
+        })),
+        rerender = _render6.rerender;
+      expect(moreMenu()).toBeInTheDocument();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        requirements: "Managed by site configuration",
+        moreControls: controls
+      }));
+      expect(moreMenu()).not.toBeInTheDocument();
+    });
   });
-  it('distinguishes two cards that share a button label', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-        title: "Metered Countdown"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-        title: "Content Gifting"
-      })]
+  describe('icon', function () {
+    it('renders a ready element as-is, without the descriptor container', function () {
+      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            "data-testid": "ready-icon"
+          })
+        })),
+        container = _render7.container;
+      expect(_react.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          icon: {
+            node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              "data-testid": "descriptor-icon"
+            }),
+            fill: '#003da5',
+            backgroundColor: '#dfe7f4',
+            radius: 'full'
+          }
+        })),
+        container = _render8.container;
+      var iconContainer = container.querySelector('.newspack-card-feature__icon');
+      expect(_react.screen.getByTestId('descriptor-icon')).toBeInTheDocument();
+      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-full');
+      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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          icon: {
+            node: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
+          }
+        })),
+        container = _render9.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          icon: {
+            node: /*#__PURE__*/(0, _jsxRuntime.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+          title: "Content gifting",
+          icon: {
+            node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
+            fill: '#003da5'
+          }
+        })),
+        container = _render1.container;
+      var iconContainer = container.querySelector('.newspack-card-feature__icon');
+      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-small');
+    });
+  });
+  it('passes className through to the card element', function () {
+    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        className: "newspack-subscribers__card"
+      })),
+      container = _render10.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true
+      })),
+      container = _render11.container,
+      rerender = _render11.rerender;
+    expect(container.querySelector('.newspack-card-feature--muted')).toBeNull();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Content gifting",
+      enabled: true,
+      requirements: "Requires metering"
     }));
-    expect(_react.screen.getByRole('button', {
-      name: 'Enable Metered Countdown'
-    })).toBeInTheDocument();
-    expect(_react.screen.getByRole('button', {
-      name: 'Enable Content Gifting'
-    })).toBeInTheDocument();
+    expect(container.querySelector('.newspack-card-feature--muted')).toBeInTheDocument();
   });
 });