newspack-components 4.8.0 → 4.9.0-alpha.1

package/dist/esm/action-card/index.js

@@ -9,8 +9,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * 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';
@@ -18,20 +19,90 @@ import { Badge } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
+import { Button, Card, Grid, Handoff, Waiting } from '../';
 import './style.scss';
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var 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.
+ */
+var _getNotificationText = function getNotificationText(value) {
+  var _value$props;
+  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 === null || value === void 0 || (_value$props = value.props) === null || _value$props === void 0 ? void 0 : _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.
+ */
+var getSpokenNotification = function getSpokenNotification(notification) {
+  return 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 `&#8217;` 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.
+ */
+var _getNotificationContent = function 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.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var ActionCard = function ActionCard(_ref) {
   var badges = _ref.badges,
     className = _ref.className,
@@ -125,6 +196,7 @@ var ActionCard = function ActionCard(_ref) {
     }
   }, [collapse]);
   var hasChildren = notification || children;
+  var notificationContent = _getNotificationContent(notification);
   var classes = classnames('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
   var backgroundImageStyles = function backgroundImageStyles(url) {
     return url ? {
@@ -248,24 +320,17 @@ var ActionCard = function ActionCard(_ref) {
           width: 24
         })
       })]
-    }), notification && /*#__PURE__*/_jsxs("div", {
+    }), notification && NOTIFICATION_LEVELS.includes(notificationLevel) && /*#__PURE__*/_jsx("div", {
       className: "newspack-action-card__notification newspack-action-card__region-children",
-      children: ['error' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isError: true,
-        rawHTML: notificationHTML
-      }), 'info' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        rawHTML: notificationHTML
-      }), 'success' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isSuccess: true,
-        rawHTML: notificationHTML
-      }), 'warning' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-        noticeText: notification,
-        isWarning: true,
-        rawHTML: notificationHTML
-      })]
+      children: /*#__PURE__*/_jsx(Notice, {
+        status: notificationLevel,
+        isDismissible: false,
+        spokenMessage: getSpokenNotification(notification),
+        children: notificationHTML && typeof notification === 'string' ? /*#__PURE__*/_jsx(RawHTML, {
+          className: "newspack-action-card__notification-html",
+          children: notification
+        }) : notificationContent
+      })
     }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/_jsx("div", {
       className: "newspack-action-card__region-children",
       children: children

package/dist/esm/action-card/index.test.js

@@ -1,12 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
 /**
  * External dependencies.
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies.
+ */
+import { speak } from '@wordpress/a11y';
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
 import ActionCard from './index';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@wordpress/a11y', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('@wordpress/a11y')), {}, {
+    speak: jest.fn()
+  });
+});
 
 /**
  * The library Badge styles its wrapper rather than its text, so a badge with no label
@@ -15,7 +31,6 @@ import ActionCard from './index';
  * can sit on a placement with no entry in the placement map — and an array literal is
  * always non-empty, so the component has to drop those itself.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 describe('ActionCard badges', function () {
   var badgeText = function badgeText() {
     return screen.queryAllByText(function (_, node) {
@@ -86,4 +101,180 @@ describe('ActionCard badges', function () {
     // An empty array used to fall through as a literal `0` in the heading.
     expect(withEmptyArray.textContent).not.toContain('0');
   });
+});
+
+/**
+ * ActionCard derives the notice's spoken message rather than letting core default it to
+ * the children. Core runs `renderToString` over that default during render, which corrupts
+ * the hook dispatcher when the children are components — so the derivation is what keeps a
+ * notification carrying a `<Button>` from crashing the card on a later re-render.
+ */
+describe('ActionCard notifications', function () {
+  beforeEach(function () {
+    speak.mockClear();
+  });
+  var spoken = function spoken() {
+    return speak.mock.calls.map(function (call) {
+      return call[0];
+    });
+  };
+  it('renders a notice for a recognised level', function () {
+    var _render5 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Plugin cannot be installed",
+        notificationLevel: "error"
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
+  it('renders no notice for an unrecognised or absent level', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Something happened",
+        notificationLevel: "critical"
+      })),
+      unknown = _render6.container;
+    expect(unknown.querySelector('.components-notice')).not.toBeInTheDocument();
+    var _render7 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notification: "Something happened"
+      })),
+      absent = _render7.container;
+    expect(absent.querySelector('.components-notice')).not.toBeInTheDocument();
+  });
+  it('announces the text inside an element-only notification', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [/*#__PURE__*/_jsx("button", {
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()).toContain('Click here to connect your account.');
+  });
+  it('announces strings and element text together', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "success",
+      notification: ['Created custom targeting keys: ',
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      _jsx("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard")]
+    }));
+    expect(spoken()).toContain('Created custom targeting keys: Visit your GAM dashboard');
+  });
+  it('announces an Error and renders its message rather than throwing', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: new Error('Network unreachable')
+    }));
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(spoken()).toContain('Network unreachable');
+  });
+  it('renders HTML notifications in their own wrapper and hands speak() the tags to strip', function () {
+    var _render8 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: '<p>Install failed.</p><p>Try again.</p>',
+        notificationHTML: true
+      })),
+      container = _render8.container;
+    expect(container.querySelectorAll('.newspack-action-card__notification-html > p')).toHaveLength(2);
+    expect(spoken()[0]).toContain('<p>Install failed.</p>');
+  });
+  it('decodes entities in both the announcement and the visible text', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: 'Plugin &#8220;Foo&#8221; could not be activated'
+    }));
+    expect(screen.getByText('Plugin “Foo” could not be activated')).toBeInTheDocument();
+    expect(spoken()[0]).toContain('“Foo”');
+  });
+  it('decodes entities inside an array of notification parts', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: ['Could not reach the publisher&#8217;s network.', ' ']
+    }));
+    expect(screen.getByText(/Could not reach the publisher’s network\./)).toBeInTheDocument();
+    expect(spoken()[0]).toContain('publisher’s');
+  });
+  it('leaves entity decoding to the browser on the HTML branch', function () {
+    var _render9 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: 'Get it from <a href="https://example.org">the plugin&#8217;s site</a>',
+        notificationHTML: true
+      })),
+      container = _render9.container;
+    expect(container.querySelector('.newspack-action-card__notification-html a').textContent).toBe('the plugin’s site');
+    expect(spoken()[0]).toContain('plugin’s site');
+  });
+  it('renders a non-string notification as children even when notificationHTML is set', function () {
+    var _render0 = render(/*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: /*#__PURE__*/_jsx("span", {
+          children: "Network unreachable"
+        }),
+        notificationHTML: true
+      })),
+      container = _render0.container;
+    expect(screen.getByText('Network unreachable')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-action-card__notification-html')).not.toBeInTheDocument();
+  });
+  it('keeps adjacent element texts apart in the announcement', function () {
+    render(/*#__PURE__*/_jsx(ActionCard, {
+      title: "Ad Manager",
+      notificationLevel: "error",
+      notification: [
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      _jsx("a", {
+        href: "https://example.org",
+        children: "Visit your GAM dashboard"
+      }, "dashboard"), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        children: "Click here to connect your account."
+      }, "connect")]
+    }));
+    expect(spoken()[0]).toBe('Visit your GAM dashboard Click here to connect your account.');
+  });
+  it('survives a re-render that changes how many hooked components the notification holds', function () {
+    var HookedAction = function HookedAction(_ref) {
+      var children = _ref.children;
+      var _useState = useState(children),
+        _useState2 = _slicedToArray(_useState, 1),
+        label = _useState2[0];
+      return /*#__PURE__*/_jsx("button", {
+        type: "button",
+        children: label
+      });
+    };
+    var card = function card(notification) {
+      return /*#__PURE__*/_jsx(ActionCard, {
+        title: "Ad Manager",
+        notificationLevel: "error",
+        notification: notification
+      });
+    };
+    var _render1 = render(card([/*#__PURE__*/_jsx(HookedAction, {
+        children: "Retry"
+      }, "retry"), /*#__PURE__*/_jsx(HookedAction, {
+        children: "Documentation"
+      }, "docs")])),
+      rerender = _render1.rerender,
+      container = _render1.container;
+    expect(function () {
+      return rerender(card([/*#__PURE__*/_jsx(HookedAction, {
+        children: "Retry"
+      }, "retry")]));
+    }).not.toThrow();
+    expect(container.querySelector('.components-notice.is-error')).toBeInTheDocument();
+  });
 });

package/dist/esm/action-card/style.scss

@@ -339,18 +339,12 @@
 
 	/* Notifications */
 	.newspack-action-card__notification {
-		.newspack-notice {
+		.components-notice {
 			margin: 0;
-
-			&__heading {
-				margin-top: 0;
-			}
 		}
 
-		&.newspack-action-card__region-children {
-			.newspack-notice {
-				margin-top: 32px;
-			}
+		.newspack-action-card__notification-html > * {
+			margin: 0;
 		}
 	}
 

package/dist/esm/card-feature/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { createElement, isValidElement } from '@wordpress/element';
+import { createElement, isValidElement, useCallback, useEffect, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
@@ -72,6 +72,30 @@ var _CardFeature = function CardFeature(_ref) {
   // translators: %1$s: the button's visible action label, e.g. "Enable". %2$s: the feature's name. The visible label must stay first (WCAG 2.5.3).
   _x('%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin'), buttonLabel, title);
   var showMoreControls = enabled && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && (!requirements || requirementsActionable);
+  // A Configure button with nothing behind it would click to nowhere.
+  var showPrimaryButton = !isConfigureState || !!onConfigure;
+
+  // Enabling a feature with nothing to configure removes the button that was
+  // just used, so its focus goes to the More menu instead of the page. React
+  // detaches a ref before removing the node, which is the last point the
+  // button can still be read as focused.
+  var actionsRef = useRef(null);
+  var primaryButtonNode = useRef(null);
+  var primaryButtonLeftWithFocus = useRef(false);
+  var primaryButtonRef = useCallback(function (node) {
+    if (!node && primaryButtonNode.current) {
+      primaryButtonLeftWithFocus.current = primaryButtonNode.current === primaryButtonNode.current.ownerDocument.activeElement;
+    }
+    primaryButtonNode.current = node;
+  }, []);
+  useEffect(function () {
+    var _actionsRef$current;
+    if (showPrimaryButton || !primaryButtonLeftWithFocus.current) {
+      return;
+    }
+    primaryButtonLeftWithFocus.current = false;
+    (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 || (_actionsRef$current = _actionsRef$current.querySelector('.components-dropdown-menu__toggle')) === null || _actionsRef$current === void 0 || _actionsRef$current.focus();
+  }, [showPrimaryButton]);
   var handleButtonClick = function handleButtonClick() {
     if (isConfigureState) {
       onConfigure === null || onConfigure === void 0 || onConfigure();
@@ -81,8 +105,7 @@ var _CardFeature = function CardFeature(_ref) {
   };
   var iconDescriptor = icon && !isValidElement(icon) ? icon : null;
   var iconClasses = iconDescriptor ? classnames('newspack-card-feature__icon', {
-    'newspack-card-feature__icon--radius-small': !!iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
-    'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full'
+    'newspack-card-feature__icon--has-background': !!iconDescriptor.backgroundColor
   }) : undefined;
   var renderedIcon = null;
   if (isValidElement(icon)) {
@@ -129,10 +152,12 @@ var _CardFeature = function CardFeature(_ref) {
         gap: "sm",
         wrap: "wrap",
         children: [/*#__PURE__*/_jsxs(Stack, {
+          ref: actionsRef,
           direction: "row",
           align: "center",
           gap: "sm",
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [showPrimaryButton && /*#__PURE__*/_jsx(Button, {
+            ref: primaryButtonRef,
             variant: isConfigureState ? 'tertiary' : 'secondary',
             accessibleWhenDisabled: true,
             "aria-describedby": describedById,