newspack-components 4.11.0 → 4.12.0-alpha.1

package/dist/esm/card-sortable-list/index.js

@@ -7,23 +7,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Card - Sortable list component.
  */
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies.
  */
-import { Disabled, Draggable, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Disabled, Draggable } from '@wordpress/components';
 import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { Badge } from '@wordpress/ui';
+import { Badge, Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import Card from '../card';
+import TooltipBadge from '../tooltip-badge';
 import './style.scss';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var DROP_ANIMATION_DURATION = 400; // ms — must match $drop-duration in style.scss
 var BUTTON_MOVE_DURATION = 200; // ms — must match $shift-duration in style.scss
@@ -346,13 +347,14 @@ var CardSortableList = function CardSortableList(_ref) {
     return 0;
   };
   var isDragging = draggingIndex !== null;
-  return /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "column",
+    gap: "lg",
     ref: listRef,
     className: classNames('newspack-card--core--sortable-list', disabled && 'newspack-card--core--sortable-list__is-disabled', isDragging && 'newspack-card--core--sortable-list__is-dragging'),
     style: measurements ? {
       height: measurements.lockedHeight
     } : undefined,
-    spacing: 4,
     children: sortedItems.map(function (item, index) {
       var translateY = getTranslateY(index);
       return /*#__PURE__*/_jsx(Disabled, {
@@ -384,7 +386,7 @@ var CardSortableList = function CardSortableList(_ref) {
             onDragEnd: handleDragEnd,
             appendToOwnerDocument: true,
             children: function children(_ref2) {
-              var _item$badge, _item$badge$intent;
+              var _item$badge, _item$badge$intent, _item$secondaryBadge, _item$secondaryBadge$;
               var onDraggableStart = _ref2.onDraggableStart,
                 onDraggableEnd = _ref2.onDraggableEnd;
               return /*#__PURE__*/_jsx(Card, {
@@ -399,7 +401,14 @@ var CardSortableList = function CardSortableList(_ref) {
                       children: [item.title, ((_item$badge = item.badge) === null || _item$badge === void 0 ? void 0 : _item$badge.label) && /*#__PURE__*/_jsx(Badge, {
                         intent: (_item$badge$intent = item.badge.intent) !== null && _item$badge$intent !== void 0 ? _item$badge$intent : 'none',
                         children: item.badge.label
-                      })]
+                      }), ((_item$secondaryBadge = item.secondaryBadge) === null || _item$secondaryBadge === void 0 ? void 0 : _item$secondaryBadge.label) && (item.secondaryBadge.tooltip ? /*#__PURE__*/_jsx(TooltipBadge, {
+                        label: item.secondaryBadge.label,
+                        tooltip: item.secondaryBadge.tooltip,
+                        intent: item.secondaryBadge.intent
+                      }) : /*#__PURE__*/_jsx(Badge, {
+                        intent: (_item$secondaryBadge$ = item.secondaryBadge.intent) !== null && _item$secondaryBadge$ !== void 0 ? _item$secondaryBadge$ : 'none',
+                        children: item.secondaryBadge.label
+                      }))]
                     }), item.description && /*#__PURE__*/_jsx("p", {
                       children: item.description
                     })]

package/dist/esm/drawer/body.js

@@ -2,9 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
@@ -54,11 +54,10 @@ var Body = function Body(_ref) {
       mutation.disconnect();
     };
   }, [node]);
-  return /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(Stack, {
     ref: setNode,
-    className: "newspack-drawer__body",
-    spacing: 0,
-    justify: "flex-start"
+    direction: "column",
+    className: "newspack-drawer__body"
     // A bare div is role=generic, where ARIA prohibits an author name.
     ,
     role: isScrollable ? 'group' : undefined,

package/dist/esm/drawer/content.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
-import { Children, isValidElement } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
 
 /**
  * External dependencies.
@@ -13,51 +12,23 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-// VStack drops non-elements, a lone string aside. A run shares one wrapper so
-// `Edited by { name }` is one row, not three.
-var asRows = function asRows(children) {
-  if ('string' === typeof children) {
-    return children;
-  }
-  var rows = [];
-  var text = [];
-  var flushText = function flushText() {
-    if (text.some(function (part) {
-      return '' !== String(part).trim();
-    })) {
-      rows.push(/*#__PURE__*/_jsx("div", {
-        children: text
-      }, "text-".concat(rows.length)));
-    }
-    text = [];
-  };
-  Children.toArray(children).forEach(function (child) {
-    if (isValidElement(child)) {
-      flushText();
-      rows.push(child);
-    } else {
-      text.push(child);
-    }
-  });
-  flushText();
-  return rows;
-};
 var Content = function Content(_ref) {
   var _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 6 : _ref$padding,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 4 : _ref$gap,
+    gap = _ref$gap === void 0 ? 'lg' : _ref$gap,
     className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/_jsx(VStack, {
-    className: classnames('newspack-drawer__content', className),
-    spacing: gap
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "column",
+    gap: gap,
+    className: classnames('newspack-drawer__content', className)
     // A custom property, not inline padding, so the stylesheet's seam rules win.
     ,
     style: {
       '--newspack-drawer-content-padding': "".concat(padding * 4, "px")
     },
-    children: asRows(children)
+    children: children
   });
 };
 export default Content;

package/dist/esm/drawer/footer.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import { Stack } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
@@ -10,7 +15,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Footer = function Footer(_ref) {
   var className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "row",
+    justify: "flex-end",
+    wrap: "wrap",
+    gap: "sm",
     className: classnames('newspack-drawer__footer', className),
     children: children
   });

package/dist/esm/drawer/header.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import { Stack } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
@@ -10,7 +15,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Header = function Header(_ref) {
   var className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "row",
+    align: "center",
+    gap: "sm",
     className: classnames('newspack-drawer__header', className),
     children: children
   });

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

@@ -429,16 +429,15 @@ describe('Drawer sections', function () {
   });
 
   // The `> * { flex: none }` rule that stops sections compressing depends on this.
-  it('lays the scroll container out as a flush VStack', function () {
+  it('lays the scroll container out as a flush column', function () {
     renderDrawer({
       contents: [/*#__PURE__*/_jsx(Drawer.Content, {
         children: "One"
       }, "one")]
     });
     var body = bodyOf(screen.getByText('One'));
-    expect(body).toHaveClass('components-v-stack');
-    expect(window.getComputedStyle(body).gap).toBe('0');
-    expect(window.getComputedStyle(body).justifyContent).toBe('flex-start');
+    expect(body.style.flexDirection).toBe('column');
+    expect(body.style.gap).toBe('');
   });
   it('starts a new container after a non-content child', function () {
     renderDrawer({

package/dist/esm/drawer/slots.test.js

@@ -132,86 +132,35 @@ describe('Drawer.Content', function () {
       container = _render2.container;
     expect(sectionOf(container).style.getPropertyValue('--newspack-drawer-content-padding')).toBe('0px');
   });
-  it('renders each section as a VStack', function () {
+  it('spaces its children by the lg gap token, and by the gap prop', function () {
     var _render3 = render(/*#__PURE__*/_jsx(Content, {
         children: "stacked"
       })),
-      container = _render3.container;
-    expect(sectionOf(container)).toHaveClass('newspack-drawer__content', 'components-v-stack');
-  });
-
-  // VStack emits its spacing as a `calc()` on the 4px base, not as pixels.
-  it('spaces its children by 16px, and by the gap prop', function () {
-    var _render4 = render(/*#__PURE__*/_jsx(Content, {
-        children: "stacked"
-      })),
-      container = _render4.container,
-      rerender = _render4.rerender;
-    expect(window.getComputedStyle(sectionOf(container)).gap).toBe('calc(4px * 4)');
+      container = _render3.container,
+      rerender = _render3.rerender;
+    expect(sectionOf(container).style.gap).toContain('gap-lg');
     rerender(/*#__PURE__*/_jsx(Content, {
-      gap: 2,
+      gap: "sm",
       children: "stacked"
     }));
-    expect(window.getComputedStyle(sectionOf(container)).gap).toBe('calc(4px * 2)');
+    expect(sectionOf(container).style.gap).toContain('gap-sm');
   });
-
-  // VStack keeps only elements, so these would otherwise vanish without warning.
   it('keeps plain text sitting beside an element', function () {
-    render(/*#__PURE__*/_jsxs(Content, {
-      children: ["Lead text", /*#__PURE__*/_jsx("span", {
-        children: "an element"
-      }), 42]
-    }));
-    expect(screen.getByText('Lead text')).toBeInTheDocument();
-    expect(screen.getByText('an element')).toBeInTheDocument();
-    expect(screen.getByText('42')).toBeInTheDocument();
-  });
-  it('keeps a run of text and interpolations on one row', function () {
-    var _render5 = render(/*#__PURE__*/_jsxs(Content, {
-        children: ["Edited by ", 'Ada', " just now"]
-      })),
-      container = _render5.container;
-    var rows = sectionOf(container).children;
-    expect(rows).toHaveLength(1);
-    expect(rows[0]).toHaveTextContent('Edited by Ada just now');
-  });
-  it('starts a new row either side of an element', function () {
-    var _render6 = render(/*#__PURE__*/_jsxs(Content, {
-        children: ["before", /*#__PURE__*/_jsx("span", {
-          children: "middle"
-        }), "after"]
-      })),
-      container = _render6.container;
-    expect(Array.from(sectionOf(container).children).map(function (row) {
-      return row.textContent;
-    })).toEqual(['before', 'middle', 'after']);
-  });
-  it('emits no row for whitespace or empty text between elements', function () {
-    var _render7 = render(/*#__PURE__*/_jsxs(Content, {
-        children: [/*#__PURE__*/_jsx("span", {
-          children: "one"
-        }), " ", '', /*#__PURE__*/_jsx("span", {
-          children: "two"
-        })]
+    var _render4 = render(/*#__PURE__*/_jsxs(Content, {
+        children: ["Lead text", /*#__PURE__*/_jsx("span", {
+          children: "an element"
+        }), 42]
       })),
-      container = _render7.container;
-    expect(Array.from(sectionOf(container).children).map(function (row) {
-      return row.textContent;
-    })).toEqual(['one', 'two']);
-  });
-  it('keeps a lone string', function () {
-    render(/*#__PURE__*/_jsx(Content, {
-      children: "on its own"
-    }));
-    expect(screen.getByText('on its own')).toBeInTheDocument();
+      container = _render4.container;
+    expect(sectionOf(container)).toHaveTextContent('Lead textan element42');
   });
 });
 describe('Drawer.Divider', function () {
   it('renders a separator, merging className', function () {
-    var _render8 = render(/*#__PURE__*/_jsx(Divider, {
+    var _render5 = render(/*#__PURE__*/_jsx(Divider, {
         className: "custom"
       })),
-      container = _render8.container;
+      container = _render5.container;
     var divider = container.querySelector('hr');
     expect(divider).toHaveClass('newspack-drawer__divider', 'custom');
     expect(screen.getByRole('separator')).toBe(divider);
@@ -224,8 +173,17 @@ describe('Drawer.Footer', function () {
     }));
     expect(screen.getByText('actions')).toHaveClass('newspack-drawer__footer');
   });
+  it('lays its actions out in one end-aligned row that wraps', function () {
+    render(/*#__PURE__*/_jsx(Footer, {
+      children: "actions"
+    }));
+    var footer = screen.getByText('actions');
+    expect(footer.style.flexDirection).toBe('row');
+    expect(footer.style.justifyContent).toBe('flex-end');
+    expect(footer.style.flexWrap).toBe('wrap');
+  });
   it('renders its actions as direct children', function () {
-    var _render9 = render(/*#__PURE__*/_jsxs(Footer, {
+    var _render6 = render(/*#__PURE__*/_jsxs(Footer, {
         children: [/*#__PURE__*/_jsx(Action, {
           children: "One"
         }), /*#__PURE__*/_jsx(Action, {
@@ -234,7 +192,7 @@ describe('Drawer.Footer', function () {
           children: "Three"
         })]
       })),
-      container = _render9.container;
+      container = _render6.container;
     var footer = container.querySelector('.newspack-drawer__footer');
     expect(Array.from(footer.children)).toEqual([screen.getByRole('button', {
       name: 'One'

package/dist/esm/drawer/style.scss

@@ -80,10 +80,7 @@ $drawer-size-x-large: 640px;
 }
 
 .newspack-drawer__header {
-	align-items: center;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-30 wp-vars.$grid-unit-30 wp-vars.$grid-unit-20;
 }
 
@@ -139,23 +136,8 @@ $drawer-size-x-large: 640px;
 
 .newspack-drawer__footer {
 	background: wp-colors.$white;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-20 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
-
-	> .components-button {
-		flex: 1;
-		justify-content: center;
-	}
-
-	&:has(> :nth-child(3)) {
-		flex-direction: column;
-
-		> .components-button {
-			flex: 0 0 auto;
-		}
-	}
 }
 
 @keyframes newspack-drawer-slide-in {

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TableCard } from './table-card';
 export { default as TextControl } from './text-control';
+export { default as TooltipBadge } from './tooltip-badge';
 export { default as Waiting } from './waiting';
 export { default as WebPreview } from './web-preview';
 export { default as Wizard } from './wizard';

package/dist/esm/page/index.js

@@ -66,11 +66,13 @@ var Page = function Page(_ref) {
             direction: "row",
             gap: "sm",
             justify: "space-between",
+            wrap: "wrap",
             children: [/*#__PURE__*/_jsxs(Stack, {
               direction: "row",
               gap: "sm",
-              align: "center",
+              align: "start",
               justify: "start",
+              className: "newspack-page__header-title",
               children: [/*#__PURE__*/_jsx("div", {
                 className: "newspack-page__header-visual",
                 "aria-hidden": "true",
@@ -83,7 +85,13 @@ var Page = function Page(_ref) {
                 children: /*#__PURE__*/_jsx(Breadcrumbs, {
                   items: breadcrumbItems
                 })
-              }), badges]
+              }), badges && /*#__PURE__*/_jsx(Stack, {
+                direction: "row",
+                gap: "sm",
+                align: "center",
+                className: "newspack-page__header-badges",
+                children: badges
+              })]
             }), actions && /*#__PURE__*/_jsx(Stack, {
               direction: "row",
               gap: "sm",

package/dist/esm/page/style.scss

@@ -56,8 +56,29 @@
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 }
 
+.newspack-page__header-title {
+	min-width: 0;
+}
+
 .newspack-page__header-actions {
+	flex-basis: 100%;
+	flex-shrink: 0;
+	justify-content: flex-end;
+	margin-inline-start: auto;
+
+	@include wp-mixins.break-medium {
+		flex-basis: auto;
+	}
+
+	&:empty,
+	&:has(> :only-child:empty) {
+		display: none;
+	}
+}
+
+.newspack-page__header-badges {
 	flex-shrink: 0;
+	min-height: wp-vars.$button-size;
 }
 
 .newspack-page__header-subtitle {
@@ -68,7 +89,7 @@
 .newspack-page__header-visual {
 	display: grid;
 	flex-shrink: 0;
-	height: 24px;
+	height: wp-vars.$button-size;
 	place-items: center;
 	width: 24px;
 
@@ -80,5 +101,6 @@
 }
 
 .newspack-page__breadcrumbs {
-	min-height: wp-vars.$button-size;
+	min-width: 0;
+	padding-block: calc((#{wp-vars.$button-size} - var(--wpds-typography-line-height-md)) / 2);
 }

package/dist/esm/tabbed-navigation/style.scss

@@ -21,6 +21,11 @@
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
 	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
+	[role="tablist"] {
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
 	a[role="tab"] {
 		text-decoration: none;
 

package/dist/esm/tooltip-badge/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { Badge, Tooltip } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A badge whose tooltip explains it. The tooltip serves mouse and keyboard users;
+ * screen readers get the same text as the trigger's description, which keeps it
+ * out of the accessible name of a heading the badge sits in.
+ */
+var _TooltipBadge = function TooltipBadge(_ref) {
+  var label = _ref.label,
+    tooltip = _ref.tooltip,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'none' : _ref$intent;
+  var descriptionId = useInstanceId(_TooltipBadge, 'newspack-tooltip-badge');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Tooltip.Root, {
+      children: [/*#__PURE__*/_jsx(Tooltip.Trigger, {
+        render: /*#__PURE__*/_jsx("span", {
+          tabIndex: 0,
+          "aria-describedby": descriptionId
+        }),
+        children: /*#__PURE__*/_jsx(Badge, {
+          intent: intent,
+          children: label
+        })
+      }), /*#__PURE__*/_jsx(Tooltip.Popup, {
+        children: tooltip
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      id: descriptionId,
+      hidden: true,
+      children: tooltip
+    })]
+  });
+};
+export default _TooltipBadge;

package/dist/esm/tooltip-badge/index.test.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TooltipBadge from './';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+describe('TooltipBadge', function () {
+  it('describes its focusable trigger with the tooltip text, keeping it out of a surrounding heading name', function () {
+    render(/*#__PURE__*/_jsxs("h3", {
+      children: ["Registration wall", /*#__PURE__*/_jsx(TooltipBadge, {
+        label: "Overrides paid access",
+        tooltip: "This grants registered readers access.",
+        intent: "low"
+      })]
+    }));
+    expect(screen.getByRole('heading', {
+      name: 'Registration wall Overrides paid access'
+    })).toBeInTheDocument();
+    var trigger = screen.getByText('Overrides paid access').closest('[tabindex="0"]');
+    expect(trigger).toHaveAccessibleDescription('This grants registered readers access.');
+  });
+});