newspack-components 3.0.0 → 4.0.0

package/src/plugin-installer/index.js

@@ -67,8 +67,7 @@ class PluginInstaller extends Component {
 					}
 					result[ slug ] = {
 						...response[ slug ],
-						installationStatus:
-							response[ slug ].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE,
+						installationStatus: response[ slug ].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE,
 					};
 					return result;
 				}, {} );
@@ -84,8 +83,7 @@ class PluginInstaller extends Component {
 			.filter( slug => 'active' !== pluginInfo[ slug ].Status )
 			.map( slug => () => this.installPlugin( slug ) );
 		promises.reduce(
-			( promise, action ) =>
-				promise.then( result => action().then( Array.prototype.concat.bind( result ) ) ),
+			( promise, action ) => promise.then( result => action().then( Array.prototype.concat.bind( result ) ) ),
 			Promise.resolve( [] )
 		);
 	};
@@ -155,7 +153,7 @@ class PluginInstaller extends Component {
 	render() {
 		const { autoInstall, isSmall, withoutFooterButton } = this.props;
 		const { pluginInfo } = this.state;
-		const { is_atomic: isAtomic } = window;
+		const { is_managed: isManaged } = window.newspack_aux_data || {};
 		const slugs = Object.keys( pluginInfo );
 
 		// Store all plugin status info for installer button text value based on current status.
@@ -166,12 +164,9 @@ class PluginInstaller extends Component {
 		} );
 
 		// Make sure plugin status falls in either one of these, to handle button text.
-		const pluginInstalled = currentStatus =>
-			currentStatus === 'active' || currentStatus === 'inactive';
+		const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
 
-		const buttonText = currentPluginStatuses.every( pluginInstalled )
-			? __( 'Activate', 'newspack-plugin' )
-			: __( 'Install', 'newspack-plugin' );
+		const buttonText = currentPluginStatuses.every( pluginInstalled ) ? __( 'Activate', 'newspack-plugin' ) : __( 'Install', 'newspack-plugin' );
 
 		const needsInstall = slugs.some( slug => {
 			const plugin = pluginInfo[ slug ];
@@ -190,8 +185,7 @@ class PluginInstaller extends Component {
 					slugs.length > 0 &&
 					slugs.map( slug => {
 						const plugin = pluginInfo[ slug ];
-						const { Name, Description, Download, 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 );
@@ -201,7 +195,7 @@ class PluginInstaller extends Component {
 						} else if ( ! installable ) {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
-									{ isAtomic
+									{ isManaged
 										? __( 'Contact Newspack support to install', 'newspack-plugin' )
 										: __( 'Plugin must be installed manually', 'newspack-plugin' ) }
 									<span className="newspack-checkbox-icon" />
@@ -232,10 +226,7 @@ class PluginInstaller extends Component {
 							);
 						}
 
-						const classes = classnames(
-							'newspack-action-card__plugin-installer',
-							this.classForInstallationStatus( installationStatus )
-						);
+						const classes = classnames( 'newspack-action-card__plugin-installer', this.classForInstallationStatus( installationStatus ) );
 						const onClick = isButton ? () => this.installPlugin( slug ) : null;
 						return (
 							<ActionCard

package/src/plugin-settings/SettingsSection.js

@@ -53,8 +53,7 @@ const getControlType = setting => {
 
 const SettingsSection = props => {
 	const [ saveDisabled, setSaveDisabled ] = useState( true );
-	const { error, sectionKey, active, title, description, fields, disabled, onChange, onUpdate } =
-		props;
+	const { error, sectionKey, active, title, description, fields, disabled, onChange, onUpdate } = props;
 	const getControlProps = setting => ( {
 		disabled,
 		name: `${ setting.section }_${ setting.key }`,
@@ -75,11 +74,7 @@ const SettingsSection = props => {
 		},
 	} );
 	const createFilter = ( name, defaultComponent = null ) => {
-		return applyFilters(
-			`newspack.settingSection.${ sectionKey }.${ name }`,
-			defaultComponent,
-			props
-		);
+		return applyFilters( `newspack.settingSection.${ sectionKey }.${ name }`, defaultComponent, props );
 	};
 	let columns = 2;
 	if ( fields.length % 3 === 0 ) {
@@ -89,6 +84,7 @@ const SettingsSection = props => {
 	}
 	return (
 		<ActionCard
+			id={ props.id ?? null }
 			isMedium
 			disabled={ disabled }
 			title={ title }

package/src/plugin-settings/index.js

@@ -30,9 +30,7 @@ class PluginSettings extends Component {
 		const { afterFetch, pluginSlug, isWizard } = this.props;
 		this.setState( { inFlight: true } );
 		apiFetch( {
-			path: isWizard
-				? `/newspack/v1/wizard/${ pluginSlug }/settings`
-				: `/${ pluginSlug }/v1/settings`,
+			path: isWizard ? `/newspack/v1/wizard/${ pluginSlug }/settings` : `/${ pluginSlug }/v1/settings`,
 		} )
 			.then( settings => {
 				this.setState( { settings, error: null } );
@@ -80,9 +78,7 @@ class PluginSettings extends Component {
 		const { afterUpdate, pluginSlug, isWizard } = this.props;
 		this.setState( { inFlight: true } );
 		apiFetch( {
-			path: isWizard
-				? `/newspack/v1/wizard/${ pluginSlug }/settings`
-				: `/${ pluginSlug }/v1/settings`,
+			path: isWizard ? `/newspack/v1/wizard/${ pluginSlug }/settings` : `/${ pluginSlug }/v1/settings`,
 			method: 'POST',
 			data: {
 				section: sectionKey,
@@ -116,9 +112,7 @@ class PluginSettings extends Component {
 	 * @return {Object} The section setting.
 	 */
 	getSectionInfo = sectionKey => {
-		return this.state.settings[ sectionKey ]?.find(
-			setting => ! setting.key || setting.key === 'active'
-		);
+		return this.state.settings[ sectionKey ]?.find( setting => ! setting.key || setting.key === 'active' );
 	};
 
 	/**
@@ -163,20 +157,18 @@ class PluginSettings extends Component {
 	 * @return {?Array} List of section fields.
 	 */
 	getSectionFields = sectionKey => {
-		return this.state.settings[ sectionKey ]?.filter(
-			setting => setting.key && setting.key !== 'active'
-		);
+		return this.state.settings[ sectionKey ]?.filter( setting => setting.key && setting.key !== 'active' );
 	};
 
 	/**
 	 * Render.
 	 */
 	render() {
-		const { title, description, hasGreyHeader, children } = this.props;
+		const { title, description, hasGreyHeader, children, titleLevel = 1 } = this.props;
 		const { settings, inFlight, error } = this.state;
 		return (
 			<Fragment>
-				{ title && <SectionHeader title={ title } description={ description } /> }
+				{ title && <SectionHeader title={ title } heading={ titleLevel } description={ description } /> }
 				{ error && <Notice isError noticeText={ error.message } /> }
 				<div
 					className={ classnames( 'newspack-plugin-settings', {
@@ -187,6 +179,7 @@ class PluginSettings extends Component {
 						<SettingsSection
 							key={ sectionKey }
 							disabled={ inFlight }
+							id={ `plugin-settings-${ sectionKey }` }
 							sectionKey={ sectionKey }
 							title={ this.getSectionTitle( sectionKey ) }
 							description={ this.getSectionDescription( sectionKey ) }

package/src/plugin-toggle/README.md

@@ -26,11 +26,11 @@ ActionCards for WooCommerce and Instant Articles for WP with custom text and URL
 	plugins={ {
 		woocommerce: {
 			actionText: __( 'Use WooCommerce' ),
-			href: '/wp-admin/admin.php?page=newspack',
+			href: '/wp-admin/admin.php?page=newspack-dashboard',
 		},
 		'fb-instant-articles': {
 			actionText: __( 'Configure Instant Articles' ),
-			href: '/wp-admin/admin.php?page=newspack',
+			href: '/wp-admin/admin.php?page=newspack-dashboard',
 		},
 	} }
 />
@@ -46,7 +46,7 @@ ActionCards for WooCommerce and Instant Articles for WP. Page will refresh after
 		},
 		'fb-instant-articles': {
 			actionText: __( 'Configure Instant Articles' ),
-			href: '/wp-admin/admin.php?page=newspack',
+			href: '/wp-admin/admin.php?page=newspack-dashboard',
 		},
 	} }
 />

package/src/plugin-toggle/index.js

@@ -28,9 +28,7 @@ class PluginToggle extends Component {
 	 */
 	retrievePluginInfo = () => {
 		return new Promise( () => {
-			apiFetch( { path: '/newspack/v1/plugins/' } ).then( pluginInfo =>
-				this.setState( { pluginInfo } )
-			);
+			apiFetch( { path: '/newspack/v1/plugins/' } ).then( pluginInfo => this.setState( { pluginInfo } ) );
 		} );
 	};
 
@@ -67,9 +65,7 @@ class PluginToggle extends Component {
 								...pluginInfo,
 								[ plugin ]: {
 									...pluginInfo[ plugin ],
-									error:
-										e.message ||
-										__( 'There was an error managing this plugin.', 'newspack-plugin' ),
+									error: e.message || __( 'There was an error managing this plugin.', 'newspack-plugin' ),
 								},
 							},
 						} );
@@ -97,6 +93,7 @@ class PluginToggle extends Component {
 					description={ description }
 					actionText={ this.actionTextForPlugin( plugin ) }
 					handoff={ handoff }
+					onClick={ plugin.onClick ?? null }
 					href={ href }
 					toggle
 					toggleChecked={ this.isPluginInstalledAndActive( plugin ) }
@@ -117,13 +114,13 @@ class PluginToggle extends Component {
 			.map( pluginSlug =>
 				pluginsFromAPI[ pluginSlug ]
 					? Object.keys( pluginsFromAPI[ pluginSlug ] ).reduce(
-						( accumulator, key ) => ( {
-							...accumulator,
-							[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
-									pluginsFromAPI[ pluginSlug ][ key ],
-						} ),
-						{}
-					) : {}
+							( accumulator, key ) => ( {
+								...accumulator,
+								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]: pluginsFromAPI[ pluginSlug ][ key ],
+							} ),
+							{}
+					  )
+					: {}
 			)
 			.map( plugin => Object.assign( plugin, pluginsFromProps[ plugin.slug ] ) );
 

package/src/popover/index.js

@@ -23,11 +23,7 @@ class Popover extends Component {
 	 */
 	render() {
 		const { className, padding, ...otherProps } = this.props;
-		const classes = classnames(
-			'newspack-popover',
-			padding && 'newspack-popover__padding-' + padding,
-			className
-		);
+		const classes = classnames( 'newspack-popover', padding && 'newspack-popover__padding-' + padding, className );
 		return <BaseComponent className={ classes } { ...otherProps } />;
 	}
 }

package/src/popover/style.scss

@@ -2,7 +2,6 @@
  * Popover
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
@@ -16,7 +15,7 @@
 			padding: 6px 8px;
 
 			&:hover {
-				color: colors.$primary-500;
+				color: var(--wp-admin-theme-color);
 
 				.components-menu-items__item-icon {
 					fill: currentcolor;
@@ -24,7 +23,7 @@
 			}
 
 			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 2px colors.$primary-500;
+				box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 				position: relative;
 				z-index: 1;
 			}
@@ -42,7 +41,7 @@
 					&:focus,
 					&:focus:enabled &:hover,
 					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
-						color: colors.$primary-500;
+						color: var(--wp-admin-theme-color);
 					}
 				}
 
@@ -89,8 +88,8 @@
 					min-height: 36px;
 
 					&:focus ~ div.components-input-control__backdrop {
-						border-color: colors.$primary-500;
-						box-shadow: inset 0 0 0 1px colors.$primary-500;
+						border-color: var(--wp-admin-theme-color);
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 					}
 				}
 

package/src/position-control/index.js

@@ -14,93 +14,83 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-export default function PositionControl( {
-	allowedPositions,
-	value,
-	label,
-	help,
-	onChange,
-	size,
-	...props
-} ) {
+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-plugin' ),
-				},
-				{
-					value: 'center',
-					/* translators: Overlay Position */
-					label: __( 'Center', 'newspack-plugin' ),
-				},
-				{
-					value: 'bottom',
-					/* translators: Overlay Position */
-					label: __( 'Bottom', 'newspack-plugin' ),
-				},
-			] : [
-				{
-					value: 'top_left',
-					/* translators: Overlay Position */
-					label: __( 'Top Left', 'newspack-plugin' ),
-				},
-				{
-					value: 'top',
-					/* translators: Overlay Position */
-					label: __( 'Top Center', 'newspack-plugin' ),
-				},
-				{
-					value: 'top_right',
-					/* translators: Overlay Position */
-					label: __( 'Top Right', 'newspack-plugin' ),
-				},
-				{
-					value: 'center_left',
-					/* translators: Overlay Position */
-					label: __( 'Center Left', 'newspack-plugin' ),
-				},
-				{
-					value: 'center',
-					/* translators: Overlay Position */
-					label: __( 'Center', 'newspack-plugin' ),
-				},
-				{
-					value: 'center_right',
-					/* translators: Overlay Position */
-					label: __( 'Center Right', 'newspack-plugin' ),
-				},
-				{
-					value: 'bottom_left',
-					/* translators: Overlay Position */
-					label: __( 'Bottom Left', 'newspack-plugin' ),
-				},
-				{
-					value: 'bottom',
-					/* translators: Overlay Position */
-					label: __( 'Bottom Center', 'newspack-plugin' ),
-				},
-				{
-					value: 'bottom_right',
-					/* translators: Overlay Position */
-					label: __( 'Bottom Right', 'newspack-plugin' ),
-				},
-			];
+					{
+						value: 'top',
+						/* translators: Overlay Position */
+						label: __( 'Top', 'newspack-plugin' ),
+					},
+					{
+						value: 'center',
+						/* translators: Overlay Position */
+						label: __( 'Center', 'newspack-plugin' ),
+					},
+					{
+						value: 'bottom',
+						/* translators: Overlay Position */
+						label: __( 'Bottom', 'newspack-plugin' ),
+					},
+			  ]
+			: [
+					{
+						value: 'top_left',
+						/* translators: Overlay Position */
+						label: __( 'Top Left', 'newspack-plugin' ),
+					},
+					{
+						value: 'top',
+						/* translators: Overlay Position */
+						label: __( 'Top Center', 'newspack-plugin' ),
+					},
+					{
+						value: 'top_right',
+						/* translators: Overlay Position */
+						label: __( 'Top Right', 'newspack-plugin' ),
+					},
+					{
+						value: 'center_left',
+						/* translators: Overlay Position */
+						label: __( 'Center Left', 'newspack-plugin' ),
+					},
+					{
+						value: 'center',
+						/* translators: Overlay Position */
+						label: __( 'Center', 'newspack-plugin' ),
+					},
+					{
+						value: 'center_right',
+						/* translators: Overlay Position */
+						label: __( 'Center Right', 'newspack-plugin' ),
+					},
+					{
+						value: 'bottom_left',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Left', 'newspack-plugin' ),
+					},
+					{
+						value: 'bottom',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Center', 'newspack-plugin' ),
+					},
+					{
+						value: 'bottom_right',
+						/* translators: Overlay Position */
+						label: __( 'Bottom Right', 'newspack-plugin' ),
+					},
+			  ];
 	return (
 		<div className={ classnames( 'newspack-position-placement-control', 'size-' + size ) }>
 			<p className="components-base-control__label">{ label }</p>
 			<ButtonGroup aria-label={ __( 'Select Position', 'newspack-plugin' ) } { ...props }>
 				{ options.map( ( option, index ) => {
 					return (
-						<div
-							key={ `newspack-position-placement-item-${ index }` }
-							className={ option.value === value ? 'is-selected' : null }
-						>
+						<div key={ `newspack-position-placement-item-${ index }` } className={ option.value === value ? 'is-selected' : null }>
 							<Button
 								isSmall
 								title={ option.label }

package/src/progress-bar/index.js

@@ -34,10 +34,7 @@ class ProgressBar extends Component {
 	render() {
 		const { label, completed, total, displayFraction } = this.props;
 		const cleanTotal = Math.max( 0, parseInt( total ) || 0 );
-		const cleanCompleted = Math.max(
-			0,
-			Math.min( parseInt( completed ) || 0, parseInt( cleanTotal ) )
-		);
+		const cleanCompleted = Math.max( 0, Math.min( parseInt( completed ) || 0, parseInt( cleanTotal ) ) );
 
 		const barStyle = {
 			width: this.getCompletionPercentage( cleanCompleted, cleanTotal ) + '%',
@@ -59,11 +56,7 @@ class ProgressBar extends Component {
 				) }
 
 				<div className="newspack-progress-bar__container">
-					<div
-						className="newspack-progress-bar__bar"
-						style={ barStyle }
-						data-testid="progress-bar-indicator"
-					/>
+					<div className="newspack-progress-bar__bar" style={ barStyle } data-testid="progress-bar-indicator" />
 				</div>
 			</div>
 		);

package/src/progress-bar/index.test.js

@@ -23,9 +23,7 @@ describe( 'ProgressBar', () => {
 
 	it( 'should render with both label and fraction', () => {
 		const label = 'test label';
-		const { getByText } = render(
-			<ProgressBar completed="1" total="2" label={ label } displayFraction />
-		);
+		const { getByText } = render( <ProgressBar completed="1" total="2" label={ label } displayFraction /> );
 		expect( getByText( label ) ).toBeInTheDocument();
 		expect( getByText( '1/2' ) ).toBeInTheDocument();
 	} );
@@ -47,26 +45,19 @@ describe( 'ProgressBar', () => {
 		].forEach( ( { props, expectedWidth } ) => {
 			it( `with expected  progress of ${ expectedWidth }`, () => {
 				const { getByTestId } = render( <ProgressBar { ...props } key={ expectedWidth } /> );
-				expect( getByTestId( 'progress-bar-indicator' ) ).toHaveAttribute(
-					'style',
-					`width: ${ expectedWidth }%;`
-				);
+				expect( getByTestId( 'progress-bar-indicator' ) ).toHaveAttribute( 'style', `width: ${ expectedWidth }%;` );
 			} );
 		} );
 	} );
 
 	it( 'should handle non-numeric values in ProgressBar element', () => {
-		const { getByText, getByTestId } = render(
-			<ProgressBar completed="cats" total="dogs" displayFraction />
-		);
+		const { getByText, getByTestId } = render( <ProgressBar completed="cats" total="dogs" displayFraction /> );
 		expect( getByText( '0/0' ) ).toBeInTheDocument();
 		expect( getByTestId( 'progress-bar-indicator' ) ).toHaveAttribute( 'style', 'width: 100%;' );
 	} );
 
 	it( 'should handle non-logical values in ProgressBar element', () => {
-		const { getByText, getByTestId } = render(
-			<ProgressBar completed="3" total="-1" displayFraction />
-		);
+		const { getByText, getByTestId } = render( <ProgressBar completed="3" total="-1" displayFraction /> );
 		expect( getByText( '0/0' ) ).toBeInTheDocument();
 		expect( getByTestId( 'progress-bar-indicator' ) ).toHaveAttribute( 'style', 'width: 100%;' );
 	} );

package/src/progress-bar/style.scss

@@ -2,7 +2,6 @@
  * Progress Bar
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-progress-bar {
@@ -35,7 +34,7 @@
 	}
 
 	&__bar {
-		background-color: colors.$primary-500;
+		background-color: var(--wp-admin-theme-color);
 		height: 8px;
 		transition: width 125ms ease-in-out;
 	}

package/src/radio-control/style.scss

@@ -2,7 +2,6 @@
  * Radio Control
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
@@ -24,7 +23,6 @@
 	}
 
 	// Options
-
 	.components-radio-control__option {
 		align-items: center;
 		display: flex;
@@ -40,20 +38,22 @@
 	}
 
 	// Radio
-
 	input[type="radio"] {
 		height: 24px;
-		margin-right: 8px;
 		width: 24px;
+		max-height: 24px;
+		max-width: 24px;
 
 		@media screen and ( min-width: 782px ) {
 			height: 20px;
 			width: 20px;
+			max-height: 20px;
+			max-width: 20px;
 		}
 
 		&:checked {
-			background-color: colors.$primary-500;
-			border-color: colors.$primary-500;
+			background-color: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
 
 			&::before {
 				border: none;
@@ -61,20 +61,18 @@
 		}
 
 		&:focus {
-			border-color: colors.$primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--wp-admin-theme-color);
 		}
 	}
 
 	// Multiple Radio Controls
-
 	& + & {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}
 
 	// Multiple Controls
-
 	+ .newspack-select-control,
 	+ .newspack-text-control {
 		margin-bottom: 32px;
@@ -82,7 +80,6 @@
 	}
 
 	// Reset
-
 	.components-base-control__field,
 	.components-base-control__label,
 	.components-base-control__help {

package/src/section-header/index.js

@@ -18,6 +18,25 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
+/**
+ * Represents a section header component.
+ *
+ * @typedef {Object} SectionHeaderProps
+ * @property {boolean}           [centered=false] - Indicates if the header is centered.
+ * @property {?string}           [className=null] - Additional CSS class name.
+ * @property {string|Function|*} [description]    - Description of the section.
+ * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
+ * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
+ * @property {string}            title            - The title of the section.
+ * @property {?string}           [id=null]        - Optional ID for the header element.
+ */
+
+/**
+ * Creates a section header.
+ *
+ * @param {SectionHeaderProps} props - The properties for the section header.
+ */
 const SectionHeader = ( {
 	centered = false,
 	className = null,
@@ -58,6 +77,7 @@ const SectionHeader = ( {
 				{ typeof title === 'function' && <HeadingTag>{ title() }</HeadingTag> }
 				{ description && typeof description === 'string' && <p>{ description }</p> }
 				{ typeof description === 'function' && <p>{ description() }</p> }
+				{ description && typeof description !== 'string' && typeof description !== 'function' && <p>{ description }</p> }
 			</Grid>
 		</div>
 	);