newspack-components 2.1.0 → 2.2.0

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

package/src/plugin-settings/SettingsSection.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
@@ -52,17 +52,9 @@ const getControlType = setting => {
 };
 
 const SettingsSection = props => {
-	const {
-		error,
-		sectionKey,
-		active,
-		title,
-		description,
-		fields,
-		disabled,
-		onChange,
-		onUpdate,
-	} = props;
+	const [ saveDisabled, setSaveDisabled ] = useState( true );
+	const { error, sectionKey, active, title, description, fields, disabled, onChange, onUpdate } =
+		props;
 	const getControlProps = setting => ( {
 		disabled,
 		name: `${ setting.section }_${ setting.key }`,
@@ -79,6 +71,7 @@ const SettingsSection = props => {
 		checked: setting.type === 'boolean' ? !! setting.value : null,
 		onChange: value => {
 			onChange( setting.key, value );
+			setSaveDisabled( false );
 		},
 	} );
 	const createFilter = ( name, defaultComponent = null ) => {
@@ -109,9 +102,10 @@ const SettingsSection = props => {
 					'buttons',
 					<Button
 						variant="primary"
-						disabled={ disabled }
+						disabled={ disabled || saveDisabled }
 						onClick={ () => {
 							onUpdate();
+							setSaveDisabled( true );
 						} }
 					>
 						{ __( 'Save Settings', 'newspack' ) }

package/src/plugin-settings/index.js

@@ -90,8 +90,13 @@ class PluginSettings extends Component {
 			},
 		} )
 			.then( settings => {
-				this.setState( { settings, error: null } );
-
+				this.setState( {
+					settings: {
+						...this.state.settings,
+						[ sectionKey ]: settings[ sectionKey ],
+					},
+					error: null,
+				} );
 				if ( 'function' === typeof afterUpdate ) {
 					afterUpdate( settings );
 				}

package/src/plugin-toggle/index.js

@@ -117,9 +117,8 @@ class PluginToggle extends Component {
 					? Object.keys( pluginsFromAPI[ pluginSlug ] ).reduce(
 							( accumulator, key ) => ( {
 								...accumulator,
-								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]: pluginsFromAPI[ pluginSlug ][
-									key
-								],
+								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
+									pluginsFromAPI[ pluginSlug ][ key ],
 							} ),
 							{}
 					  )

package/src/plugin-toggle/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,
@@ -11,7 +11,7 @@
 
 		.newspack-action-card__region-right {
 			.newspack-button {
-				color: $gray-700;
+				color: wp-colors.$gray-700;
 				pointer-events: none;
 				text-decoration: none;
 			}

package/src/popover/style.scss

@@ -2,30 +2,29 @@
  * Popover
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-popover {
 	.components-popover__content {
-		border: 1px solid $gray-300;
-		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		min-width: 238px;
 
 		.newspack-button {
-			color: $gray-700;
+			color: wp-colors.$gray-700;
 			display: flex;
 			font-weight: normal;
 			padding: 6px 8px;
 
 			&:hover {
+				color: colors.$primary-500;
+
 				.components-menu-items__item-icon {
-					fill: currentColor;
+					fill: currentcolor;
 				}
 			}
 
 			&:focus:not( :disabled ) {
-				box-shadow: inset 0 0 0 2px $primary-500;
+				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
 			}
@@ -36,14 +35,14 @@
 				text-decoration: none;
 
 				&:not( .is-destructive ) {
-					color: $gray-700;
+					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-						color: $primary-500;
+					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+						color: colors.$primary-500;
 					}
 				}
 
@@ -53,8 +52,12 @@
 				}
 			}
 
+			&.is-destructive:not( :focus ) {
+				box-shadow: none !important;
+			}
+
 			.components-menu-items__item-icon {
-				fill: $gray-900;
+				fill: wp-colors.$gray-900;
 			}
 
 			.components-menu-item__item {
@@ -64,7 +67,7 @@
 		}
 
 		.components-menu-group__label {
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 			font-size: 12px;
 			font-weight: bold;
 			line-height: 16px;
@@ -86,8 +89,8 @@
 					min-height: 36px;
 
 					&:focus ~ div.components-input-control__backdrop {
-						border-color: $primary-500;
-						box-shadow: inset 0 0 0 1px $primary-500;
+						border-color: colors.$primary-500;
+						box-shadow: inset 0 0 0 1px colors.$primary-500;
 					}
 				}
 
@@ -129,7 +132,7 @@
 	}
 
 	&:not( .is-without-arrow )::before {
-		border-color: $gray-300;
+		border-color: wp-colors.$gray-300;
 	}
 
 	&.is-from-bottom {

package/src/position-control/index.js

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ButtonGroup, Button } from '@wordpress/components';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export default function PositionControl( {
+	allowedPositions,
+	value,
+	label,
+	help,
+	onChange,
+	size,
+	...props
+} ) {
+	/**
+	 * Set layout options
+	 */
+	const options =
+		size === 'full-width'
+			? [
+					{
+						value: 'top',
+						/* translators: Overlay Position */
+						label: __( 'Top', 'newspack' ),
+					},
+					{
+						value: 'center',
+						/* translators: Overlay Position */
+						label: __( 'Center', 'newspack' ),
+					},
+					{
+						value: 'bottom',
+						/* translators: Overlay Position */
+						label: __( 'Bottom', 'newspack' ),
+					},
+			  ]
+			: [
+					{
+						value: 'top_left',
+						/* translators: Overlay Position */
+						label: __( 'Top Left', 'newspack' ),
+					},
+					{
+						value: 'top',
+						/* translators: Overlay Position */
+						label: __( 'Top Center', 'newspack' ),
+					},
+					{
+						value: 'top_right',
+						/* translators: Overlay Position */
+						label: __( 'Top Right', 'newspack' ),
+					},
+					{
+						value: 'center_left',
+						/* translators: Overlay Position */
+						label: __( 'Center Left', 'newspack' ),
+					},
+					{
+						value: 'center',
+						/* translators: Overlay Position */
+						label: __( 'Center', 'newspack' ),
+					},
+					{
+						value: 'center_right',
+						/* translators: Overlay Position */
+						label: __( 'Center Right', 'newspack' ),
+					},
+					{
+						value: 'bottom_left',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Left', 'newspack' ),
+					},
+					{
+						value: 'bottom',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Center', 'newspack' ),
+					},
+					{
+						value: 'bottom_right',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Right', 'newspack' ),
+					},
+			  ];
+	return (
+		<div className={ classnames( 'newspack-position-placement-control', 'size-' + size ) }>
+			<p className="components-base-control__label">{ label }</p>
+			<ButtonGroup aria-label={ __( 'Select Position', 'newspack' ) } { ...props }>
+				{ options.map( ( option, index ) => {
+					return (
+						<div
+							key={ `newspack-position-placement-item-${ index }` }
+							className={ option.value === value ? 'is-selected' : null }
+						>
+							<Button
+								isSmall
+								title={ option.label }
+								aria-label={ option.label }
+								isPrimary={ option.value === value }
+								onClick={ () => {
+									onChange( option.value );
+								} }
+								disabled={ allowedPositions?.length && ! allowedPositions.includes( option.value ) }
+							/>
+						</div>
+					);
+				} ) }
+			</ButtonGroup>
+			<p className="components-base-control__help">{ help }</p>
+		</div>
+	);
+}