newspack-components 2.0.3 → 2.1.0

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

@@ -190,7 +190,7 @@ const AutocompleteWithSuggestions = ( {
 					{ selectedMessage }
 					{ 1 < selections.length && _x( ' – ', 'separator character', 'newspack' ) }
 					{ 1 < selections.length && (
-						<Button onClick={ () => onChange( [] ) } isLink>
+						<Button onClick={ () => onChange( [] ) } isLink isDestructive>
 							{ __( 'Clear all', 'newspack' ) }
 						</Button>
 					) }
@@ -241,7 +241,9 @@ const AutocompleteWithSuggestions = ( {
 		if ( multiSelect ) {
 			const selections = selectedPost ? [ ...selectedItems, selectedPost ] : [ ...selectedItems ];
 			const isSelected = !! selections.find(
-				_selection => parseInt( _selection.value ) === parseInt( suggestion.value )
+				_selection =>
+					parseInt( _selection.value ) === parseInt( suggestion.value ) &&
+					_selection.label === suggestion.label
 			);
 			return (
 				<CheckboxControl

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

@@ -2,7 +2,6 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-autocomplete-with-suggestions {
@@ -18,8 +17,9 @@
 	}
 
 	.components-spinner {
+		margin: 8px;
 		right: 0;
-		top: 2em;
+		top: calc( 1.4em + 8px );
 	}
 
 	.components-select-control__input {
@@ -27,7 +27,7 @@
 	}
 
 	.components-input-control__backdrop {
-		border-color: $gray-900 !important;
+		border-color: $gray-700 !important;
 	}
 
 	.newspack-autocomplete-with-suggestions__label,
@@ -39,7 +39,7 @@
 
 	&__suggestions-spinner {
 		background: $gray-100;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		border-radius: 2px;
 		cursor: progress;
 		margin: 16px 0;
@@ -49,6 +49,7 @@
 			display: block;
 			margin: 0 auto;
 			position: relative;
+			right: auto;
 			top: 0;
 		}
 	}
@@ -59,11 +60,11 @@
 
 	.components-form-token-field {
 		&__input-container {
-			border-color: $gray-900;
+			border-color: $gray-700;
 		}
 
 		&__suggestions-list {
-			border-top-color: $gray-900;
+			border-top-color: $gray-700;
 			margin: 4px -4px -2px;
 		}
 
@@ -74,32 +75,30 @@
 
 	p.newspack-autocomplete-with-suggestions__label {
 		font-size: inherit;
-		margin-bottom: 4px;
+		margin: 0 0 8px;
 	}
 
 	&__selected-items {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid $gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
 		margin-bottom: 16px;
 		padding-bottom: 12px;
 
-		.newspack-autocomplete-with-suggestions__label {
-			font-weight: bold;
-
-			.components-button.is-link {
-				color: $alert-red;
-				font-weight: normal;
-			}
+		p.newspack-autocomplete-with-suggestions__label {
+			flex: 0 0 100%;
+			margin: 0;
 		}
 	}
 
 	&__selected-item-button.components-button.is-tertiary {
 		background-color: $gray-300;
 		border-radius: 2px;
-		color: #1e1e1e;
+		color: $gray-900;
 		font-size: 13px;
 		height: auto;
-		margin-bottom: 4px;
-		margin-right: 4px;
+		margin: 0;
 		padding-left: 8px;
 		padding-right: 8px;
 
@@ -117,7 +116,7 @@
 	&__search-suggestions,
 	&__search-suggestions-multiselect {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		max-height: 178px;
 		overflow-x: visible;
 		overflow-y: auto;
@@ -151,7 +150,7 @@
 
 	&__search-suggestions {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		padding: 0;
 
 		.components-button {

package/src/button/index.js

@@ -14,19 +14,12 @@ import { useState } from '@wordpress/element';
 import Router from '../proxied-imports/router';
 import './style.scss';
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 const { useHistory } = Router;
 
-const Button = ( { className, isQuaternary, href, onClick, ...otherProps } ) => {
+const Button = ( { href, onClick, ...otherProps } ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
-	const classes = classnames( 'newspack-button', isQuaternary && 'is-quaternary', className );
-
 	// If both onClick and href are present, await the onClick action an then redirect.
 	if ( href && onClick ) {
 		otherProps.onClick = async () => {
@@ -42,7 +35,7 @@ const Button = ( { className, isQuaternary, href, onClick, ...otherProps } ) =>
 	if ( isAwaitingOnClick ) {
 		otherProps.disabled = true;
 	}
-	return <BaseComponent className={ classes } { ...otherProps } />;
+	return <BaseComponent { ...otherProps } />;
 };
 
 export default Button;

package/src/button/style.scss

@@ -2,351 +2,10 @@
  * Button
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-@mixin button-style( $background, $border, $text ) {
-	background: $background;
-	border-color: $border;
-	color: $text;
-}
-
-body[class*='admin-color-'] {
-	.newspack-button {
-		border-radius: 3px;
-		font-size: 14px;
-		font-weight: bold;
-		height: auto;
-		line-height: 24px;
-		padding: 11px 24px;
-		transition: background 125ms ease-in-out, border-color 125ms ease-in-out,
-			box-shadow 125ms ease-in-out, color 125ms ease-in-out;
-
-		&.is-large {
-			font-size: 17px;
-			height: auto;
-			line-height: 24px;
-		}
-
-		&.is-small {
-			font-size: 14px;
-			height: auto;
-			line-height: 24px;
-			padding: 5px 16px;
-		}
-
-		&.icon-only {
-			display: inline-flex;
-			align-items: center;
-			height: 36px;
-			justify-content: center;
-			padding: 0;
-			width: 36px;
-
-			&.size-48 {
-				height: 48px;
-				width: 48px;
-			}
-		}
-
-		&:disabled,
-		&:disabled:active:enabled,
-		&[aria-disabled='true'],
-		&[aria-disabled='true']:active:enabled {
-			cursor: not-allowed;
-			text-shadow: none;
-		}
-
-		&:hover,
-		&[aria-expended='true'] {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&.is-button {
-			border-radius: 3px;
-			font-size: 14px;
-			font-weight: bold;
-			height: auto;
-			line-height: 24px;
-			padding: 11px 24px;
-		}
-
-		&.is-primary,
-		&.is-pressed {
-			@include button-style( $primary-500, $primary-600, white );
-			border-style: solid;
-			border-width: 1px;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $primary-600, $primary-700, white );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( $primary-500, $primary-600, $primary-300 );
-
-				&:hover {
-					@include button-style( $primary-500, $primary-600, $primary-300 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-
-			.newspack-is-waiting {
-				fill: white;
-			}
-		}
-
-		&.is-default,
-		&.is-secondary {
-			@include button-style( white, $gray-300, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
+.components-button {
+	&.is-destructive {
+		&:hover:not( :disabled ) {
 			box-shadow: none;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $gray-100, $primary-500, $primary-500 );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( white, $gray-300, $gray-600 );
-
-				&:hover {
-					@include button-style( white, $gray-300, $gray-600 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-		}
-
-		&.is-tertiary {
-			@include button-style( $gray-100, $gray-300, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
-			height: auto;
-			line-height: 24px;
-			padding: 11px 24px;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $gray-200, $gray-600, $gray-900 );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( $gray-100, $gray-300, $gray-700 );
-
-				&:hover {
-					@include button-style( $gray-100, $gray-300, $gray-700 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-
-			.newspack-is-waiting {
-				fill: $gray-700;
-			}
-		}
-
-		&.is-quaternary {
-			@include button-style( transparent, transparent, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
-			color: $gray-900;
-
-			&:focus,
-			&:hover {
-				border-color: $gray-200;
-				box-shadow: none;
-				color: $primary-500;
-			}
-
-			&:focus-visible {
-				border-color: $primary-500;
-				box-shadow: inset 0 0 0 1px $primary-500;
-				color: $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( transparent, transparent, $gray-600 );
-				opacity: 1;
-
-				&:hover {
-					@include button-style( transparent, transparent, $gray-600 );
-				}
-			}
-		}
-
-		&.is-link {
-			background: none;
-			border: 0;
-			border-radius: 0;
-			font-weight: normal;
-			padding: 0;
-			transition: color 125ms ease-in-out, outline 125ms ease-in-out;
-
-			&:not( .is-destructive ) {
-				color: $primary-500;
-			}
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				background: transparent;
-				color: $primary-600;
-				text-decoration: none;
-			}
-
-			&:focus,
-			&:focus:enabled,
-			&.is-destructive:not( :disabled ):hover {
-				box-shadow: none;
-				outline: none;
-			}
-
-			&:focus-visible,
-			&:focus-visible:enabled {
-				outline: 2px solid $primary-500;
-				outline-offset: 2px;
-			}
-
-			&.is-small,
-			&.is-large {
-				padding: 0;
-			}
-		}
-
-		&.is-destructive {
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				background: $gray-100;
-			}
-
-			&:focus,
-			&:focus:enabled,
-			&:focus:not( :disabled ) {
-				box-shadow: inset 0 0 0 1px $alert-red, 0 0 0 1px white, 0 0 0 3px $alert-red;
-				color: $alert-red;
-			}
-		}
-
-		.components-tooltip {
-			font-weight: normal;
-		}
-
-		// Popover Active
-
-		&.popover-active {
-			border: 1px solid $gray-300;
-		}
-
-		// Icon-only
-
-		&.has-icon:not( .has-text ) {
-			align-items: center;
-			height: 40px;
-			justify-content: center;
-			min-width: 40px;
-			padding: 0;
-			width: 40px;
-
-			&.is-small {
-				height: 36px;
-				min-width: 36px;
-				width: 36px;
-			}
-
-			&.is-large {
-				height: 48px;
-				min-width: 48px;
-				width: 48px;
-			}
 		}
 	}
 }

package/src/button-card/index.js

@@ -11,6 +11,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { Grid } from '../';
 import './style.scss';
 
 /**
@@ -23,23 +24,36 @@ class ButtonCard extends Component {
 	 * Render
 	 */
 	render() {
-		const { chevron, className, desc, grouped, icon, 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,
 			chevron && 'has-chevron',
 			grouped && 'grouped',
 			icon && 'has-icon',
+			isDestructive && 'is-destructive',
+			isPressed && 'is-pressed',
 			isSmall && 'is-small'
 		);
 
 		return (
 			<a className={ classes } { ...otherProps }>
 				{ icon && <Icon icon={ icon } height={ 48 } width={ 48 } /> }
-				<div>
-					{ title && <div className="title">{ title }</div> }
-					{ desc && <div className="desc">{ desc }</div> }
-				</div>
+				<Grid noMargin columns={ 1 } gutter={ 8 }>
+					{ title && <h3>{ title }</h3> }
+					{ desc && <p>{ desc }</p> }
+				</Grid>
 				{ chevron && <Icon icon={ chevronRight } height={ 24 } width={ 24 } /> }
 			</a>
 		);