newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/{cjs/wizard → wizard}/store/utils.js

@@ -19,8 +19,5 @@ const createAction = type => payload => ({
   payload
 });
 exports.createAction = createAction;
-const useWizardData = function (wizardName) {
-  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
-};
+const useWizardData = (wizardName, defaultValue = {}) => (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
 exports.useWizardData = useWizardData;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "2.2.1",
+	"version": "3.0.0-alpha.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -16,30 +16,32 @@
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/Automattic/newspack-plugin.git",
-		"directory": "assets/src/components"
+		"directory": "src/components"
 	},
-	"main": "dist/esm/index.js",
+	"main": "dist/index.js",
 	"publishConfig": {
 		"access": "public"
 	},
 	"dependencies": {
-		"@wordpress/base-styles": "^4.0.0",
-		"@wordpress/components": "^23.6.0",
-		"@wordpress/element": "^5.5.0",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^9.11.0",
+		"@wordpress/base-styles": "^5.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
 		"qs": "^6.10.1",
 		"react-daterange-picker": "^2.0.1",
-		"react-router-dom": "^5.3.0"
+		"react-router-dom": "^5.3.4"
 	},
 	"devDependencies": {
-		"@automattic/calypso-build": "^10.0.0",
-		"@babel/cli": "^7.15.0",
-		"@babel/core": "^7.15.0",
-		"recursive-copy": "^2.0.13"
+		"@babel/cli": "^7.24.0",
+		"@babel/core": "^7.24.0",
+		"@babel/preset-env": "^7.24.7",
+		"@babel/preset-react": "^7.24.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"recursive-copy": "^2.0.0"
 	},
 	"babel": {
 		"ignore": [
@@ -47,7 +49,7 @@
 		]
 	},
 	"scripts": {
-		"prepublishOnly": "transpile && node copy-styles.js",
+		"prepublishOnly": "npx babel src --out-dir dist && node copy-styles.js",
 		"postpublish": "rm -r dist && rm -r shared"
 	}
 }

package/shared/scss/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin visuallyHidden {
 	border: 0;
-	clip: rect( 1px, 1px, 1px, 1px );
-	clip-path: inset( 50% );
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	width: 1px;
 	height: 1px;
 	margin: -1px;

package/src/accordion/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /**
  * WordPress dependencies
  */
@@ -24,7 +27,7 @@ const Accordion = ( { children, title } ) => {
 				{ title }
 				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />
 			</summary>
-			{ children }
+			<div className="newspack-accordion__content">{ children }</div>
 		</details>
 	);
 };

package/src/accordion/style.scss

@@ -1,17 +1,17 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-accordion {
 	border: 1px solid wp-colors.$gray-300;
 
 	&__icon {
 		transition: transform 200ms ease-out;
-		transform: rotate( 90deg );
+		transform: rotate(90deg);
 	}
 
 	&--is-open {
 		.newspack-accordion {
 			&__icon {
-				transform: rotate( -90deg );
+				transform: rotate(-90deg);
 			}
 		}
 	}
@@ -24,4 +24,8 @@
 		font-size: 14px;
 		font-weight: bold;
 	}
+
+	&__content {
+		padding: 16px 32px;
+	}
 }

package/src/action-card/style.scss

@@ -2,8 +2,8 @@
  * Action Card
  */
 
-@use 'sass:color';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -15,7 +15,7 @@
 		transition: box-shadow 125ms ease-in-out;
 
 		&:hover {
-			box-shadow: 0 4px 8px rgba( black, 0.08 );
+			box-shadow: 0 4px 8px rgba(black, 0.08);
 		}
 	}
 
@@ -34,7 +34,7 @@
 	}
 
 	&.newspack-card__is-primary {
-		box-shadow: inset 4px 0 0 var( --wp-admin-theme-color );
+		box-shadow: inset 4px 0 0 var(--wp-admin-theme-color);
 	}
 
 	&.newspack-card__is-secondary {
@@ -181,12 +181,12 @@
 		}
 
 		.newspack-action-card__region-top {
-			background-color: rgba( black, 0.025 );
+			background-color: rgba(black, 0.025);
 		}
 
 		.newspack-action-card__region-center {
 			p {
-				color: color.adjust( wp-colors.$gray-700, $lightness: -0.75% );
+				color: color.adjust(wp-colors.$gray-700, $lightness: -0.75%);
 			}
 		}
 	}
@@ -209,7 +209,7 @@
 			border-left-width: 1px;
 			border-bottom-width: 1px;
 			border-radius: 0 0 0 2px;
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			inset: -17px 100% 50% -28px;
@@ -219,7 +219,7 @@
 	// Typography
 
 	h2,
-	p:not( [class*='components-base-control'] ) {
+	p:not([class*="components-base-control"]) {
 		margin: 0;
 		max-width: 100%;
 		width: 100%;
@@ -242,7 +242,7 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: var( --wp-admin-theme-color );
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}

package/src/autocomplete-tokenfield/index.js

@@ -57,6 +57,26 @@ class AutocompleteTokenField extends Component {
 		}
 	}
 
+	/**
+	 * When the component updates, fetch information about the tokens so we can populate
+	 * the tokens with the correct labels.
+	 */
+	componentDidUpdate( prevProps ) {
+		const { tokens, fetchSavedInfo } = this.props;
+
+		if ( tokens !== prevProps.tokens && this.isFetchingInfoOnLoad() ) {
+			fetchSavedInfo( tokens ).then( results => {
+				const { validValues } = this.state;
+
+				results.forEach( suggestion => {
+					validValues[ suggestion.value ] = suggestion.label;
+				} );
+
+				this.setState( { validValues, loading: false } );
+			} );
+		}
+	}
+
 	/**
 	 * Clean up any unfinished autocomplete api call requests.
 	 */
@@ -99,7 +119,9 @@ class AutocompleteTokenField extends Component {
 			return labels.reduce( ( acc, label ) => {
 				Object.keys( validValues ).forEach( key => {
 					if ( validValues[ key ] === label ) {
-						acc.push( { value: key, label } );
+						// Preserve numeric or string type of values. Object.keys will convert numbers to strings.
+						const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+						acc.push( { value, label } );
 					}
 				} );
 
@@ -108,7 +130,9 @@ class AutocompleteTokenField extends Component {
 		}
 
 		return labels.map( label =>
-			Object.keys( validValues ).find( key => validValues[ key ] === label )
+			Object.keys( validValues )
+				.map( key => ( isNaN( parseInt( key ) ) ? key.toString() : parseInt( key ) ) )
+				.find( key => validValues[ key ] === label )
 		);
 	}
 
@@ -134,16 +158,16 @@ class AutocompleteTokenField extends Component {
 						return;
 					}
 
+					const { validValues } = this.state;
 					const currentSuggestions = [ ...suggestions ];
-					const currentValidValues = {};
 
 					suggestions.forEach( suggestion => {
-						currentValidValues[ suggestion.value ] = suggestion.label;
+						validValues[ suggestion.value ] = suggestion.label;
 					} );
 
 					this.setState( {
 						suggestions: currentSuggestions,
-						validValues: currentValidValues,
+						validValues,
 						loading: false,
 					} );
 				} )
@@ -183,20 +207,29 @@ class AutocompleteTokenField extends Component {
 	 * Render.
 	 */
 	render() {
-		const { help, label = '', maxLength } = this.props;
+		const { help, label = '', placeholder = '', maxLength } = this.props;
 		const { suggestions, loading } = this.state;
 
+		const classNames = [ 'newspack-autocomplete-tokenfield__input-container' ];
+
+		if ( label ) {
+			classNames.push( 'has-label' );
+		}
+
 		return (
 			<div className="newspack-autocomplete-tokenfield">
-				<FormTokenField
-					value={ this.getTokens() }
-					suggestions={ suggestions.map( suggestion => suggestion.label ) }
-					onChange={ tokens => this.handleOnChange( tokens ) }
-					onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
-					label={ label }
-					maxLength={ maxLength }
-				/>
-				{ loading && <Spinner /> }
+				<div className={ classNames.join( ' ' ) }>
+					<FormTokenField
+						value={ this.getTokens() }
+						suggestions={ suggestions.map( suggestion => suggestion.label ) }
+						onChange={ tokens => this.handleOnChange( tokens ) }
+						onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
+						label={ label }
+						maxLength={ maxLength }
+						placeholder={ placeholder }
+					/>
+					{ loading && <Spinner /> }
+				</div>
 				{ help && <p className="newspack-autocomplete-tokenfield__help">{ help }</p> }
 			</div>
 		);

package/src/autocomplete-tokenfield/style.scss

@@ -2,16 +2,22 @@
  * Autocomplete Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-tokenfield {
-	position: relative;
-
 	.components-spinner {
-		margin: 8px;
+		margin: 0;
 		position: absolute;
-		right: 0;
-		top: calc( 1.4em + 8px );
+		right: 8px;
+		top: 8px;
+	}
+
+	&__input-container {
+		position: relative;
+
+		&.has-label .components-spinner {
+			top: 32px;
+		}
 	}
 
 	/* Workaround for hard-coded help text in FormTokenField. */
@@ -37,7 +43,7 @@
 		padding-left: 0;
 	}
 
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+	.components-button:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }

package/src/autocomplete-with-suggestions/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { Button, CheckboxControl, SelectControl, Spinner } from '@wordpress/components';
+import { Button, CheckboxControl, SelectControl } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -17,16 +17,16 @@ import './style.scss';
 const AutocompleteWithSuggestions = ( {
 	fetchSavedPosts = false, // If passed, will use this function to fetch saved data.
 	fetchSuggestions = false, // If passed, will use this function to fetch suggestions data.
-	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack' ),
+	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack-plugin' ),
 	hideHelp = false, // If true, all help text will be hidden.
-	label = __( 'Search', 'newspack' ),
+	label = __( 'Search', 'newspack-plugin' ),
 	maxItemsToSuggest = 0, // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
 	multiSelect = false, // If true, component can select multiple values at once.
 	onChange = false, // Function to call when selections change.
 	onPostTypeChange = false, // Funciton to call when the post type selector is changed.
 	postTypes = [ { slug: 'post', label: 'Post' } ], // If passed, will render a selector to change the post type queried for suggestions.
-	postTypeLabel = __( 'item', 'newspack' ), // String to describe the data being shown.
-	postTypeLabelPlural = __( 'items', 'newspack' ), // Plural string to describe the data being shown.
+	postTypeLabel = __( 'item', 'newspack-plugin' ), // String to describe the data being shown.
+	postTypeLabelPlural = __( 'items', 'newspack-plugin' ), // Plural string to describe the data being shown.
 	selectedItems = [], // Array of saved items.
 	selectedPost = 0, // Legacy prop when single-select was the only option.
 	suggestionsToFetch = 10, // Number of suggestions to fetch per query.
@@ -81,24 +81,24 @@ const AutocompleteWithSuggestions = ( {
 	const handleFetchSaved = fetchSavedPosts
 		? fetchSavedPosts
 		: async ( postIds = [], searchSlug = null ) => {
-				const postTypeSlug = searchSlug || postTypeToSearch;
-				const endpoint =
+			const postTypeSlug = searchSlug || postTypeToSearch;
+			const endpoint =
 					'post' === postTypeSlug || 'page' === postTypeSlug
 						? postTypeSlug + 's' // Default post type endpoints are plural.
 						: postTypeSlug; // Custom post type endpoints are singular.
-				const posts = await apiFetch( {
-					path: addQueryArgs( '/wp/v2/' + endpoint, {
-						per_page: 100,
-						include: postIds.join( ',' ),
-						_fields: 'id,title',
-					} ),
-				} );
+			const posts = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/' + endpoint, {
+					per_page: 100,
+					include: postIds.join( ',' ),
+					_fields: 'id,title',
+				} ),
+			} );
 
-				return posts.map( post => ( {
-					value: parseInt( post.id ),
-					label: decodeEntities( post.title ) || __( '(no title)', 'newspack' ),
-				} ) );
-		  };
+			return posts.map( post => ( {
+				value: parseInt( post.id ),
+				label: decodeEntities( post.title ) || __( '(no title)', 'newspack-plugin' ),
+			} ) );
+		};
 
 	/**
 	 * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
@@ -106,36 +106,36 @@ const AutocompleteWithSuggestions = ( {
 	const handleFetchSuggestions = fetchSuggestions
 		? fetchSuggestions
 		: async ( search = null, offset = 0, searchSlug = null ) => {
-				const postTypeSlug = searchSlug || postTypeToSearch;
-				const endpoint =
+			const postTypeSlug = searchSlug || postTypeToSearch;
+			const endpoint =
 					'post' === postTypeSlug || 'page' === postTypeSlug
 						? postTypeSlug + 's' // Default post type endpoints are plural.
 						: postTypeSlug; // Custom post type endpoints are singular.
-				const response = await apiFetch( {
-					parse: false,
-					path: addQueryArgs( '/wp/v2/' + endpoint, {
-						search,
-						offset,
-						per_page: suggestionsToFetch,
-						_fields: 'id,title',
-					} ),
-				} );
+			const response = await apiFetch( {
+				parse: false,
+				path: addQueryArgs( '/wp/v2/' + endpoint, {
+					search,
+					offset,
+					per_page: suggestionsToFetch,
+					_fields: 'id,title',
+				} ),
+			} );
 
-				const total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
-				const posts = await response.json();
+			const total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
+			const posts = await response.json();
 
-				setMaxSuggestions( total );
+			setMaxSuggestions( total );
 
-				// Format suggestions for FormTokenField display.
-				return posts.reduce( ( acc, post ) => {
-					acc.push( {
-						value: parseInt( post.id ),
-						label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack' ),
-					} );
+			// Format suggestions for FormTokenField display.
+			return posts.reduce( ( acc, post ) => {
+				acc.push( {
+					value: parseInt( post.id ),
+					label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack-plugin' ),
+				} );
 
-					return acc;
-				}, [] );
-		  };
+				return acc;
+			}, [] );
+		};
 
 	/**
 	 * Intercept onChange callback so we can decide whether to allow multiple selections.
@@ -176,22 +176,24 @@ const AutocompleteWithSuggestions = ( {
 		const selections = selectedPost ? [ ...selectedItems, selectedPost ] : selectedItems;
 		const selectedMessage = multiSelect
 			? sprintf(
-					// Translators: %1: the length of selections. %2: the selection leabel.
-					__( '%1$s %2$s selected', 'newspack' ),
-					selections.length,
-					selections.length > 1 ? postTypeLabelPlural : postTypeLabel
-			  )
-			: // Translators: %s: The label for the selection.
-			  sprintf( __( 'Selected %s', 'newspack' ), postTypeLabel );
+				// Translators: %1: the length of selections. %2: the selection leabel.
+				__( '%1$s %2$s selected', 'newspack-plugin' ),
+				selections.length,
+				selections.length > 1 ? postTypeLabelPlural : postTypeLabel
+			) : sprintf(
+				// Translators: %s: The label for the selection.
+				__( 'Selected %s', 'newspack-plugin' ),
+				postTypeLabel
+			);
 
 		return (
 			<div className="newspack-autocomplete-with-suggestions__selected-items">
 				<p className="newspack-autocomplete-with-suggestions__label">
 					{ selectedMessage }
-					{ 1 < selections.length && _x( ' – ', 'separator character', 'newspack' ) }
+					{ 1 < selections.length && _x( ' – ', 'separator character', 'newspack-plugin' ) }
 					{ 1 < selections.length && (
 						<Button onClick={ () => onChange( [] ) } isLink isDestructive>
-							{ __( 'Clear all', 'newspack' ) }
+							{ __( 'Clear all', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</p>
@@ -219,7 +221,7 @@ const AutocompleteWithSuggestions = ( {
 			<SelectControl
 				label={ sprintf(
 					// Translators: %s: The name of the type.
-					__( '%s type', 'newspack' ),
+					__( '%s type', 'newspack-plugin' ),
 					postTypeLabel.charAt( 0 ).toUpperCase() + postTypeLabel.slice( 1 )
 				) }
 				value={ postTypeToSearch }
@@ -265,14 +267,6 @@ const AutocompleteWithSuggestions = ( {
 	 * Render a list of suggestions that can be clicked to select instead of searching by title.
 	 */
 	const renderSuggestions = () => {
-		if ( isLoading ) {
-			return (
-				<div className="newspack-autocomplete-with-suggestions__suggestions-spinner">
-					<Spinner />
-				</div>
-			);
-		}
-
 		if ( 0 === suggestions.length ) {
 			return null;
 		}
@@ -287,7 +281,7 @@ const AutocompleteWithSuggestions = ( {
 					<p className="newspack-autocomplete-with-suggestions__label">
 						{
 							/* Translators: %s: the name of a post type. */ sprintf(
-								__( 'Or, select a recent %s:', 'newspack' ),
+								__( 'Or, select a recent %s:', 'newspack-plugin' ),
 								postTypeLabel
 							)
 						}
@@ -301,7 +295,9 @@ const AutocompleteWithSuggestions = ( {
 							isSecondary
 							onClick={ () => setIsLoadingMore( true ) }
 						>
-							{ isLoadingMore ? __( 'Loading…', 'newspack' ) : __( 'Load more', 'newspack' ) }
+							{ isLoadingMore
+								? __( 'Loading…', 'newspack-plugin' )
+								: __( 'Load more', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>
@@ -319,6 +315,7 @@ const AutocompleteWithSuggestions = ( {
 				fetchSuggestions={ async search => handleFetchSuggestions( search, 0, postTypeToSearch ) }
 				fetchSavedInfo={ postIds => handleFetchSaved( postIds ) }
 				label={ label }
+				loading={ isLoading }
 				help={ ! hideHelp && help }
 				returnFullObjects
 			/>

package/src/autocomplete-with-suggestions/style.scss

@@ -2,7 +2,7 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-with-suggestions {
 	width: 100%;
@@ -15,13 +15,6 @@
 			margin-top: 16px;
 		}
 	}
-
-	.components-spinner {
-		margin: 8px;
-		right: 0;
-		top: calc( 1.4em + 8px );
-	}
-
 	.components-select-control__input {
 		max-width: none;
 	}
@@ -104,7 +97,7 @@
 		padding-right: 8px;
 
 		&::after {
-			content: '✕';
+			content: "✕";
 			margin-left: 8px;
 		}
 
@@ -119,8 +112,7 @@
 		border-radius: 2px;
 		border: 1px solid wp-colors.$gray-700;
 		max-height: 178px;
-		overflow-x: visible;
-		overflow-y: auto;
+		overflow: visible auto;
 		padding: 8px 8px 0;
 
 		.components-button {
@@ -134,10 +126,10 @@
 				text-decoration: none;
 				width: 100%;
 
-				&:active:not( :disabled ),
-				&:hover:not( :disabled ) {
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
 					background: wp-colors.$gray-900;
-					background: var( --wp-admin-theme-color );
+					background: var(--wp-admin-theme-color);
 					color: white;
 				}
 			}
@@ -157,14 +149,14 @@
 		.components-button {
 			line-height: normal;
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				border-radius: 0;
 				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
-				box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			}
 
 			&.is-secondary {
-				width: calc( 100% - 16px );
+				width: calc(100% - 16px);
 			}
 		}
 	}