newspack-components 2.0.1 → 2.1.0

package/src/card/style.scss

@@ -2,13 +2,12 @@
  * Card
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-card {
-	border-radius: 3px;
+	border-radius: 2px;
 	border: 1px solid $gray-300;
-	color: $gray-700;
+	color: $gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
 
@@ -21,11 +20,8 @@
 	&__buttons-card {
 		display: flex;
 		flex-wrap: wrap;
-		margin: 32px -8px 16px;
-
-		.newspack-button {
-			margin: 0 8px 16px;
-		}
+		gap: 16px;
+		margin: 32px 0;
 	}
 
 	// Header Actions Card
@@ -43,6 +39,17 @@
 		}
 	}
 
+	// Is Narrow
+
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+
 	// Is Small
 
 	&__is-small {
@@ -79,6 +86,13 @@
 		}
 	}
 
+	// Is White
+
+	&__is-white {
+		background: white;
+		border: 0;
+	}
+
 	// No Border
 
 	&__no-border {
@@ -89,49 +103,15 @@
 
 	// Typography
 
-	h2,
-	h3,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
-		padding: 0;
-	}
-
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
-
-	h3 {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-	}
-
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
-	}
-
-	strong {
-		font-weight: bold;
-	}
-
 	small {
 		font-size: 12px;
-		line-height: 16px;
+		line-height: 1.4;
 	}
 
 	code {
 		background: $gray-100;
-		color: $gray-700;
-		font-size: 12px;
-		line-height: 16px;
-		padding: 4px 8px;
+		color: $gray-900;
+		padding: 0 0.5em;
 	}
 
 	// Thematic Break
@@ -155,24 +135,17 @@
 		margin-left: 8px;
 		margin-right: 8px;
 		width: 12px;
-	}
-
-	// Links
 
-	a {
-		color: $primary-500;
-
-		&:active,
-		&:focus,
-		&:hover {
-			color: $primary-600;
-			text-decoration: none;
+		&__inline {
+			display: inline-block;
+			line-height: 1.5;
+			vertical-align: middle;
 		}
+	}
 
-		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
-		}
+	// Error
+
+	.newspack-error {
+		color: $alert-red;
 	}
 }

package/src/category-autocomplete/index.js

@@ -6,6 +6,7 @@
  * WordPress dependencies.
  */
 import apiFetch from '@wordpress/api-fetch';
+import { Spinner } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -18,7 +19,7 @@ import './style.scss';
 /**
  * External dependencies
  */
-import { debounce, find } from 'lodash';
+import { debounce, find, filter } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -28,6 +29,7 @@ class CategoryAutocomplete extends Component {
 	state = {
 		suggestions: {},
 		allCategories: {},
+		isLoading: false,
 	};
 
 	/**
@@ -39,12 +41,15 @@ class CategoryAutocomplete extends Component {
 	}
 
 	componentDidMount() {
+		this.setState( { isLoading: true } );
 		apiFetch( {
 			path: addQueryArgs( `/wp/v2/${ this.props.taxonomy }`, {
 				per_page: -1,
 				_fields: 'id,name',
 			} ),
-		} ).then( categories => this.setState( { allCategories: categories } ) );
+		} )
+			.then( categories => this.setState( { allCategories: categories } ) )
+			.finally( () => this.setState( { isLoading: false } ) );
 	}
 
 	/**
@@ -60,6 +65,7 @@ class CategoryAutocomplete extends Component {
 	 * @param {string} search The typed text to search for.
 	 */
 	updateSuggestions( search ) {
+		this.setState( { isLoading: true } );
 		apiFetch( {
 			path: addQueryArgs( `/wp/v2/${ this.props.taxonomy }`, {
 				search,
@@ -68,14 +74,16 @@ class CategoryAutocomplete extends Component {
 				orderby: 'count',
 				order: 'desc',
 			} ),
-		} ).then( categories => {
-			this.setState( {
-				suggestions: categories.reduce(
-					( accumulator, category ) => ( { ...accumulator, [ category.name ]: category } ),
-					{}
-				),
-			} );
-		} );
+		} )
+			.then( categories => {
+				this.setState( {
+					suggestions: categories.reduce(
+						( accumulator, category ) => ( { ...accumulator, [ category.name ]: category } ),
+						{}
+					),
+				} );
+			} )
+			.finally( () => this.setState( { isLoading: false } ) );
 	}
 
 	/**
@@ -88,12 +96,29 @@ class CategoryAutocomplete extends Component {
 		const { suggestions } = this.state;
 		// Categories that are already will be objects, while new additions will be strings (the name).
 		// allValues nomalizes the array so that they are all objects.
-		const allValues = tokens.map( token =>
-			typeof token === 'string' ? suggestions[ token ] : token
-		);
+		const allValues = tokens
+			.filter( token => 'undefined' !== typeof token ) // Ensure each token is a valid value.
+			.map( token => ( 'string' === typeof token ? suggestions[ token ] : token ) )
+			.filter( Boolean );
 		onChange( allValues );
 	};
 
+	getAvailableSuggestions = () => {
+		const { value } = this.props;
+		const { suggestions } = this.state;
+		const selectedIds = value.reduce( ( acc, item ) => {
+			if ( item?.id ) {
+				acc.push( item.id );
+			}
+			return acc;
+		}, [] );
+		const availableSuggestions = filter(
+			suggestions,
+			( { id } ) => selectedIds.indexOf( id ) === -1
+		);
+		return availableSuggestions.map( v => v.name );
+	};
+
 	/**
 	 * Render the component.
 	 */
@@ -107,21 +132,24 @@ class CategoryAutocomplete extends Component {
 			label,
 			value,
 		} = this.props;
-		const { suggestions, allCategories } = this.state;
+		const { allCategories, isLoading } = this.state;
 		const classes = classnames( 'newspack-category-autocomplete', className );
 		return (
 			<div className={ classes }>
 				<FormTokenField
 					onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
 					value={ value.reduce( ( acc, item ) => {
-						const category =
+						const categoryOrItem =
 							typeof item === 'number' ? find( allCategories, [ 'id', item ] ) : item;
-						if ( category ) {
-							acc.push( { id: category.term_id || category.id, value: category.name } );
+						if ( categoryOrItem ) {
+							acc.push( {
+								id: categoryOrItem.term_id || categoryOrItem.id,
+								value: categoryOrItem.value || categoryOrItem.name,
+							} );
 						}
 						return acc;
 					}, [] ) }
-					suggestions={ Object.keys( suggestions ) }
+					suggestions={ this.getAvailableSuggestions() }
 					onChange={ this.handleOnChange }
 					label={ label }
 					disabled={ disabled }
@@ -129,6 +157,11 @@ class CategoryAutocomplete extends Component {
 					hideHelpFromVision={ hideHelpFromVision }
 					hideLabelFromVision={ hideLabelFromVision }
 				/>
+				{ isLoading ? (
+					<span className="newspack-category-autocomplete__suggestions-spinner">
+						<Spinner />
+					</span>
+				) : null }
 			</div>
 		);
 	}

package/src/category-autocomplete/style.scss

@@ -5,28 +5,32 @@
 @import '../../../shared/scss/colors';
 
 .newspack-category-autocomplete {
+	position: relative;
+
 	.components-form-token-field__help {
 		display: none;
 	}
 
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 2px $primary-500;
-	}
-
-	// Multiple Select Controls
+	// Within a Grid
 
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.newspack-grid & .newspack-form-token-field__input-container {
+		margin: 0;
 	}
 
-	// Multiple Controls
+	// Loading state spinner
+	&__suggestions-spinner {
+		position: absolute;
+		right: 1px;
+		top: calc( 1.4em + 8px );
+		z-index: 2;
+
+		[class*='--label-hidden'] + & {
+			top: 0;
+		}
 
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control,
-	+ .newspack-toggle-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
+		.components-spinner {
+			display: block;
+			margin: 7px;
+		}
 	}
 }

package/src/color-picker/index.js

@@ -3,12 +3,13 @@
  */
 import { ColorPicker as ColorPickerComponent } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * External dependencies.
  */
 import classnames from 'classnames';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * Internal dependencies.
@@ -17,40 +18,33 @@ import hooks from '../hooks';
 import utils from '../utils';
 import './style.scss';
 
+extend( [ a11yPlugin ] );
 const { InteractiveDiv } = utils;
 
 const ColorPicker = ( { label, color = '#fff', onChange, className } ) => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
 	const ref = useRef();
+	const colordColor = colord( color );
 	hooks.useOnClickOutside( ref, () => setIsExpanded( false ) );
 	return (
 		<div className={ classnames( 'newspack-color-picker', className ) }>
 			<div className="newspack-color-picker__label">{ label }</div>
+
+			<InteractiveDiv
+				className={ 'newspack-color-picker__expander' }
+				onClick={ () => setIsExpanded( ! isExpanded ) }
+				style={ {
+					backgroundColor: color,
+					color: colordColor.contrast() > colordColor.contrast( '#000' ) ? '#fff' : '#000',
+				} }
+			>
+				{ color }
+			</InteractiveDiv>
+
 			<div className="newspack-color-picker__main" ref={ ref }>
-				<InteractiveDiv
-					className={ classnames( 'newspack-color-picker__expander', {
-						'newspack-color-picker__expander--expanded': isExpanded,
-					} ) }
-					onClick={ () => setIsExpanded( ! isExpanded ) }
-				>
-					<div>
-						<div
-							className="newspack-color-picker__indicator"
-							style={ { backgroundColor: color } }
-						/>
-						<div>{ color }</div>
-					</div>
-					<Icon
-						icon={ chevronDown }
-						size={ 18 }
-						style={ isExpanded ? { transform: 'rotate(180deg)' } : {} }
-					/>
-				</InteractiveDiv>
 				{ isExpanded && (
 					<ColorPickerComponent
 						color={ color }
-						onChangeComplete={ ( { hex } ) => onChange( hex ) } // Prop will be deprecated in favor of onChange, which expects a string hex value.
-						disableAlpha // Prop will be deprecated in favor of enableAlpha, which behaves in the opposite manner.
 						onChange={ hex => onChange( hex ) }
 						enableAlpha={ false }
 					/>

package/src/color-picker/style.scss

@@ -7,174 +7,34 @@
 
 .newspack-color-picker {
 	position: relative;
-	margin: 32px 0;
 
-	&__main {
-		height: 48px;
-	}
-	&__expander {
-		padding: 11px 3px;
-		justify-content: space-between;
-		&,
-		> div {
-			display: flex;
-			align-items: center;
-		}
-		> div {
-			margin: 0 4px;
-		}
-		div + div {
-			margin-left: 8px;
-		}
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-		&--expanded:focus {
-			border-bottom-color: white;
-			box-shadow: inset 2px 2px 0 0 $primary-500, inset -2px 2px 0 0 $primary-500;
-
-			+ .components-color-picker {
-				position: relative;
-				border-bottom-color: $primary-500;
-				border-left-color: $primary-500;
-				border-right-color: $primary-500;
-				box-shadow: inset 2px -2px 0 0 $primary-500, inset -2px -2px 0 0 $primary-500;
-
-				&::before,
-				&::after {
-					background: $primary-500;
-					display: block;
-					content: '';
-					height: 1px;
-					left: -1px;
-					position: absolute;
-					top: -1px;
-					width: 3px;
-				}
-
-				&::after {
-					left: auto;
-					right: -1px;
-				}
-			}
-		}
-	}
-	&__indicator {
-		border: 1px solid rgba( black, 0.125 );
-		border-radius: 50%;
-		height: 24px;
-		overflow: hidden;
-		width: 24px;
-	}
 	&__label {
-		align-items: center;
-		color: $gray-900;
-		display: flex;
-		font-weight: bold;
-	}
-
-	&__expander,
-	.components-color-picker {
-		background-color: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		&--expanded {
-			border-bottom-color: white;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-	.components-color-picker {
-		padding: 8px;
-		position: relative;
-		z-index: 1;
-		padding-top: 0;
-		border-top: none;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
+		margin-bottom: 8px;
 	}
 
-	// Overrides of @wordpress/components component
-
-	// Inputs
-
-	.components-color-picker__body {
-		padding: 16px 0 0;
-	}
-
-	.components-color-picker__inputs-wrapper {
-		margin: 0;
-	}
-
-	.components-color-picker__inputs-fields {
-		margin-right: 8px;
-	}
-
-	.components-color-picker__inputs-field {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-
-		+ .components-color-picker__inputs-field {
-			margin-left: 8px;
-		}
-
-		label {
-			color: $gray-900;
-			font-size: inherit;
-			font-weight: bold;
-			line-height: inherit;
-			margin: 0;
-		}
-
-		input[type='number'],
-		input[type='text'] {
-			background: white;
-			border: 1px solid $gray-300;
-			border-radius: 3px;
-			box-shadow: none;
-			color: inherit;
-			font-size: 16px;
-			line-height: inherit;
-			margin: 0;
-			min-height: 48px;
-			padding: 11px 8px;
-			transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-			width: 100%;
-
-			@media screen and ( min-width: 768px ) {
-				font-size: inherit;
-			}
-
-			&:focus {
-				border-color: $primary-500;
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-		}
-
-		// Reset
+	&__expander {
+		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		border-radius: 2px;
+		height: 64px;
+		padding: 12px;
+		text-align: right;
+		text-transform: uppercase;
 
-		.components-base-control__field,
-		.components-base-control__label {
-			display: block;
-			margin: 0;
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			border-color: white;
 		}
 	}
 
-	.components-color-picker__inputs-toggle {
-		height: 36px;
-		margin-bottom: 6px;
-
-		&:active,
-		&:focus:not( :disabled ),
-		&:hover {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: 0 0 0 3px $primary-500;
+	&__main {
+		background: white;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		margin: 12px 0;
+		position: absolute;
+		z-index: 2;
+
+		&:empty {
+			display: none;
 		}
 	}
 }

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

@@ -6,27 +6,17 @@
 @import '~@wordpress/base-styles/colors';
 
 .newspack-custom-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
 	label {
-		color: $gray-900;
 		display: block;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
+		margin-bottom: 8px;
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-300;
-		border-radius: 3px;
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		min-height: 48px;
+		border-color: $gray-700;
+		border-radius: 2px;
+		color: $gray-900;
+		font-size: inherit;
+		min-height: 30px;
 		min-width: 100%;
 		padding-right: 24px;
 
@@ -34,17 +24,16 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-700;
+			color: $gray-900;
 		}
 
 		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px #36f;
+			border-color: var( --wp-admin-theme-color );
+			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
 		}
 
 		&-icon {
 			right: 3px;
-			transition: transform 50ms ease-in-out;
 			width: 18px;
 		}
 
@@ -54,10 +43,9 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-300;
-		border-radius: 3px;
+		border-color: $gray-700;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		color: $gray-700;
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -77,7 +65,6 @@
 
 		&.is-header {
 			background: $gray-100;
-			color: $gray-900;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;
@@ -86,7 +73,7 @@
 
 		&.is-highlighted {
 			background: white;
-			color: $primary-500;
+			color: var( --wp-admin-theme-color );
 		}
 
 		&.is-selected {
@@ -103,21 +90,4 @@
 			}
 		}
 	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
 }