newspack-components 2.0.3 → 2.1.0

package/src/modal/index.js

@@ -23,18 +23,15 @@ class Modal extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, overlayClassName, isWide, isNarrow, ...otherProps } = this.props;
+		const { className, isWide, isNarrow, ...otherProps } = this.props;
 		const classes = classnames(
 			'newspack-modal',
 			isWide && 'newspack-modal--wide',
 			isNarrow && 'newspack-modal--narrow',
 			className
 		);
-		const overlayClasses = classnames( 'newspack-modal__overlay', overlayClassName );
 
-		return (
-			<BaseComponent className={ classes } overlayClassName={ overlayClasses } { ...otherProps } />
-		);
+		return <BaseComponent className={ classes } { ...otherProps } />;
 	}
 }
 

package/src/modal/style.scss

@@ -3,166 +3,54 @@
  */
 
 @import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
 
 .newspack-modal {
-	background: white;
-	border: 0;
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: auto;
-	max-height: 100%;
-	width: 100%;
-
-	@media screen and ( min-width: 600px ) {
-		border-radius: 3px;
-		max-width: 80%;
-		max-width: calc( 100% - 64px );
-	}
+	// 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};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
+		width: 680px;
 
 		&--wide {
 			max-width: 1168px;
+			width: 1168px;
 		}
 	}
 
 	&--narrow {
 		max-width: 360px;
+		width: 360px;
 	}
 
-	// Header
-
-	.components-modal__header {
-		align-items: flex-start;
-		background: white;
-		border: 0;
-		height: auto;
-		justify-content: flex-end;
-		margin: 0 -32px 0;
-		padding: 32px 32px 0;
-		position: relative;
-
-		.components-modal__header-heading-container {
-			display: block;
-			margin-right: 16px;
-		}
-
-		.components-button.has-icon {
-			flex: 0 0 36px;
-			left: 0;
-			margin: -2px 0;
-
-			&:hover,
-			&[aria-expended='true'] {
-				color: $primary-500;
-			}
-
-			&:focus:not( :disabled ) {
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-
-			svg {
-				width: 24px;
-				height: 24px;
-
-				+ span {
-					display: none;
-				}
-			}
-		}
-
-		.components-modal__header-heading {
-			color: $gray-900;
-			font-size: 21px;
-			font-weight: bold;
-			line-height: 32px;
-		}
-	}
-
-	// Content
-
-	.components-modal__content {
-		padding: 0 32px;
-		margin: 0;
-
-		&::before {
-			display: none;
-		}
-	}
-
-	// Typography
-
-	h2,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
-		padding: 0;
-	}
-
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
-
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
-	}
-
-	// Thematic Break
-
-	hr {
-		background: $gray-300;
-		border: 0;
-		height: 1px;
-		margin: 48px -48px;
-
-		@media screen and ( min-width: 744px ) {
-			margin: 64px -64px;
-		}
+	@media screen and ( min-width: 960px ) {
+		max-height: calc( 100% - 128px );
 	}
 
 	// Links
-
 	a {
-		color: $primary-500;
+		color: var( --wp-admin-theme-color );
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: $primary-600;
-			text-decoration: none;
+			color: var( --wp-admin-theme-color-darker-10 );
 		}
 
 		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			outline: 3px solid transparent;
 		}
 	}
-}
-
-// Overlay
 
-.newspack-modal__overlay {
-	background: rgba( black, 0.7 );
-}
-
-// Small Screens
-
-@media ( max-width: 599px ) {
-	.newspack-modal {
-		top: auto;
-
-		.components-modal__content {
-			height: auto;
+	.components-modal__content {
+		> *:last-child {
+			margin-bottom: 8px;
 		}
 	}
 }

package/src/newspack-icon/index.js

@@ -23,8 +23,13 @@ class NewspackIcon extends Component {
 	 * Render
 	 */
 	render() {
-		const { className, size } = this.props;
-		const classes = classnames( 'newspack-icon', className );
+		const { className, simple, size, white } = this.props;
+		const classes = classnames(
+			'newspack-icon',
+			simple && 'newspack-icon--simple',
+			white && 'newspack-icon--white',
+			className
+		);
 		return (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"

package/src/newspack-icon/style.scss

@@ -8,4 +8,19 @@
 	background: $primary-500;
 	fill: white;
 	padding: 12px;
+
+	&--white {
+		background: white;
+		fill: $primary-500;
+	}
+
+	&--simple {
+		background: none;
+		fill: $primary-500;
+		padding: 0;
+	}
+
+	&#{&}--simple#{&}--white {
+		fill: white;
+	}
 }

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

@@ -178,7 +178,7 @@ class PluginInstaller extends Component {
 		} );
 
 		return (
-			<div>
+			<>
 				{ ( ! pluginInfo || ! Object.keys( pluginInfo ).length ) && (
 					<div className="newspack-plugin-installer_is-waiting">
 						<Waiting isLeft />
@@ -248,7 +248,7 @@ class PluginInstaller extends Component {
 						</Button>
 					</div>
 				) }
-			</div>
+			</>
 		);
 	}
 }

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={ true }
+			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

@@ -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,
@@ -82,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 } );
@@ -154,14 +167,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 +182,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"
 				/>
 			);
 		} );
@@ -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.
 	 */