newspack-components 4.1.0 → 4.3.0

package/src/autocomplete-with-latest-posts/index.js

@@ -0,0 +1,290 @@
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Button, CheckboxControl, FormTokenField, Spinner } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+import './style.scss';
+
+const AutocompleteWithLatestPosts = ( {
+	fetchSuggestions = false, // If passed, will use this function to fetch suggestions data.
+	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack-plugin' ),
+	hideHelp = true, // If true, all help text will be hidden.
+	hideFormTokenHelp = true, // If true, hides FormTokenField's built-in help text.
+	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.
+	selectedItems = [], // Array of saved items.
+	suggestionsToFetch = 20, // Number of suggestions to fetch per query.
+} ) => {
+	const [ isLoading, setIsLoading ] = useState( true );
+	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( [] );
+	const [ maxSuggestions, setMaxSuggestions ] = useState( 0 );
+	const [ searchSuggestions, setSearchSuggestions ] = useState( [] );
+	const [ validValues, setValidValues ] = useState( {} );
+	const [ isSearching, setIsSearching ] = useState( false );
+	// Leaving this in here so we can expand to use different post types in the future; right now it defaults to 'post'.
+	const postTypeToSearch = 'post';
+	const classNames = [ 'newspack-autocomplete-with-latest-posts' ];
+
+	if ( hideFormTokenHelp ) {
+		classNames.push( 'hide-form-token-help' );
+	}
+
+	if ( hideHelp ) {
+		classNames.push( 'hide-help' );
+	}
+
+	/**
+	 * Debounced function to update search suggestions.
+	 */
+	const debouncedUpdateSuggestions = debounce( input => {
+		if ( ! input || input.length < 2 ) {
+			setSearchSuggestions( [] );
+			setIsSearching( false );
+			return;
+		}
+
+		setIsSearching( true );
+		handleFetchSuggestions( input, 0, postTypeToSearch )
+			.then( _suggestions => {
+				setSearchSuggestions( _suggestions );
+				// Update valid values for token conversion
+				const newValidValues = { ...validValues };
+				_suggestions.forEach( suggestion => {
+					newValidValues[ suggestion.value ] = suggestion.label;
+				} );
+				setValidValues( newValidValues );
+			} )
+			.finally( () => setIsSearching( false ) );
+	}, 500 );
+
+	/**
+	 * Fetch recent posts to show as suggestions.
+	 */
+	useEffect( () => {
+		setIsLoading( true );
+		handleFetchSuggestions( null, 0, postTypeToSearch )
+			.then( _suggestions => {
+				if ( 0 < _suggestions.length ) {
+					setSuggestions( _suggestions );
+					// Update valid values for token conversion
+					const newValidValues = { ...validValues };
+					_suggestions.forEach( suggestion => {
+						newValidValues[ suggestion.value ] = suggestion.label;
+					} );
+					setValidValues( newValidValues );
+				}
+			} )
+			.finally( () => setIsLoading( false ) );
+	}, [] );
+
+	/**
+	 * Fetch more suggestions.
+	 */
+	useEffect( () => {
+		if ( isLoadingMore ) {
+			handleFetchSuggestions( null, suggestions.length, postTypeToSearch )
+				.then( _suggestions => {
+					if ( 0 < _suggestions.length ) {
+						setSuggestions( suggestions.concat( _suggestions ) );
+					}
+				} )
+				.finally( () => setIsLoadingMore( false ) );
+		}
+	}, [ isLoadingMore ] );
+
+	/**
+	 * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
+	 */
+	const handleFetchSuggestions = fetchSuggestions
+		? fetchSuggestions
+		: async ( search = null, offset = 0, searchSlug = null ) => {
+				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 total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
+				const posts = await response.json();
+
+				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-plugin' ),
+					} );
+
+					return acc;
+				}, [] );
+		  };
+
+	/**
+	 * Get labels for token values.
+	 */
+	const getLabelsForValues = values => {
+		return values.reduce( ( accumulator, value ) => {
+			if ( ! value ) {
+				return accumulator;
+			}
+			if ( value.label ) {
+				return [ ...accumulator, value.label ];
+			}
+			return validValues[ value ] ? [ ...accumulator, validValues[ value ] ] : accumulator;
+		}, [] );
+	};
+
+	/**
+	 * Get values for token labels.
+	 */
+	const getValuesForLabels = labels => {
+		// eslint-disable-next-line @typescript-eslint/no-shadow
+		return labels.reduce( ( acc, label ) => {
+			Object.keys( validValues ).forEach( key => {
+				if ( validValues[ key ] === label ) {
+					const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+					acc.push( { value, label } );
+				}
+			} );
+			return acc;
+		}, [] );
+	};
+
+	/**
+	 * Handle FormTokenField onChange.
+	 */
+	const handleTokenChange = tokenStrings => {
+		const newSelections = getValuesForLabels( tokenStrings );
+
+		// If only allowing one selection, just return the one selected item.
+		if ( ! multiSelect ) {
+			const newSelection = newSelections[ newSelections.length - 1 ]; // Get the last selected item
+			if ( newSelection ) {
+				return onChange( [ { ...newSelection, postType: postTypeToSearch } ] );
+			}
+			return onChange( [] );
+		}
+
+		// For multi-select, include currently selected post type in selection results.
+		onChange( newSelections.map( selection => ( { ...selection, postType: postTypeToSearch } ) ) );
+	};
+
+	/**
+	 * Get tokens for FormTokenField.
+	 */
+	const getTokens = () => {
+		return getLabelsForValues( selectedItems );
+	};
+
+	/**
+	 * Render a single suggestion object that can be clicked to select it immediately.
+	 *
+	 * @param {Object} suggestion Suggestion object with value and label keys.
+	 */
+	const renderSuggestion = suggestion => {
+		if ( multiSelect ) {
+			const isSelected = !! selectedItems.find(
+				_selection => parseInt( _selection.value ) === parseInt( suggestion.value ) && _selection.label === suggestion.label
+			);
+			return (
+				<CheckboxControl
+					key={ suggestion.value }
+					checked={ isSelected }
+					onChange={ () => {
+						// For multi-select, we need to toggle the selection
+						const currentTokens = getTokens();
+						const suggestionLabel = suggestion.label;
+
+						if ( isSelected ) {
+							// Remove the suggestion
+							const newTokens = currentTokens.filter( token => token !== suggestionLabel );
+							handleTokenChange( newTokens );
+						} else {
+							// Add the suggestion
+							handleTokenChange( [ ...currentTokens, suggestionLabel ] );
+						}
+					} }
+					label={ suggestion.label }
+				/>
+			);
+		}
+		return (
+			<Button isLink key={ suggestion.value } onClick={ () => handleTokenChange( [ ...getTokens(), suggestion.label ] ) }>
+				{ suggestion.label }
+			</Button>
+		);
+	};
+
+	/**
+	 * Render a list of suggestions that can be clicked to select instead of searching by title.
+	 */
+	const renderSuggestions = () => {
+		if ( 0 === suggestions.length ) {
+			return null;
+		}
+
+		const className = multiSelect
+			? 'newspack-autocomplete-with-latest-posts__search-suggestions-multiselect'
+			: 'newspack-autocomplete-with-latest-posts__search-suggestions';
+
+		return (
+			<>
+				<div className="newspack-autocomplete-with-latest-posts__search-suggestions-container">
+					<p className="newspack-autocomplete-with-suggestions__label">{ __( 'Latest Posts', 'newspack-plugin' ) }</p>
+					<div className={ className }>
+						{ suggestions.map( renderSuggestion ) }
+						{ suggestions.length < ( maxItemsToSuggest || maxSuggestions ) && (
+							<Button disabled={ isLoadingMore } isSecondary onClick={ () => setIsLoadingMore( true ) }>
+								{ isLoadingMore ? __( 'Loading…', 'newspack-plugin' ) : __( 'Load more', 'newspack-plugin' ) }
+							</Button>
+						) }
+					</div>
+				</div>
+			</>
+		);
+	};
+
+	return (
+		<div className={ classNames.join( ' ' ) }>
+			<div className="newspack-autocomplete-with-latest-posts__input-container">
+				<FormTokenField
+					value={ getTokens() }
+					suggestions={ searchSuggestions.map( suggestion => suggestion.label ) }
+					onChange={ handleTokenChange }
+					onInputChange={ debouncedUpdateSuggestions }
+					label={ label }
+					help={ ! hideHelp && help }
+					__next40pxDefaultSize={ true }
+					__nextHasNoMarginBottom={ true }
+				/>
+				{ ( isLoading || isSearching ) && <Spinner /> }
+			</div>
+			{ renderSuggestions() }
+		</div>
+	);
+};
+
+export default AutocompleteWithLatestPosts;

package/src/autocomplete-with-latest-posts/style.scss

@@ -0,0 +1,150 @@
+/**
+* Styles for AutocompleteWithLatestPosts component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-latest-posts {
+	display: grid;
+	gap: 16px;
+	width: 100%;
+
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-latest-posts__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	// Hide the built-in "Separate with commas or the Enter key." help text when hideFormTokenHelp is true
+	&.hide-form-token-help .components-form-token-field__help {
+		display: none;
+	}
+
+	p.newspack-autocomplete-with-latest-posts__label {
+		font-size: inherit;
+		margin: 0 0 8px;
+	}
+
+	&__selected-items {
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 16px;
+		padding-bottom: 12px;
+
+		p.newspack-autocomplete-with-latest-posts__label {
+			flex: 0 0 100%;
+			margin: 0;
+		}
+	}
+
+	&__selected-item-button.components-button.is-tertiary {
+		background-color: wp-colors.$gray-300;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: 13px;
+		height: auto;
+		margin: 0;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&::after {
+			content: "✕";
+			margin-left: 8px;
+		}
+
+		&:hover {
+			box-shadow: none;
+			color: black;
+		}
+	}
+
+	&__search-suggestions,
+	&__search-suggestions-multiselect {
+		max-height: 220px;
+		overflow: visible auto;
+		margin: 0 -4px;
+		padding: 4px 4px 0;
+
+		.components-button {
+			display: block;
+			line-height: normal;
+			margin: auto;
+
+			&.is-link {
+				color: wp-colors.$gray-900;
+				padding: 8px;
+				text-decoration: none;
+				width: 100%;
+
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
+					background: wp-colors.$gray-900;
+					background: var(--wp-admin-theme-color);
+					color: white;
+				}
+			}
+			&.is-secondary {
+				margin-bottom: 8px;
+				margin-top: 8px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__search-suggestions {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		padding: 0;
+
+		.components-button {
+			line-height: normal;
+
+			&: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);
+			}
+
+			&.is-secondary {
+				width: calc(100% - 16px);
+			}
+		}
+	}
+
+	// Temp: CSS work-around.
+	.newspack-autocomplete-with-suggestions__label {
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+		display: block;
+		margin: 0 0 8px;
+		padding: 0;
+	}
+}

package/src/badge/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+type BadgeProps = {
+	text: string;
+	level?: 'default' | 'info' | 'success' | 'warning' | 'error';
+};
+
+/**
+ * Badge component
+ */
+const Badge = ( { text, level = 'default' }: BadgeProps ) => {
+	const classes = classnames( 'newspack-badge', `is-${ level }` );
+	return <span className={ classes }>{ text }</span>;
+};
+
+export default Badge;

package/src/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}

package/src/button/index.tsx

@@ -19,10 +19,11 @@ const { useHistory } = Router;
 type OriginalButtonProps = typeof BaseComponent.defaultProps;
 type Props = OriginalButtonProps & {
 	href?: string;
+	loading?: boolean;
 	onClick?: () => void;
 };
 
-const Button = ( { href, onClick, ...otherProps }: Props ) => {
+const Button = ( { href, loading = undefined, onClick, ...otherProps }: Props ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
@@ -42,7 +43,7 @@ const Button = ( { href, onClick, ...otherProps }: Props ) => {
 		otherProps.disabled = true;
 	}
 	// @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
-	return <BaseComponent { ...otherProps } />;
+	return <BaseComponent loading={ loading ? true : undefined } { ...otherProps } />;
 };
 
 export default Button;

package/src/card/core-card.js

@@ -0,0 +1,147 @@
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuItem, ToggleControl } from '@wordpress/components';
+import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style-core.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const CoreCard = ( {
+	actions,
+	actionType,
+	as,
+	buttonsCard,
+	className,
+	footer,
+	header,
+	icon,
+	iconBackgroundColor,
+	isActive,
+	isDraggable,
+	isFirstTarget,
+	isLastTarget,
+	isNarrow,
+	isSmall,
+	dragIndex,
+	onDragCallback = () => {},
+	onHeaderClick,
+	noBorder,
+	noMargin,
+	children = null,
+	...otherProps
+} ) => {
+	const classes = classNames(
+		'newspack-card--core',
+		className,
+		( buttonsCard || as === 'a' ) && 'newspack-card--core__buttons-card',
+		isDraggable && 'newspack-card--core__is-draggable',
+		isNarrow && 'newspack-card--core__is-narrow',
+		isSmall && 'newspack-card--core__is-small',
+		icon && 'newspack-card--core__has-icon',
+		iconBackgroundColor && 'newspack-card--core__has-icon-background-color',
+		isActive && 'newspack-card--core__is-active',
+		children && 'newspack-card--core__has-children',
+		noMargin && 'newspack-card--core__no-margin'
+	);
+	let sizeProps = isSmall ? 'small' : otherProps.size;
+	if ( buttonsCard || as === 'a' ) {
+		if ( ! isSmall ) {
+			sizeProps = 'large';
+		}
+		if ( as !== 'a' ) {
+			otherProps.as = 'a'; // Render as an anchor tag.
+		}
+	}
+	if ( noBorder ) {
+		otherProps.isBorderless = true;
+	}
+	return (
+		<CardWrapper as={ as } className={ classes } { ...otherProps }>
+			{ ( header || icon ) && (
+				<CardHeader
+					as={ onHeaderClick ? 'button' : undefined }
+					className={ classNames( 'newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable' ) }
+					size={ sizeProps }
+					onClick={ onHeaderClick }
+				>
+					{ isDraggable && (
+						<div className="newspack-card--core__header__draggable-controls">
+							<div className="newspack-card--core__header__draggable-controls__drag-handle">
+								<Icon icon={ dragHandle } />
+							</div>
+							<div className="newspack-card--core__header__draggable-controls__move-buttons">
+								<Button
+									icon={ chevronUp }
+									onClick={ () => onDragCallback( dragIndex, dragIndex - 1 ) }
+									disabled={ isFirstTarget }
+									label={ __( 'Move one position up', 'newspack-plugin' ) }
+									size="small"
+								/>
+								<Button
+									icon={ chevronDown }
+									onClick={ () => onDragCallback( dragIndex, dragIndex + 1 ) }
+									disabled={ isLastTarget }
+									label={ __( 'Move one position down', 'newspack-plugin' ) }
+									size="small"
+								/>
+							</div>
+						</div>
+					) }
+					{ icon && (
+						<div className="newspack-card--core__icon">
+							<Icon icon={ icon } height={ isSmall ? 24 : 48 } width={ isSmall ? 24 : 48 } />
+						</div>
+					) }
+					{ header && <div className="newspack-card--core__header-content">{ header }</div> }
+					{ ! actions?.length > 0 && actionType === 'chevron' && (
+						<Icon className="newspack-card--core__action" icon={ chevronRight } height={ 24 } width={ 24 } />
+					) }
+					{ ! actions?.length > 0 && actionType === 'toggle' && (
+						<ToggleControl
+							className="newspack-card--core__action"
+							label={ otherProps.title }
+							hideLabelFromVision
+							checked={ isActive }
+							onChange={ () => {} }
+						/>
+					) }
+					{ actions?.length > 0 && (
+						<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
+							{ () =>
+								actions.map( ( action, index ) => (
+									<MenuItem
+										key={ index }
+										icon={ action.icon }
+										onClick={ action.action }
+										disabled={ action.disabled || false }
+										isDestructive={ action.destructive || false }
+									>
+										{ action.label }
+									</MenuItem>
+								) )
+							}
+						</DropdownMenu>
+					) }
+				</CardHeader>
+			) }
+			{ children && <div className="newspack-card--core__body">{ children }</div> }
+			{ footer && <CardFooter size={ sizeProps }>{ footer }</CardFooter> }
+		</CardWrapper>
+	);
+};
+
+export default CoreCard;