newspack-components 4.5.0 → 4.6.0

package/dist/esm/tabbed-navigation/index.test.js

@@ -0,0 +1,296 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["initialEntries"];
+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; }
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter, Redirect, useHistory } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import TabbedNavigation, { isItemActive } from './index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HistoryGrabber = function HistoryGrabber(_ref) {
+  var historyRef = _ref.historyRef;
+  historyRef.current = useHistory();
+  return null;
+};
+var ITEMS = [{
+  label: 'Stories',
+  path: '/stories'
+}, {
+  label: 'Budgets',
+  path: '/budgets'
+}, {
+  label: 'Sites',
+  path: '/sites'
+}];
+var renderTabs = function renderTabs() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$initialEntries = _ref2.initialEntries,
+    initialEntries = _ref2$initialEntries === void 0 ? ['/stories'] : _ref2$initialEntries,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var historyRef = {
+    current: null
+  };
+  render(/*#__PURE__*/_jsxs(MemoryRouter, {
+    initialEntries: initialEntries,
+    children: [/*#__PURE__*/_jsx(HistoryGrabber, {
+      historyRef: historyRef
+    }), /*#__PURE__*/_jsx(TabbedNavigation, _objectSpread({
+      items: ITEMS,
+      content: /*#__PURE__*/_jsx("div", {
+        children: "Routed content"
+      })
+    }, props))]
+  }));
+  return historyRef.current;
+};
+var getTab = function getTab(name) {
+  return screen.getByRole('tab', {
+    name: name
+  });
+};
+describe('isItemActive', function () {
+  it('treats an explicitly selected item as active regardless of pathname', function () {
+    expect(isItemActive({
+      selected: true,
+      path: '/other'
+    }, '/current')).toBe(true);
+    expect(isItemActive({
+      selected: true
+    }, null)).toBe(true);
+  });
+  describe('outside a router (pathname is null)', function () {
+    afterEach(function () {
+      delete window.location;
+      window.location = new URL('http://localhost/');
+    });
+    it('is active when the href matches the current URL', function () {
+      delete window.location;
+      window.location = new URL('http://example.com/wp-admin/admin.php?page=ads');
+      expect(isItemActive({
+        href: 'http://example.com/wp-admin/admin.php?page=ads'
+      }, null)).toBe(true);
+    });
+    it('is inactive when the href does not match', function () {
+      delete window.location;
+      window.location = new URL('http://example.com/wp-admin/admin.php?page=ads');
+      expect(isItemActive({
+        href: 'http://example.com/wp-admin/admin.php?page=other'
+      }, null)).toBe(false);
+    });
+    it('is inactive when the item has no href', function () {
+      expect(isItemActive({
+        path: '/ads'
+      }, null)).toBe(false);
+    });
+  });
+  describe('inside a router (delegates to the shared route matcher)', function () {
+    it('matches a path as a prefix by default', function () {
+      expect(isItemActive({
+        path: '/stories'
+      }, '/stories')).toBe(true);
+      expect(isItemActive({
+        path: '/stories'
+      }, '/stories/new')).toBe(true);
+      expect(isItemActive({
+        path: '/stories'
+      }, '/budgets')).toBe(false);
+    });
+    it('matches exactly when the item opts in via exact', function () {
+      expect(isItemActive({
+        path: '/stories',
+        exact: true
+      }, '/stories/new')).toBe(false);
+    });
+    it('keeps the parent tab active on a hidden subpage via wildcard', function () {
+      var item = {
+        path: '/additional-brands',
+        activeTabPaths: ['/additional-brands/*']
+      };
+      expect(isItemActive(item, '/additional-brands/new')).toBe(true);
+    });
+  });
+});
+describe('TabbedNavigation with routed items', function () {
+  it('renders the routed content inside the active tab panel', function () {
+    renderTabs({
+      initialEntries: ['/budgets']
+    });
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+    var content = screen.getByText('Routed content');
+    var panel = content.closest('[role="tabpanel"]');
+    expect(panel).not.toBeNull();
+    expect(getTab('Budgets')).toHaveAttribute('aria-controls', panel.id);
+  });
+  it('keeps the tab active and the content in its panel on a nested route', function () {
+    renderTabs({
+      initialEntries: ['/stories/new']
+    });
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('Routed content').closest('[role="tabpanel"]')).not.toBeNull();
+  });
+  it('prefers the most specific tab when paths nest', function () {
+    render(/*#__PURE__*/_jsx(MemoryRouter, {
+      initialEntries: ['/stories/new'],
+      children: /*#__PURE__*/_jsx(TabbedNavigation, {
+        items: [{
+          label: 'Stories',
+          path: '/stories'
+        }, {
+          label: 'New story',
+          path: '/stories/new'
+        }]
+      })
+    }));
+    expect(getTab('New story')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'false');
+  });
+  it('navigates through history.push on click', function () {
+    var history = renderTabs();
+    fireEvent.click(getTab('Sites'));
+    expect(history.location.pathname).toBe('/sites');
+    expect(getTab('Sites')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('leaves modified clicks to the browser', function () {
+    var history = renderTabs();
+    fireEvent.click(getTab('Sites'), {
+      metaKey: true
+    });
+    expect(history.location.pathname).toBe('/stories');
+  });
+  it('consults history.block guards before navigating', function () {
+    var history = renderTabs();
+    var unblock = history.block(function () {
+      return false;
+    });
+    fireEvent.click(getTab('Sites'));
+    expect(history.location.pathname).toBe('/stories');
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+    unblock();
+  });
+  it('disables tabs after the active one with disableUpcoming', function () {
+    renderTabs({
+      initialEntries: ['/budgets'],
+      disableUpcoming: true
+    });
+    expect(getTab('Stories')).toHaveAttribute('href');
+    expect(getTab('Sites')).not.toHaveAttribute('href');
+    expect(getTab('Sites')).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(getTab('Sites'));
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('disables every tab with disableUpcoming when no route matches', function () {
+    renderTabs({
+      initialEntries: ['/unknown'],
+      disableUpcoming: true
+    });
+    ITEMS.forEach(function (_ref3) {
+      var label = _ref3.label;
+      expect(getTab(label)).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  it('renders the content outside the panels when no tab owns the route', function () {
+    // A route no tab matches — an edit screen registered as hidden, or a stale
+    // URL. The content must still mount, or the page body is blank.
+    renderTabs({
+      initialEntries: ['/edit/123']
+    });
+
+    // Assert positively: with nothing selected the panels unmount entirely, so
+    // a `closest( '[role=tabpanel]' )` check alone would pass even if the
+    // content rendered somewhere wrong. Exactly one copy also guards the mutual
+    // exclusivity with the in-panel render.
+    var matches = screen.getAllByText('Routed content');
+    expect(matches).toHaveLength(1);
+    expect(matches[0].closest('.newspack-tabbed-navigation__root')).not.toBeNull();
+    expect(matches[0].closest('[role="tabpanel"]')).toBeNull();
+    ITEMS.forEach(function (_ref4) {
+      var label = _ref4.label;
+      expect(getTab(label)).toHaveAttribute('aria-selected', 'false');
+    });
+  });
+  it('renders the content when the only matching item is hidden from the bar', function () {
+    // The wizard routes hidden sections but filters them out of the bar, so the
+    // item exists and yet can never own the route.
+    render(/*#__PURE__*/_jsx(MemoryRouter, {
+      initialEntries: ['/edit/123'],
+      children: /*#__PURE__*/_jsx(TabbedNavigation, {
+        items: [].concat(ITEMS, [{
+          label: 'Edit',
+          path: '/edit/:id',
+          isHiddenInTabbedNavigation: true
+        }]),
+        content: /*#__PURE__*/_jsx("div", {
+          children: "Routed content"
+        })
+      })
+    }));
+    expect(screen.getAllByText('Routed content')).toHaveLength(1);
+    expect(screen.queryByRole('tab', {
+      name: 'Edit'
+    })).not.toBeInTheDocument();
+  });
+  it('renders unowned content even when disableUpcoming disables every tab', function () {
+    // The setup wizard's Welcome and Completed screens are hidden from the bar
+    // AND use disableUpcoming, so `index > activeIndex` disables every tab. The
+    // content still has to render — this is the case that left onboarding blank.
+    renderTabs({
+      initialEntries: ['/unowned'],
+      disableUpcoming: true
+    });
+    expect(screen.getAllByText('Routed content')).toHaveLength(1);
+    ITEMS.forEach(function (_ref5) {
+      var label = _ref5.label;
+      expect(getTab(label)).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  it('mounts unowned content so a router fallback inside it still runs', function () {
+    // The wizard's trailing <Redirect> lives inside this content, so dropping
+    // it would strand the route instead of correcting it.
+    renderTabs({
+      initialEntries: ['/unknown'],
+      content: /*#__PURE__*/_jsx(Redirect, {
+        to: "/stories"
+      })
+    });
+    expect(getTab('Stories')).toHaveAttribute('aria-selected', 'true');
+  });
+  it('navigates when the active tab changes so panels follow the route', function () {
+    var history = renderTabs();
+    act(function () {
+      return history.push('/budgets');
+    });
+    expect(getTab('Budgets')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('Routed content').closest('[role="tabpanel"]').id).toBe(getTab('Budgets').getAttribute('aria-controls'));
+  });
+});
+describe('TabbedNavigation with href-only items', function () {
+  var LINK_ITEMS = [{
+    label: 'Newsletters',
+    href: 'http://example.com/wp-admin/admin.php?page=newsletters',
+    selected: true
+  }, {
+    label: 'Ads',
+    href: 'http://example.com/wp-admin/admin.php?page=ads'
+  }];
+  it('renders plain navigation links instead of a tabs widget', function () {
+    render(/*#__PURE__*/_jsx(TabbedNavigation, {
+      items: LINK_ITEMS
+    }));
+    expect(screen.queryByRole('tab')).not.toBeInTheDocument();
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+    var active = screen.getByRole('link', {
+      name: 'Newsletters'
+    });
+    expect(active).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', {
+      name: 'Ads'
+    })).not.toHaveAttribute('aria-current');
+  });
+});

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

@@ -2,81 +2,101 @@
  * Tabbed Navigation
  */
 
+@use "../../../colors/colors.module" as colors;
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// The Tabs.Root wrapper spans the tab bar and the tab panels so the panels can
+// contain the routed content; it plays no layout role of its own.
+.newspack-tabbed-navigation__root {
+	display: contents;
+}
 
 .newspack-tabbed-navigation {
-	background: white;
+	background: wp-colors.$white;
+	border-bottom: var( --wpds-border-width-xs, #{wp-vars.$border-width} ) solid var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
 	width: 100%;
 
-	@media only screen and ( min-width: 600px ) {
-		position: sticky;
-		top: 46px;
-		z-index: 3;
-	}
-
-	@media only screen and ( min-width: 783px ) {
-		top: 32px;
-	}
+	/* 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: #{colors.$primary-600};
 
-	ul {
-		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-	}
+	a[role="tab"] {
+		text-decoration: none;
 
-	li {
-		margin-bottom: 0;
-		width: 100%;
+		// wp-admin's unlayered `a { color }` beats every rule inside the design
+		// system's @layer wp-ui, so anchor tabs need their colors restated here:
+		// gray-900 for enabled tabs, and the DS disabled token for disabled ones.
+		&:not([data-disabled]):not([aria-disabled="true"]) {
+			color: wp-colors.$gray-900;
 
-		@media screen and ( min-width: 600px ) {
-			width: auto;
+			&:hover,
+			&:active,
+			&[aria-selected="true"] {
+				color: wp-colors.$gray-900;
+			}
 		}
 
-		a {
-			align-items: center;
-			color: wp-colors.$gray-900;
-			display: flex;
-			font-weight: bold;
-			height: 48px;
+		// wp-admin's common.css and the wizard shell both decorate a:focus with a
+		// box-shadow ring, a 2px border-radius, and a transparent outline. Reset
+		// all three so the component's own :focus-visible ring (an inset outline
+		// on its ::after, shipped by @wordpress/ui) is the only focus treatment.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
 			outline: none;
-			padding: 12px 15px;
-			text-decoration: none;
+		}
 
-			@media screen and ( min-width: 600px ) {
-				border-bottom: 4px solid transparent;
-				padding-bottom: 8px;
-			}
+		// Square the component's focus ring corners.
+		&::after {
+			border-radius: 0;
+		}
 
-			&:active,
-			&:focus,
-			&:hover {
-				color: var(--wp-admin-theme-color);
-			}
+		&[data-disabled],
+		&[aria-disabled="true"] {
+			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
+			pointer-events: none;
+		}
+	}
 
-			&:focus-visible {
-				outline: 2px solid var(--wp-admin-theme-color);
-				outline-offset: -2px;
-			}
+	// Link-driven variant: plain navigation styled to match the tabs widget.
+	&--links {
+		align-items: stretch;
+		display: flex;
+		overflow-x: auto;
+	}
 
-			&.selected {
-				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);
+	.newspack-tabbed-navigation__link {
+		align-items: center;
+		color: wp-colors.$gray-900;
+		display: flex;
+		font-size: var( --wpds-typography-font-size-md, #{wp-vars.$default-font-size} );
+		height: wp-vars.$grid-unit-60; // Matches @wordpress/ui's horizontal tab height.
+		line-height: 1.2;
+		padding-inline: var( --wpds-dimension-padding-lg, #{wp-vars.$grid-unit-20} );
+		text-decoration: none;
+		white-space: nowrap;
 
-				@media screen and ( min-width: 600px ) {
-					border-color: var(--wp-admin-theme-color);
-					box-shadow: none;
-				}
-			}
+		&:hover,
+		&:active,
+		&:focus {
+			color: wp-colors.$gray-900;
+		}
 
-			&.disabled {
-				cursor: not-allowed;
-				opacity: 0.3;
-				pointer-events: none;
+		// Mirror the tabs widget's focus ring (an inset outline) with plain
+		// outline + offset, replacing wp-admin's box-shadow focus decoration.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
+			outline: none;
+		}
 
-				&:hover {
-					color: inherit;
-				}
-			}
+		&:focus-visible {
+			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
+			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
+		}
+
+		&[aria-current="page"] {
+			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
 		}
 	}
 }

package/dist/esm/with-wizard/index.js

@@ -14,12 +14,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import { Component, createRef, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { category } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 
 /**
  * Internal dependencies.
  */
-import { Button, Card, Modal, NewspackIcon, Notice, PluginInstaller } from '../';
+import { Button, Modal, Notice, Page, PluginInstaller } from '../';
 import Router from '../proxied-imports/router';
 import Footer from '../footer';
 import './style.scss';
@@ -111,10 +111,11 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
             noticeText: message,
             isError: true,
             rawHTML: true
-          }), /*#__PURE__*/_jsx(Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/_jsx(HStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: /*#__PURE__*/_jsx(Button, {
               isPrimary: true,
               href: fallbackURL,
@@ -226,43 +227,29 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
             to: "/"
           });
         }
+        var headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
+        var content = /*#__PURE__*/_jsx("div", {
+          className: "newspack-wizard newspack-wizard__content",
+          children: /*#__PURE__*/_jsx(PluginInstaller, {
+            plugins: requiredPlugins,
+            onStatus: function onStatus(status) {
+              return _this.pluginInstallationStatus(status);
+            }
+          })
+        });
         return /*#__PURE__*/_jsx(Route, {
           path: "/",
           render: function render() {
-            return /*#__PURE__*/_jsxs(Fragment, {
-              children: [complete !== null && /*#__PURE__*/_jsx("div", {
-                className: "newspack-wizard__header",
-                children: /*#__PURE__*/_jsx("div", {
-                  className: "newspack-wizard__header__inner",
-                  children: /*#__PURE__*/_jsxs("div", {
-                    className: "newspack-wizard__title",
-                    children: [/*#__PURE__*/_jsx(Button, {
-                      isLink: true,
-                      href: newspack_urls.dashboard,
-                      label: __('Return to Dashboard', 'newspack-plugin'),
-                      showTooltip: true,
-                      icon: category,
-                      iconSize: 36,
-                      children: /*#__PURE__*/_jsx(NewspackIcon, {
-                        size: 36
-                      })
-                    }), /*#__PURE__*/_jsx("div", {
-                      children: /*#__PURE__*/_jsx("h2", {
-                        children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin')
-                      })
-                    })]
-                  })
-                })
-              }), /*#__PURE__*/_jsx("div", {
-                className: "newspack-wizard newspack-wizard__content",
-                children: /*#__PURE__*/_jsx(PluginInstaller, {
-                  plugins: requiredPlugins,
-                  onStatus: function onStatus(status) {
-                    return _this.pluginInstallationStatus(status);
-                  }
-                })
-              })]
-            });
+            return (
+              // While `complete` is still null the requirements are being
+              // determined; render content without a header (matches prior behavior).
+              complete === null ? content : /*#__PURE__*/_jsx(Page, {
+                breadcrumbItems: [{
+                  label: headerText
+                }],
+                children: content
+              })
+            );
           }
         });
       });
@@ -280,7 +267,7 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
       _defineProperty(_this, "confirmAction", function (options) {
         var modalOptions = _objectSpread({
           title: null,
-          message: __('Are you sure?', 'newpack-plugin'),
+          message: __('Are you sure?', 'newspack-plugin'),
           confirmText: __('OK', 'newspack-plugin'),
           cancelText: __('Cancel', 'newspack-plugin'),
           callback: null
@@ -316,10 +303,11 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           },
           children: [/*#__PURE__*/_jsx("p", {
             children: message
-          }), /*#__PURE__*/_jsxs(Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/_jsxs(HStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: [/*#__PURE__*/_jsx(Button, {
               variant: "secondary",
               onClick: function onClick() {