newspack-components 4.8.0 → 4.8.1-alpha.1

package/src/action-card/index.test.js

@@ -3,11 +3,22 @@
  */
 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';
 
+jest.mock( '@wordpress/a11y', () => ( {
+	...jest.requireActual( '@wordpress/a11y' ),
+	speak: jest.fn(),
+} ) );
+
 /**
  * The library Badge styles its wrapper rather than its text, so a badge with no label
  * paints a bare coloured pill. Callers build the `badges` array from data that can be
@@ -54,3 +65,151 @@ describe( 'ActionCard badges', () => {
 		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', () => {
+	beforeEach( () => {
+		speak.mockClear();
+	} );
+
+	const spoken = () => speak.mock.calls.map( call => call[ 0 ] );
+
+	it( 'renders a notice for a recognised level', () => {
+		const { container } = render( <ActionCard title="Ad Manager" notification="Plugin cannot be installed" notificationLevel="error" /> );
+
+		expect( container.querySelector( '.components-notice.is-error' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders no notice for an unrecognised or absent level', () => {
+		const { container: unknown } = render( <ActionCard title="Ad Manager" notification="Something happened" notificationLevel="critical" /> );
+		expect( unknown.querySelector( '.components-notice' ) ).not.toBeInTheDocument();
+
+		const { container: absent } = render( <ActionCard title="Ad Manager" notification="Something happened" /> );
+		expect( absent.querySelector( '.components-notice' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'announces the text inside an element-only notification', () => {
+		render(
+			<ActionCard
+				title="Ad Manager"
+				notificationLevel="error"
+				notification={ [ <button key="connect">Click here to connect your account.</button> ] }
+			/>
+		);
+
+		expect( spoken() ).toContain( 'Click here to connect your account.' );
+	} );
+
+	it( 'announces strings and element text together', () => {
+		render(
+			<ActionCard
+				title="Ad Manager"
+				notificationLevel="success"
+				notification={ [
+					'Created custom targeting keys: ',
+					// eslint-disable-next-line react/jsx-indent
+					<a key="dashboard" href="https://example.org">
+						Visit your GAM dashboard
+					</a>,
+				] }
+			/>
+		);
+
+		expect( spoken() ).toContain( 'Created custom targeting keys: Visit your GAM dashboard' );
+	} );
+
+	it( 'announces an Error and renders its message rather than throwing', () => {
+		render( <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', () => {
+		const { container } = render(
+			<ActionCard title="Ad Manager" notificationLevel="error" notification={ '<p>Install failed.</p><p>Try again.</p>' } notificationHTML />
+		);
+
+		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', () => {
+		render( <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', () => {
+		render(
+			<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', () => {
+		const { container } = render(
+			<ActionCard
+				title="Ad Manager"
+				notificationLevel="error"
+				notification={ 'Get it from <a href="https://example.org">the plugin&#8217;s site</a>' }
+				notificationHTML
+			/>
+		);
+
+		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', () => {
+		const { container } = render(
+			<ActionCard title="Ad Manager" notificationLevel="error" notification={ <span>Network unreachable</span> } notificationHTML />
+		);
+
+		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', () => {
+		render(
+			<ActionCard
+				title="Ad Manager"
+				notificationLevel="error"
+				notification={ [
+					// eslint-disable-next-line react/jsx-indent
+					<a key="dashboard" href="https://example.org">
+						Visit your GAM dashboard
+					</a>,
+					<button key="connect" type="button">
+						Click here to connect your account.
+					</button>,
+				] }
+			/>
+		);
+
+		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', () => {
+		const HookedAction = ( { children } ) => {
+			const [ label ] = useState( children );
+			return <button type="button">{ label }</button>;
+		};
+		const card = notification => <ActionCard title="Ad Manager" notificationLevel="error" notification={ notification } />;
+
+		const { rerender, container } = render(
+			card( [ <HookedAction key="retry">Retry</HookedAction>, <HookedAction key="docs">Documentation</HookedAction> ] )
+		);
+
+		expect( () => rerender( card( [ <HookedAction key="retry">Retry</HookedAction> ] ) ) ).not.toThrow();
+		expect( container.querySelector( '.components-notice.is-error' ) ).toBeInTheDocument();
+	} );
+} );

package/src/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/src/debug-badge/index.js

@@ -0,0 +1,36 @@
+/**
+ * Debug Badge
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, bug } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * Debug Badge component.
+ *
+ * Gates itself on `window.newspack_aux_data.is_debug_mode`, so consumers render
+ * it unconditionally and it stays absent outside debug mode.
+ *
+ * @return {JSX.Element|null} Debug Badge component, or nothing outside debug mode.
+ */
+const DebugBadge = () => {
+	if ( ! window.newspack_aux_data?.is_debug_mode ) {
+		return null;
+	}
+
+	return (
+		<div className="newspack-debug-badge" role="img" aria-label={ __( 'Debug mode', 'newspack-plugin' ) }>
+			<Icon icon={ bug } />
+		</div>
+	);
+};
+
+export default DebugBadge;

package/src/debug-badge/index.test.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import DebugBadge from '.';
+
+describe( 'DebugBadge', () => {
+	afterEach( () => {
+		delete window.newspack_aux_data;
+	} );
+
+	it( 'renders the badge and its glyph in debug mode', () => {
+		window.newspack_aux_data = { is_debug_mode: true };
+		const { container } = render( <DebugBadge /> );
+		expect( container.querySelector( '.newspack-debug-badge' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.newspack-debug-badge > svg' ) ).toBeInTheDocument();
+	} );
+
+	it( 'names itself for assistive tech', () => {
+		window.newspack_aux_data = { is_debug_mode: true };
+		render( <DebugBadge /> );
+		expect( screen.getByRole( 'img', { name: 'Debug mode' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders nothing outside debug mode', () => {
+		window.newspack_aux_data = { is_debug_mode: false };
+		const { container } = render( <DebugBadge /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'renders nothing when the global is absent', () => {
+		const { container } = render( <DebugBadge /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );

package/src/debug-badge/style.scss

@@ -0,0 +1,26 @@
+/**
+ * Debug Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-debug-badge {
+	background: np-colors.$primary-600;
+	border-radius: wp-vars.$radius-round;
+	bottom: 0;
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	display: grid;
+	height: wp-vars.$button-size;
+	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
+	place-items: center;
+	pointer-events: none;
+	position: fixed;
+	width: wp-vars.$button-size;
+	z-index: 9997;
+
+	> svg {
+		fill: wp-colors.$white;
+	}
+}

package/src/empty-state/README.md

@@ -68,15 +68,16 @@ import { EmptyState } from 'newspack-components';
 ```
 
 Every slot except `Root` is optional, and anything else you pass to `Root`
-becomes a sibling of the header at the same 8-unit gap. A screen that offers
-choices rather than one action can drop a stack of cards in instead of
-`EmptyState.Actions`. Pass elements: `Root`'s stack keeps a lone string but drops
-one sitting beside an element, so wrap loose text in a `<p>`. The `Grid` margin
-reset reaches direct children only, so a `<p>` inside a slot keeps the browser's
-default block margin and you zero it where you use it. The component resets
-margins on the two elements it renders itself and stops there: a blanket reset on
-slot content would silently flatten a consumer's own stack of cards or prose, and
-the gaps this component owns all come from its stacks anyway.
+becomes a sibling of the header at the same gap the stack uses: 8 units at the
+default size, 6 at `small`. A screen that offers choices rather than one action
+can drop a stack of cards in instead of `EmptyState.Actions`. Pass elements:
+`Root`'s stack keeps a lone string but drops one sitting beside an element, so
+wrap loose text in a `<p>`. The `Grid` margin reset reaches direct children
+only, so a `<p>` inside a slot keeps the browser's default block margin and you
+zero it where you use it. The component resets margins on the two elements it
+renders itself and stops there: a blanket reset on slot content would silently
+flatten a consumer's own stack of cards or prose, and the gaps this component
+owns all come from its stacks anyway.
 
 ## Consumers own their wrappers
 
@@ -120,7 +121,7 @@ With a children slot there is no pair to check. A button that navigates takes
 |------|------|---------|-------------|
 | `children` | `React.ReactNode` | — | The slots, plus any custom body. |
 | `className` | `string` | — | Merged onto the grid. |
-| `size` | `'default'` \| `'small'` | `'default'` | Read by `EmptyState.Header`. `small` suits an empty state standing in for a panel inside a card. |
+| `size` | `'default'` \| `'small'` | `'default'` | Sets the stack gap, and is read by `EmptyState.Header`. `small` suits an empty state standing in for a panel inside a card. |
 
 The grid always carries `newspack-empty-state`, and `className` lands there
 rather than on a wrapper, because consumers key off both. Inside it, the stack

package/src/empty-state/index.test.js

@@ -45,6 +45,16 @@ describe( 'EmptyState.Root', () => {
 		expect( stack ).toHaveStyle( { gap: 'var(--wpds-dimension-gap-2xl, 32px)' } );
 	} );
 
+	it( 'tightens the stack gap when small', () => {
+		const { container } = render(
+			<EmptyState.Root size="small">
+				<p>body</p>
+			</EmptyState.Root>
+		);
+		const stack = container.querySelector( '.newspack-empty-state' ).firstElementChild;
+		expect( stack ).toHaveStyle( { gap: 'var(--wpds-dimension-gap-xl, 24px)' } );
+	} );
+
 	// Consumers key `:has()` selectors off this class, so losing it changes their
 	// layout without failing anything.
 	it( 'merges className onto the grid', () => {

package/src/empty-state/root.tsx

@@ -24,11 +24,12 @@ const gridColumn = { 'data-start': '2', 'data-end': '4' };
 
 const Root = ( { size = 'default', className, children }: EmptyStateRootProps ) => {
 	const context = useMemo( () => ( { size } ), [ size ] );
+	const isSmall = size === 'small';
 
 	return (
 		<EmptyStateContext.Provider value={ context }>
 			<Grid className={ classnames( 'newspack-empty-state', className ) } columns={ 4 } noMargin>
-				<Stack className="newspack-empty-state__stack" direction="column" gap="2xl" { ...gridColumn }>
+				<Stack className="newspack-empty-state__stack" direction="column" gap={ isSmall ? 'xl' : '2xl' } { ...gridColumn }>
 					{ children }
 				</Stack>
 			</Grid>

package/src/empty-state/types.ts

@@ -5,7 +5,7 @@ export type EmptyStateSize = 'default' | 'small';
 export type EmptyStateActionsOrientation = 'row' | 'column';
 
 export type EmptyStateRootProps = {
-	/** Read by `EmptyState.Header` through context. */
+	/** Sets the stack gap here, and is read by `EmptyState.Header` through context. */
 	size?: EmptyStateSize;
 	/** Merged onto the grid, which is the element consumers' `:has()` selectors look for. */
 	className?: string;

package/src/footer/index.js

@@ -11,6 +11,7 @@ import { ExternalLink } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
+import useConfirmDialog from '../hooks/use-confirm-dialog';
 import './style.scss';
 
 const Footer = ( { simple = undefined } ) => {
@@ -24,6 +25,23 @@ const Footer = ( { simple = undefined } ) => {
 		support_email: supportEmail,
 	} = window.newspack_urls || {};
 
+	const resetDialog = useConfirmDialog( {
+		title: __( 'Reset Newspack?', 'newspack-plugin' ),
+		message: __(
+			'This deletes the Newspack settings on this site and returns you to the setup wizard. Your posts, pages and users are not affected. This cannot be undone.',
+			'newspack-plugin'
+		),
+		confirmButtonText: __( 'Reset Newspack', 'newspack-plugin' ),
+		isDestructive: true,
+	} );
+
+	const starterContentDialog = useConfirmDialog( {
+		title: __( 'Remove Starter Content?', 'newspack-plugin' ),
+		message: __( 'This deletes the posts, pages and categories created as starter content. This cannot be undone.', 'newspack-plugin' ),
+		confirmButtonText: __( 'Remove Starter Content', 'newspack-plugin' ),
+		isDestructive: true,
+	} );
+
 	const footerElements = [
 		{
 			label: pluginVersion.label,
@@ -57,12 +75,14 @@ const Footer = ( { simple = undefined } ) => {
 		footerElements.push( {
 			label: __( 'Reset Newspack', 'newspack-plugin' ),
 			url: resetUrl,
+			confirm: resetDialog.requestConfirm,
 		} );
 	}
 	if ( removeStarterContent ) {
 		footerElements.push( {
 			label: __( 'Remove Starter Content', 'newspack-plugin' ),
 			url: removeStarterContent,
+			confirm: starterContentDialog.requestConfirm,
 		} );
 	}
 	if ( supportEmail ) {
@@ -71,15 +91,40 @@ const Footer = ( { simple = undefined } ) => {
 			url: `mailto:${ supportEmail }`,
 		} );
 	}
+	const renderItem = ( { url, label, external, confirm } ) => {
+		if ( external ) {
+			return <ExternalLink href={ url }>{ label }</ExternalLink>;
+		}
+		if ( ! confirm ) {
+			return <a href={ url }>{ label }</a>;
+		}
+		// onClick only sees primary clicks, so an href here would let a middle-click
+		// or "Open link in new tab" reach the URL unguarded.
+		return (
+			<button
+				type="button"
+				onClick={ () =>
+					confirm( () => {
+						window.location.href = url;
+					} )
+				}
+			>
+				{ label }
+			</button>
+		);
+	};
+
 	return (
 		<div className="newspack-footer">
 			{ ! simple && (
 				<ul>
-					{ footerElements.map( ( { url, label, external }, index ) => (
-						<li key={ index }>{ external ? <ExternalLink href={ url }>{ label }</ExternalLink> : <a href={ url }>{ label }</a> }</li>
+					{ footerElements.map( ( element, index ) => (
+						<li key={ index }>{ renderItem( element ) }</li>
 					) ) }
 				</ul>
 			) }
+			{ resetDialog.confirmDialog }
+			{ starterContentDialog.confirmDialog }
 		</div>
 	);
 };

package/src/footer/index.test.js

@@ -0,0 +1,114 @@
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import Footer from './';
+
+// Footer renders outside the wizard's HashRouter, so there is no MemoryRouter
+// wrapper here on purpose.
+describe( 'Footer', () => {
+	const RESET_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=reset';
+	const STARTER_CONTENT_URL = 'https://example.test/wp-admin/admin.php?page=newspack-dashboard&newspack_reset=starter-content';
+	let assigned;
+	let originalLocation;
+	let originalUrls;
+
+	const confirmIn = async name => within( await screen.findByRole( 'dialog' ) ).getByRole( 'button', { name } );
+
+	beforeEach( () => {
+		assigned = [];
+		originalLocation = window.location;
+		originalUrls = window.newspack_urls;
+		delete window.location;
+		window.location = {
+			get href() {
+				return 'https://example.test/wp-admin/admin.php?page=newspack-dashboard';
+			},
+			set href( value ) {
+				assigned.push( value );
+			},
+		};
+		window.newspack_urls = {
+			support: 'https://help.newspack.com/',
+			reset_url: RESET_URL,
+			remove_starter_content: STARTER_CONTENT_URL,
+			plugin_version: { label: 'Newspack 1.0.0' },
+		};
+	} );
+
+	afterEach( () => {
+		delete window.location;
+		window.location = originalLocation;
+		if ( undefined === originalUrls ) {
+			delete window.newspack_urls;
+		} else {
+			window.newspack_urls = originalUrls;
+		}
+	} );
+
+	it( 'offers no link for a browser gesture to follow', () => {
+		render( <Footer /> );
+		expect( screen.getByRole( 'button', { name: 'Reset Newspack' } ) ).not.toHaveAttribute( 'href' );
+		expect( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) ).not.toHaveAttribute( 'href' );
+	} );
+
+	it( 'does not reset on the first click', () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'asks before resetting', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		expect( await screen.findByText( /deletes the Newspack settings/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'leaves the site alone when the reset is cancelled', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		// The modal's close icon also carries aria-label="Cancel"; this is the text button.
+		const cancel = ( await screen.findAllByRole( 'button', { name: 'Cancel' } ) ).find( button => 'Cancel' === button.textContent );
+		fireEvent.click( cancel );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'resets once confirmed', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Reset Newspack' } ) );
+		fireEvent.click( await confirmIn( 'Reset Newspack' ) );
+		expect( assigned ).toEqual( [ RESET_URL ] );
+	} );
+
+	it( 'does not remove the starter content on the first click', () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		expect( assigned ).toEqual( [] );
+	} );
+
+	it( 'asks before removing the starter content', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		expect( await screen.findByText( /created as starter content/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes the starter content once confirmed', async () => {
+		render( <Footer /> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Starter Content' } ) );
+		fireEvent.click( await confirmIn( 'Remove Starter Content' ) );
+		expect( assigned ).toEqual( [ STARTER_CONTENT_URL ] );
+	} );
+
+	it( 'does not guard the non-destructive links', () => {
+		window.newspack_urls.setup_wizard = 'https://example.test/wp-admin/admin.php?page=newspack-setup-wizard';
+		render( <Footer /> );
+		const link = screen.getByRole( 'link', { name: 'Setup Wizard' } );
+		expect( link ).toHaveAttribute( 'href', window.newspack_urls.setup_wizard );
+		fireEvent.click( link );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/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/src/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/src/notice/index.js

@@ -6,7 +6,7 @@
  * 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.
@@ -23,23 +23,10 @@ class Notice extends Component {
 	 * Render
 	 */
 	render() {
-		const {
-			className,
-			debugMode,
-			isError,
-			isHandoff,
-			isHelp,
-			isSuccess,
-			isWarning,
-			noticeText,
-			rawHTML,
-			style = {},
-			children = null,
-		} = this.props;
+		const { className, isError, isHandoff, isHelp, isSuccess, isWarning, noticeText, rawHTML, style = {}, children = null } = this.props;
 		const 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',
@@ -51,8 +38,6 @@ class Notice extends Component {
 			noticeIcon = help;
 		} else if ( isSuccess ) {
 			noticeIcon = check;
-		} else if ( debugMode ) {
-			noticeIcon = bug;
 		} else {
 			noticeIcon = info;
 		}