← All changes | src/Notifications/templates/Bar.jsx +39 -12 3.1.6 → 3.2.3 View file →

		@@ -1,17 +1,20 @@
1		-import { useEffect, useRef } from '@wordpress/element';
	1	+import { Spinner } from '@wordpress/components';
	2	+import { useEffect, useRef, useState } from '@wordpress/element';
2	3	import { __ } from '@wordpress/i18n';
3	4	import { Icon } from '@wordpress/icons';
4	5	import classNames from 'classnames';
	6	+import { Cta } from '../Cta';
5	7	import {
6	8	bannerButtonVariables,
	9	+ barIconVariables,
7	10	barVariables,
8	11	buttonHoverClasses,
9	12	colorsOf,
10	13	} from '../colors';
	14	+import { ctaActionFor, runCtaAction } from '../cta-action';
11	15	import { DismissButton } from '../DismissButton';
12	16	import { iconFor } from '../icons';
13		-import { externalLinkProps } from '../notification-link';
14	17
15	18	export const Bar = ({
16	19	notification,
17	20	href,
		@@ -24,9 +27,22 @@
24	27	const ctaLabel = notification['cta-label'];
25	28	const icon = iconFor(notification.icon);
26	29	const colors = colorsOf(notification);
27	30	const ref = useRef(null);
	31	+ const [running, setRunning] = useState(false);
	32	+ const action = ctaActionFor(notification);
	33	+ const ctaClassName = classNames(
	34	+ 'inline-flex h-10 shrink-0 items-center gap-2 rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline',
	35	+ // Both cursor utilities in one layer would leave the winner to CSS source order.
	36	+ running ? 'cursor-not-allowed' : 'cursor-pointer',
	37	+ !running && buttonHoverClasses(colors),
	38	+ );
28	39
	40	+ const runAction = () => {
	41	+ setRunning(true);
	42	+ runCtaAction(action, onClick);
	43	+ };
	44	+
29	45	// The agent reads this to keep its panel and the scaled page off the bar.
30	46	useEffect(() => {
31	47	const root = document.documentElement;
32	48	const publish = () =>
		@@ -59,8 +75,9 @@
59	75	>
60	76	{icon && (
61	77	<span
62	78	className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text"
	79	+ style={barIconVariables(colors)}
63	80	data-test="notification-bar-icon"
64	81	>
65	82	<Icon icon={icon} size={24} className="fill-current" />
66	83	</span>
		@@ -68,21 +85,31 @@
68	85	<div className="min-w-0 flex-1">
69	86	<div className="text-[15px] font-bold">{title}</div>
70	87	<div className="mt-0.5 text-[13px]">{content}</div>
71	88	</div>
72		- {ctaLabel && href && (
73		- <a
74		- href={href}
75		- {...externalLinkProps(external)}
76		- onClick={onClick}
77		- className={classNames(
78		- 'inline-flex h-10 shrink-0 cursor-pointer items-center rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline',
79		- buttonHoverClasses(colors),
80		- )}
	89	+ {ctaLabel && action && (
	90	+ <button
	91	+ type="button"
	92	+ onClick={runAction}
	93	+ disabled={running}
	94	+ aria-busy={running}
	95	+ className={ctaClassName}
81	96	style={bannerButtonVariables(colors)}
	97	+ data-test="notification-bar-action"
82	98	>
83	99	{ctaLabel}
84		- </a>
	100	+ {running && <Spinner className="m-0 h-4 text-banner-text" />}
	101	+ </button>
	102	+ )}
	103	+ {!action && (
	104	+ <Cta
	105	+ notification={notification}
	106	+ href={href}
	107	+ external={external}
	108	+ onClick={onClick}
	109	+ surface="banner"
	110	+ className="inline-flex h-10 shrink-0 cursor-pointer items-center rounded-md bg-banner-main px-5 text-sm font-medium text-banner-text no-underline"
	111	+ />
85	112	)}
86	113	{dismissible && (
87	114	<DismissButton
88	115	onClick={onDismiss}