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

		@@ -1,27 +1,83 @@
	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	+ barVariables,
	10	+ buttonHoverClasses,
	11	+ colorsOf,
	12	+} from '../colors';
3	13	import { DismissButton } from '../DismissButton';
4	14	import { iconFor } from '../icons';
5		-import { externalLinkProps } from '../notification-link';
	15	+import { publishAndReload, publishesSite } from '../publish-site';
6	16
7		-export const Bar = ({ notification, href, external, onDismiss, onClick }) => {
	17	+export const Bar = ({
	18	+ notification,
	19	+ href,
	20	+ external,
	21	+ dismissible,
	22	+ onDismiss,
	23	+ onClick,
	24	+}) => {
8	25	const { title, content } = notification;
9	26	const ctaLabel = notification['cta-label'];
10	27	const icon = iconFor(notification.icon);
	28	+ const colors = colorsOf(notification);
	29	+ const ref = useRef(null);
	30	+ const [publishing, setPublishing] = useState(false);
	31	+ const publishes = publishesSite(notification);
	32	+ const ctaClassName = classNames(
	33	+ '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',
	34	+ // Both cursor utilities in one layer would leave the winner to CSS source order.
	35	+ publishing ? 'cursor-not-allowed' : 'cursor-pointer',
	36	+ !publishing && buttonHoverClasses(colors),
	37	+ );
11	38
	39	+ const publishNow = () => {
	40	+ setPublishing(true);
	41	+ publishAndReload(onClick);
	42	+ };
	43	+
	44	+ // The agent reads this to keep its panel and the scaled page off the bar.
	45	+ useEffect(() => {
	46	+ const root = document.documentElement;
	47	+ const publish = () =>
	48	+ root.style.setProperty(
	49	+ '--extendify-notification-bar-height',
	50	+ // 0 below the breakpoint, where the bar is display:none.
	51	+ `${ref.current.offsetHeight}px`,
	52	+ );
	53	+
	54	+ publish();
	55	+ const observer = new ResizeObserver(publish);
	56	+ observer.observe(ref.current);
	57	+ return () => {
	58	+ observer.disconnect();
	59	+ root.style.removeProperty('--extendify-notification-bar-height');
	60	+ };
	61	+ }, []);
	62	+
12	63	return (
13	64	<aside
	65	+ ref={ref}
14	66	aria-label={
15	67	// translators: label for the bar reporting whether the site is public.
16	68	__('Site status', 'extendify-local')
17	69	}
18	70	// 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"
	71	+ 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"
	72	+ style={barVariables(colors)}
20	73	data-test="notification-bar"
21	74	>
22	75	{icon && (
23		- <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text">
	76	+ <span
	77	+ className="flex size-10 shrink-0 items-center justify-center rounded-full bg-banner-main text-banner-text"
	78	+ data-test="notification-bar-icon"
	79	+ >
24	80	<Icon icon={icon} size={24} className="fill-current" />
25	81	</span>
26	82	)}
27	83	<div className="min-w-0 flex-1">
		@@ -27,22 +83,38 @@
27	83	<div className="min-w-0 flex-1">
28	84	<div className="text-[15px] font-bold">{title}</div>
29	85	<div className="mt-0.5 text-[13px]">{content}</div>
30	86	</div>
31		- {ctaLabel && href && (
32		- <a
	87	+ {ctaLabel && publishes && (
	88	+ <button
	89	+ type="button"
	90	+ onClick={publishNow}
	91	+ disabled={publishing}
	92	+ aria-busy={publishing}
	93	+ className={ctaClassName}
	94	+ style={bannerButtonVariables(colors)}
	95	+ data-test="notification-bar-publish"
	96	+ >
	97	+ {ctaLabel}
	98	+ {publishing && <Spinner className="m-0 h-4 text-banner-text" />}
	99	+ </button>
	100	+ )}
	101	+ {!publishes && (
	102	+ <Cta
	103	+ notification={notification}
33	104	href={href}
34		- {...externalLinkProps(external)}
	105	+ external={external}
35	106	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>
	107	+ surface="banner"
	108	+ 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"
	109	+ />
40	110	)}
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		- />
	111	+ {dismissible && (
	112	+ <DismissButton
	113	+ onClick={onDismiss}
	114	+ size={24}
	115	+ className="flex size-8 shrink-0 items-center justify-center rounded-xs text-design-text hover:opacity-80"
	116	+ />
	117	+ )}
46	118	</aside>
47	119	);
48	120	};