← All changes | src/Notifications/templates/Bar.jsx +90 -16 3.1.5 → 3.2.3 View file →

		@@ -1,27 +1,85 @@
	1	+import { Spinner } from '@wordpress/components';
	2	+import { useEffect, useRef, useState } from '@wordpress/element';
1	3	import { __ } from '@wordpress/i18n';
2	4	import { Icon } from '@wordpress/icons';
	5	+import classNames from 'classnames';
	6	+import { Cta } from '../Cta';
	7	+import {
	8	+ bannerButtonVariables,
	9	+ barIconVariables,
	10	+ barVariables,
	11	+ buttonHoverClasses,
	12	+ colorsOf,
	13	+} from '../colors';
	14	+import { ctaActionFor, runCtaAction } from '../cta-action';
3	15	import { DismissButton } from '../DismissButton';
4	16	import { iconFor } from '../icons';
5		-import { externalLinkProps } from '../notification-link';
6	17
7		-export const Bar = ({ notification, href, external, onDismiss, onClick }) => {
	18	+export const Bar = ({
	19	+ notification,
	20	+ href,
	21	+ external,
	22	+ dismissible,
	23	+ onDismiss,
	24	+ onClick,
	25	+}) => {
8	26	const { title, content } = notification;
9	27	const ctaLabel = notification['cta-label'];
10	28	const icon = iconFor(notification.icon);
	29	+ const colors = colorsOf(notification);
	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	+ );
11	39
	40	+ const runAction = () => {
	41	+ setRunning(true);
	42	+ runCtaAction(action, onClick);
	43	+ };
	44	+
	45	+ // The agent reads this to keep its panel and the scaled page off the bar.
	46	+ useEffect(() => {
	47	+ const root = document.documentElement;
	48	+ const publish = () =>
	49	+ root.style.setProperty(
	50	+ '--extendify-notification-bar-height',
	51	+ // 0 below the breakpoint, where the bar is display:none.
	52	+ `${ref.current.offsetHeight}px`,
	53	+ );
	54	+
	55	+ publish();
	56	+ const observer = new ResizeObserver(publish);
	57	+ observer.observe(ref.current);
	58	+ return () => {
	59	+ observer.disconnect();
	60	+ root.style.removeProperty('--extendify-notification-bar-height');
	61	+ };
	62	+ }, []);
	63	+
12	64	return (
13	65	<aside
	66	+ ref={ref}
14	67	aria-label={
15	68	// translators: label for the bar reporting whether the site is public.
16	69	__('Site status', 'extendify-local')
17	70	}
18	71	// Below core's admin-bar breakpoint a full-width banner covers the content it reports on.
19		- className="fixed bottom-0 left-0 right-0 z-high-1 hidden items-center gap-4 bg-design-main px-5 py-3.5 text-base text-design-text md:flex [body:has(#extendify-agent-chat)_&]:ml-96"
	72	+ className="fixed bottom-0 left-0 right-0 z-higher hidden items-center gap-4 bg-design-main px-5 py-3.5 text-base text-design-text md:flex"
	73	+ style={barVariables(colors)}
20	74	data-test="notification-bar"
21	75	>
22	76	{icon && (
23		- <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text">
	77	+ <span
	78	+ className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text"
	79	+ style={barIconVariables(colors)}
	80	+ data-test="notification-bar-icon"
	81	+ >
24	82	<Icon icon={icon} size={24} className="fill-current" />
25	83	</span>
26	84	)}
27	85	<div className="min-w-0 flex-1">
		@@ -27,22 +85,38 @@
27	85	<div className="min-w-0 flex-1">
28	86	<div className="text-[15px] font-bold">{title}</div>
29	87	<div className="mt-0.5 text-[13px]">{content}</div>
30	88	</div>
31		- {ctaLabel && href && (
32		- <a
	89	+ {ctaLabel && action && (
	90	+ <button
	91	+ type="button"
	92	+ onClick={runAction}
	93	+ disabled={running}
	94	+ aria-busy={running}
	95	+ className={ctaClassName}
	96	+ style={bannerButtonVariables(colors)}
	97	+ data-test="notification-bar-action"
	98	+ >
	99	+ {ctaLabel}
	100	+ {running && <Spinner className="m-0 h-4 text-banner-text" />}
	101	+ </button>
	102	+ )}
	103	+ {!action && (
	104	+ <Cta
	105	+ notification={notification}
33	106	href={href}
34		- {...externalLinkProps(external)}
	107	+ external={external}
35	108	onClick={onClick}
36		- 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 hover:opacity-90"
37		- >
38		- {ctaLabel}
39		- </a>
	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	+ />
40	112	)}
41		- <DismissButton
42		- onClick={onDismiss}
43		- size={24}
44		- className="flex size-8 shrink-0 items-center justify-center rounded-xs text-design-text hover:opacity-80"
45		- />
	113	+ {dismissible && (
	114	+ <DismissButton
	115	+ onClick={onDismiss}
	116	+ size={24}
	117	+ className="flex size-8 shrink-0 items-center justify-center rounded-xs text-design-text hover:opacity-80"
	118	+ />
	119	+ )}
46	120	</aside>
47	121	);
48	122	};