newspack-components 2.2.1 → 3.0.0-alpha.2

package/src/with-wizard/style.scss

@@ -2,14 +2,14 @@
  * With Wizard
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 // Reset Padding of the Admin Page
 
-.toplevel_page_newspack:not( .menu-top ),
-body[class*='newspack_page_newspack-'],
-body[class*='admin_page_newspack-'] {
+.toplevel_page_newspack:not(.menu-top),
+body[class*="newspack_page_newspack-"],
+body[class*="admin_page_newspack-"] {
 	background: white;
 
 	#wpcontent {
@@ -33,7 +33,7 @@ body[class*='admin_page_newspack-'] {
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
-		transform: rotate( 180deg );
+		transform: rotate(180deg);
 	}
 	&.newspack--success {
 		fill: wp-colors.$alert-green;
@@ -87,38 +87,51 @@ svg {
 	&::before,
 	&::after {
 		animation: loading 2s ease-in-out infinite;
-		content: '';
+		content: "";
 		display: block;
 	}
 
 	&::before {
 		background: colors.$primary-500;
-		box-shadow: 24px 0 0 white, 69px 0 0 -15px wp-colors.$gray-900,
-			99px 0 0 -15px wp-colors.$gray-900, 129px 0 0 -15px wp-colors.$gray-900,
-			159px 0 0 -15px wp-colors.$gray-900, 189px 0 0 -15px wp-colors.$gray-900;
+		box-shadow:
+			24px 0 0 white,
+			69px 0 0 -15px wp-colors.$gray-900,
+			99px 0 0 -15px wp-colors.$gray-900,
+			129px 0 0 -15px wp-colors.$gray-900,
+			159px 0 0 -15px wp-colors.$gray-900,
+			189px 0 0 -15px wp-colors.$gray-900;
 		height: 60px;
 		width: 60px;
 	}
 
 	&::after {
 		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 68px auto 0;
 		max-width: 1040px;
-		width: calc( 100% - ( 32px * 2 ) );
+		width: calc(100% - ( 32px * 2 ));
 
 		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
+			width: calc(100% - ( 64px * 2 ));
 		}
 
 		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 512px 96px 0 0 white,
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				512px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
+			width: calc(100% - ( 64px * 2 ));
 		}
 	}
 
@@ -151,7 +164,7 @@ svg {
 
 		&::before,
 		&::after {
-			content: '';
+			content: "";
 			cursor: wait;
 			display: block;
 			left: 0;
@@ -187,7 +200,7 @@ svg {
 		}
 
 		&::after {
-			background: rgba( white, 0.7 );
+			background: rgba(white, 0.7);
 			bottom: 0;
 			right: 0;
 			z-index: 9998;
@@ -206,10 +219,13 @@ svg {
 
 	&::after {
 		animation: loading 2s ease-in-out infinite;
-		content: '';
+		content: "";
 		display: block;
 		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 0 auto;
@@ -217,12 +233,18 @@ svg {
 		width: 100%;
 
 		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
 		}
 
 		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 520px 96px 0 0 white,
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				520px 96px 0 0 white,
 				0 96px 0 0 wp-colors.$gray-700;
 		}
 	}

package/src/with-wizard-screen/index.js

@@ -66,7 +66,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 							<Button
 								isLink
 								href={ newspack_urls.dashboard }
-								label={ __( 'Return to Dashboard', 'newspack' ) }
+								label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 								showTooltip={ true }
 								icon={ category }
 								iconSize={ 36 }

package/src/with-wizard-screen/style.scss

@@ -2,8 +2,8 @@
  * With Wizard Screen
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 .newspack-wizard {
 	// Color
@@ -29,16 +29,16 @@
 
 	// Links
 	a {
-		color: var( --wp-admin-theme-color );
+		color: var(--wp-admin-theme-color);
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: var( --wp-admin-theme-color-darker-10 );
+			color: var(--wp-admin-theme-color-darker-10);
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			outline: 3px solid transparent;
 		}
 	}
@@ -82,7 +82,7 @@
 				margin-bottom: -1px !important;
 			}
 
-			&:not( .newspack-icon ) {
+			&:not(.newspack-icon) {
 				background: colors.$primary-500;
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
@@ -110,7 +110,7 @@
 				&::before {
 					border: 2px solid white;
 					border-radius: 2px;
-					content: '';
+					content: "";
 					display: block;
 					inset: 6px 6px 5px;
 					position: absolute;

package/src/wizard/components/WizardError.js

@@ -41,7 +41,7 @@ const WizardError = () => {
 				{ fallbackURL && (
 					<Card buttonsCard noBorder className="justify-end">
 						<Button isPrimary href={ fallbackURL }>
-							{ __( 'Return to Dashboard', 'newspack' ) }
+							{ __( 'Return to Dashboard', 'newspack-plugin' ) }
 						</Button>
 					</Card>
 				) }

package/src/wizard/index.js

@@ -57,8 +57,8 @@ const Wizard = ( {
 	if ( ! pluginRequirementsSatisfied ) {
 		headerText =
 			requiredPlugins.length > 1
-				? __( 'Required plugins', 'newspack' )
-				: __( 'Required plugin', 'newspack' );
+				? __( 'Required plugins', 'newspack-plugin' )
+				: __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
@@ -90,7 +90,7 @@ const Wizard = ( {
 								<Button
 									isLink
 									href={ newspack_urls.dashboard }
-									label={ __( 'Return to Dashboard', 'newspack' ) }
+									label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 									showTooltip={ true }
 									icon={ category }
 									iconSize={ 36 }

package/src/wizard/store/index.js

@@ -59,17 +59,24 @@ const actions = {
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
-	*saveWizardSettings( { slug, section = '', payloadPath = false, updatePayload = null } ) {
+	*saveWizardSettings( {
+		slug,
+		section = '',
+		payloadPath = false,
+		auxData = {},
+		updatePayload = null,
+	} ) {
 		// Optionally data can be updated before saving - an immediate update case
 		// (without an explicit "save" action).
 		if ( updatePayload ) {
 			yield actions.updateWizardSettings( { slug, ...updatePayload } );
 		}
 		const wizardState = select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( slug );
+		const data = payloadPath ? get( wizardState, payloadPath ) : wizardState;
 		const updatedData = yield actions.fetchFromAPI( {
 			path: `/newspack/v1/wizard/${ slug }/${ section }`,
 			method: 'POST',
-			data: payloadPath ? get( wizardState, payloadPath ) : wizardState,
+			data: { ...data, ...auxData },
 			isQuietFetch: true,
 		} );
 		if ( ! isEmpty( updatedData ) && ! updatedData.error ) {