newspack-components 2.0.3 → 2.2.0

package/src/plugin-settings/SettingsSection.js

@@ -5,16 +5,22 @@
 /**
  * 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';
 
 /**
  * Internal dependencies
  */
-import { ActionCard, Grid, Button, TextControl, CheckboxControl, SelectControl } from '../';
+import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
+import './style.scss';
 
+const isSelectControl = setting => {
+	return Array.isArray( setting.options ) && setting.options.length;
+};
 const getControlComponent = setting => {
-	if ( Array.isArray( setting.options ) && setting.options.length ) {
+	if ( isSelectControl( setting ) ) {
 		return SelectControl;
 	}
 	switch ( setting.type ) {
@@ -35,20 +41,20 @@ const getControlType = setting => {
 		case 'string':
 		case 'text':
 			return 'text';
+		case 'password':
+			return 'password';
+		case 'boolean':
+		case 'checkbox':
+			return 'checkbox';
 		default:
 			return null;
 	}
 };
 
-const SettingsSection = ( {
-	active,
-	title,
-	description,
-	fields,
-	disabled,
-	onChange,
-	onUpdate,
-} ) => {
+const SettingsSection = 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 }`,
@@ -58,14 +64,29 @@ const SettingsSection = ( {
 		options:
 			setting.options?.map( option => ( {
 				value: option.value,
-				label: option.name,
+				label: option.name || option.label,
 			} ) ) || null,
 		value: setting.value,
+		multiple: isSelectControl( setting ) && setting.multiple ? true : null,
 		checked: setting.type === 'boolean' ? !! setting.value : null,
 		onChange: value => {
 			onChange( setting.key, value );
+			setSaveDisabled( false );
 		},
 	} );
+	const createFilter = ( name, defaultComponent = null ) => {
+		return applyFilters(
+			`newspack.settingSection.${ sectionKey }.${ name }`,
+			defaultComponent,
+			props
+		);
+	};
+	let columns = 2;
+	if ( fields.length % 3 === 0 ) {
+		columns = 3;
+	} else if ( fields.length === 1 ) {
+		columns = 1;
+	}
 	return (
 		<ActionCard
 			isMedium
@@ -73,28 +94,39 @@ const SettingsSection = ( {
 			title={ title }
 			description={ description }
 			toggleChecked={ active }
-			hasGreyHeader={ true }
+			hasGreyHeader={ active || null === active }
 			toggleOnChange={ active !== null ? value => onUpdate( { active: value } ) : null }
+			actionContent={
+				( active || null === active ) &&
+				createFilter(
+					'buttons',
+					<Button
+						variant="primary"
+						disabled={ disabled || saveDisabled }
+						onClick={ () => {
+							onUpdate();
+							setSaveDisabled( true );
+						} }
+					>
+						{ __( 'Save Settings', 'newspack' ) }
+					</Button>
+				)
+			}
 		>
 			{ ( active || active === null ) && (
 				<Fragment>
-					<Grid columns={ fields.length % 3 === 0 ? 3 : 2 } gutter={ 32 }>
+					{ error?.message && <Notice noticeText={ error.message } isError /> }
+					{ createFilter( 'beforeControls' ) }
+					<Grid columns={ columns } gutter={ 32 }>
 						{ fields.map( setting => {
 							const Control = getControlComponent( setting ); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-							return <Control key={ setting.key } { ...getControlProps( setting ) } />;
+							return applyFilters(
+								`newspack.settingsSection.${ sectionKey }.control`,
+								<Control key={ setting.key } { ...getControlProps( setting ) } />,
+								{ sectionKey, setting, onChange }
+							);
 						} ) }
 					</Grid>
-					<div className="newspack-buttons-card" style={ { margin: '32px 0 0' } }>
-						<Button
-							isPrimary
-							disabled={ disabled }
-							onClick={ () => {
-								onUpdate();
-							} }
-						>
-							{ __( 'Save settings', 'newspack' ) }
-						</Button>
-					</div>
 				</Fragment>
 			) }
 		</ActionCard>

package/src/plugin-settings/index.js

@@ -27,11 +27,18 @@ class PluginSettings extends Component {
 	}
 
 	fetchSettings = () => {
-		const { pluginSlug } = this.props;
+		const { afterFetch, pluginSlug, isWizard } = this.props;
 		this.setState( { inFlight: true } );
-		apiFetch( { path: `/${ pluginSlug }/v1/settings` } )
+		apiFetch( {
+			path: isWizard
+				? `/newspack/v1/wizard/${ pluginSlug }/settings`
+				: `/${ pluginSlug }/v1/settings`,
+		} )
 			.then( settings => {
 				this.setState( { settings, error: null } );
+				if ( 'function' === typeof afterFetch ) {
+					afterFetch( settings );
+				}
 			} )
 			.catch( error => {
 				this.setState( { error } );
@@ -70,10 +77,12 @@ class PluginSettings extends Component {
 	};
 
 	handleSectionUpdate = sectionKey => data => {
-		const { pluginSlug } = this.props;
+		const { afterUpdate, pluginSlug, isWizard } = this.props;
 		this.setState( { inFlight: true } );
 		apiFetch( {
-			path: `/${ pluginSlug }/v1/settings`,
+			path: isWizard
+				? `/newspack/v1/wizard/${ pluginSlug }/settings`
+				: `/${ pluginSlug }/v1/settings`,
 			method: 'POST',
 			data: {
 				section: sectionKey,
@@ -81,7 +90,16 @@ 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 );
+				}
 			} )
 			.catch( error => {
 				this.setState( { error } );
@@ -154,14 +172,14 @@ class PluginSettings extends Component {
 	 * Render.
 	 */
 	render() {
-		const { title, description } = this.props;
+		const { title, description, hasGreyHeader, children } = this.props;
 		const { settings, inFlight, error } = this.state;
 		return (
 			<Fragment>
-				<SectionHeader title={ title } description={ description } />
+				{ title && <SectionHeader title={ title } description={ description } /> }
 				{ error && <Notice isError noticeText={ error.message } /> }
 				<div
-					className={ classnames( {
+					className={ classnames( 'newspack-plugin-settings', {
 						'newspack-wizard-section__is-loading': inFlight && ! Object.keys( settings ).length,
 					} ) }
 				>
@@ -169,14 +187,17 @@ class PluginSettings extends Component {
 						<SettingsSection
 							key={ sectionKey }
 							disabled={ inFlight }
+							sectionKey={ sectionKey }
 							title={ this.getSectionTitle( sectionKey ) }
 							description={ this.getSectionDescription( sectionKey ) }
 							active={ this.isSectionActive( sectionKey ) }
 							fields={ this.getSectionFields( sectionKey ) }
 							onChange={ this.handleSettingChange( sectionKey ) }
 							onUpdate={ this.handleSectionUpdate( sectionKey ) }
+							hasGreyHeader={ hasGreyHeader }
 						/>
 					) ) }
+					{ children }
 				</div>
 			</Fragment>
 		);

package/src/plugin-settings/style.scss

@@ -0,0 +1,7 @@
+.newspack-card:not( .newspack-settings__no-border ) {
+	.newspack-action-card__region-children {
+		> .newspack-grid {
+			margin: 32px 0 0 !important;
+		}
+	}
+}

package/src/plugin-toggle/index.js

@@ -51,15 +51,27 @@ class PluginToggle extends Component {
 				pluginInfo: { ...pluginInfo, [ plugin ]: { ...pluginInfo[ plugin ], inFlight: action } },
 			},
 			() => {
-				apiFetch( params ).then( response => {
-					const { shouldRefreshAfterUpdate } = plugins[ plugin ];
-					this.setState(
-						( { pluginInfo: currentPluginInfo } ) => ( {
-							pluginInfo: { ...currentPluginInfo, [ plugin ]: response },
-						} ),
-						() => shouldRefreshAfterUpdate && location.reload()
-					);
-				} );
+				apiFetch( params )
+					.then( response => {
+						const { shouldRefreshAfterUpdate } = plugins[ plugin ];
+						this.setState(
+							( { pluginInfo: currentPluginInfo } ) => ( {
+								pluginInfo: { ...currentPluginInfo, [ plugin ]: response },
+							} ),
+							() => shouldRefreshAfterUpdate && location.reload()
+						);
+					} )
+					.catch( e => {
+						this.setState( {
+							pluginInfo: {
+								...pluginInfo,
+								[ plugin ]: {
+									...pluginInfo[ plugin ],
+									error: e.message || __( 'There was an error managing this plugin.', 'newspack' ),
+								},
+							},
+						} );
+					} );
 			}
 		);
 	};
@@ -74,6 +86,7 @@ class PluginToggle extends Component {
 			const { name, description, href, slug, editPath } = plugin;
 			const pluginStatus = this.isPluginInstalledAndActive( plugin );
 			const handoff = ! href && pluginStatus && editPath ? slug : null;
+			const error = this.errorForPlugin( plugin );
 			return (
 				<ActionCard
 					key={ index }
@@ -86,6 +99,9 @@ class PluginToggle extends Component {
 					toggle
 					toggleChecked={ this.isPluginInstalledAndActive( plugin ) }
 					toggleOnChange={ value => this.managePlugin( slug, value ) }
+					notification={ error }
+					notificationHTML={ error }
+					notificationLevel="error"
 				/>
 			);
 		} );
@@ -101,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 ],
 							} ),
 							{}
 					  )
@@ -160,6 +175,16 @@ class PluginToggle extends Component {
 		}
 	};
 
+	/**
+	 * Get error message for this plugin.
+	 */
+	errorForPlugin = plugin => {
+		const { slug } = plugin;
+		const { pluginInfo } = this.state;
+
+		return pluginInfo[ slug ]?.error || null;
+	};
+
 	/**
 	 * Get installation/activation status for a plugin.
 	 */

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,48 +2,47 @@
  * 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: 3px;
-		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;
 			}
 
 			&.is-link {
-				border-radius: 3px;
+				border-radius: 2px;
 				padding: 6px 8px;
 				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>
+	);
+}

package/src/position-control/style.scss

@@ -0,0 +1,66 @@
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.newspack-position-placement-control {
+	margin-bottom: 1em;
+
+	.components-base-control__label {
+		margin-bottom: 8px;
+		margin-top: 1em;
+	}
+
+	.components-button-group {
+		display: grid;
+		grid-template-columns: repeat( 3, 1fr );
+		grid-template-rows: repeat( 3, 1fr );
+
+		div {
+			padding: 1px;
+		}
+
+		.components-button {
+			border-radius: 0 !important;
+			height: 100%;
+			padding: 20px;
+			width: 100%;
+		}
+
+		div:nth-of-type( 1 ) .components-button {
+			border-radius: 4px 0 0 !important;
+		}
+
+		div:nth-of-type( 3 ) .components-button {
+			border-radius: 0 4px 0 0 !important;
+		}
+
+		div:nth-last-of-type( 1 ) .components-button {
+			border-radius: 0 0 4px !important;
+		}
+
+		div:nth-last-of-type( 3 ) .components-button {
+			border-radius: 0 0 0 4px !important;
+		}
+	}
+
+	&.size-full-width .components-button-group {
+		grid-template-columns: 1fr;
+
+		div:first-of-type .components-button {
+			border-radius: 4px 4px 0 0 !important;
+		}
+
+		div:nth-of-type( 2 ) .components-button {
+			border-radius: 0 !important;
+		}
+
+		div:last-of-type .components-button {
+			border-radius: 0 0 4px 4px !important;
+		}
+	}
+
+	.components-base-control__help {
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		font-style: normal;
+		margin-top: 8px;
+	}
+}

package/src/progress-bar/style.scss

@@ -2,8 +2,8 @@
  * Progress Bar
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-progress-bar {
 	margin: 32px 0;
@@ -26,7 +26,7 @@
 	}
 
 	&__container {
-		background-color: $gray-100;
+		background-color: wp-colors.$gray-100;
 		border-radius: 4px;
 		height: 8px;
 		overflow: hidden;
@@ -35,7 +35,7 @@
 	}
 
 	&__bar {
-		background-color: $primary-500;
+		background-color: colors.$primary-500;
 		height: 8px;
 		transition: width 125ms ease-in-out;
 	}