newspack-components 4.10.0 → 4.12.0-alpha.1

package/dist/cjs/drawer/footer.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _ui = require("@wordpress/ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
 /**
  * External dependencies.
  */
@@ -18,7 +23,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var Footer = function Footer(_ref) {
   var className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+    direction: "row",
+    justify: "flex-end",
+    wrap: "wrap",
+    gap: "sm",
     className: (0, _classnames["default"])('newspack-drawer__footer', className),
     children: children
   });

package/dist/cjs/drawer/header.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _ui = require("@wordpress/ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
 /**
  * External dependencies.
  */
@@ -18,7 +23,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var Header = function Header(_ref) {
   var className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+    direction: "row",
+    align: "center",
+    gap: "sm",
     className: (0, _classnames["default"])('newspack-drawer__header', className),
     children: children
   });

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

@@ -431,16 +431,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__*/(0, _jsxRuntime.jsx)(_["default"].Content, {
         children: "One"
       }, "one")]
     });
     var body = bodyOf(_react.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/cjs/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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
         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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
-        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__*/(0, _jsxRuntime.jsx)(_content["default"], {
-      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 () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-      children: ["Lead text", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: "an element"
-      }), 42]
-    }));
-    expect(_react.screen.getByText('Lead text')).toBeInTheDocument();
-    expect(_react.screen.getByText('an element')).toBeInTheDocument();
-    expect(_react.screen.getByText('42')).toBeInTheDocument();
-  });
-  it('keeps a run of text and interpolations on one row', function () {
-    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        children: ["before", /*#__PURE__*/(0, _jsxRuntime.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: "one"
-        }), " ", '', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: "two"
-        })]
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_content["default"], {
+        children: ["Lead text", /*#__PURE__*/(0, _jsxRuntime.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 () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
-      children: "on its own"
-    }));
-    expect(_react.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
         className: "custom"
       })),
-      container = _render8.container;
+      container = _render5.container;
     var divider = container.querySelector('hr');
     expect(divider).toHaveClass('newspack-drawer__divider', 'custom');
     expect(_react.screen.getByRole('separator')).toBe(divider);
@@ -224,8 +173,17 @@ describe('Drawer.Footer', function () {
     }));
     expect(_react.screen.getByText('actions')).toHaveClass('newspack-drawer__footer');
   });
+  it('lays its actions out in one end-aligned row that wraps', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_footer["default"], {
+      children: "actions"
+    }));
+    var footer = _react.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 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer["default"], {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer["default"], {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_action["default"], {
           children: "One"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_action["default"], {
@@ -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([_react.screen.getByRole('button', {
       name: 'One'

package/dist/cjs/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/cjs/index.js

@@ -250,6 +250,12 @@ Object.defineProperty(exports, "RadioControl", {
     return _radioControl["default"];
   }
 });
+Object.defineProperty(exports, "ReorderModal", {
+  enumerable: true,
+  get: function get() {
+    return _reorderModal["default"];
+  }
+});
 Object.defineProperty(exports, "Router", {
   enumerable: true,
   get: function get() {
@@ -328,6 +334,12 @@ Object.defineProperty(exports, "TextControl", {
     return _textControl["default"];
   }
 });
+Object.defineProperty(exports, "TooltipBadge", {
+  enumerable: true,
+  get: function get() {
+    return _tooltipBadge["default"];
+  }
+});
 Object.defineProperty(exports, "Waiting", {
   enumerable: true,
   get: function get() {
@@ -436,6 +448,7 @@ var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
 var _popover = _interopRequireDefault(require("./popover"));
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
 var _radioControl = _interopRequireDefault(require("./radio-control"));
+var _reorderModal = _interopRequireDefault(require("./reorder-modal"));
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
 var _selectControl = _interopRequireDefault(require("./select-control"));
 var _settings = _interopRequireDefault(require("./settings"));
@@ -447,6 +460,7 @@ var _styleCard = _interopRequireDefault(require("./style-card"));
 var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
 var _tableCard = _interopRequireDefault(require("./table-card"));
 var _textControl = _interopRequireDefault(require("./text-control"));
+var _tooltipBadge = _interopRequireDefault(require("./tooltip-badge"));
 var _waiting = _interopRequireDefault(require("./waiting"));
 var _webPreview = _interopRequireDefault(require("./web-preview"));
 var _wizard = _interopRequireWildcard(require("./wizard"));

package/dist/cjs/page/index.js

@@ -74,11 +74,13 @@ var _jsxRuntime = require("react/jsx-runtime");
             direction: "row",
             gap: "sm",
             justify: "space-between",
+            wrap: "wrap",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
               direction: "row",
               gap: "sm",
-              align: "center",
+              align: "start",
               justify: "start",
+              className: "newspack-page__header-title",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "newspack-page__header-visual",
                 "aria-hidden": "true",
@@ -91,7 +93,13 @@ var _jsxRuntime = require("react/jsx-runtime");
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_breadcrumbs["default"], {
                   items: breadcrumbItems
                 })
-              }), badges]
+              }), badges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+                direction: "row",
+                gap: "sm",
+                align: "center",
+                className: "newspack-page__header-badges",
+                children: badges
+              })]
             }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
               direction: "row",
               gap: "sm",

package/dist/cjs/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);
 }