newspack-components 2.0.1 → 2.1.0

package/src/notice/index.js

@@ -6,7 +6,8 @@
  * WordPress dependencies.
  */
 import { Component, RawHTML } from '@wordpress/element';
-import { Icon, check, help, info } from '@wordpress/icons';
+import { Icon, bug, check, help, info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -25,6 +26,7 @@ class Notice extends Component {
 	render() {
 		const {
 			className,
+			debugMode,
 			isError,
 			isHelp,
 			isSuccess,
@@ -37,6 +39,7 @@ class Notice extends Component {
 		const classes = classnames(
 			'newspack-notice',
 			className,
+			debugMode && 'newspack-notice__is-debug',
 			isError && 'newspack-notice__is-error',
 			isHelp && 'newspack-notice__is-help',
 			isSuccess && 'newspack-notice__is-success',
@@ -47,6 +50,8 @@ class Notice extends Component {
 			noticeIcon = help;
 		} else if ( isSuccess ) {
 			noticeIcon = check;
+		} else if ( debugMode ) {
+			noticeIcon = bug;
 		} else {
 			noticeIcon = info;
 		}
@@ -55,6 +60,7 @@ class Notice extends Component {
 				{ <Icon icon={ noticeIcon } /> }
 				<div className="newspack-notice__content">
 					{ rawHTML ? <RawHTML>{ noticeText }</RawHTML> : noticeText }
+					{ debugMode && __( 'Debug Mode', 'newspack' ) }
 					{ children || null }
 				</div>
 			</div>

package/src/notice/style.scss

@@ -6,14 +6,11 @@
 @import '../../../shared/scss/colors';
 
 .newspack-notice {
-	align-items: flex-start;
+	align-items: center;
 	background: $gray-100;
-	border-radius: 3px;
 	color: $gray-900;
 	display: flex;
-	font-size: 14px;
 	justify-content: flex-start;
-	line-height: 24px;
 	margin: 32px 0;
 	padding: 6px 8px;
 
@@ -24,8 +21,25 @@
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: $primary-700;
+		border-radius: 2px;
+		bottom: 16px;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		color: white;
+		font-weight: bold;
+		margin: 0 16px;
+		position: fixed;
+		text-transform: uppercase;
+		z-index: 9997;
+
+		> svg {
+			fill: white;
+		}
+	}
+
 	&__is-error {
-		background: lighten( $alert-red, 54% );
+		background: lighten( $alert-red, 51% );
 
 		> svg {
 			fill: $alert-red;
@@ -34,7 +48,7 @@
 	}
 
 	&__is-help {
-		background: $primary-000;
+		background: $primary-050;
 
 		> svg {
 			fill: $primary-500;
@@ -42,7 +56,7 @@
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 47% );
+		background: lighten( $alert-green, 42% );
 
 		> svg {
 			fill: $alert-green;
@@ -50,7 +64,7 @@
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 36% );
+		background: lighten( $alert-yellow, 30% );
 
 		> svg {
 			fill: $alert-yellow;
@@ -58,9 +72,23 @@
 		}
 	}
 
-	&__content {
+	& &__content {
 		> div > * {
-			margin: 0;
+			margin: 0 !important;
+		}
+
+		a {
+			color: inherit;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: inherit;
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+			}
 		}
 	}
 

package/src/plugin-installer/index.js

@@ -99,6 +99,7 @@ class PluginInstaller extends Component {
 		return apiFetch( params )
 			.then( response => {
 				const { pluginInfo } = this.state;
+				this.props.onInstalled( slug );
 				this.updatePluginInfo( {
 					...pluginInfo,
 					[ slug ]: { ...response, installationStatus: PLUGIN_STATE_ACTIVE },
@@ -177,7 +178,7 @@ class PluginInstaller extends Component {
 		} );
 
 		return (
-			<div>
+			<>
 				{ ( ! pluginInfo || ! Object.keys( pluginInfo ).length ) && (
 					<div className="newspack-plugin-installer_is-waiting">
 						<Waiting isLeft />
@@ -247,13 +248,14 @@ class PluginInstaller extends Component {
 						</Button>
 					</div>
 				) }
-			</div>
+			</>
 		);
 	}
 }
 
 PluginInstaller.defaultProps = {
 	onStatus: () => {},
+	onInstalled: () => {},
 };
 
 export default PluginInstaller;

package/src/plugin-settings/SettingsSection.js

@@ -6,15 +6,21 @@
  * WordPress dependencies
  */
 import { Fragment } 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,28 @@ 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 {
+		error,
+		sectionKey,
+		active,
+		title,
+		description,
+		fields,
+		disabled,
+		onChange,
+		onUpdate,
+	} = props;
 	const getControlProps = setting => ( {
 		disabled,
 		name: `${ setting.section }_${ setting.key }`,
@@ -58,14 +72,28 @@ 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 );
 		},
 	} );
+	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 +101,38 @@ const SettingsSection = ( {
 			title={ title }
 			description={ description }
 			toggleChecked={ active }
-			hasGreyHeader={ active !== null }
-			toggleOnChange={ value => onUpdate( { active: value } ) }
+			hasGreyHeader={ active || null === active }
+			toggleOnChange={ active !== null ? value => onUpdate( { active: value } ) : null }
+			actionContent={
+				( active || null === active ) &&
+				createFilter(
+					'buttons',
+					<Button
+						variant="primary"
+						disabled={ disabled }
+						onClick={ () => {
+							onUpdate();
+						} }
+					>
+						{ __( '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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies.
  */
@@ -22,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 } );
@@ -65,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,
@@ -77,6 +91,10 @@ class PluginSettings extends Component {
 		} )
 			.then( settings => {
 				this.setState( { settings, error: null } );
+
+				if ( 'function' === typeof afterUpdate ) {
+					afterUpdate( settings );
+				}
 			} )
 			.catch( error => {
 				this.setState( { error } );
@@ -149,24 +167,33 @@ 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 } /> }
-				{ Object.keys( settings ).map( sectionKey => (
-					<SettingsSection
-						key={ sectionKey }
-						disabled={ inFlight }
-						title={ this.getSectionTitle( sectionKey ) }
-						description={ this.getSectionDescription( sectionKey ) }
-						active={ this.isSectionActive( sectionKey ) }
-						fields={ this.getSectionFields( sectionKey ) }
-						onChange={ this.handleSettingChange( sectionKey ) }
-						onUpdate={ this.handleSectionUpdate( sectionKey ) }
-					/>
-				) ) }
+				<div
+					className={ classnames( 'newspack-plugin-settings', {
+						'newspack-wizard-section__is-loading': inFlight && ! Object.keys( settings ).length,
+					} ) }
+				>
+					{ Object.keys( settings ).map( sectionKey => (
+						<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"
 				/>
 			);
 		} );
@@ -160,6 +176,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/popover/style.scss

@@ -8,7 +8,7 @@
 .newspack-popover {
 	.components-popover__content {
 		border: 1px solid $gray-300;
-		border-radius: 3px;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		min-width: 238px;
 
@@ -31,7 +31,7 @@
 			}
 
 			&.is-link {
-				border-radius: 3px;
+				border-radius: 2px;
 				padding: 6px 8px;
 				text-decoration: none;
 

package/src/radio-control/style.scss

@@ -76,8 +76,7 @@
 	// Multiple Controls
 
 	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
+	+ .newspack-text-control {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}

package/src/section-header/index.js

@@ -5,6 +5,7 @@
 /**
  * Internal dependencies
  */
+import { Grid } from '..';
 import './style.scss';
 
 /**
@@ -12,19 +13,37 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-const SectionHeader = ( { className, description, noMargin, title } ) => {
+const SectionHeader = ( {
+	centered,
+	className,
+	description,
+	heading,
+	isWhite,
+	noMargin,
+	title,
+} ) => {
 	const classes = classnames(
 		'newspack-section-header',
+		centered && 'newspack-section-header--is-centered',
+		isWhite && 'newspack-section-header--is-white',
 		noMargin && 'newspack-section-header--no-margin',
 		className
 	);
+
+	const HeadingTag = `h${ heading }`;
+
 	return (
-		<div className={ classes }>
-			<h2>{ title }</h2>
-			{ typeof description === 'string' && <span>{ description }</span> }
-			{ typeof description === 'function' && <span>{ description() }</span> }
-		</div>
+		<Grid columns={ 1 } gutter={ 8 } className={ classes }>
+			{ typeof title === 'string' && <HeadingTag>{ title }</HeadingTag> }
+			{ typeof title === 'function' && <HeadingTag>{ title() }</HeadingTag> }
+			{ typeof description === 'string' && <p>{ description }</p> }
+			{ typeof description === 'function' && <p>{ description() }</p> }
+		</Grid>
 	);
 };
 
+SectionHeader.defaultProps = {
+	heading: 2,
+};
+
 export default SectionHeader;

package/src/section-header/style.scss

@@ -2,14 +2,39 @@
  * Section Header
  */
 
+@import '~@wordpress/base-styles/colors';
+
 .newspack-section-header {
 	margin: 64px 0 32px;
 
 	&--no-margin,
-	h2 {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		margin: 0 !important;
 	}
 
+	&--is-centered {
+		text-align: center;
+	}
+
+	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+		margin-top: -16px !important;
+	}
+
+	&#{&}--is-white {
+		> * {
+			color: white;
+		}
+	}
+
+	p {
+		color: $gray-700;
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}

package/src/select-control/ButtonGroupControl.js

@@ -7,22 +7,30 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/icons';
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { Button, ButtonGroup, hooks } from '..';
+import { hooks } from '..';
 
-const ButtonGroupControl = ( { buttonOptions, onChange, value, label, className } ) => {
+const ButtonGroupControl = ( {
+	buttonOptions,
+	className,
+	hideLabelFromVision,
+	label,
+	onChange,
+	value,
+} ) => {
 	const id = hooks.useUniqueId( 'button-group' );
 	return (
 		<BaseControl
 			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
 			id={ id.current }
 			className={ classnames( className, 'components-select-control' ) }
 		>
-			<ButtonGroup noMargin>
+			<ButtonGroup>
 				{ buttonOptions.map( option => {
 					const isSelected = value === option.value;
 					let Label = () => option.label;
@@ -33,8 +41,7 @@ const ButtonGroupControl = ( { buttonOptions, onChange, value, label, className
 					return (
 						<Button
 							key={ option.value }
-							isSecondary={ ! isSelected }
-							isPressed={ isSelected }
+							variant={ isSelected ? 'primary' : null }
 							onClick={ () => onChange( option.value ) }
 						>
 							<Label />