newspack-components 4.5.0 → 4.6.0-alpha.1

package/dist/cjs/page/index.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _adminUi = require("@wordpress/admin-ui");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _newspackIcons = require("newspack-icons");
+var _breadcrumbs = _interopRequireDefault(require("../breadcrumbs"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Newspack page region: a sticky header block (breadcrumbs, actions, optional
+ * tabbed navigation) followed by the page content.
+ *
+ * This intentionally does not use `@wordpress/admin-ui`'s `Page`: that
+ * component has no slot for content rendered between the header and the body
+ * inside the sticky region, which is exactly where the tab bar must live. Until
+ * admin-ui grows such a slot, the header markup is assembled here from the same
+ * design-system primitives and tokens, so it can be swapped back later.
+ *
+ * @param {Object} props
+ * @param {Array}  props.breadcrumbItems    Trail items: `{ label, url? }`.
+ * @param {*}      [props.badges]
+ * @param {*}      [props.subTitle]
+ * @param {*}      [props.actions]
+ * @param {*}      [props.tabbedNavigation] A `TabbedNavigation` element; its bar renders inside
+ *                                          the sticky header block and the page children render
+ *                                          inside its active tab panel — or, when no visible tab
+ *                                          owns the route, as a sibling of the panels.
+ * @param {string} [props.className]
+ * @param {*}      props.children
+ * @return {JSX.Element} Page component.
+ */var Page = function Page(_ref) {
+  var _breadcrumbItems;
+  var _ref$breadcrumbItems = _ref.breadcrumbItems,
+    breadcrumbItems = _ref$breadcrumbItems === void 0 ? [] : _ref$breadcrumbItems,
+    badges = _ref.badges,
+    subTitle = _ref.subTitle,
+    actions = _ref.actions,
+    tabbedNavigation = _ref.tabbedNavigation,
+    className = _ref.className,
+    children = _ref.children;
+  var currentLabel = (_breadcrumbItems = breadcrumbItems[breadcrumbItems.length - 1]) === null || _breadcrumbItems === void 0 ? void 0 : _breadcrumbItems.label;
+  var renderShell = function renderShell(tabBar, content) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+        direction: "column",
+        className: "newspack-page__header-region",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+          direction: "column",
+          className: "newspack-page__header",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+            direction: "row",
+            gap: "sm",
+            justify: "space-between",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+              direction: "row",
+              gap: "sm",
+              align: "center",
+              justify: "start",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "newspack-page__header-visual",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                  icon: _newspackIcons.newspack
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+                className: "newspack-page__breadcrumbs",
+                justify: "flex-start",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_breadcrumbs["default"], {
+                  items: breadcrumbItems
+                })
+              }), badges]
+            }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+              direction: "row",
+              gap: "sm",
+              align: "center",
+              className: "newspack-page__header-actions",
+              children: actions
+            })]
+          }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {}),
+            variant: "body-md",
+            className: "newspack-page__header-subtitle",
+            children: subTitle
+          })]
+        }), tabBar]
+      }), content]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminUi.NavigableRegion, {
+    className: (0, _classnames["default"])('newspack-page', className),
+    ariaLabel: currentLabel,
+    children: (0, _element.isValidElement)(tabbedNavigation) ? (0, _element.cloneElement)(tabbedNavigation, {
+      renderShell: renderShell,
+      content: children
+    }) : renderShell(null, children)
+  });
+};
+var _default = exports["default"] = Page;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var renderInRouter = function renderInRouter(ui) {
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.HashRouter, {
+    children: ui
+  }));
+};
+describe('Page', function () {
+  it('renders the breadcrumb current item as h1 and the content', function () {
+    renderInRouter(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      breadcrumbItems: [{
+        label: 'Audience',
+        url: '/'
+      }, {
+        label: 'Access control'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Body content"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Access control');
+    expect(_react.screen.getByText('Body content')).toBeInTheDocument();
+  });
+  it('renders actions and subtitle', function () {
+    renderInRouter(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      breadcrumbItems: [{
+        label: 'Audience'
+      }],
+      subTitle: "Manage readers",
+      actions: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: "Add new"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
+    }));
+    expect(_react.screen.getByRole('button', {
+      name: 'Add new'
+    })).toBeInTheDocument();
+    expect(_react.screen.getByText('Manage readers')).toBeInTheDocument();
+  });
+  it('names the page region after the current breadcrumb item', function () {
+    renderInRouter(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      breadcrumbItems: [{
+        label: 'Audience',
+        url: '/'
+      }, {
+        label: 'Access control'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
+    }));
+    expect(_react.screen.getByRole('region', {
+      name: 'Access control'
+    })).toBeInTheDocument();
+  });
+});

package/dist/cjs/page/style.scss

@@ -0,0 +1,86 @@
+@use "../../../colors/colors.module" as colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// Design-system tokens ride with the Page header into any consuming bundle.
+// Known tech debt: this reaches past the package's public exports entry
+// (`@wordpress/theme/design-tokens.css`) into its internal layout, because
+// postcss-import cannot resolve exports maps, and resolving the public
+// specifier through sass/webpack leaks a bogus `wp-theme/design-tokens.css`
+// script dependency into consumers' asset manifests, which silently blocks
+// their enqueues. If upstream moves `src/prebuilt/`, this fails loudly at
+// build time.
+/* stylelint-disable-next-line no-invalid-position-at-import-rule -- sass @use must precede the CSS @import; postcss-import inlines it at build time. */
+@import "@wordpress/theme/src/prebuilt/css/design-tokens.css";
+
+// Newspack brand mapping: the wpds brand color tokens ship in WordPress
+// blue; remap them onto the Newspack primary scale so every design-system
+// component (focus rings, brand buttons, toggles) renders in brand colors
+// without per-component overrides.
+/* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the wpds brand tokens. */
+:root {
+	--wpds-color-background-interactive-brand-strong: #{colors.$primary-600};
+	--wpds-color-background-interactive-brand-strong-active: #{colors.$primary-800};
+	--wpds-color-background-interactive-brand-weak-active: #{colors.$primary-000};
+	--wpds-color-background-surface-brand: #{colors.$primary-000};
+	--wpds-color-background-thumb-brand: #{colors.$primary-600};
+	--wpds-color-background-thumb-brand-active: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand: #{colors.$primary-600};
+	--wpds-color-foreground-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-foreground-interactive-brand-disabled: #{colors.$primary-400};
+	--wpds-color-stroke-focus: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand: #{colors.$primary-600};
+	--wpds-color-stroke-interactive-brand-active: #{colors.$primary-800};
+	--wpds-color-stroke-interactive-brand-disabled: #{colors.$primary-100};
+	--wpds-color-stroke-surface-brand: #{colors.$primary-000};
+	--wpds-color-stroke-surface-brand-strong: #{colors.$primary-600};
+}
+/* stylelint-enable plugin-wpds/no-setting-wpds-custom-properties */
+
+[role="region"].newspack-page {
+	background-color: wp-colors.$white;
+}
+
+.newspack-page__header-region {
+	@include wp-mixins.break-medium {
+		position: sticky;
+		top: var(--wp-admin--admin-bar--height);
+		z-index: 3;
+	}
+}
+
+.newspack-page__header {
+	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
+	background: var(--wpds-color-background-surface-neutral-strong);
+	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+}
+
+.newspack-page__header-actions {
+	flex-shrink: 0;
+}
+
+.newspack-page__header-subtitle {
+	/* 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);
+	padding-block-end: var(--wpds-dimension-padding-xs);
+}
+
+.newspack-page__header-visual {
+	display: grid;
+	flex-shrink: 0;
+	height: 24px;
+	place-items: center;
+	width: 24px;
+
+	svg path {
+		transform: scale(1.1111);
+		transform-box: view-box;
+		transform-origin: center;
+	}
+}
+
+.newspack-page__breadcrumbs {
+	min-height: wp-vars.$button-size;
+}

package/dist/cjs/route-match.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.matchesRoute = void 0;
+var _router = _interopRequireDefault(require("./proxied-imports/router"));
+/**
+ * Internal dependencies.
+ */
+
+var matchPath = _router["default"].matchPath;
+
+/**
+ * Whether a wildcard pattern (`'/base/*'` or `'/base*'`) matches a pathname.
+ * The wildcard is anchored at a `/` boundary: `'/segments*'` matches
+ * `/segments` and `/segments/123`, never `/segments-old`.
+ *
+ * @param {string} pattern  Pattern ending in `*`.
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the pattern matches.
+ */
+var matchesWildcard = function matchesWildcard(pattern, pathname) {
+  var base = pattern.slice(0, -1).replace(/\/$/, '');
+  return pathname === base || pathname.startsWith(base + '/');
+};
+
+/**
+ * Single route matcher shared by breadcrumb selection and tabbed navigation.
+ *
+ * An item matches when one of its `activeTabPaths` hits (exact string, or a
+ * `*` wildcard anchored at a `/` boundary), or — falling through on a miss —
+ * when its `path` matches the pathname. Path matching is prefix-based except
+ * for the root path and items opting in via `exact: true`, mirroring how the
+ * wizard registers its `<Route>`s (`exact={ section.exact ?? false }`).
+ *
+ * @param {Object} item     Route item (`{ path?, exact?, activeTabPaths? }`).
+ * @param {string} pathname Current router pathname.
+ * @return {boolean} Whether the item matches the pathname.
+ */
+var matchesRoute = exports.matchesRoute = function matchesRoute(item, pathname) {
+  if (Array.isArray(item.activeTabPaths)) {
+    var wildcardHit = item.activeTabPaths.some(function (path) {
+      return path.endsWith('*') ? matchesWildcard(path, pathname) : path === pathname;
+    });
+    if (wildcardHit) {
+      return true;
+    }
+  }
+  if (!item.path) {
+    return false;
+  }
+  var exact = '/' === item.path || item.exact === true;
+  return !!matchPath(pathname, {
+    path: item.path,
+    exact: exact
+  });
+};

package/dist/cjs/route-match.test.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _routeMatch = require("./route-match");
+/**
+ * Internal dependencies.
+ */
+
+describe('matchesRoute', function () {
+  it('matches the root path exactly, never as a prefix', function () {
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/'
+    }, '/')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/'
+    }, '/segments')).toBe(false);
+  });
+  it('matches a path as a prefix by default, at segment boundaries', function () {
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments'
+    }, '/segments')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments'
+    }, '/segments/123')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments'
+    }, '/segments-old')).toBe(false);
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments'
+    }, '/donations')).toBe(false);
+  });
+  it('matches exactly when the item opts in via exact', function () {
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments',
+      exact: true
+    }, '/segments')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments',
+      exact: true
+    }, '/segments/123')).toBe(false);
+  });
+  it('matches an activeTabPaths entry exactly', function () {
+    var item = {
+      path: '/other',
+      activeTabPaths: ['/segments/new']
+    };
+    expect((0, _routeMatch.matchesRoute)(item, '/segments/new')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)(item, '/segments/123')).toBe(false);
+  });
+  it('anchors an activeTabPaths wildcard at a segment boundary', function () {
+    var item = {
+      path: '/other',
+      activeTabPaths: ['/segments/*']
+    };
+    expect((0, _routeMatch.matchesRoute)(item, '/segments')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)(item, '/segments/123')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)(item, '/segments-old')).toBe(false);
+    var noSlash = {
+      path: '/other',
+      activeTabPaths: ['/segments*']
+    };
+    expect((0, _routeMatch.matchesRoute)(noSlash, '/segments')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)(noSlash, '/segments/123')).toBe(true);
+    expect((0, _routeMatch.matchesRoute)(noSlash, '/segments-old')).toBe(false);
+  });
+  it('falls through to path matching when activeTabPaths misses', function () {
+    expect((0, _routeMatch.matchesRoute)({
+      path: '/segments',
+      activeTabPaths: ['/elsewhere']
+    }, '/segments/123')).toBe(true);
+  });
+  it('never matches an item without a path when activeTabPaths misses', function () {
+    expect((0, _routeMatch.matchesRoute)({}, '/segments')).toBe(false);
+    expect((0, _routeMatch.matchesRoute)({
+      activeTabPaths: ['/elsewhere']
+    }, '/segments')).toBe(false);
+  });
+});

package/dist/cjs/section-header/index.js

@@ -102,12 +102,18 @@ var _jsxRuntime = require("react/jsx-runtime");
     }
   }, []);
   var classes = (0, _classnames["default"])('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
-  var HeadingTag = pageHeader ? 'h1' : "h".concat(heading);
+
+  // The breadcrumb `Page` owns the single page `<h1>`, so a `pageHeader` section
+  // is a secondary heading: its level follows `heading` (default 2). `pageHeader`
+  // controls only the enlarged, centered styling — not the tag. Pass `heading={ 1 }`
+  // on a headerless screen that needs the section header to be the page's h1.
+  var HeadingTag = "h".concat(heading);
   var titleContent = null;
   if (typeof title === 'string') {
     titleContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-section-header__title-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
+        className: "newspack-section-header__title",
         children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
             text: badge.label,
@@ -142,6 +148,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     });
   } else if (typeof title === 'function') {
     titleContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
+      className: "newspack-section-header__title",
       children: title()
     });
   }

package/dist/cjs/section-header/style.scss

@@ -4,6 +4,7 @@
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/variables" as wp-vars;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
@@ -12,6 +13,9 @@
 
 	&__container {
 		position: relative;
+		p {
+			text-wrap: balance;
+		}
 		&:not(:first-child) {
 			margin-top: 48px;
 		}
@@ -84,17 +88,18 @@
 		color: wp-colors.$gray-700;
 	}
 
+	// Title sizing keyed to the class, not the tag, so demoting the heading level
+	// (h1 -> h2 when the breadcrumb Page owns the page h1) never changes its look,
+	// and genuine h2s elsewhere in the header are unaffected.
+	&__title {
+		@include wp-mixins.heading-x-large();
+	}
+
 	&__title-container {
 		align-items: center;
 		display: flex;
 		gap: 8px;
 
-		h2 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
-
 		.newspack-section-header__menu,
 		.newspack-section-header__secondary-action,
 		.newspack-badge {
@@ -161,10 +166,5 @@
 				fill: var(--wp-admin-theme-color);
 			}
 		}
-		h1 {
-			font-size: wp-vars.$font-size-x-large;
-			font-weight: wp-vars.$font-weight-medium;
-			line-height: wp-vars.$font-line-height-x-large;
-		}
 	}
 }

package/dist/cjs/select-control/GroupedSelectControl.js

@@ -54,7 +54,7 @@ function GroupedSelectControl(_ref) {
     help: help,
     className: (0, _classnames["default"])(className, 'components-select-control'),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "relative",
+      className: "newspack-grouped-select-control__field",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", _objectSpread(_objectSpread({
         id: id,
         className: "components-select-control__input",

package/dist/cjs/select-control/style.scss

@@ -43,6 +43,10 @@
 .newspack-grouped-select-control {
 	position: relative;
 
+	&__field {
+		position: relative;
+	}
+
 	.components-select-control {
 		&__input {
 			appearance: none;

package/dist/cjs/style.scss

@@ -35,12 +35,9 @@
 // Checkboxes
 .newspack-checkbox-control {
 	margin-top: 0 !important;
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
 
 	.components-base-control__help {
-		margin-left: 32px;
+		margin-left: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 		margin-top: 0;
 	}
 }