newspack-components 3.0.0 → 4.0.0

package/src/custom-select-control/style.scss

@@ -10,7 +10,7 @@
 		margin-bottom: 8px;
 	}
 
-	.components-custom-select-control__button {
+	button {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
 		color: wp-colors.$gray-900;
@@ -41,6 +41,10 @@
 		}
 	}
 
+	button + div {
+		min-width: 200px;
+	}
+
 	.components-custom-select-control__menu {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
@@ -54,7 +58,6 @@
 		cursor: pointer;
 		display: flex;
 		line-height: inherit;
-		margin: 0 0 0 28px;
 		padding: 6px 8px;
 		transition: color 125ms ease-in-out;
 
@@ -77,16 +80,8 @@
 
 		&.is-selected {
 			margin-left: 0;
-
-			&::before {
-				background:
-					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
-					0 0 no-repeat;
-				content: "";
-				display: block;
-				height: 24px;
-				margin: 0 4px 0 0;
-				width: 24px;
+			span svg {
+				fill: var(--wp-admin-theme-color);
 			}
 		}
 	}

package/src/footer/index.js

@@ -11,10 +11,9 @@ import { ExternalLink } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
-import { PatronsLogo } from '../';
 import './style.scss';
 
-const Footer = ( { simple } ) => {
+const Footer = ( { simple = undefined } ) => {
 	const {
 		components_demo: componentsDemo = false,
 		support = false,
@@ -75,23 +74,12 @@ const Footer = ( { simple } ) => {
 	return (
 		<div className="newspack-footer">
 			{ ! simple && (
-				<div className="newspack-footer__inner">
-					<ul>
-						{ footerElements.map( ( { url, label, external }, index ) => (
-							<li key={ index }>
-								{ external ? (
-									<ExternalLink href={ url }>{ label }</ExternalLink>
-								) : (
-									<a href={ url }>{ label }</a>
-								) }
-							</li>
-						) ) }
-					</ul>
-				</div>
+				<ul>
+					{ footerElements.map( ( { url, label, external }, index ) => (
+						<li key={ index }>{ external ? <ExternalLink href={ url }>{ label }</ExternalLink> : <a href={ url }>{ label }</a> }</li>
+					) ) }
+				</ul>
 			) }
-			<div className="newspack-footer__logo">
-				<PatronsLogo />
-			</div>
 		</div>
 	);
 };

package/src/footer/style.scss

@@ -5,16 +5,13 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
-	align-items: stretch;
 	background: white;
 	border: 0 solid wp-colors.$gray-300;
 	border-width: 1px 0;
 	bottom: 0;
 	color: wp-colors.$gray-700;
 	display: flex;
-	flex-wrap: wrap;
 	font-size: 12px;
-	justify-content: space-between;
 	left: 0;
 	line-height: 16px;
 	position: absolute;
@@ -22,17 +19,6 @@
 
 	@media screen and ( min-width: 783px ) {
 		bottom: 40px;
-		flex-wrap: nowrap;
-	}
-
-	&__inner {
-		align-items: center;
-		display: flex;
-		flex: 0 0 100%;
-
-		@media screen and ( min-width: 783px ) {
-			flex: 1 1 auto;
-		}
 	}
 
 	ul {
@@ -57,26 +43,4 @@
 			}
 		}
 	}
-
-	&__logo {
-		align-items: center;
-		background: wp-colors.$gray-900;
-		display: flex;
-		margin: 0 0 -1px;
-		padding: 16px;
-		width: 100%;
-
-		@media screen and ( min-width: 783px ) {
-			margin: -1px 0 -1px 8px;
-			max-width: 33.33%;
-			width: auto;
-		}
-
-		.patrons-logo {
-			display: block;
-			fill: white;
-			max-height: 16px;
-			width: auto;
-		}
-	}
 }

package/src/form-token-field/index.js

@@ -23,8 +23,7 @@ class FormTokenField extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, description, hideHelpFromVision, hideLabelFromVision, ...otherProps } =
-			this.props;
+		const { className, description, hideHelpFromVision, hideLabelFromVision, ...otherProps } = this.props;
 		const classes = classnames( 'newspack-form-token-field__input-container', className );
 		return (
 			<div

package/src/grid/index.tsx

@@ -12,14 +12,7 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-const Grid = ( {
-	className = '',
-	columns = 2,
-	gutter = 32,
-	noMargin = false,
-	rowGap = 0,
-	...otherProps
-} ) => {
+const Grid = ( { className = '', columns = 2, gutter = 32, noMargin = false, rowGap = 0, ...otherProps } ) => {
 	const classes = classnames(
 		'newspack-grid',
 		noMargin && 'newspack-grid--no-margin',

package/src/handoff/index.js

@@ -53,8 +53,7 @@ class Handoff extends Component {
 		const defaults = {
 			modalBody: null,
 			modalTitle: pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
-			primaryButton:
-				pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
+			primaryButton: pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
 			primaryModalButton: __( 'Manage', 'newspack-plugin' ),
 			dismissModalButton: __( 'Dismiss', 'newspack-plugin' ),
 		};
@@ -96,8 +95,7 @@ class Handoff extends Component {
 			...otherProps
 		} = this.props;
 		const { pluginInfo, showModal } = this.state;
-		const { modalBody, modalTitle, primaryButton, primaryModalButton, dismissModalButton } =
-			this.textForPlugin( pluginInfo );
+		const { modalBody, modalTitle, primaryButton, primaryModalButton, dismissModalButton } = this.textForPlugin( pluginInfo );
 		const { Configured, Name, Slug, Status } = pluginInfo;
 		const classes = classnames( Configured && 'is-configured', className );
 		return (
@@ -107,9 +105,7 @@ class Handoff extends Component {
 						className={ classes }
 						isSecondary={ ! otherProps.isPrimary && ! otherProps.isTertiary && ! otherProps.isLink }
 						{ ...otherProps }
-						onClick={ () =>
-							useModal ? this.setState( { showModal: true } ) : this.goToPlugin( Slug )
-						}
+						onClick={ () => ( useModal ? this.setState( { showModal: true } ) : this.goToPlugin( Slug ) ) }
 					>
 						{ children ? children : primaryButton }
 					</Button>
@@ -132,10 +128,7 @@ class Handoff extends Component {
 					</Button>
 				) }
 				{ showModal && (
-					<Modal
-						title={ modalTitle }
-						onRequestClose={ () => this.setState( { showModal: false } ) }
-					>
+					<Modal title={ modalTitle } onRequestClose={ () => this.setState( { showModal: false } ) }>
 						<p>{ modalBody }</p>
 						<Card buttonsCard noBorder className="justify-end">
 							<Button variant="secondary" onClick={ () => this.setState( { showModal: false } ) }>

package/src/handoff-message/index.js

@@ -30,9 +30,6 @@ export default function HandoffMessage() {
 				setHandoffMessage( false );
 			}
 		}, 100 );
-
-		// Clean up the notification when unmounting.
-		return () => window.localStorage.removeItem( HANDOFF_KEY );
 	}, [] );
 	if ( ! handoffMessage ) {
 		return null;

package/src/hooks/useObjectState.js

@@ -6,6 +6,11 @@ import { useState } from '@wordpress/element';
 import isArray from 'lodash/isArray';
 import mergeWith from 'lodash/mergeWith';
 
+/**
+ * @typedef {Object} StateObjectUpdate
+ * @property {Object.<string, any>} [update] The update object with key-value pairs to merge into the state.
+ */
+
 const mergeCustomizer = ( objValue, srcValue ) => {
 	if ( isArray( objValue ) ) {
 		// If it's an array, replace it (instead of concatenating).
@@ -16,12 +21,15 @@ const mergeCustomizer = ( objValue, srcValue ) => {
 /**
  * A useState for an object.
  * Nested objects will be nested, but arrays replaced.
+ *
+ * @template T
+ * @param {T} initial Initial state object.
+ * @return {[T, (keyOrUpdate: string | Partial<T>) => (value?: any) => void]} The state object and a function to update it.
  */
 export default ( initial = {} ) => {
 	const [ stateObject, setStateObject ] = useState( initial );
 
-	const runUpdate = update =>
-		setStateObject( _stateObject => mergeWith( {}, _stateObject, update, mergeCustomizer ) );
+	const runUpdate = update => setStateObject( _stateObject => mergeWith( {}, _stateObject, update, mergeCustomizer ) );
 
 	const updateStateObject = keyOrUpdate => {
 		if ( typeof keyOrUpdate === 'string' ) {

package/src/hooks/useObjectState.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 
 import useObjectState from './useObjectState';
 
@@ -12,19 +12,13 @@ const TestComponent = () => {
 			<button onClick={ () => updateState( { widgets: [] } ) }>Remove widgets</button>
 			<button onClick={ () => updateState( { widgets: [ 1 ] } ) }>Add widget</button>
 			<button onClick={ () => updateState( { attributes: { bar: 2 } } ) }>Nested update</button>
-			<input
-				type="text"
-				value={ state.name }
-				onChange={ e => updateState( { name: e.target.value } ) }
-				placeholder="name"
-			/>
+			<input type="text" value={ state.name } onChange={ e => updateState( { name: e.target.value } ) } placeholder="name" />
 		</div>
 	);
 };
 
 describe( 'useObjectState', () => {
-	const getState = () =>
-		JSON.parse( screen.getByPlaceholderText( 'state' ).getAttribute( 'value' ) );
+	const getState = () => JSON.parse( screen.getByPlaceholderText( 'state' ).getAttribute( 'value' ) );
 
 	beforeEach( () => {
 		render( <TestComponent /> );
@@ -32,17 +26,23 @@ describe( 'useObjectState', () => {
 
 	it( 'updates arrays', () => {
 		expect( getState() ).toStrictEqual( INIT_STATE );
-		screen.getByText( 'Remove widgets' ).click();
+		act( () => screen.getByText( 'Remove widgets' ).click() );
 		expect( getState() ).toMatchObject( { widgets: [] } );
-		screen.getByText( 'Add widget' ).click();
+		act( () => screen.getByText( 'Add widget' ).click() );
 		expect( getState() ).toMatchObject( { widgets: [ 1 ] } );
 	} );
 	it( 'updates a simple value', () => {
-		fireEvent.change( screen.getByPlaceholderText( 'name' ), { target: { value: 'Ramon' } } );
+		act( () =>
+			fireEvent.change( screen.getByPlaceholderText( 'name' ), {
+				target: { value: 'Ramon' },
+			} )
+		);
 		expect( getState() ).toMatchObject( { name: 'Ramon' } );
 	} );
 	it( 'updates a nested object', () => {
-		screen.getByText( 'Nested update' ).click();
-		expect( getState() ).toMatchObject( { attributes: { bar: 2, baz: 1 } } );
+		act( () => screen.getByText( 'Nested update' ).click() );
+		expect( getState() ).toMatchObject( {
+			attributes: { bar: 2, baz: 1 },
+		} );
 	} );
 } );

package/src/image-upload/index.js

@@ -72,18 +72,7 @@ class ImageUpload extends Component {
 	 * Render.
 	 */
 	render = () => {
-		const {
-			buttonLabel,
-			className,
-			disabled,
-			help,
-			image,
-			info,
-			isCovering,
-			label,
-			onChange,
-			style = {},
-		} = this.props;
+		const { buttonLabel, className, disabled, help, image, info, isCovering, label, onChange, style = {} } = this.props;
 		const classes = classnames(
 			'newspack-image-upload__image',
 			{ 'newspack-image-upload__image--has-image': image },
@@ -99,22 +88,13 @@ class ImageUpload extends Component {
 				<div className={ classes } style={ { ...style } }>
 					{ image?.url ? (
 						<>
-							<img
-								data-testid="image-upload"
-								src={ image.url }
-								alt={ __( 'Image preview', 'newspack-plugin' ) }
-							/>
+							<img data-testid="image-upload" src={ image.url } alt={ __( 'Image preview', 'newspack-plugin' ) } />
 							<div className="newspack-image-upload__controls">
 								<Button disabled={ disabled } onClick={ this.openModal } isLink>
 									{ __( 'Replace', 'newspack-plugin' ) }
 								</Button>
 								<span className="sep" />
-								<Button
-									disabled={ disabled }
-									onClick={ () => onChange( null ) }
-									isLink
-									isDestructive
-								>
+								<Button disabled={ disabled } onClick={ () => onChange( null ) } isLink isDestructive>
 									{ __( 'Remove', 'newspack-plugin' ) }
 								</Button>
 							</div>

package/src/index.js

@@ -4,6 +4,7 @@ export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
 export { default as Button } from './button';
 export { default as ButtonCard } from './button-card';
+export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
@@ -18,9 +19,7 @@ export { default as GlobalNotices } from './global-notices';
 export { default as Grid } from './grid';
 export { default as Modal } from './modal';
 export { default as NewspackIcon } from './newspack-icon';
-export { default as NewspackLogo } from './newspack-logo';
 export { default as Notice } from './notice';
-export { default as PatronsLogo } from './patrons-logo';
 export { default as PluginInstaller } from './plugin-installer';
 export { default as PluginSettings } from './plugin-settings';
 export { default as PluginToggle } from './plugin-toggle';
@@ -29,7 +28,6 @@ export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
-export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';

package/src/modal/index.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies.
  */
-import { Component } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { Modal as BaseComponent } from '@wordpress/components';
 
 /**
@@ -18,21 +18,15 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-class Modal extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, isWide, isNarrow, ...otherProps } = this.props;
-		const classes = classnames(
-			'newspack-modal',
-			isWide && 'newspack-modal--wide',
-			isNarrow && 'newspack-modal--narrow',
-			className
-		);
+function Modal( { className, isWide, isNarrow, hideTitle, ...otherProps }, ref ) {
+	const classes = classnames(
+		'newspack-modal',
+		isWide && 'newspack-modal--wide',
+		isNarrow && 'newspack-modal--narrow',
+		hideTitle && 'newspack-modal--hide-title', // Note: also hides the X close button.
+		className
+	);
 
-		return <BaseComponent className={ classes } { ...otherProps } />;
-	}
+	return <BaseComponent className={ classes } { ...otherProps } ref={ ref } />;
 }
-
-export default Modal;
+export default forwardRef( Modal );

package/src/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -28,6 +28,17 @@
 		width: 360px;
 	}
 
+	&--hide-title {
+		.components-modal__header {
+			display: none;
+		}
+
+		.components-modal__content {
+			margin-top: 0;
+			padding-top: 32px;
+		}
+	}
+
 	@media screen and ( min-width: 960px ) {
 		max-height: calc(100% - 128px);
 	}

package/src/newspack-icon/index.js

@@ -24,24 +24,13 @@ class NewspackIcon extends Component {
 	 */
 	render() {
 		const { className, simple, size, white } = this.props;
-		const classes = classnames(
-			'newspack-icon',
-			simple && 'newspack-icon--simple',
-			white && 'newspack-icon--white',
-			className
-		);
+		const classes = classnames( 'newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className );
 		return (
-			<SVG
-				xmlns="http://www.w3.org/2000/svg"
-				height={ size }
-				width={ size }
-				viewBox="0 0 32 32"
-				className={ classes }
-			>
+			<SVG xmlns="http://www.w3.org/2000/svg" height={ size } width={ size } viewBox="0 0 24 24" className={ classes }>
 				<Path
 					fillRule="evenodd"
 					clipRule="evenodd"
-					d="M32 16c0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16S7.164 0 16 0s16 7.164 16 16zm-10.732.622h1.72v-1.124h-2.823l1.103 1.124zm-3.249-3.31h4.97v-1.124h-6.072l1.102 1.124zm-3.248-3.31h8.217V8.877h-9.32l1.103 1.125zM9.01 8.877l13.977 14.246h-4.66l-5.866-5.98v5.98h-3.45V8.877z"
+					d="M24 12C24 18.6271 18.6271 24 12 24C5.37213 24 0 18.6271 0 12C0 5.3729 5.3729 0 12 0C18.6271 0 24 5.3729 24 12ZM17.4545 17.4546L6.54545 6.54545V17.4545H8.72727V11.8182L14.3636 17.4546H17.4545ZM11.2727 8.18182H17.4545V6.54545H9.63636L11.2727 8.18182ZM17.4545 11.2727H14.3636L12.7273 9.63636H17.4545V11.2727ZM17.4545 12.7273V14.3636L15.8182 12.7273H17.4545Z"
 				/>
 			</SVG>
 		);

package/src/newspack-icon/style.scss

@@ -2,21 +2,19 @@
  * Newspack Icon
  */
 
-@use "../../../shared/scss/colors";
-
 .newspack-icon {
-	background: colors.$primary-500;
+	background: var(--wp-admin-theme-color);
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 	}
 
 	&--simple {
 		background: none;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 		padding: 0;
 	}
 

package/src/notice/index.js

@@ -7,7 +7,6 @@
  */
 import { Component, RawHTML } from '@wordpress/element';
 import { Icon, bug, check, help, info } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -62,7 +61,6 @@ class Notice extends Component {
 				{ <Icon icon={ noticeIcon } /> }
 				<div className="newspack-notice__content">
 					{ rawHTML ? <RawHTML>{ noticeText }</RawHTML> : noticeText }
-					{ debugMode && __( 'Debug Mode', 'newspack-plugin' ) }
 					{ children || null }
 				</div>
 			</div>

package/src/notice/style.scss

@@ -4,7 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-notice {
 	align-items: center;
@@ -13,7 +13,7 @@
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
-	padding: 6px 8px;
+	padding: 8px 12px;
 
 	> svg {
 		display: block;
@@ -23,24 +23,26 @@
 	}
 
 	&__is-debug {
-		background: colors.$primary-700;
-		border-radius: 2px;
+		background: colors.$primary-600;
+		border-radius: 50%;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		color: white;
 		font-weight: bold;
 		margin: 0 16px;
+		padding: 6px;
 		position: fixed;
 		text-transform: uppercase;
 		z-index: 9997;
 
 		> svg {
 			fill: white;
+			margin: 0;
 		}
 	}
 
 	&__is-error {
-		background: color.adjust(wp-colors.$alert-red, $lightness: 51%);
+		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-red;
@@ -49,7 +51,7 @@
 	}
 
 	&__is-handoff {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 		margin-top: 0;
 		position: sticky;
 		top: 46px;
@@ -64,12 +66,12 @@
 		background: colors.$primary-050;
 
 		> svg {
-			fill: colors.$primary-500;
+			fill: var(--wp-admin-theme-color);
 		}
 	}
 
 	&__is-success {
-		background: color.adjust(wp-colors.$alert-green, $lightness: 42%);
+		background: color.adjust(wp-colors.$alert-green, $lightness: 45%);
 
 		> svg {
 			fill: wp-colors.$alert-green;
@@ -77,7 +79,7 @@
 	}
 
 	&__is-warning {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-yellow;