newspack-components 2.1.0 → 2.2.1

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

@@ -28,12 +28,12 @@ const Footer = ( { simple } ) => {
 	const footerElements = [
 		{
 			label: pluginVersion.label,
-			url: 'https://newspack.pub/category/release-notes/',
+			url: 'https://newspack.com/category/release-notes/',
 			external: true,
 		},
 		{
 			label: __( 'About', 'newspack' ),
-			url: 'https://newspack.pub/',
+			url: 'https://newspack.com/',
 			external: true,
 		},
 		{

package/src/footer/style.scss

@@ -2,15 +2,15 @@
  * Footer
  */
 
-@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;
@@ -53,14 +53,14 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: $gray-900;
+				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

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

@@ -2,8 +2,7 @@
  * Form Token Field
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-form-token-field {
 	width: 100%;
@@ -16,7 +15,7 @@
 	// Help
 
 	&__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: 12px;
 		margin: 8px 0 0 !important;
 	}

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;
@@ -145,9 +145,9 @@
 	// Table-like
 	&__thead {
 		background: rgba( black, 0.025 );
-		border-bottom: 1px solid $gray-300;
-		border-top: 1px solid $gray-300;
-		color: $gray-900;
+		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;
@@ -155,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 {
@@ -95,13 +95,8 @@ class Handoff extends Component {
 			...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 (

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>
 					) }

package/src/image-upload/style.scss

@@ -2,8 +2,7 @@
  * Image Upload
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -18,7 +17,7 @@
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		border: 1px dashed $gray-700;
+		border: 1px dashed wp-colors.$gray-700;
 		border-radius: 2px;
 		display: flex;
 		justify-content: center;
@@ -52,12 +51,9 @@
 			&::after {
 				border: 1px solid rgba( black, 0.54 );
 				border-radius: 2px;
-				bottom: 0;
 				content: '';
-				left: 0;
+				inset: 0;
 				position: absolute;
-				right: 0;
-				top: 0;
 				z-index: 0;
 			}
 			button,
@@ -71,7 +67,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-700;
+				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -94,7 +90,7 @@
 		}
 	}
 	&__image + &__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: 12px;
 		margin: 1em 0 0;
 	}

package/src/index.js

@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
@@ -10,6 +11,7 @@ export { default as CustomSelectControl } from './custom-select-control';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
+export { default as HandoffMessage } from './handoff-message';
 export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as GlobalNotices } from './global-notices';
@@ -29,6 +31,8 @@ export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
+export { default as StepsList } from './steps-list';
+export { default as StepsListItem } from './steps-list-item';
 export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TextControl } from './text-control';

package/src/info-button/style.scss

@@ -2,8 +2,6 @@
  * Info Button
  */
 
-@import '~@wordpress/base-styles/colors';
-
 .newspack-info-button {
 	display: inline-block;
 	flex: 0 0 24px;
@@ -15,6 +13,6 @@
 
 	svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 	}
 }

package/src/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{$primary-500};
-	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -50,7 +50,7 @@
 
 	.components-modal__content {
 		> *:last-child {
-			margin-bottom: 8px;
+			margin-bottom: 0;
 		}
 	}
 }

package/src/newspack-icon/style.scss

@@ -2,21 +2,21 @@
  * Newspack Icon
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-icon {
-	background: $primary-500;
+	background: colors.$primary-500;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 	}
 
 	&--simple {
 		background: none;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 		padding: 0;
 	}
 

package/src/newspack-logo/style.scss

@@ -2,12 +2,12 @@
  * Newspack Logo
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-logo {
 	&__svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 		margin: 0;
 		padding-bottom: 32px;
 		width: auto;
@@ -19,7 +19,7 @@
 	}
 
 	&__wrapper {
-		background: $primary-500;
+		background: colors.$primary-500;
 		color: white;
 		position: relative;
 

package/src/notice/index.js

@@ -28,6 +28,7 @@ class Notice extends Component {
 			className,
 			debugMode,
 			isError,
+			isHandoff,
 			isHelp,
 			isSuccess,
 			isWarning,
@@ -41,6 +42,7 @@ class Notice extends Component {
 			className,
 			debugMode && 'newspack-notice__is-debug',
 			isError && 'newspack-notice__is-error',
+			isHandoff && 'newspack-notice__is-handoff',
 			isHelp && 'newspack-notice__is-help',
 			isSuccess && 'newspack-notice__is-success',
 			isWarning && 'newspack-notice__is-warning'

package/src/notice/style.scss

@@ -2,13 +2,14 @@
  * Notice
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use 'sass:color';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+@use '../../../shared/scss/colors';
 
 .newspack-notice {
 	align-items: center;
-	background: $gray-100;
-	color: $gray-900;
+	background: wp-colors.$gray-100;
+	color: wp-colors.$gray-900;
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
@@ -16,13 +17,13 @@
 
 	> svg {
 		display: block;
-		fill: $gray-900;
+		fill: wp-colors.$gray-900;
 		flex: 0 0 24px;
 		margin-right: 4px;
 	}
 
 	&__is-debug {
-		background: $primary-700;
+		background: colors.$primary-700;
 		border-radius: 2px;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
@@ -39,35 +40,47 @@
 	}
 
 	&__is-error {
-		background: lighten( $alert-red, 51% );
+		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
 
 		> svg {
-			fill: $alert-red;
+			fill: wp-colors.$alert-red;
 			transform: rotate( 180deg );
 		}
 	}
 
+	&__is-handoff {
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		margin-top: 0;
+		position: sticky;
+		top: 46px;
+		z-index: 100;
+
+		@media ( min-width: 782px ) {
+			top: 32px;
+		}
+	}
+
 	&__is-help {
-		background: $primary-050;
+		background: colors.$primary-050;
 
 		> svg {
-			fill: $primary-500;
+			fill: colors.$primary-500;
 		}
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 42% );
+		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
 
 		> svg {
-			fill: $alert-green;
+			fill: wp-colors.$alert-green;
 		}
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 30% );
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
 
 		> svg {
-			fill: $alert-yellow;
+			fill: wp-colors.$alert-yellow;
 			transform: rotate( 180deg );
 		}
 	}
@@ -87,7 +100,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
 			}
 		}
 	}

package/src/plugin-installer/index.js

@@ -155,6 +155,7 @@ class PluginInstaller extends Component {
 	render() {
 		const { autoInstall, isSmall, withoutFooterButton } = this.props;
 		const { pluginInfo } = this.state;
+		const { is_atomic: isAtomic } = window;
 		const slugs = Object.keys( pluginInfo );
 
 		// Store all plugin status info for installer button text value based on current status.
@@ -189,12 +190,23 @@ class PluginInstaller extends Component {
 					slugs.length > 0 &&
 					slugs.map( slug => {
 						const plugin = pluginInfo[ slug ];
-						const { Name, Description, Status, installationStatus, notification } = plugin;
+						const { Name, Description, Download, Status, installationStatus, notification } =
+							plugin;
 						const isWaiting = installationStatus === PLUGIN_STATE_INSTALLING;
 						const isButton = ! isWaiting && Status !== 'active';
+						const installable = Download || pluginInstalled( Status );
 						let actionText;
 						if ( installationStatus === PLUGIN_STATE_INSTALLING ) {
-							actionText = __( 'Installing…' );
+							actionText = 'inactive' === Status ? __( 'Activating…' ) : __( 'Installing…' );
+						} else if ( ! installable ) {
+							actionText = (
+								<span className="newspack-plugin-installer__status">
+									{ isAtomic
+										? __( 'Contact Newspack support to install', 'newspack' )
+										: __( 'Plugin must be installed manually', 'newspack' ) }
+									<span className="newspack-checkbox-icon" />
+								</span>
+							);
 						} else if ( Status === 'uninstalled' ) {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
@@ -230,6 +242,7 @@ class PluginInstaller extends Component {
 								key={ slug }
 								title={ Name }
 								description={ Description }
+								disabled={ ! installable }
 								actionText={ actionText }
 								isSmall={ isSmall }
 								isWaiting={ isWaiting }

package/src/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {
@@ -35,10 +35,10 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 $alert-green;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
 
 		.newspack-plugin-installer__checkbox {
-			background: $alert-green;
+			background: wp-colors.$alert-green;
 			box-shadow: none;
 		}
 
@@ -48,12 +48,12 @@
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 $alert-red;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 $gray-100;
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
 	}
 
 	// Is Small