newspack-components 4.8.0 → 4.8.1-alpha.1

package/dist/esm/footer/style.scss

@@ -2,6 +2,7 @@
  * Footer
  */
 
+@use "../mixins" as mixins;
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
@@ -31,7 +32,8 @@
 	li {
 		margin: 8px;
 
-		a {
+		a,
+		button {
 			align-items: flex-end;
 			color: inherit;
 			display: flex;
@@ -42,5 +44,19 @@
 				color: wp-colors.$gray-900;
 			}
 		}
+
+		button {
+			appearance: none;
+			background: none;
+			border: 0;
+			cursor: pointer;
+			font: inherit;
+			padding: 0;
+			text-decoration: underline;
+
+			&:focus-visible {
+				@include mixins.wpds-focus-ring;
+			}
+		}
 	}
 }

package/dist/esm/index.js

@@ -17,6 +17,7 @@ export { default as ColorPicker } from './color-picker';
 export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as DataViews } from './dataviews';
+export { default as DebugBadge } from './debug-badge';
 export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as EmptyState } from './empty-state';

package/dist/esm/notice/index.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * WordPress dependencies.
  */
 import { Component, RawHTML } from '@wordpress/element';
-import { Icon, bug, check, help, info } from '@wordpress/icons';
+import { Icon, check, help, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -40,7 +40,6 @@ var Notice = /*#__PURE__*/function (_Component) {
     function render() {
       var _this$props = this.props,
         className = _this$props.className,
-        debugMode = _this$props.debugMode,
         isError = _this$props.isError,
         isHandoff = _this$props.isHandoff,
         isHelp = _this$props.isHelp,
@@ -52,14 +51,12 @@ var Notice = /*#__PURE__*/function (_Component) {
         style = _this$props$style === void 0 ? {} : _this$props$style,
         _this$props$children = _this$props.children,
         children = _this$props$children === void 0 ? null : _this$props$children;
-      var classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+      var classes = classnames('newspack-notice', className, isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
       var noticeIcon;
       if (isHelp) {
         noticeIcon = help;
       } else if (isSuccess) {
         noticeIcon = check;
-      } else if (debugMode) {
-        noticeIcon = bug;
       } else {
         noticeIcon = info;
       }

package/dist/esm/notice/style.scss

@@ -22,25 +22,6 @@
 		margin-right: 4px;
 	}
 
-	&__is-debug {
-		background: np-colors.$primary-600;
-		border-radius: 50%;
-		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		color: white;
-		font-weight: bold;
-		margin: 0 16px;
-		padding: 6px;
-		position: fixed;
-		text-transform: uppercase;
-		z-index: 9997;
-
-		> svg {
-			fill: white;
-			margin: 0;
-		}
-	}
-
 	&__is-error {
 		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 

package/dist/esm/plugin-toggle/index.js

@@ -205,7 +205,7 @@ var PluginToggle = /*#__PURE__*/function (_Component) {
             return _this2.managePlugin(slug, value);
           },
           notification: error,
-          notificationHTML: error,
+          notificationHTML: true,
           notificationLevel: "error"
         }, index);
       });

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

@@ -9,7 +9,7 @@ import { cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button, Handoff, Notice, HandoffMessage, TabbedNavigation, Page } from '../';
+import { Button, DebugBadge, Handoff, HandoffMessage, TabbedNavigation, Page } from '../';
 import { activeBreadcrumbs } from '../wizard/breadcrumbs-select';
 import { buttonProps } from '../button-props';
 import Router from '../proxied-imports/router';
@@ -111,9 +111,7 @@ export default function withWizardScreen(WrappedComponent) {
         }];
       }
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
-          debugMode: true
-        }), hideHeader ?
+        children: [/*#__PURE__*/_jsx(DebugBadge, {}), hideHeader ?
         /*#__PURE__*/
         // Without the Page shell the tabs still own the content: it
         // renders inside the active tab's panel.

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

@@ -9,9 +9,6 @@ import { HashRouter } from 'react-router-dom';
  */
 import withWizardScreen from './';
 import { jsx as _jsx } from "react/jsx-runtime";
-global.newspack_aux_data = {
-  is_debug_mode: false
-};
 describe('withWizardScreen', function () {
   it('falls back to a single headerText breadcrumb when no breadcrumbItems are provided', function () {
     var WrappedComponent = function WrappedComponent() {

package/dist/esm/wizard/index.js

@@ -10,19 +10,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-// Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
-import { DropdownMenu, MenuGroup, MenuItem, Notice as CoreNotice, SlotFillProvider, createSlotFill,
+import { DropdownMenu, MenuGroup, MenuItem, Notice, SlotFillProvider, createSlotFill,
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 __experimentalVStack as VStack } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useLayoutEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
+import { Footer, DebugBadge, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
 import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
@@ -97,7 +96,10 @@ var ResetHeaderData = function ResetHeaderData() {
   var location = useLocation();
   var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
     resetHeaderData = _useDispatch.resetHeaderData;
-  useEffect(function () {
+
+  // Must stay before paint: a passive effect here would run after a section that
+  // publishes from a layout effect, wiping the header it just set.
+  useLayoutEffect(function () {
     resetHeaderData();
     window.scrollTo(0, 0);
   }, [location.pathname, resetHeaderData]);
@@ -203,6 +205,7 @@ var Wizard = function Wizard(_ref2, ref) {
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
+    headerFullWidth = headerData.fullWidth,
     sectionDescription = headerData.sectionDescription,
     sectionMenu = headerData.sectionMenu,
     sectionName = headerData.sectionName,
@@ -307,7 +310,7 @@ var Wizard = function Wizard(_ref2, ref) {
   // describes the state of the whole site, not of the section below it, so it reads
   // as page chrome rather than as content.
   var inertGating = (_window$newspack_aux_ = window.newspack_aux_data) === null || _window$newspack_aux_ === void 0 ? void 0 : _window$newspack_aux_.inert_gating;
-  var inertGatingNotice = (inertGating === null || inertGating === void 0 ? void 0 : inertGating.show) && /*#__PURE__*/_jsx(CoreNotice, {
+  var inertGatingNotice = (inertGating === null || inertGating === void 0 ? void 0 : inertGating.show) && /*#__PURE__*/_jsx(Notice, {
     status: "warning",
     isDismissible: false,
     className: "newspack-wizard__inert-gating-notice",
@@ -339,7 +342,7 @@ var Wizard = function Wizard(_ref2, ref) {
             render: function render(routerProps) {
               return /*#__PURE__*/_jsxs("div", {
                 className: classnames('newspack-wizard__content', className, {
-                  'newspack-wizard__content--full-width': section.fullWidth
+                  'newspack-wizard__content--full-width': headerFullWidth !== null && headerFullWidth !== void 0 ? headerFullWidth : section.fullWidth
                 }),
                 children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/_jsx(SectionHeader, {
                   className: "newspack-wizard__section-header",
@@ -420,9 +423,7 @@ var Wizard = function Wizard(_ref2, ref) {
         }),
         children: [/*#__PURE__*/_jsxs(HashRouter, {
           hashType: "slash",
-          children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
-            debugMode: true
-          }), /*#__PURE__*/_jsx(WizardHeaderRegion, {
+          children: [/*#__PURE__*/_jsx(DebugBadge, {}), /*#__PURE__*/_jsx(WizardHeaderRegion, {
             hideHeader: hideHeader,
             headerText: headerText,
             sections: routedSections,

package/dist/esm/wizard/index.test.js

@@ -11,25 +11,26 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
  * WordPress dependencies.
  */
 import apiFetch from '@wordpress/api-fetch';
+import { select, useDispatch } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
  */
 import Wizard from './';
 import { useWizardData } from './store/utils';
+import { WIZARD_STORE_NAMESPACE } from './store';
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@wordpress/api-fetch', function () {
   return jest.fn();
 });
 
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = {
-  is_debug_mode: false
-};
+// Localized onto every real wizard screen; the footer's ExternalLink needs a
+// string href.
 window.newspack_urls = {
   support: 'https://help.newspack.com/'
 };
+window.scrollTo = jest.fn();
 var SETTINGS = {
   minimumDonation: '5'
 };
@@ -251,4 +252,156 @@ describe('Wizard', function () {
       }
     }, _callee4);
   })));
+});
+var NarrowingSection = function NarrowingSection() {
+  var _useDispatch = useDispatch(WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch.setHeaderData;
+  useLayoutEffect(function () {
+    setHeaderData({
+      fullWidth: false
+    });
+  }, [setHeaderData]);
+  return /*#__PURE__*/_jsx("div", {
+    children: "Narrowing section"
+  });
+};
+var RecoveringSection = function RecoveringSection() {
+  var _useDispatch2 = useDispatch(WIZARD_STORE_NAMESPACE),
+    setHeaderData = _useDispatch2.setHeaderData;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    failed = _useState2[0],
+    setFailed = _useState2[1];
+  useLayoutEffect(function () {
+    setHeaderData({
+      fullWidth: failed ? false : undefined
+    });
+  }, [setHeaderData, failed]);
+  return /*#__PURE__*/_jsx("button", {
+    onClick: function onClick() {
+      return setFailed(false);
+    },
+    children: "Retry"
+  });
+};
+
+// Two sections, because that is what mounts ResetHeaderData: a single-section
+// wizard never exercises the reset these overrides have to survive.
+var widthSections = function widthSections(renderSection) {
+  return [{
+    label: 'List',
+    path: '/',
+    exact: true,
+    fullWidth: true,
+    render: renderSection
+  }, {
+    label: 'Other',
+    path: '/other',
+    render: function render() {
+      return /*#__PURE__*/_jsx("div", {
+        children: "Other section"
+      });
+    }
+  }];
+};
+describe('Wizard content width', function () {
+  beforeEach(function () {
+    apiFetch.mockReset();
+  });
+  it('renders full-width when the section declares it and nothing overrides it', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _render, container, _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          _render = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx("div", {
+                children: "List content"
+              });
+            })
+          })), container = _render.container;
+          _t5 = expect;
+          _context5.n = 1;
+          return screen.findByText('List content');
+        case 1:
+          _t5(_context5.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  })));
+  it('falls back to the standard width when a section overrides fullWidth before paint', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var _render2, container, _t6;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          _render2 = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(NarrowingSection, {});
+            })
+          })), container = _render2.container;
+          _t6 = expect;
+          _context6.n = 1;
+          return screen.findByText('Narrowing section');
+        case 1:
+          _t6(_context6.v).toBeInTheDocument();
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+        case 2:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  })));
+  it('restores the declared width when the section clears its override', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+    var _render3, container, retry;
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
+        case 0:
+          _render3 = render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(RecoveringSection, {});
+            })
+          })), container = _render3.container;
+          _context7.n = 1;
+          return screen.findByRole('button', {
+            name: 'Retry'
+          });
+        case 1:
+          retry = _context7.v;
+          expect(container.querySelector('.newspack-wizard__content')).not.toHaveClass('newspack-wizard__content--full-width');
+          fireEvent.click(retry);
+          _context7.n = 2;
+          return waitFor(function () {
+            return expect(container.querySelector('.newspack-wizard__content')).toHaveClass('newspack-wizard__content--full-width');
+          });
+        case 2:
+          return _context7.a(2);
+      }
+    }, _callee7);
+  })));
+  it('keeps a section header published from a layout effect through the mount reset', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+    var _t7;
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
+        case 0:
+          render(/*#__PURE__*/_jsx(Wizard, {
+            headerText: "Test wizard",
+            sections: widthSections(function () {
+              return /*#__PURE__*/_jsx(NarrowingSection, {});
+            })
+          }));
+          _t7 = expect;
+          _context8.n = 1;
+          return screen.findByText('Narrowing section');
+        case 1:
+          _t7(_context8.v).toBeInTheDocument();
+          expect(select(WIZARD_STORE_NAMESPACE).getHeaderData().fullWidth).toBe(false);
+        case 2:
+          return _context8.a(2);
+      }
+    }, _callee8);
+  })));
 });

package/dist/esm/wizard/store/index.js

@@ -19,6 +19,8 @@ import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 import { createAction } from './utils.js';
 export var WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 var DEFAULT_STATE = {
+  // `fullWidth` is deliberately absent: a default here would narrow every
+  // full-width section on reset, since Wizard only falls back when it is unset.
   headerData: {
     actions: [],
     backNav: '',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.8.0",
+	"version": "4.8.1-alpha.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/action-card/action-card.d.ts

@@ -10,8 +10,9 @@ export interface ActionCardProps {
 	badges?: CardBadge[];
 	className?: string;
 	indent?: string;
-	notification?: string | Error | null;
-	notificationLevel?: 'error' | 'warning' | 'info';
+	notification?: React.ReactNode | Error | null;
+	notificationLevel?: 'error' | 'warning' | 'info' | 'success';
+	notificationHTML?: boolean;
 	isMedium?: boolean;
 	disabled?: boolean | string;
 	hasGreyHeader?: boolean;

package/src/action-card/index.js

@@ -5,8 +5,9 @@
 /**
  * WordPress dependencies
  */
-import { Draggable, ExternalLink, ToggleControl } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { Draggable, ExternalLink, Notice, ToggleControl } from '@wordpress/components';
+import { RawHTML, useEffect, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icons';
 import { Badge } from '@wordpress/ui';
@@ -14,7 +15,7 @@ import { Badge } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
+import { Button, Card, Grid, Handoff, Waiting } from '../';
 import { ActionCardProps } from './action-card.d.ts';
 import './style.scss';
 
@@ -23,8 +24,76 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
+const NOTIFICATION_LEVELS = [ 'error', 'info', 'success', 'warning' ];
+
+/**
+ * Collect a notification's text, including text nested inside React elements.
+ *
+ * Segments join with a space so that adjacent elements do not weld together: by the
+ * time speak() sees this string the markup that separated them is already gone.
+ *
+ * @param {*} value Notification content.
+ * @return {string} The collected text.
+ */
+const getNotificationText = value => {
+	if ( typeof value === 'string' ) {
+		return value;
+	}
+	if ( typeof value === 'number' ) {
+		return String( value );
+	}
+	if ( value instanceof Error ) {
+		return value.message;
+	}
+	if ( Array.isArray( value ) ) {
+		return value.map( getNotificationText ).join( ' ' );
+	}
+	return value?.props?.children === undefined ? '' : getNotificationText( value.props.children );
+};
+
+/**
+ * Derive a plain-text announcement from a notification.
+ *
+ * Notice defaults spokenMessage to its children and runs renderToString over them
+ * during render, which corrupts the hook dispatcher when those children are
+ * components. A notification can be any element, so the announcement is always
+ * built from its text instead of letting that default apply. Tags in an HTML
+ * notification stay in, since speak() strips them itself. Entities are decoded so
+ * the announcement matches the text on screen, which getNotificationContent decodes
+ * for the same reason.
+ *
+ * @param {*} notification Notification content.
+ * @return {string} Message to announce.
+ */
+const getSpokenNotification = notification => decodeEntities( getNotificationText( notification ) ).replace( /\s+/g, ' ' ).trim();
+
+/**
+ * Decode a notification's own text for display.
+ *
+ * React does not decode entities in text children, and notification text is often
+ * server-sourced, so a message carrying `’` would otherwise show the entity
+ * and announce the character. The HTML branch is left alone: there the browser's
+ * parser decodes as it renders.
+ *
+ * @param {*} value Notification content.
+ * @return {*} The content, with its own strings decoded.
+ */
+const getNotificationContent = value => {
+	if ( value instanceof Error ) {
+		return decodeEntities( value.message );
+	}
+	if ( typeof value === 'string' ) {
+		return decodeEntities( value );
+	}
+	if ( Array.isArray( value ) ) {
+		return value.map( getNotificationContent );
+	}
+	return value;
+};
+
 /**
  * ActionCard component
+ *
  * @param {ActionCardProps} props Component props.
  * @return {JSX.Element} ActionCard component.
  */
@@ -107,6 +176,7 @@ const ActionCard = ( {
 	}, [ collapse ] );
 
 	const hasChildren = notification || children;
+	const notificationContent = getNotificationContent( notification );
 	const classes = classnames(
 		'newspack-action-card',
 		simple && 'newspack-card--is-clickable',
@@ -243,12 +313,15 @@ const ActionCard = ( {
 					</Button>
 				) }
 			</div>
-			{ notification && (
+			{ notification && NOTIFICATION_LEVELS.includes( notificationLevel ) && (
 				<div className="newspack-action-card__notification newspack-action-card__region-children">
-					{ 'error' === notificationLevel && <Notice noticeText={ notification } isError rawHTML={ notificationHTML } /> }
-					{ 'info' === notificationLevel && <Notice noticeText={ notification } rawHTML={ notificationHTML } /> }
-					{ 'success' === notificationLevel && <Notice noticeText={ notification } isSuccess rawHTML={ notificationHTML } /> }
-					{ 'warning' === notificationLevel && <Notice noticeText={ notification } isWarning rawHTML={ notificationHTML } /> }
+					<Notice status={ notificationLevel } isDismissible={ false } spokenMessage={ getSpokenNotification( notification ) }>
+						{ notificationHTML && typeof notification === 'string' ? (
+							<RawHTML className="newspack-action-card__notification-html">{ notification }</RawHTML>
+						) : (
+							notificationContent
+						) }
+					</Notice>
 				</div>
 			) }
 			{ children && ( ( expandable && expanded ) || ! expandable ) ? (