newspack-components 4.6.3 → 4.7.0-alpha.2

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

@@ -0,0 +1,422 @@
+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; }
+/**
+ * Internal dependencies.
+ */
+import { DrawerContext } from './context';
+import Header from './header';
+import Title from './title';
+import CloseIcon from './close-icon';
+import Content from './content';
+import Divider from './divider';
+import Footer from './footer';
+import Action from './action';
+
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var withContext = function withContext(ui) {
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return render(/*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: _objectSpread({
+      requestClose: function requestClose() {},
+      title: null,
+      setTitle: function setTitle() {}
+    }, value),
+    children: ui
+  }));
+};
+describe('Drawer.Header', function () {
+  it('renders a container with its children', function () {
+    withContext(/*#__PURE__*/_jsx(Header, {
+      className: "custom",
+      children: "content"
+    }));
+    var header = screen.getByText('content');
+    expect(header).toHaveClass('newspack-drawer__header', 'custom');
+  });
+});
+describe('Drawer.Title', function () {
+  it('renders an h2 and registers its id and text', function () {
+    var setTitle = jest.fn();
+    withContext(/*#__PURE__*/_jsx(Title, {
+      children: "Edit Styles"
+    }), {
+      setTitle: setTitle
+    });
+    var heading = screen.getByRole('heading', {
+      level: 2,
+      name: 'Edit Styles'
+    });
+    expect(heading.id).toBeTruthy();
+    expect(setTitle).toHaveBeenCalledWith({
+      id: heading.id,
+      text: 'Edit Styles'
+    });
+  });
+  it('registers null text for non-string children and clears on unmount', function () {
+    var setTitle = jest.fn();
+    var _withContext = withContext(/*#__PURE__*/_jsx(Title, {
+        children: /*#__PURE__*/_jsx("em", {
+          children: "Rich"
+        })
+      }), {
+        setTitle: setTitle
+      }),
+      unmount = _withContext.unmount;
+    expect(setTitle).toHaveBeenCalledWith(expect.objectContaining({
+      text: null
+    }));
+    unmount();
+    expect(setTitle).toHaveBeenLastCalledWith(null, expect.any(String));
+  });
+});
+describe('Drawer.CloseIcon', function () {
+  it('is named "Close" without a title and funnels clicks to requestClose', function () {
+    var requestClose = jest.fn();
+    withContext(/*#__PURE__*/_jsx(CloseIcon, {}), {
+      requestClose: requestClose
+    });
+    var button = screen.getByRole('button', {
+      name: 'Close'
+    });
+    fireEvent.click(button);
+    expect(requestClose).toHaveBeenCalled();
+  });
+  it('composes the label with a string title', function () {
+    withContext(/*#__PURE__*/_jsx(CloseIcon, {}), {
+      title: {
+        id: 't',
+        text: 'Edit Styles'
+      }
+    });
+    expect(screen.getByRole('button', {
+      name: 'Close Edit Styles'
+    })).toBeInTheDocument();
+  });
+  it('accepts a label override', function () {
+    withContext(/*#__PURE__*/_jsx(CloseIcon, {
+      label: "Dismiss panel"
+    }), {
+      title: {
+        id: 't',
+        text: 'Edit Styles'
+      }
+    });
+    expect(screen.getByRole('button', {
+      name: 'Dismiss panel'
+    })).toBeInTheDocument();
+  });
+});
+describe('Drawer.Content', function () {
+  var sectionOf = function sectionOf(container) {
+    return container.querySelector('.newspack-drawer__content');
+  };
+
+  // jest-dom's toHaveStyle is unreliable for custom properties in jsdom.
+  it('defaults to padding 6 on the 4px scale', function () {
+    var _render = render(/*#__PURE__*/_jsx(Content, {
+        children: "body"
+      })),
+      container = _render.container;
+    expect(sectionOf(container).style.getPropertyValue('--newspack-drawer-content-padding')).toBe('24px');
+  });
+  it('accepts padding 0 for a flush section', function () {
+    var _render2 = render(/*#__PURE__*/_jsx(Content, {
+        padding: 0,
+        children: "flush"
+      })),
+      container = _render2.container;
+    expect(sectionOf(container).style.getPropertyValue('--newspack-drawer-content-padding')).toBe('0px');
+  });
+  it('renders each section as a VStack', 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)');
+    rerender(/*#__PURE__*/_jsx(Content, {
+      gap: 2,
+      children: "stacked"
+    }));
+    expect(window.getComputedStyle(sectionOf(container)).gap).toBe('calc(4px * 2)');
+  });
+
+  // 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"
+        })]
+      })),
+      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();
+  });
+});
+describe('Drawer.Divider', function () {
+  it('renders a separator, merging className', function () {
+    var _render8 = render(/*#__PURE__*/_jsx(Divider, {
+        className: "custom"
+      })),
+      container = _render8.container;
+    var divider = container.querySelector('hr');
+    expect(divider).toHaveClass('newspack-drawer__divider', 'custom');
+    expect(screen.getByRole('separator')).toBe(divider);
+  });
+});
+describe('Drawer.Footer', function () {
+  it('renders a container with its children', function () {
+    render(/*#__PURE__*/_jsx(Footer, {
+      children: "actions"
+    }));
+    expect(screen.getByText('actions')).toHaveClass('newspack-drawer__footer');
+  });
+  it('renders its actions as direct children', function () {
+    var _render9 = render(/*#__PURE__*/_jsxs(Footer, {
+        children: [/*#__PURE__*/_jsx(Action, {
+          children: "One"
+        }), /*#__PURE__*/_jsx(Action, {
+          children: "Two"
+        }), /*#__PURE__*/_jsx(Action, {
+          children: "Three"
+        })]
+      })),
+      container = _render9.container;
+    var footer = container.querySelector('.newspack-drawer__footer');
+    expect(Array.from(footer.children)).toEqual([screen.getByRole('button', {
+      name: 'One'
+    }), screen.getByRole('button', {
+      name: 'Two'
+    }), screen.getByRole('button', {
+      name: 'Three'
+    })]);
+  });
+});
+describe('Drawer.Action', function () {
+  it('renders a button with aria-label from ariaLabel', function () {
+    render(/*#__PURE__*/_jsx(Action, {
+      ariaLabel: "Save styles",
+      children: "Save"
+    }));
+    expect(screen.getByRole('button', {
+      name: 'Save styles'
+    })).toBeInTheDocument();
+  });
+  it('warns when ariaLabel does not contain the visible label', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    render(/*#__PURE__*/_jsx(Action, {
+      ariaLabel: "Apply changes",
+      children: "Save"
+    }));
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('Label in Name'));
+    warn.mockRestore();
+  });
+  it('does not warn when ariaLabel contains the visible label', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    render(/*#__PURE__*/_jsx(Action, {
+      ariaLabel: "Save styles",
+      children: "Save"
+    }));
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+  it('hands the click event to onClick', function () {
+    var onClick = jest.fn();
+    render(/*#__PURE__*/_jsx(Action, {
+      onClick: onClick,
+      children: "Save"
+    }));
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Save'
+    }));
+    expect(onClick).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'click'
+    }));
+  });
+  it('forwards the button props', function () {
+    render(/*#__PURE__*/_jsx(Action, {
+      variant: "primary",
+      isBusy: true,
+      isDestructive: true,
+      disabled: true,
+      children: "Save"
+    }));
+    var button = screen.getByRole('button', {
+      name: 'Save'
+    });
+    expect(button).toHaveClass('is-primary', 'is-busy', 'is-destructive');
+    expect(button).toBeDisabled();
+  });
+  it('forwards onClick', function () {
+    var onClick = jest.fn();
+    render(/*#__PURE__*/_jsx(Action, {
+      onClick: onClick,
+      children: "Save"
+    }));
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Save'
+    }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  // Button drops the href as soon as an onClick is present.
+  it('renders an anchor for an href-only action', function () {
+    render(/*#__PURE__*/_jsx(Action, {
+      href: "/somewhere",
+      children: "Go"
+    }));
+    var link = screen.getByRole('link', {
+      name: 'Go'
+    });
+    expect(link).toHaveAttribute('href', '/somewhere');
+  });
+
+  // The types forbid this, but the package is consumed from plain JS.
+  it('stays a link and warns when href is combined with closes', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var requestClose = jest.fn();
+    var onClick = jest.fn();
+    withContext(/*#__PURE__*/_jsx(Action, {
+      href: "/somewhere",
+      closes: true,
+      onClick: onClick,
+      children: "Go"
+    }), {
+      requestClose: requestClose
+    });
+    var link = screen.getByRole('link', {
+      name: 'Go'
+    });
+    expect(link).toHaveAttribute('href', '/somewhere');
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('cannot also take'));
+    fireEvent.click(link);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(requestClose).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  // An empty string still renders an anchor, so truthiness would re-arm the funnel.
+  it('treats an empty href as a link rather than re-arming the close funnel', function () {
+    var warn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var requestClose = jest.fn();
+    var onClick = jest.fn();
+    withContext(/*#__PURE__*/_jsx(Action, {
+      href: "",
+      closes: true,
+      onClick: onClick,
+      children: "Go"
+    }), {
+      requestClose: requestClose
+    });
+    var anchor = screen.getByText('Go').closest('a');
+    expect(anchor).toHaveAttribute('href', '');
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('cannot also take'));
+    fireEvent.click(anchor);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(requestClose).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  // No link, so the handlers must stay attached rather than leaving a dead anchor.
+  it('runs the handlers when a nullable href resolves to nothing', function () {
+    var requestClose = jest.fn();
+    var onClick = jest.fn();
+    withContext(/*#__PURE__*/_jsx(Action, {
+      href: null,
+      closes: true,
+      onClick: onClick,
+      children: "Go"
+    }), {
+      requestClose: requestClose
+    });
+    var button = screen.getByRole('button', {
+      name: 'Go'
+    });
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(requestClose).toHaveBeenCalledTimes(1);
+  });
+  it('requests the drawer close after onClick when `closes` is set', function () {
+    var requestClose = jest.fn();
+    var onClick = jest.fn(function () {
+      return expect(requestClose).not.toHaveBeenCalled();
+    });
+    withContext(/*#__PURE__*/_jsx(Action, {
+      closes: true,
+      onClick: onClick,
+      children: "Cancel"
+    }), {
+      requestClose: requestClose
+    });
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Cancel'
+    }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(requestClose).toHaveBeenCalledTimes(1);
+  });
+  it('does not request the close without `closes`', function () {
+    var requestClose = jest.fn();
+    withContext(/*#__PURE__*/_jsx(Action, {
+      children: "Save"
+    }), {
+      requestClose: requestClose
+    });
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Save'
+    }));
+    expect(requestClose).not.toHaveBeenCalled();
+  });
+});

package/dist/esm/drawer/style.scss

@@ -0,0 +1,205 @@
+@use "~@wordpress/base-styles/breakpoints" as wp-breakpoints;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+$drawer-size-small: 280px;
+$drawer-size-medium: 350px;
+$drawer-size-large: 480px;
+$drawer-size-x-large: 640px;
+
+.newspack-drawer,
+.newspack-drawer *,
+.newspack-drawer *::before,
+.newspack-drawer *::after {
+	box-sizing: border-box;
+}
+
+.newspack-drawer {
+	display: flex;
+	flex-direction: column;
+}
+
+.components-modal__screen-overlay.newspack-drawer__overlay {
+	align-items: stretch;
+	justify-content: flex-end;
+	padding: 0;
+}
+
+.components-modal__frame.newspack-drawer {
+	animation: 0.2s ease-out newspack-drawer-slide-in;
+	border-radius: wp-vars.$radius-large 0 0 wp-vars.$radius-large;
+	height: 100%;
+	margin: 0;
+	max-height: none;
+	min-width: 0;
+	overflow: hidden;
+	width: 100%;
+
+	&.is-exiting {
+		animation: 0.2s ease-in forwards newspack-drawer-slide-out;
+	}
+
+	.components-modal__content {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	.components-modal__children-container {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	&.newspack-drawer--size-small { max-width: $drawer-size-small; }
+	&.newspack-drawer--size-medium { max-width: $drawer-size-medium; }
+	&.newspack-drawer--size-large { max-width: $drawer-size-large; }
+	&.newspack-drawer--size-x-large { max-width: $drawer-size-x-large; }
+	&.newspack-drawer--size-full {
+		border-radius: 0;
+		max-width: 100vw;
+	}
+
+	@media (max-width: $drawer-size-x-large) {
+		&.newspack-drawer--size-x-large {
+			border-radius: 0;
+		}
+	}
+
+	@media (max-width: wp-breakpoints.$break-small) {
+		&.newspack-drawer--size-small,
+		&.newspack-drawer--size-medium,
+		&.newspack-drawer--size-large,
+		&.newspack-drawer--size-x-large,
+		&.newspack-drawer--size-full {
+			border-radius: 0;
+			max-width: 100vw;
+		}
+	}
+}
+
+.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;
+}
+
+.newspack-drawer__icon {
+	fill: currentcolor;
+	flex: none;
+}
+
+.newspack-drawer__title {
+	flex: 1;
+	font-size: inherit;
+	font-weight: wp-vars.$font-weight-medium;
+	margin: 0;
+	min-width: 0;
+}
+
+.newspack-drawer__dismiss {
+	flex: none;
+	margin-left: auto;
+}
+
+.newspack-drawer__body {
+	flex: 1 1 auto;
+	overflow-y: auto;
+
+	> * {
+		flex: none;
+	}
+}
+
+.newspack-drawer__content {
+	padding: var(--newspack-drawer-content-padding, #{wp-vars.$grid-unit-30});
+
+	> * {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+}
+
+.newspack-drawer__divider {
+	border: 0;
+	border-top: wp-vars.$border-width solid wp-colors.$gray-300;
+	margin: 0;
+}
+
+.newspack-drawer__header + .newspack-drawer__body .newspack-drawer__content:first-child {
+	padding-top: 0;
+}
+
+.newspack-drawer__body:has(+ .newspack-drawer__footer) .newspack-drawer__content:last-child {
+	padding-bottom: 0;
+}
+
+.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 {
+	from {
+		transform: translateX(100%);
+	}
+
+	to {
+		transform: translateX(0);
+	}
+}
+
+@keyframes newspack-drawer-slide-out {
+	from {
+		transform: translateX(0);
+	}
+
+	to {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes newspack-drawer-overlay-fade-out {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.newspack-drawer__overlay.is-exiting {
+	animation: 0.2s ease-in forwards newspack-drawer-overlay-fade-out;
+}
+
+.components-modal__frame.newspack-drawer .components-popover__content {
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.components-modal__frame.newspack-drawer,
+	.components-modal__frame.newspack-drawer.is-exiting,
+	.newspack-drawer__overlay.is-exiting {
+		animation: none;
+	}
+}

package/dist/esm/drawer/title.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies.
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useDrawerContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+var _Title = function Title(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  var _useDrawerContext = useDrawerContext(),
+    setTitle = _useDrawerContext.setTitle;
+  var id = useInstanceId(_Title, 'newspack-drawer__title');
+
+  // Derived, not keyed on `children`: a JSX title would re-register every render.
+  var text = typeof children === 'string' ? children : null;
+  useLayoutEffect(function () {
+    setTitle({
+      id: id,
+      text: text
+    });
+  }, [id, text, setTitle]);
+
+  // Unmount only, scoped to this id: a text change must not re-order the stack,
+  // nor a second title unname the one still rendered.
+  useLayoutEffect(function () {
+    return function () {
+      return setTitle(null, id);
+    };
+  }, [id, setTitle]);
+  return /*#__PURE__*/_jsx("h2", {
+    className: classnames('newspack-drawer__title', className),
+    id: id,
+    children: children
+  });
+};
+export default _Title;

package/dist/esm/drawer/types.js

@@ -0,0 +1 @@
+export {};