newspack-components 3.1.0 → 4.0.0

package/src/action-card/style.scss

@@ -9,8 +9,7 @@
 	padding: 0;
 	border-color: wp-colors.$gray-300;
 
-	// Clickable
-
+	/* Clickable */
 	&.newspack-card--is-clickable {
 		transition: box-shadow 125ms ease-in-out;
 
@@ -19,8 +18,7 @@
 		}
 	}
 
-	// Status
-
+	/* Status */
 	&.newspack-card__is-disabled,
 	&.newspack-card__is-primary,
 	&.newspack-card__is-secondary,
@@ -49,7 +47,7 @@
 		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
-	// Small
+	/* Small */
 	&.is-small {
 		.newspack-action-card__region-top {
 			padding: 8px 16px;
@@ -116,8 +114,7 @@
 		}
 	}
 
-	// Medium
-
+	/* Medium */
 	&.is-medium {
 		.newspack-action-card__region-top {
 			padding: 16px;
@@ -146,8 +143,7 @@
 		}
 	}
 
-	// Nested children
-
+	/* Nested children */
 	&.newspack-card--has-children {
 		.newspack-action-card {
 			&:first-child {
@@ -164,8 +160,7 @@
 		}
 	}
 
-	// Has grey header
-
+	/* Has grey header */
 	&.newspack-card--has-grey-header {
 		overflow: hidden;
 
@@ -198,8 +193,7 @@
 		}
 	}
 
-	// Indent
-
+	/* Indent */
 	&.newspack-card--indent {
 		margin-left: 56px;
 		position: relative;
@@ -216,8 +210,7 @@
 		}
 	}
 
-	// Typography
-
+	/* Typography */
 	h2,
 	p:not([class*="components-base-control"]) {
 		margin: 0;
@@ -247,8 +240,7 @@
 		}
 	}
 
-	// Regions
-
+	/* Regions */
 	.newspack-action-card__region {
 		align-items: center;
 		display: flex;
@@ -264,7 +256,7 @@
 			display: flex;
 		}
 
-		// Toggle Control
+		/* Toggle Control */
 		.components-toggle-control {
 			margin-bottom: 24px;
 			margin-top: 0;
@@ -359,14 +351,12 @@
 		}
 	}
 
-	// Waiting
-
+	/* Waiting */
 	.newspack-action-card__container {
 		display: flex;
 	}
 
-	// Notifications
-
+	/* Notifications */
 	.newspack-action-card__notification {
 		.newspack-notice {
 			margin: 0;
@@ -383,8 +373,7 @@
 		}
 	}
 
-	// Image
-
+	/* Image */
 	.newspack-action-card__image {
 		background-position: center;
 		background-repeat: no-repeat;
@@ -394,40 +383,52 @@
 		width: 48px;
 	}
 
-	// Icon
-
+	/* Icon */
 	.newspack_plugin-installer__icon {
 		margin: 0;
 	}
 
-	// Badge
-
+	/* Badge */
 	.newspack-action-card__badge {
 		background: wp-colors.$gray-100;
 		border-radius: 2px;
 		color: wp-colors.$gray-900;
 		display: block;
 		flex: 0 0 auto;
-		font-size: 10px;
-		font-weight: bold;
-		line-height: 1.4;
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 1.333;
 		margin: 0 8px 0 0;
-		padding: 2px 8px;
-		text-transform: uppercase;
+		padding: 2px 4px;
+
+		&.newspack-action-card__badge-level-warning {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-yellow);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-yellow);
+		}
+		&.newspack-action-card__badge-level-error {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-red);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-red);
+		}
+		&.newspack-action-card__badge-level-success {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-green);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-green);
+		}
+		&.newspack-action-card__badge-level-brand {
+			background-color: color-mix(in srgb, #fff 90%, var(--wp-admin-theme-color));
+			color: color-mix(in srgb, #000 50%, var(--wp-admin-theme-color));
+		}
 
 		+ .newspack-action-card__badge {
 			margin-left: -4px;
 		}
 	}
 
-	// Description Card
-
+	/* Description Card */
 	&.newspack-description-card {
 		font-style: italic;
 	}
 
-	// Expandable card children
-
+	/* Expandable card children */
 	&.is-expandable {
 		.newspack-action-card__title .components-button.is-link {
 			color: inherit;
@@ -439,6 +440,10 @@
 		.newspack-action-card__region-children {
 			border-top: 1px solid wp-colors.$gray-100;
 			padding-top: 24px;
+
+			+ .newspack-action-card__region-children {
+				border-top: none;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -460,7 +465,7 @@
 		}
 	}
 
-	// Action content with multiple buttons
+	/* Action content with multiple buttons */
 	&.has-action-content .newspack-action-card__region-right {
 		flex-direction: row;
 
@@ -468,16 +473,109 @@
 			margin-left: 8px;
 		}
 	}
+}
 
-	// Multiple Cards
+.newspack-card {
+	.newspack-card.newspack-action-card {
+		&:not(.newspack-card__no-border) {
+			border: 1px solid wp-colors.$gray-200;
+		}
+		&.newspack-card__no-border {
+			border: none;
+			.newspack-action-card__region-top,
+			.newspack-action-card__region-children {
+				padding: 0;
+			}
+		}
+	}
+}
+
+.newspack-action-card__draggable-wrapper {
+	margin: 16px 0;
 
-	& + & {
-		margin-top: -16px;
+	&.is-dragging {
+		opacity: 0.5;
+	}
+
+	.newspack-card {
+		margin: 0;
+	}
+
+	.newspack-action-card {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		.newspack-action-card__draggable-controls {
+			flex: 0 0 50px;
+			align-items: center;
+			display: flex;
+			height: 100%;
+			min-height: 100%;
+			width: fit-content;
+			justify-content: center;
+			margin-left: 8px;
+			margin-right: 8px;
+			padding: 8px 12px 8px 0;
+			border-right: 1px solid wp-colors.$gray-300;
+
+			.drag-handle {
+				align-items: center;
+				cursor: grab;
+				display: flex;
+				height: 100%;
+				justify-content: flex-end;
+				margin-left: -8px;
+				width: 32px;
+
+				.is-dragging & {
+					cursor: grabbing;
+				}
+
+				svg {
+					padding: 3px;
+				}
+			}
+
+			.movers {
+				display: flex;
+				flex-direction: column;
+
+				.components-button {
+					color: wp-colors.$gray-900;
+					display: block;
+					height: 24px;
+					line-height: 24px;
+					min-width: 24px;
+					padding: 0;
+					width: 24px;
+					+ .components-button {
+						margin-top: -4px;
+					}
+				}
+			}
+		}
+
+		.newspack-action-card__region-top {
+			flex: 1 1 auto;
+			padding: 8px 16px 8px 0 !important;
+			flex: 1;
+		}
+
+		.newspack-action-card__region-children {
+			flex: 0 0 100%;
+			padding: 0 0 0 16px;
+		}
+
+		&.is-draggable {
+			display: flex;
+			align-items: center;
+		}
 	}
 }
 
-.newspack-card {
-	.newspack-card.newspack-action-card {
-		border: 1px solid wp-colors.$gray-200;
+.components-draggable__clone {
+	.newspack-card {
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 	}
 }

package/src/autocomplete-tokenfield/index.js

@@ -207,7 +207,7 @@ class AutocompleteTokenField extends Component {
 	 * Render.
 	 */
 	render() {
-		const { help, label = '', placeholder = '', maxLength } = this.props;
+		const { help, label = '', placeholder = '', maxLength, style, __next40pxDefaultSize } = this.props;
 		const { suggestions, loading } = this.state;
 
 		const classNames = [ 'newspack-autocomplete-tokenfield__input-container' ];
@@ -217,7 +217,7 @@ class AutocompleteTokenField extends Component {
 		}
 
 		return (
-			<div className="newspack-autocomplete-tokenfield">
+			<div className="newspack-autocomplete-tokenfield" style={ style }>
 				<div className={ classNames.join( ' ' ) }>
 					<FormTokenField
 						value={ this.getTokens() }
@@ -227,6 +227,7 @@ class AutocompleteTokenField extends Component {
 						label={ label }
 						maxLength={ maxLength }
 						placeholder={ placeholder }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 					{ loading && <Spinner /> }
 				</div>

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

@@ -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-plugin' ),
-			} ) );
-		};
+				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-plugin' ),
-				} );
+				// 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.
@@ -151,9 +151,7 @@ const AutocompleteWithSuggestions = ( {
 
 		// Loop through new selections to determine whether to add or remove them.
 		_selections.forEach( _selection => {
-			const existingSelection = selections.findIndex(
-				selection => parseInt( selection.value ) === parseInt( _selection.value )
-			);
+			const existingSelection = selections.findIndex( selection => parseInt( selection.value ) === parseInt( _selection.value ) );
 
 			if ( -1 < existingSelection ) {
 				// If the selection is already selected, remove it.
@@ -176,15 +174,16 @@ 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-plugin' ),
-				selections.length,
-				selections.length > 1 ? postTypeLabelPlural : postTypeLabel
-			) : sprintf(
-				// Translators: %s: The label for the selection.
-				__( 'Selected %s', 'newspack-plugin' ),
-				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">
@@ -202,9 +201,7 @@ const AutocompleteWithSuggestions = ( {
 						key={ selection.value }
 						className="newspack-autocomplete-with-suggestions__selected-item-button"
 						isTertiary
-						onClick={ () =>
-							onChange( selections.filter( _selection => _selection.value !== selection.value ) )
-						}
+						onClick={ () => onChange( selections.filter( _selection => _selection.value !== selection.value ) ) }
 					>
 						{ selection.label }
 					</Button>
@@ -243,9 +240,7 @@ const AutocompleteWithSuggestions = ( {
 		if ( multiSelect ) {
 			const selections = selectedPost ? [ ...selectedItems, selectedPost ] : [ ...selectedItems ];
 			const isSelected = !! selections.find(
-				_selection =>
-					parseInt( _selection.value ) === parseInt( suggestion.value ) &&
-					_selection.label === suggestion.label
+				_selection => parseInt( _selection.value ) === parseInt( suggestion.value ) && _selection.label === suggestion.label
 			);
 			return (
 				<CheckboxControl
@@ -290,14 +285,8 @@ const AutocompleteWithSuggestions = ( {
 				<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 disabled={ isLoadingMore } isSecondary onClick={ () => setIsLoadingMore( true ) }>
+							{ isLoadingMore ? __( 'Loading…', 'newspack-plugin' ) : __( 'Load more', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>

package/src/box-contrast/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * Box Contrast
+ *
+ * can be used to dynamically assign black or white color/background-color based on a hex color.
+ * Black/white can be assigned to either text or background-color.
+ */
+
+/**
+ * Dependencies
+ */
+import { getContrast } from '../utils/color';
+
+/**
+ * Box Contrast component
+ *
+ * @return JSX.Element
+ */
+const BoxContrast = ( {
+	hexColor,
+	isInverted = false,
+	children,
+	...props
+}: {
+	children: string | JSX.Element;
+	hexColor: string;
+	isInverted?: boolean;
+	className?: string;
+} ) => {
+	let contrastColor;
+	if ( hexColor === '#f0f0f0' ) {
+		contrastColor = '#1e1e1e';
+	} else {
+		contrastColor = getContrast( hexColor );
+	}
+	const style = isInverted ? { color: hexColor, backgoundColor: contrastColor } : { backgroundColor: hexColor, color: contrastColor };
+
+	return (
+		<div { ...props } style={ style }>
+			{ children }
+		</div>
+	);
+};
+
+export default BoxContrast;

package/src/button/index.tsx

@@ -41,7 +41,7 @@ const Button = ( { href, onClick, ...otherProps }: Props ) => {
 	if ( isAwaitingOnClick ) {
 		otherProps.disabled = true;
 	}
-	// @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+	// @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
 	return <BaseComponent { ...otherProps } />;
 };
 

package/src/button-card/index.js

@@ -24,18 +24,7 @@ class ButtonCard extends Component {
 	 * Render
 	 */
 	render() {
-		const {
-			chevron,
-			className,
-			desc,
-			grouped,
-			icon,
-			isDestructive,
-			isPressed,
-			isSmall,
-			title,
-			...otherProps
-		} = this.props;
+		const { chevron, className, desc, grouped, icon, isDestructive, isPressed, isSmall, title, ...otherProps } = this.props;
 		const classes = classnames(
 			'newspack-button-card',
 			className,

package/src/card/index.js

@@ -22,17 +22,7 @@ class Card extends Component {
 	 * Render
 	 */
 	render() {
-		const {
-			buttonsCard,
-			className,
-			headerActions,
-			isNarrow,
-			isMedium,
-			isSmall,
-			isWhite,
-			noBorder,
-			...otherProps
-		} = this.props;
+		const { buttonsCard, className, headerActions, isNarrow, isMedium, isSmall, isWhite, noBorder, ...otherProps } = this.props;
 		const classes = classNames(
 			'newspack-card',
 			className,

package/src/category-autocomplete/index.js

@@ -79,10 +79,7 @@ class CategoryAutocomplete extends Component {
 		} )
 			.then( categories => {
 				this.setState( {
-					suggestions: categories.reduce(
-						( accumulator, category ) => ( { ...accumulator, [ category.name ]: category } ),
-						{}
-					),
+					suggestions: categories.reduce( ( accumulator, category ) => ( { ...accumulator, [ category.name ]: category } ), {} ),
 				} );
 			} )
 			.finally( () => this.setState( { isLoading: false } ) );
@@ -114,10 +111,7 @@ class CategoryAutocomplete extends Component {
 			}
 			return acc;
 		}, [] );
-		const availableSuggestions = filter(
-			suggestions,
-			( { id } ) => selectedIds.indexOf( id ) === -1
-		);
+		const availableSuggestions = filter( suggestions, ( { id } ) => selectedIds.indexOf( id ) === -1 );
 		return availableSuggestions.map( v => v.name );
 	};
 
@@ -125,15 +119,7 @@ class CategoryAutocomplete extends Component {
 	 * Render the component.
 	 */
 	render() {
-		const {
-			className,
-			disabled,
-			description,
-			hideHelpFromVision,
-			hideLabelFromVision,
-			label,
-			value,
-		} = this.props;
+		const { className, disabled, description, hideHelpFromVision, hideLabelFromVision, label, value } = this.props;
 		const { allCategories, isLoading } = this.state;
 		const classes = classnames( 'newspack-category-autocomplete', className );
 		return (
@@ -141,8 +127,7 @@ class CategoryAutocomplete extends Component {
 				<FormTokenField
 					onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
 					value={ value.reduce( ( acc, item ) => {
-						const categoryOrItem =
-							typeof item === 'number' ? find( allCategories, [ 'id', item ] ) : item;
+						const categoryOrItem = typeof item === 'number' ? find( allCategories, [ 'id', item ] ) : item;
 						if ( categoryOrItem ) {
 							acc.push( {
 								id: categoryOrItem.term_id || categoryOrItem.id,

package/src/color-picker/index.js

@@ -21,6 +21,16 @@ import './style.scss';
 extend( [ a11yPlugin ] );
 const { InteractiveDiv } = utils;
 
+/**
+ * ColorPicker component.
+ *
+ * @param {Object}             props             - Component props.
+ * @param {JSX.Element|string} props.label       - Label for the color picker.
+ * @param {string}             [props.color]     - Default color.
+ * @param {Function}           props.onChange    - Function to call when the color changes.
+ * @param {string}             [props.className] - Additional class name.
+ * @return {JSX.Element} ColorPicker component.
+ */
 const ColorPicker = ( { label, color = '#fff', onChange, className } ) => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
 	const ref = useRef();
@@ -42,13 +52,7 @@ const ColorPicker = ( { label, color = '#fff', onChange, className } ) => {
 			</InteractiveDiv>
 
 			<div className="newspack-color-picker__main" ref={ ref }>
-				{ isExpanded && (
-					<ColorPickerComponent
-						color={ color }
-						onChange={ hex => onChange( hex ) }
-						enableAlpha={ false }
-					/>
-				) }
+				{ isExpanded && <ColorPickerComponent color={ color } onChange={ hex => onChange( hex ) } enableAlpha={ false } /> }
 			</div>
 		</div>
 	);