newspack-components 4.5.0 → 4.6.0

package/dist/esm/accordion/index.js

@@ -1,9 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { __experimentalVStack as VStack, PanelBody } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Children, Fragment, cloneElement } from '@wordpress/element';
 
 /**
  * External dependencies
@@ -13,35 +12,52 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
+import Divider from '../divider';
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var Accordion = function Accordion(_ref) {
+export var AccordionPanel = function AccordionPanel(_ref) {
   var children = _ref.children,
+    className = _ref.className,
     title = _ref.title,
     _ref$defaultOpen = _ref.defaultOpen,
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  var _useState = useState(defaultOpen),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  return /*#__PURE__*/_jsxs("details", {
-    className: classNames('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    open: isOpen,
-    onToggle: function onToggle(e) {
-      return setIsOpen(e.currentTarget.open);
-    },
-    children: [/*#__PURE__*/_jsxs("summary", {
-      children: [title, /*#__PURE__*/_jsx(Icon, {
-        className: "newspack-accordion__icon",
-        icon: chevronRight,
-        size: 24
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: "newspack-accordion__content",
-      children: children
-    })]
+  return /*#__PURE__*/_jsx(PanelBody, {
+    className: className,
+    title: title,
+    initialOpen: defaultOpen,
+    children: children
+  });
+};
+var Accordion = function Accordion(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    _ref2$hideSingleTitle = _ref2.hideSingleTitle,
+    hideSingleTitle = _ref2$hideSingleTitle === void 0 ? false : _ref2$hideSingleTitle,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 6 : _ref2$spacing;
+  var panels = Children.toArray(children);
+  // With nothing to collapse against, a lone panel can render open and untitled.
+  if (hideSingleTitle && panels.length === 1) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames('newspack-accordion', className),
+      children: cloneElement(panels[0], {
+        defaultOpen: true,
+        title: undefined
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(VStack, {
+    className: classNames('newspack-accordion', className),
+    spacing: spacing,
+    children: panels.map(function (panel, index) {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [panel, index < panels.length - 1 && /*#__PURE__*/_jsx(Divider, {
+          variant: "secondary",
+          marginBottom: 0,
+          marginTop: 0
+        })]
+      }, panel.key);
+    })
   });
 };
 export default Accordion;

package/dist/esm/accordion/index.test.js

@@ -0,0 +1,79 @@
+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';
+
+/**
+ * Internal dependencies
+ */
+import Accordion, { AccordionPanel } from './index';
+import { jsx as _jsx } from "react/jsx-runtime";
+var renderPanels = function renderPanels(count) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return render(/*#__PURE__*/_jsx(Accordion, _objectSpread(_objectSpread({}, props), {}, {
+    children: Array.from({
+      length: count
+    }, function (_, i) {
+      return /*#__PURE__*/_jsx(AccordionPanel, {
+        title: "Panel ".concat(i),
+        children: "content"
+      }, i);
+    })
+  })));
+};
+var dividers = function dividers(container) {
+  return container.querySelectorAll('.newspack-divider');
+};
+describe('Accordion dividers', function () {
+  it('renders no divider for a single panel', function () {
+    var _renderPanels = renderPanels(1),
+      container = _renderPanels.container;
+    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(1);
+    expect(dividers(container)).toHaveLength(0);
+  });
+  it('renders a divider between panels but not after the last', function () {
+    var _renderPanels2 = renderPanels(3),
+      container = _renderPanels2.container;
+    expect(container.querySelectorAll('.components-panel__body')).toHaveLength(3);
+    expect(dividers(container)).toHaveLength(2);
+    expect(container.querySelector('.newspack-accordion').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('renders secondary dividers', function () {
+    var _renderPanels3 = renderPanels(2),
+      container = _renderPanels3.container;
+    expect(dividers(container)[0]).toHaveClass('newspack-divider--variant-secondary');
+  });
+});
+describe('Accordion hideSingleTitle', function () {
+  it('keeps the title on a lone panel by default', function () {
+    renderPanels(1);
+    expect(screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+  });
+  it('drops the title and opens a lone panel when set', function () {
+    var _renderPanels4 = renderPanels(1, {
+        hideSingleTitle: true
+      }),
+      container = _renderPanels4.container;
+    expect(screen.queryByRole('button', {
+      name: 'Panel 0'
+    })).not.toBeInTheDocument();
+    expect(container.querySelector('.components-panel__body')).toHaveClass('is-opened');
+    expect(screen.getByText('content')).toBeInTheDocument();
+  });
+  it('leaves titles alone when there is more than one panel', function () {
+    renderPanels(2, {
+      hideSingleTitle: true
+    });
+    expect(screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+    expect(screen.getByRole('button', {
+      name: 'Panel 1'
+    })).toBeInTheDocument();
+  });
+});

package/dist/esm/accordion/style.scss

@@ -1,31 +1,35 @@
-@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
+// Sit flush with the surrounding column: core insets panels horizontally, which
+// would misalign them against the section they belong to.
 .newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
+	.components-panel__body {
+		border: 0;
 
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate(90deg);
+		> .components-panel__body-title:hover {
+			background: none;
+		}
 	}
 
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate(-90deg);
-			}
+	.components-panel__body.is-opened {
+		padding: 0;
+
+		> .components-panel__body-title {
+			margin: 0 0 wp-vars.$grid-unit-30;
 		}
 	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
 
-	&__content {
-		padding: 16px 32px;
+	.components-panel__body-toggle.components-button {
+		@include wp-mixins.heading-large();
+		padding: 0;
+
+		.components-panel__arrow {
+			right: 0;
+		}
+
+		&:focus:not(:focus-visible) {
+			box-shadow: none;
+		}
 	}
 }

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

@@ -77,28 +77,6 @@
 			padding: 0 4px;
 		}
 
-		&.mv0 {
-			border-left-color: wp-colors.$gray-300;
-			border-radius: 0;
-			border-right-color: wp-colors.$gray-300;
-
-			&:first-of-type {
-				border-top-color: wp-colors.$gray-300;
-				border-top-left-radius: 3px;
-				border-top-right-radius: 3px;
-			}
-
-			&:last-of-type {
-				border-bottom-color: wp-colors.$gray-300;
-				border-bottom-left-radius: 3px;
-				border-bottom-right-radius: 3px;
-			}
-
-			& + & {
-				margin-top: -1px;
-			}
-		}
-
 		&.newspack-card__is-disabled,
 		&.newspack-card__is-primary,
 		&.newspack-card__is-secondary,

package/dist/esm/breadcrumbs/index.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { Link, Stack, Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * Newspack breadcrumb trail.
+ *
+ * Data-driven: the last item is the current page (the single h1, never a link);
+ * every other item renders as a link when it has a `url`, otherwise plain text.
+ * A plain `<a href>` drives both full admin URLs and hash routes, so the
+ * component needs no router context.
+ *
+ * @param {Object} props
+ * @param {Array}  props.items Trail items: `{ label, url? }`.
+ * @return {JSX.Element|null} Breadcrumbs component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
+  if (!items.length) {
+    return null;
+  }
+  var preceding = items.slice(0, -1);
+  var last = items[items.length - 1];
+  return /*#__PURE__*/_jsx("nav", {
+    "aria-label": __('Breadcrumbs', 'newspack-plugin'),
+    children: /*#__PURE__*/_jsxs(Stack, {
+      render: /*#__PURE__*/_jsx("ul", {}),
+      direction: "row",
+      align: "center",
+      className: "newspack-breadcrumbs__list",
+      children: [preceding.map(function (item, index) {
+        return /*#__PURE__*/_jsxs("li", {
+          children: [item.url ?
+          /*#__PURE__*/
+          // eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop.
+          _jsx(Text, {
+            variant: "body-lg",
+            render: /*#__PURE__*/_jsx(Link, {
+              tone: "neutral",
+              render: /*#__PURE__*/_jsx("a", {
+                href: item.url
+              })
+            }),
+            children: item.label
+          }) : /*#__PURE__*/_jsx(Text, {
+            variant: "body-lg",
+            children: item.label
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "body-lg",
+            "aria-hidden": "true",
+            className: "newspack-breadcrumbs__separator",
+            children: "/"
+          })]
+        }, item.url || index);
+      }), last && last.label && /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "heading-lg",
+          render: /*#__PURE__*/_jsx("h1", {}),
+          className: "newspack-breadcrumbs__current",
+          children: last.label
+        })
+      })]
+    })
+  });
+};
+export default Breadcrumbs;

package/dist/esm/breadcrumbs/index.test.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import Breadcrumbs from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('Breadcrumbs', function () {
+  it('renders the last item as the only h1 and never a link', function () {
+    render(/*#__PURE__*/_jsx(Breadcrumbs, {
+      items: [{
+        label: 'Newsletters'
+      }, {
+        label: 'Settings',
+        url: '#/x'
+      }]
+    }));
+    var h1s = screen.getAllByRole('heading', {
+      level: 1
+    });
+    expect(h1s).toHaveLength(1);
+    expect(h1s[0]).toHaveTextContent('Settings');
+    expect(screen.queryByRole('link', {
+      name: 'Settings'
+    })).not.toBeInTheDocument();
+  });
+  it('renders a non-last item with a url as a link, without a url as text', function () {
+    render(/*#__PURE__*/_jsx(Breadcrumbs, {
+      items: [{
+        label: 'Advertising'
+      }, {
+        label: 'Sponsors',
+        url: '/wp-admin/x'
+      }, {
+        label: 'All sponsors'
+      }]
+    }));
+    var links = screen.getAllByRole('link');
+    expect(links).toHaveLength(1);
+    expect(links[0]).toHaveTextContent('Sponsors');
+    expect(links[0].getAttribute('href')).toBe('/wp-admin/x');
+    expect(screen.getByText('Advertising')).toBeInTheDocument();
+  });
+  it('does not special-case the first item: it links when it has a url', function () {
+    render(/*#__PURE__*/_jsx(Breadcrumbs, {
+      items: [{
+        label: 'Audience',
+        url: '#/'
+      }, {
+        label: 'Donations'
+      }]
+    }));
+    var link = screen.getByRole('link', {
+      name: 'Audience'
+    });
+    expect(link.getAttribute('href')).toBe('#/');
+  });
+  it('renders a single-item trail as just the h1 with no separator', function () {
+    var _render = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Dashboard'
+        }]
+      })),
+      container = _render.container;
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Dashboard');
+    expect(container.querySelector('.newspack-breadcrumbs__separator')).toBeNull();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+  it('renders a "/" separator after each preceding item', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: [{
+          label: 'Audience'
+        }, {
+          label: 'Access control'
+        }]
+      })),
+      container = _render2.container;
+    var separators = container.querySelectorAll('.newspack-breadcrumbs__separator');
+    expect(separators).toHaveLength(1);
+    expect(separators[0]).toHaveTextContent('/');
+    expect(separators[0]).toHaveAttribute('aria-hidden', 'true');
+  });
+  it('renders no heading when the last item has no label', function () {
+    render(/*#__PURE__*/_jsx(Breadcrumbs, {
+      items: [{
+        label: undefined
+      }]
+    }));
+    expect(screen.queryByRole('heading', {
+      level: 1
+    })).not.toBeInTheDocument();
+  });
+  it('renders nothing when there are no items', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(Breadcrumbs, {
+        items: []
+      })),
+      container = _render3.container;
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+});

package/dist/esm/breadcrumbs/style.scss

@@ -0,0 +1,41 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-breadcrumbs__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	> li {
+		flex-shrink: 0;
+		margin: 0;
+
+		a {
+			color: wp-colors.$gray-900;
+
+			&:hover,
+			&:focus,
+			&:active {
+				color: wp-colors.$gray-900;
+			}
+		}
+	}
+
+	> li:last-child {
+		flex-shrink: 1;
+		min-width: 0;
+	}
+}
+
+.newspack-breadcrumbs__separator {
+	color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+	margin: 0 var(--wpds-dimension-gap-sm, 8px);
+	user-select: none;
+}
+
+.newspack-breadcrumbs__list h1.newspack-breadcrumbs__current {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 0;
+	line-height: normal;
+}

package/dist/esm/card/core-card.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSmall", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
+var _excluded = ["actions", "actionType", "as", "buttonsCard", "className", "footer", "header", "headerAction", "headerStyle", "childrenStyle", "footerStyle", "disabled", "icon", "iconElement", "iconBackgroundColor", "isActive", "isDraggable", "isFirstTarget", "isLastTarget", "isNarrow", "isSmall", "dragIndex", "onDragCallback", "onToggle", "onHeaderClick", "noBorder", "noMargin", "children", "hasGreyHeader", "hasHeaderBorder"];
 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; }
 /**
@@ -39,6 +39,7 @@ var CoreCard = function CoreCard(_ref) {
     footerStyle = _ref.footerStyle,
     disabled = _ref.disabled,
     icon = _ref.icon,
+    iconElement = _ref.iconElement,
     iconBackgroundColor = _ref.iconBackgroundColor,
     isActive = _ref.isActive,
     isDraggable = _ref.isDraggable,
@@ -60,7 +61,7 @@ var CoreCard = function CoreCard(_ref) {
     _ref$hasHeaderBorder = _ref.hasHeaderBorder,
     hasHeaderBorder = _ref$hasHeaderBorder === void 0 ? true : _ref$hasHeaderBorder,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && 'newspack-card--core__header--has-actions', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', disabled && 'newspack-card--core__is-disabled', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin', hasGreyHeader && 'newspack-card--core__has-grey-header');
+  var classes = classNames('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && 'newspack-card--core__header--has-actions', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', (icon || iconElement) && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', disabled && 'newspack-card--core__is-disabled', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin', hasGreyHeader && 'newspack-card--core__has-grey-header');
   var sizeProps = isSmall ? 'small' : otherProps.size;
   if (buttonsCard || as === 'a') {
     if (!isSmall) {
@@ -82,7 +83,7 @@ var CoreCard = function CoreCard(_ref) {
     as: as,
     className: classes
   }, otherProps), {}, {
-    children: [(header || icon) && /*#__PURE__*/_jsxs(CardHeader, {
+    children: [(header || icon || iconElement) && /*#__PURE__*/_jsxs(CardHeader, {
       as: headerIsButton ? 'button' : undefined,
       className: classNames('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable', !hasHeaderBorder && 'newspack-card--core__header--no-border'),
       style: headerStyle,
@@ -118,7 +119,10 @@ var CoreCard = function CoreCard(_ref) {
             size: "small"
           })]
         })]
-      }), icon && /*#__PURE__*/_jsx("div", {
+      }), iconElement ? /*#__PURE__*/_jsx("div", {
+        className: "newspack-card--core__icon-slot",
+        children: iconElement
+      }) : icon && /*#__PURE__*/_jsx("div", {
         className: "newspack-card--core__icon",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: icon,

package/dist/esm/card/index.js

@@ -81,7 +81,7 @@ var Card = /*#__PURE__*/function (_Component) {
         }, otherProps), __experimentalCoreProps);
         return /*#__PURE__*/_jsx(CoreCard, _objectSpread({}, props));
       }
-      var classes = classNames('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
+      var classes = classNames('newspack-card', className, headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
       return /*#__PURE__*/_jsx("div", _objectSpread({
         className: classes
       }, otherProps));

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

@@ -14,6 +14,11 @@
 	svg {
 		transition: fill 125ms ease-in-out;
 	}
+	// Slot for a pre-rendered icon element that owns its own badge.
+	&__icon-slot {
+		align-items: center;
+		display: flex;
+	}
 	&__icon {
 		border-radius: wp-vars.$radius-round;
 		display: grid;
@@ -149,6 +154,15 @@
 		border: none;
 		cursor: pointer;
 		text-align: left;
+
+		// The header becomes a real button (headerIsButton) with no border, so
+		// give keyboard focus an explicit on-brand ring. Inset so it isn't clipped
+		// by the card; the transparent outline keeps it visible under Windows High
+		// Contrast / forced-colors mode.
+		&:focus-visible {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			outline: 2px solid transparent;
+		}
 	}
 	&__header-content {
 		display: grid;

package/dist/esm/card/style.scss

@@ -15,15 +15,6 @@
 		padding: 32px 64px;
 	}
 
-	// Buttons Card
-
-	&__buttons-card {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-		margin: 32px 0;
-	}
-
 	// Header Actions Card
 
 	&__header-actions {

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

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { isValidElement } from '@wordpress/element';
 import { DropdownMenu, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { moreVertical } from '@wordpress/icons';
 
@@ -35,6 +36,8 @@ var CardFeature = function CardFeature(_ref) {
     _ref$requirementsActi = _ref.requirementsActionable,
     requirementsActionable = _ref$requirementsActi === void 0 ? false : _ref$requirementsActi,
     enableLabel = _ref.enableLabel,
+    _ref$busy = _ref.busy,
+    busy = _ref$busy === void 0 ? false : _ref$busy,
     configureLabel = _ref.configureLabel,
     onEnable = _ref.onEnable,
     onConfigure = _ref.onConfigure,
@@ -61,6 +64,7 @@ var CardFeature = function CardFeature(_ref) {
   }
   var isConfigureState = enabled && !requirements;
   var buttonLabel = isConfigureState ? configureLabel !== null && configureLabel !== void 0 ? configureLabel : __('Configure', 'newspack-plugin') : enableLabel !== null && enableLabel !== void 0 ? enableLabel : __('Enable', 'newspack-plugin');
+  var showMoreControls = enabled && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && (!requirements || requirementsActionable);
   var handleButtonClick = function handleButtonClick() {
     if (isConfigureState) {
       onConfigure === null || onConfigure === void 0 || onConfigure();
@@ -68,10 +72,24 @@ var CardFeature = function CardFeature(_ref) {
       onEnable === null || onEnable === void 0 || onEnable();
     }
   };
-  var iconClasses = icon ? classnames('newspack-card-feature__icon', {
-    'newspack-card-feature__icon--radius-small': !!icon.backgroundColor && icon.radius !== 'full',
-    'newspack-card-feature__icon--radius-full': icon.radius === 'full'
+  var iconDescriptor = icon && !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'
   }) : undefined;
+  var renderedIcon = null;
+  if (isValidElement(icon)) {
+    renderedIcon = icon;
+  } else if (iconDescriptor) {
+    renderedIcon = /*#__PURE__*/_jsx("div", {
+      className: iconClasses,
+      style: {
+        backgroundColor: iconDescriptor.backgroundColor,
+        color: iconDescriptor.fill
+      },
+      children: iconDescriptor.node
+    });
+  }
   return /*#__PURE__*/_jsx(Card, {
     className: classes,
     __experimentalCoreCard: true,
@@ -92,14 +110,7 @@ var CardFeature = function CardFeature(_ref) {
               className: "newspack-card-feature__description",
               children: description
             })]
-          }), icon && /*#__PURE__*/_jsx("div", {
-            className: iconClasses,
-            style: {
-              backgroundColor: icon.backgroundColor,
-              color: icon.fill
-            },
-            children: icon.node
-          })]
+          }), renderedIcon]
         }), /*#__PURE__*/_jsxs(HStack, {
           alignment: "edge",
           children: [/*#__PURE__*/_jsxs(HStack, {
@@ -107,11 +118,12 @@ var CardFeature = function CardFeature(_ref) {
             spacing: "8px",
             children: [/*#__PURE__*/_jsx(Button, {
               variant: isConfigureState ? 'tertiary' : 'secondary',
-              disabled: isMuted && !requirementsActionable,
+              disabled: isMuted && !requirementsActionable || busy,
+              isBusy: busy,
               onClick: handleButtonClick,
               size: "compact",
               children: buttonLabel
-            }), isConfigureState && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && /*#__PURE__*/_jsx(DropdownMenu, {
+            }), showMoreControls && /*#__PURE__*/_jsx(DropdownMenu, {
               icon: moreVertical,
               label: __('More', 'newspack-plugin'),
               controls: moreControls,