newspack-components 4.10.0 → 4.12.0-alpha.1

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

@@ -39,6 +39,7 @@ export { default as PluginToggle } from './plugin-toggle';
 export { default as Popover } from './popover';
 export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
+export { default as ReorderModal } from './reorder-modal';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as Settings } from './settings';
@@ -50,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);
 }