newspack-components 4.7.0 → 4.8.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# newspack-components [4.8.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0...newspack-components@4.8.0) (2026-09-14)
+
+
+### Bug Fixes
+
+* **editor:** stop console warnings from Button, cards and Collections ([#907](https://github.com/Automattic/newspack-workspace/issues/907)) ([70e41cd](https://github.com/Automattic/newspack-workspace/commit/70e41cd116a295a391af966f924c269c567967a2))
+
+
+### Features
+
+* **audience:** date range segmentation for ESP date fields ([#767](https://github.com/Automattic/newspack-workspace/issues/767)) ([21c4732](https://github.com/Automattic/newspack-workspace/commit/21c4732a2b8cbadea1e7d6710ca22d22b3282cef))
+* **components:** Accordion becomes CollapsibleGroup (DSGNEWS-215) ([e6639f2](https://github.com/Automattic/newspack-workspace/commit/e6639f2214d591bba3bc38fb7f042719ca58d3ea))
+* **components:** adopt design system badges (DSGNEWS-215) ([fc4c8f7](https://github.com/Automattic/newspack-workspace/commit/fc4c8f73ccba6ec4075e09578a43938a40eda60f))
+* **components:** rebuild the info button on Popover (DSGNEWS-215) ([#887](https://github.com/Automattic/newspack-workspace/issues/887)) ([31f996d](https://github.com/Automattic/newspack-workspace/commit/31f996d25051a5f861e94cc03b42bb7d9afc10da))
+* **components:** shared EmptyState component (DSGNEWS-211) ([#854](https://github.com/Automattic/newspack-workspace/issues/854)) ([6c31f8c](https://github.com/Automattic/newspack-workspace/commit/6c31f8cac683570e36f3768b0be6061b55d7c946))
+* **components:** shared StatCard component (DSGNEWS-212) ([#864](https://github.com/Automattic/newspack-workspace/issues/864)) ([ac434c2](https://github.com/Automattic/newspack-workspace/commit/ac434c2bc6777f99b65e18fa70e10100ed077ca2))
+* **components:** use an icon and label for DataViews Status columns (DSGNEWS-222) ([aa1d404](https://github.com/Automattic/newspack-workspace/commit/aa1d40422ccddad0d34de67ed444f73f6d14ea49))
+* **content-gate:** share one metering allowance across gates (NPPD-2191, [#919](https://github.com/Automattic/newspack-workspace/issues/919)) ([cb79f9a](https://github.com/Automattic/newspack-workspace/commit/cb79f9a79990975d48acde04b57e2746fd694bdd))
+* **subscriber-discounts:** subscriber discounts on WooCommerce products (NPPD-1794, [#760](https://github.com/Automattic/newspack-workspace/issues/760)) ([3ef9b8a](https://github.com/Automattic/newspack-workspace/commit/3ef9b8ac6f318437777027445ef835d30ec6c8c1)), closes [#8217](https://github.com/Automattic/newspack-workspace/issues/8217)
+
 # newspack-components [4.7.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.3...newspack-components@4.7.0) (2026-08-31)
 
 

package/DEVELOPMENT.md

@@ -74,39 +74,44 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 
 ### Layout Components
 
+- **`BoxContrast`** – High-contrast content box for emphasis.
 - **`Card`** – Container for a logical block of content; use for grouping related settings. Default vertical margin is 32px so cards stack with consistent rhythm. Use `noBorder` when cards sit inside another card (e.g. ActionCard children).
-- **`Grid`** – Use for laying out several items in columns (e.g. multiple controls or cards). Default gap is 32px; use `columns` and `gutter` modifiers (8, 16, 24, 32) when you need tighter or looser spacing. For a single row or a simple vertical stack, prefer **VStack** (or HStack) in new code; Grid is still used that way in many places and is fine to leave as-is until we refactor.
 - **`Divider`** – Use between logical sections (e.g. between ActionCards) to separate content without another card. Margins are 32px (64px at larger breakpoints) so spacing stays consistent with the rest of the layout.
+- **`EmptyState`** – Use when a list has nothing in it yet, or an onboarding view stands in for a feature that is not set up. Compound: `EmptyState.Root` wraps `EmptyState.Header` and `EmptyState.Actions`. Render it only when the *unfiltered* collection is empty, so a search matching nothing keeps the DataViews "no results" treatment. See [src/empty-state/README.md](src/empty-state/README.md).
+- **`Grid`** – Use for laying out several items in columns (e.g. multiple controls or cards). Default gap is 32px; use `columns` and `gutter` modifiers (8, 16, 24, 32) when you need tighter or looser spacing. For a single row or a simple vertical stack, prefer **VStack** (or HStack) in new code; Grid is still used that way in many places and is fine to leave as-is until we refactor.
 - **`SectionHeader`** – Use to start a new section; pair with a short description so the section’s goal is clear. Top margin (64px) and bottom (32px) create clear separation from previous content and the section body.
-- **`BoxContrast`** – High-contrast content box for emphasis.
+- **`StatCard`** – Use for a single headline figure with a label above it and a description below. Compound: `StatCard.Root` wraps `Label`, `Body` (holding `Value` and an optional `Secondary`) and `Footer`, with `Delta` riding in the `Value`'s `suffix` for a change beside the figure. Format the figure yourself and pass a string; a `null`, `undefined` or blank `value` gets the shared null glyph rather than a misleading zero. The figure is sized by a container query, so give the cards a definite width (a Grid track, a `flex: 1` item) and equal widths across a row to keep one type scale. See [src/stat-card/README.md](src/stat-card/README.md).
 
 ### Form Components
 
-- **`Button`** - Enhanced button component (wraps WordPress Button with routing support)
-- **`TextControl`** - Text input with Newspack styling and required field support
-- **`RadioControl`** - Radio button group control
-- **`ColorPicker`** - Color selection component
-- **`ImageUpload`** - Image upload and selection component
-- **`FormTokenField`** - Token input field for tags/categories; prefer the Newspack component over the core `FormTokenField` because it also supports a `description` prop for help text like other controls.
 - **`AutocompleteTokenField`** - Autocomplete token field (can be used in block editor)
-- **`AutocompleteWithSuggestions`** - Autocomplete with custom suggestions
 - **`AutocompleteWithLatestPosts`** - Autocomplete with latest posts
+- **`AutocompleteWithSuggestions`** - Autocomplete with custom suggestions
+- **`Button`** - Enhanced button component (wraps WordPress Button with routing support)
 - **`CategoryAutocomplete`** - Category-specific autocomplete
+- **`ColorPicker`** - Color selection component
 - **`CustomSelectControl`** - Custom select dropdown component
+- **`FormTokenField`** - Token input field for tags/categories; prefer the Newspack component over the core `FormTokenField` because it also supports a `description` prop for help text like other controls.
+- **`ImageUpload`** - Image upload and selection component
+- **`RadioControl`** - Radio button group control
+- **`TextControl`** - Text input with Newspack styling and required field support
 
 ### Content Components
 
 - **`ActionCard`** – Use when one concept (e.g. a feature or setting) can be toggled on/off and may have extra content below. Internal padding (24px default; 16px/8px for isMedium/isSmall) and 24px between regions keep hierarchy clear; expandable content uses 24px top padding and 24px between siblings.
+- **`CollapsibleGroup`** / **`CollapsibleGroup.Item`** – A stack of independently collapsible items, separated by dividers and flush with the surrounding column. Not a W3C accordion: the items do not coordinate.
 - **`Notice`** – Use for outcome feedback (success/error/warning) or short contextual messages. Vertical margin is 32px so notices don’t collide with cards; keep one primary message per area when possible.
-- **`Waiting`** – Loading state indicator.
 - **`ProgressBar`** – Progress indicator.
-- **`Accordion`** / **`AccordionPanel`** – Container for one or more collapsible panels.
 - **`StepsList`** / **`StepsListItem`** – Step-by-step list components.
 - **`StyleCard`** – Style preview card.
+- **`Waiting`** – Loading state indicator.
 
 ### Wizard Components
 
-- **`Wizard`** - Main wizard container with tabbed navigation and data fetching
+- **`Footer`** - Wizard footer component
+- **`Handoff`** - Handoff message component for external integrations
+- **`HandoffMessage`** - Handoff message display component
+- **`TabbedNavigation`** - Tab navigation component
 - **`withWizard`** - Higher-order component for wizard screens (legacy pattern, class-based)
   - Provides plugin management, error handling, loading states
   - Used in older wizards like Setup Wizard
@@ -116,25 +121,22 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
   - Provides header, tabbed navigation, button actions, handoff messages
   - Used in newer wizards like Audience Management
   - Passes props: `renderPrimaryButton`, plus all original component props
-- **`TabbedNavigation`** - Tab navigation component
-- **`Footer`** - Wizard footer component
-- **`Handoff`** - Handoff message component for external integrations
-- **`HandoffMessage`** - Handoff message display component
+- **`Wizard`** - Main wizard container with tabbed navigation and data fetching
 
 ### Plugin Management Components
 
 - **`PluginInstaller`** - Plugin installation and activation component
-- **`PluginToggle`** - Plugin enable/disable toggle
 - **`PluginSettings`** - Plugin settings configuration component
+- **`PluginToggle`** - Plugin enable/disable toggle
 
 ### Utility Components
 
+- **`GlobalNotices`** - Global notice system component
+- **`InfoButton`** - Reveals supplementary context from a `description` prop. Anything a reader needs in order to use a control belongs in visible help text instead
 - **`Modal`** - Modal dialog component
+- **`NewspackIcon`** - Newspack icon wrapper component
 - **`Popover`** - Popover component
 - **`WebPreview`** - Web preview iframe component
-- **`NewspackIcon`** - Newspack icon wrapper component
-- **`InfoButton`** - Info button with tooltip
-- **`GlobalNotices`** - Global notice system component
 
 ### Settings Components
 
@@ -144,9 +146,9 @@ When building a screen, use the **spacing scale** (8px unit: 16, 24, 32, 48, 64)
 ### Utilities & Hooks
 
 - **`hooks`** - Custom React hooks (e.g., `useObjectState`, `usePrompt`, `useOnClickOutside`)
-- **`utils`** - Utility functions (e.g., `confirmAction`, color utilities)
 - **`Router`** - Proxied React Router import (use instead of direct `react-router-dom` import)
   - Note: This package currently uses [React Router v5](https://v5.reactrouter.com/). Please refer to v5 documentation for API details.
+- **`utils`** - Utility functions (e.g., `confirmAction`, color utilities)
 
 ## Import Patterns
 
@@ -205,6 +207,24 @@ import { Button, Card, Notice } from '../../../../../packages/components/src';
 import * as Components from '../../../../../packages/components/src';
 ```
 
+**Reach past the barrel from inside the package.** `src/index.js` imports
+`src/style.scss`, which redefines `--wp-admin-theme-color` and its variants on
+`:root`. Any module that pulls in the barrel carries those global overrides into
+whatever bundle it lands in, which is wrong for an editor or front-end bundle.
+Import each component from its own directory instead:
+
+```jsx
+// ✅ CORRECT – within packages/components
+import Grid from '../grid';
+import InfoButton from '../info-button';
+
+// ❌ WRONG – drags the package's :root overrides along
+import { Grid, InfoButton } from '../';
+```
+
+Most of the package still reaches the barrel. Treat this as the bar for new and
+edited modules rather than a description of how things stand.
+
 ### Router Import Pattern
 
 **Always use the proxied router** - Never import `react-router-dom` directly in source code:
@@ -591,6 +611,7 @@ Newspack components use SCSS with BEM-ish naming conventions and a consistent sp
 - **Elements**: Use `__` for elements that are part of a larger block-level component (e.g. `.newspack-card__header-content`)
 - **WordPress colors:** Use WordPress design system colors (see [Colors Development Guide](../colors/DEVELOPMENT.md))
 - **Custom styles:** Component-specific styles live in `packages/components/src/{component}/style.scss`
+- **Shared values:** Reach for a `@wordpress/base-styles` variable first. Where the scale has no counterpart, the value goes in `packages/components/src/_variables.scss` and is used by name, rather than written as a literal in one component's stylesheet
 
 ### Spacing scale (design system)
 

package/dist/cjs/_mixins.scss

@@ -0,0 +1,13 @@
+@use "../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+@mixin text-muted {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	color: var( --wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700} );
+}
+
+@mixin wpds-focus-ring {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color, #{colors.$primary-600} ) );
+}

package/dist/cjs/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * SCSS Variables.
+ *
+ * The steps this package needs above the @wordpress/base-styles scale. Please
+ * reach for a base-styles variable first, and only add here when there is no
+ * counterpart and you're pretty sure the value will be reused in many places.
+ * It's purely for UI. Don't add component-specific values, which belong in that
+ * component's own stylesheet.
+ */
+
+$font-size-3x-large: 48px;
+$font-line-height-3x-large: 1.125;

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

@@ -11,6 +11,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
 var _ = require("../");
 var _actionCardD = require("./action-card.d.ts");
 require("./style.scss");
@@ -31,8 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @return {JSX.Element} ActionCard component.
  */
 var ActionCard = function ActionCard(_ref) {
-  var badge = _ref.badge,
-    badgeLevel = _ref.badgeLevel,
+  var badges = _ref.badges,
     className = _ref.className,
     checkbox = _ref.checkbox,
     children = _ref.children,
@@ -85,6 +85,13 @@ var ActionCard = function ActionCard(_ref) {
     dragIndex = _ref.dragIndex,
     dragWrapperRef = _ref.dragWrapperRef,
     onDragCallback = _ref.onDragCallback;
+  // A badge with no label paints an empty pill, since the library Badge styles its
+  // wrapper rather than its text. Callers derive labels from data that can be absent
+  // (a gateway with no connection status, an unmapped placement), so drop those here
+  // rather than asking every caller to guard its own array.
+  var visibleBadges = (badges || []).filter(function (badge) {
+    return badge === null || badge === void 0 ? void 0 : badge.label;
+  });
   var _useState = (0, _element.useState)(Boolean(isExpanded)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     expanded = _useState2[0],
@@ -132,7 +139,6 @@ var ActionCard = function ActionCard(_ref) {
   var togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
   var hasInternalLink = href && href.indexOf('http') !== 0;
   var isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-  var badges = !Array.isArray(badge) && badge ? [badge] : badge;
   var HeadingTag = "h".concat(heading);
   var cardContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -179,10 +185,12 @@ var ActionCard = function ActionCard(_ref) {
                 },
                 children: title
               }), !titleLink && !expandable && title]
-            })), (badges === null || badges === void 0 ? void 0 : badges.length) && badges.map(function (badgeText, i) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "newspack-action-card__badge newspack-action-card__badge-level-".concat(badgeLevel),
-                children: badgeText
+            })), visibleBadges.map(function (_ref2, i) {
+              var label = _ref2.label,
+                intent = _ref2.intent;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+                intent: intent !== null && intent !== void 0 ? intent : 'none',
+                children: label
               }, "badge-".concat(i));
             })]
           }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
@@ -315,9 +323,9 @@ var ActionCard = function ActionCard(_ref) {
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
         onDragOver: handleDragOver,
-        children: function children(_ref2) {
-          var onDraggableStart = _ref2.onDraggableStart,
-            onDraggableEnd = _ref2.onDraggableEnd;
+        children: function children(_ref3) {
+          var onDraggableStart = _ref3.onDraggableStart,
+            onDraggableEnd = _ref3.onDraggableEnd;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
             className: classes,
             onClick: simple && onClick,

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _index = _interopRequireDefault(require("./index"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * The library Badge styles its wrapper rather than its text, so a badge with no label
+ * paints a bare coloured pill. Callers build the `badges` array from data that can be
+ * absent — a payment gateway reports no connection status until it is enabled, a prompt
+ * can sit on a placement with no entry in the placement map — and an array literal is
+ * always non-empty, so the component has to drop those itself.
+ */describe('ActionCard badges', function () {
+  var badgeText = function badgeText() {
+    return _react.screen.queryAllByText(function (_, node) {
+      return /__badge/.test((node === null || node === void 0 ? void 0 : node.className) || '');
+    });
+  };
+  it('renders a badge that has a label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Stripe",
+      badges: [{
+        label: 'Connected',
+        intent: 'stable'
+      }]
+    }));
+    expect(_react.screen.getByText('Connected')).toBeInTheDocument();
+  });
+  it('renders no badge when the label is null', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Stripe",
+        badges: [{
+          label: null,
+          intent: 'informational'
+        }]
+      })),
+      container = _render.container;
+    expect(container.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+  });
+  it('renders no badge when the label is undefined or empty', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Stripe",
+        badges: [{
+          label: undefined
+        }, {
+          label: ''
+        }]
+      })),
+      container = _render2.container;
+    expect(container.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+  });
+  it('keeps the labelled badges and drops only the empty ones', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      title: "Plans",
+      badges: [{
+        label: 'Premium'
+      }, {
+        label: null
+      }, {
+        label: 'Archived',
+        intent: 'draft'
+      }]
+    }));
+    expect(_react.screen.getByText('Premium')).toBeInTheDocument();
+    expect(_react.screen.getByText('Archived')).toBeInTheDocument();
+    expect(badgeText()).toHaveLength(2);
+  });
+  it('renders nothing for an absent or empty badges prop', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Stripe"
+      })),
+      withoutProp = _render3.container;
+    expect(withoutProp.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Stripe",
+        badges: []
+      })),
+      withEmptyArray = _render4.container;
+    expect(withEmptyArray.querySelectorAll('[class*="__badge"]')).toHaveLength(0);
+    // An empty array used to fall through as a literal `0` in the heading.
+    expect(withEmptyArray.textContent).not.toContain('0');
+  });
+});

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

@@ -4,6 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -196,11 +197,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
-		margin-right: -8px;
-
-		.newspack-action-card__title {
-			margin-right: 8px;
-		}
+		gap: wp-vars.$grid-unit-10;
 
 		a {
 			color: inherit;
@@ -372,41 +369,6 @@
 		margin: 0;
 	}
 
-	/* Badge */
-	.newspack-action-card__badge {
-		background: wp-colors.$gray-100;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		display: block;
-		flex: 0 0 auto;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 1.333;
-		margin: 0 8px 0 0;
-		padding: 2px 4px;
-
-		&.newspack-action-card__badge-level-warning {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-yellow);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-yellow);
-		}
-		&.newspack-action-card__badge-level-error {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-red);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-red);
-		}
-		&.newspack-action-card__badge-level-success {
-			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-green);
-			color: color-mix(in srgb, #000 50%, wp-colors.$alert-green);
-		}
-		&.newspack-action-card__badge-level-brand {
-			background-color: color-mix(in srgb, #fff 90%, var(--wp-admin-theme-color));
-			color: color-mix(in srgb, #000 50%, var(--wp-admin-theme-color));
-		}
-
-		+ .newspack-action-card__badge {
-			margin-left: -4px;
-		}
-	}
-
 	/* Description Card */
 	&.newspack-description-card {
 		font-style: italic;

package/dist/cjs/button/index.js

@@ -34,7 +34,7 @@ var useHistory = _router["default"].useHistory;
 var isJavascriptHref = function isJavascriptHref(href) {
   return 'string' === typeof href && href.replace(/[\u0000-\u0020]/g, '').toLowerCase().startsWith('javascript:');
 };
-var Button = function Button(_ref) {
+var Button = (0, _element.forwardRef)(function (_ref, ref) {
   var href = _ref.href,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? undefined : _ref$loading,
@@ -89,9 +89,14 @@ var Button = function Button(_ref) {
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
+  // `loading` is this component's own prop name; @wordpress/components' Button
+  // expresses the same state as `isBusy`. Forwarding `loading` verbatim would
+  // land it on the DOM node, which React rejects as a non-boolean attribute.
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, _objectSpread({
-    loading: loading ? true : undefined
+    ref: ref,
+    isBusy: loading ? true : undefined
   }, otherProps));
-};
+});
+Button.displayName = 'Button';
 var _default = exports["default"] = Button;

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

@@ -4,12 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@testing-library/react");
 var _reactRouterDom = require("react-router-dom");
+var _element = require("@wordpress/element");
 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.
  */ /**
+ * WordPress dependencies.
+ */ /**
  * Internal dependencies.
  */
 var HistoryGrabber = function HistoryGrabber(_ref) {
@@ -44,6 +47,18 @@ var clickButton = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
+
+// React formats its warnings with `%s` placeholders and passes the values as
+// further arguments, so assert against the whole call rather than one argument.
+var messagesFrom = function messagesFrom(spy) {
+  return spy.mock.calls.flat().join(' ');
+};
+
+// A failing assertion skips any `mockRestore()` left after it, which would leave
+// the console swallowed for every later test in the file.
+afterEach(function () {
+  jest.restoreAllMocks();
+});
 describe('Button href with onClick', function () {
   it('awaits the onClick, then pushes the route', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
     var historyRef, onClick;
@@ -234,7 +249,6 @@ describe('Button href with onClick outside a router', function () {
           })));
         case 1:
           expect(warn).toHaveBeenCalledWith(expect.stringContaining('javascript:'));
-          warn.mockRestore();
         case 2:
           return _context10.a(2);
       }
@@ -246,22 +260,21 @@ describe('Button with a javascript: href alone', function () {
     return _react.screen.getByText('Save').closest('a');
   };
   it('renders no link', function () {
-    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    // Silenced only; the assertion below is about the markup, not the warning.
+    jest.spyOn(console, 'warn').mockImplementation(function () {});
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
       href: "JavaScript:alert(1)",
       children: "Save"
     }));
     expect(link()).toBeNull();
-    warn.mockRestore();
   });
   it('sees through interleaved control characters', function () {
-    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    jest.spyOn(console, 'warn').mockImplementation(function () {});
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
       href: 'java\nscript:alert(1)',
       children: "Save"
     }));
     expect(link()).toBeNull();
-    warn.mockRestore();
   });
   it('leaves an ordinary href alone', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
@@ -270,4 +283,47 @@ describe('Button with a javascript: href alone', function () {
     }));
     expect(link()).toHaveAttribute('href', '/wp-admin/admin.php?page=next');
   });
+});
+describe('Button loading prop', function () {
+  var button = function button() {
+    return _react.screen.getByRole('button', {
+      name: 'Save'
+    });
+  };
+  it('renders the core busy state without putting `loading` on the DOM node', function () {
+    var error = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        children: "Save"
+      })),
+      rerender = _render.rerender;
+    expect(button()).not.toHaveClass('is-busy');
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      loading: true,
+      children: "Save"
+    }));
+    expect(button()).toHaveClass('is-busy');
+    // React drops an unknown boolean-valued attribute instead of writing it, so
+    // the warning rather than the absent attribute is what a revert trips. It is
+    // also deduped per property name for the life of the module registry, which
+    // is why this names the message instead of asserting no errors at all.
+    expect(messagesFrom(error)).not.toContain('non-boolean attribute');
+  });
+});
+
+// core's Button wraps itself in a Tooltip when it is given a `label`, and the
+// Tooltip needs a ref on its child. Two call sites do that with this Button:
+// the experimental-tools back button and the audience segment-group heading.
+describe('Button ref', function () {
+  it('forwards the ref to the rendered button', function () {
+    var error = jest.spyOn(console, 'error').mockImplementation(function () {});
+    var ref = (0, _element.createRef)();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      ref: ref,
+      children: "Save"
+    }));
+    expect(ref.current).toBe(_react.screen.getByRole('button', {
+      name: 'Save'
+    }));
+    expect(messagesFrom(error)).not.toContain('Function components cannot be given refs');
+  });
 });

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

@@ -141,7 +141,6 @@ var CoreCard = function CoreCard(_ref) {
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
         className: "newspack-card--core__action",
         label: otherProps.title,
-        hideLabelFromVision: true,
         checked: isActive,
         onChange: onToggle
       }), header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -155,7 +154,6 @@ var CoreCard = function CoreCard(_ref) {
       }), !(actions !== null && actions !== void 0 && actions.length) > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
         className: "newspack-card--core__action",
         label: otherProps.title,
-        hideLabelFromVision: true,
         checked: isActive,
         onChange: onToggle
       }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {

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

@@ -4,7 +4,6 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
-@use "../../../colors/colors.module" as colors;
 
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
@@ -45,7 +44,13 @@
 		}
 		.newspack-card--core {
 			&__header-content {
-				* {
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6,
+				p {
 					line-height: wp-vars.$font-line-height-small;
 				}
 			}
@@ -210,9 +215,6 @@
 					text-decoration: underline;
 				}
 			}
-			.newspack-badge {
-				font-weight: 400;
-			}
 		}
 	}
 	&__is-selectable {