newspack-components 2.0.3 → 2.2.0

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

@@ -2,31 +2,20 @@
  * Custom Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-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: wp-colors.$gray-700;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: inherit;
+		min-height: 30px;
 		min-width: 100%;
 		padding-right: 24px;
 
@@ -34,17 +23,16 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-700;
+			color: wp-colors.$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 +42,9 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-300;
-		border-radius: 3px;
+		border-color: wp-colors.$gray-700;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		color: $gray-700;
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -76,8 +63,7 @@
 		}
 
 		&.is-header {
-			background: $gray-100;
-			color: $gray-900;
+			background: wp-colors.$gray-100;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;
@@ -86,7 +72,7 @@
 
 		&.is-highlighted {
 			background: white;
-			color: $primary-500;
+			color: var( --wp-admin-theme-color );
 		}
 
 		&.is-selected {
@@ -103,21 +89,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;
-	}
 }

package/src/date-range-picker/style.scss

@@ -1,5 +1,5 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .DateRangePicker {
 	margin: 32px 0;
@@ -47,7 +47,7 @@
 	}
 
 	&__MonthHeader {
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: 17px;
 		height: auto;
 		line-height: 24px;
@@ -62,8 +62,8 @@
 	}
 
 	&__WeekdayHeading {
-		border-bottom-color: $gray-300;
-		color: $gray-900;
+		border-bottom-color: wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
 
 		abbr[title] {
 			color: inherit;
@@ -76,20 +76,20 @@
 	}
 
 	&__Date {
-		border-color: $gray-300;
+		border-color: wp-colors.$gray-300;
 		border-bottom-width: 1px;
 
 		&--weekend {
-			background-color: $gray-100;
+			background-color: wp-colors.$gray-100;
 		}
 
 		&--otherMonth {
-			color: $gray-200;
+			color: wp-colors.$gray-200;
 			opacity: 1;
 		}
 
 		&--is-disabled {
-			color: $gray-100;
+			color: wp-colors.$gray-100;
 			cursor: not-allowed;
 		}
 
@@ -100,7 +100,7 @@
 
 	&__CalendarSelection,
 	&__CalendarHighlight {
-		border-color: $primary-500;
+		border-color: colors.$primary-500;
 		bottom: 4px;
 		top: 4px;
 
@@ -129,11 +129,11 @@
 	}
 
 	&__CalendarSelection {
-		background-color: $primary-500;
+		background-color: colors.$primary-500;
 	}
 
 	&__CalendarHighlight {
-		background: $primary-500;
+		background: colors.$primary-500;
 		border: none;
 		bottom: 0;
 		top: 0;

package/src/footer/index.js

@@ -15,25 +15,30 @@ import { PatronsLogo } from '../';
 import './style.scss';
 
 const Footer = ( { simple } ) => {
-	const componentsDemo = window && window.newspack_urls && window.newspack_urls.components_demo;
-	const setupWizard = window && window.newspack_urls && window.newspack_urls.setup_wizard;
-	const resetUrl = window && window.newspack_urls && window.newspack_urls.reset_url;
-	const pluginVersion = window && window.newspack_urls && window.newspack_urls.plugin_version;
-	const removeStarterContent =
-		window && window.newspack_urls && window.newspack_urls.remove_starter_content;
+	const {
+		components_demo: componentsDemo = false,
+		support = false,
+		setup_wizard: setupWizard = false,
+		reset_url: resetUrl = false,
+		plugin_version: pluginVersion = { label: 'Newspack' },
+		remove_starter_content: removeStarterContent = false,
+		support_email: supportEmail,
+	} = window.newspack_urls || {};
+
 	const footerElements = [
 		{
 			label: pluginVersion.label,
-			url: pluginVersion.url,
+			url: 'https://newspack.com/category/release-notes/',
+			external: true,
 		},
 		{
 			label: __( 'About', 'newspack' ),
-			url: 'https://newspack.pub/',
+			url: 'https://newspack.com/',
 			external: true,
 		},
 		{
 			label: __( 'Documentation', 'newspack' ),
-			url: 'https://newspack.pub/support/',
+			url: support,
 			external: true,
 		},
 	];
@@ -61,6 +66,12 @@ const Footer = ( { simple } ) => {
 			url: removeStarterContent,
 		} );
 	}
+	if ( supportEmail ) {
+		footerElements.push( {
+			label: __( 'Contact Support', 'newspack' ),
+			url: `mailto:${ supportEmail }`,
+		} );
+	}
 	return (
 		<div className="newspack-footer">
 			{ ! simple && (

package/src/footer/style.scss

@@ -2,16 +2,15 @@
  * Footer
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;
 	background: white;
-	border: 0 solid $gray-300;
+	border: 0 solid wp-colors.$gray-300;
 	border-width: 1px 0;
 	bottom: 0;
-	color: $gray-700;
+	color: wp-colors.$gray-700;
 	display: flex;
 	flex-wrap: wrap;
 	font-size: 12px;
@@ -45,23 +44,23 @@
 
 	li {
 		margin: 8px;
-	}
 
-	a {
-		align-items: flex-end;
-		color: inherit;
-		display: flex;
+		a {
+			align-items: flex-end;
+			color: inherit;
+			display: flex;
 
-		&:active,
-		&:focus,
-		&:hover {
-			color: $gray-900;
+			&:active,
+			&:focus,
+			&:hover {
+				color: wp-colors.$gray-900;
+			}
 		}
 	}
 
 	&__logo {
 		align-items: center;
-		background: $gray-900;
+		background: wp-colors.$gray-900;
 		display: flex;
 		margin: 0 0 -1px;
 		padding: 16px;

package/src/form-token-field/index.js

@@ -23,13 +23,8 @@ class FormTokenField extends Component {
 	 * Render.
 	 */
 	render() {
-		const {
-			className,
-			description,
-			hideHelpFromVision,
-			hideLabelFromVision,
-			...otherProps
-		} = this.props;
+		const { className, description, hideHelpFromVision, hideLabelFromVision, ...otherProps } =
+			this.props;
 		const classes = classnames( 'newspack-form-token-field__input-container', className );
 		return (
 			<div
@@ -42,7 +37,7 @@ class FormTokenField extends Component {
 				) }
 			>
 				<BaseComponent className={ classes } { ...otherProps } />
-				{ description && <div className="i">{ description }</div> }
+				{ description && <p className="newspack-form-token-field__help">{ description }</p> }
 			</div>
 		);
 	}

package/src/form-token-field/style.scss

@@ -2,118 +2,22 @@
  * Form Token Field
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-form-token-field {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
 	width: 100%;
 
-	label {
-		color: $gray-900;
-		font-size: inherit;
-		font-weight: bold;
-		line-height: inherit;
-		margin: 0;
+	.components-form-token-field__input-container {
+		padding-bottom: 1px;
+		padding-top: 1px;
 	}
 
-	.newspack-form-token-field__input-container {
-		background: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		box-shadow: none;
-		box-sizing: border-box;
-		color: inherit;
-		font-size: 16px;
-		line-height: inherit;
-		margin: 0;
-		min-height: 48px;
-		padding: 9px 8px;
-		transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-		width: 100%;
+	// Help
 
-		@media screen and ( min-width: 768px ) {
-			font-size: inherit;
-		}
-
-		&.is-active {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&:disabled,
-		&.is-disabled {
-			background: $gray-100;
-			color: $gray-600;
-			cursor: not-allowed;
-		}
-
-		input[type='text'] {
-			border: 0;
-			line-height: inherit;
-			margin: 2px 0;
-			padding: 0;
-
-			&:focus {
-				box-shadow: none;
-			}
-		}
-
-		.components-form-token-field__token-text {
-			font-size: inherit;
-		}
-
-		.components-form-token-field__remove-token {
-			height: 24px;
-		}
-	}
-
-	.components-form-token-field__suggestions-list {
-		border-top-color: $gray-300;
-		margin: 12px -8px -11px;
-		padding: 8px 0 0;
-
-		.components-form-token-field__suggestion {
-			font-size: inherit;
-			margin-bottom: 8px;
-
-			&.is-selected {
-				background: $primary-500;
-			}
-		}
-	}
-
-	// Help Text
-
-	.components-form-token-field__help {
-		margin: 0;
-	}
-
-	// Multiple Form Token Field
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-textarea-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label {
-		display: block;
-		margin: 0;
+	&__help {
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 8px 0 0 !important;
 	}
 
 	// Hidden Elements

package/src/global-notices/index.js

@@ -15,7 +15,7 @@ const GlobalNotices = () => {
 	}
 	return notice.split( ',' ).map( ( text, i ) => {
 		if ( text.indexOf( '_error_' ) === 0 ) {
-			return <Notice isError noticeText={ text.replace( '_error_', '' ) } key={ i } />;
+			return <Notice isError noticeText={ text.replace( '_error_', '' ) } key={ i } rawHTML />;
 		}
 		return <Notice isSuccess noticeText={ text } key={ i } />;
 	} );

package/src/grid/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -118,6 +118,19 @@
 		margin-top: 0 !important;
 	}
 
+	.components-base-control {
+		&__field,
+		&__help {
+			margin-bottom: 0;
+		}
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			margin-bottom: 0;
+		}
+	}
+
 	// Cards
 	> .newspack-card {
 		> *:first-child {
@@ -131,10 +144,10 @@
 
 	// Table-like
 	&__thead {
-		background: $gray-100;
-		border-bottom: 1px solid $gray-300;
-		border-top: 1px solid $gray-300;
-		color: $gray-900;
+		background: rgba( black, 0.025 );
+		border-bottom: 1px solid wp-colors.$gray-300;
+		border-top: 1px solid wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
 
 		> *:not( .screen-reader-text ) {
 			padding: 8px;
@@ -142,7 +155,7 @@
 	}
 
 	&__tbody {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$gray-300;
 		padding: 8px 0;
 	}
 

package/src/handoff/index.js

@@ -17,7 +17,7 @@ import { Button, Card, Modal, Waiting } from '../';
 /**
  * External dependencies.
  */
-import { assign } from 'lodash';
+import assign from 'lodash/assign';
 import classnames from 'classnames';
 
 class Handoff extends Component {
@@ -84,24 +84,19 @@ class Handoff extends Component {
 			children,
 			compact,
 			useModal,
-			// eslint-disable-next-line no-unused-vars
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 			modalTitle: _modalTitle,
-			// eslint-disable-next-line no-unused-vars
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 			modalBody: _modalBody,
-			// eslint-disable-next-line no-unused-vars
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 			onReady,
-			// eslint-disable-next-line no-unused-vars
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 			editLink,
 			...otherProps
 		} = this.props;
 		const { pluginInfo, showModal } = this.state;
-		const {
-			modalBody,
-			modalTitle,
-			primaryButton,
-			primaryModalButton,
-			dismissModalButton,
-		} = this.textForPlugin( pluginInfo );
+		const { modalBody, modalTitle, primaryButton, primaryModalButton, dismissModalButton } =
+			this.textForPlugin( pluginInfo );
 		const { Configured, Name, Slug, Status } = pluginInfo;
 		const classes = classnames( Configured && 'is-configured', className );
 		return (
@@ -119,7 +114,7 @@ class Handoff extends Component {
 					</Button>
 				) }
 				{ Name && 'active' !== Status && (
-					<Button className={ classes } isSecondary disabled { ...otherProps }>
+					<Button className={ classes } variant="secondary" disabled { ...otherProps }>
 						{ Name + __( ' not installed', 'newspack' ) }
 					</Button>
 				) }
@@ -142,10 +137,10 @@ class Handoff extends Component {
 					>
 						<p>{ modalBody }</p>
 						<Card buttonsCard noBorder className="justify-end">
-							<Button isSecondary onClick={ () => this.setState( { showModal: false } ) }>
+							<Button variant="secondary" onClick={ () => this.setState( { showModal: false } ) }>
 								{ dismissModalButton }
 							</Button>
-							<Button isPrimary onClick={ () => this.goToPlugin( Slug ) }>
+							<Button variant="primary" onClick={ () => this.goToPlugin( Slug ) }>
 								{ primaryModalButton }
 							</Button>
 						</Card>

package/src/handoff-message/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { HANDOFF_KEY } from '../consts';
+import { Notice } from '../';
+
+/**
+ * Handoff Message Component.
+ */
+export default function HandoffMessage() {
+	const [ handoffMessage, setHandoffMessage ] = useState( false );
+	useEffect( () => {
+		// Slight delay to allow for localStorage to be updated by RAS component.
+		setTimeout( () => {
+			const handoff = JSON.parse( localStorage.getItem( HANDOFF_KEY ) );
+			if ( handoff?.message ) {
+				setHandoffMessage( handoff.message );
+			} else {
+				setHandoffMessage( false );
+			}
+
+			// Clean up the notification if navigating away from the relevant page.
+			if ( handoff?.url && -1 === window.location.href.indexOf( handoff.url ) ) {
+				window.localStorage.removeItem( HANDOFF_KEY );
+				setHandoffMessage( false );
+			}
+		}, 100 );
+
+		// Clean up the notification when unmounting.
+		return () => window.localStorage.removeItem( HANDOFF_KEY );
+	}, [] );
+	if ( ! handoffMessage ) return null;
+	return <Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />;
+}

package/src/hooks/useObjectState.js

@@ -3,7 +3,8 @@
  */
 import { useState } from '@wordpress/element';
 
-import { mergeWith, isArray } from 'lodash';
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
 
 const mergeCustomizer = ( objValue, srcValue ) => {
 	if ( isArray( objValue ) ) {

package/src/image-upload/index.js

@@ -75,6 +75,7 @@ class ImageUpload extends Component {
 		const {
 			buttonLabel,
 			className,
+			disabled,
 			help,
 			image,
 			info,
@@ -104,17 +105,22 @@ class ImageUpload extends Component {
 								alt={ __( 'Image preview', 'newspack' ) }
 							/>
 							<div className="newspack-image-upload__controls">
-								<Button onClick={ this.openModal } isLink>
+								<Button disabled={ disabled } onClick={ this.openModal } isLink>
 									{ __( 'Replace', 'newspack' ) }
 								</Button>
 								<span className="sep" />
-								<Button onClick={ () => onChange( null ) } isLink isDestructive>
+								<Button
+									disabled={ disabled }
+									onClick={ () => onChange( null ) }
+									isLink
+									isDestructive
+								>
 									{ __( 'Remove', 'newspack' ) }
 								</Button>
 							</div>
 						</>
 					) : (
-						<Button onClick={ this.openModal } isLink>
+						<Button disabled={ disabled } onClick={ this.openModal } isLink>
 							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack' ) }
 						</Button>
 					) }