newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/position-control/index.js

@@ -29,69 +29,68 @@ export default function PositionControl( {
 	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>

package/src/position-control/style.scss

@@ -1,4 +1,4 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-position-placement-control {
 	margin-bottom: 1em;
@@ -10,8 +10,8 @@
 
 	.components-button-group {
 		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		grid-template-rows: repeat( 3, 1fr );
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(3, 1fr);
 
 		div {
 			padding: 1px;
@@ -24,19 +24,19 @@
 			width: 100%;
 		}
 
-		div:nth-of-type( 1 ) .components-button {
+		div:nth-of-type(1) .components-button {
 			border-radius: 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 3 ) .components-button {
+		div:nth-of-type(3) .components-button {
 			border-radius: 0 4px 0 0 !important;
 		}
 
-		div:nth-last-of-type( 1 ) .components-button {
+		div:nth-last-of-type(1) .components-button {
 			border-radius: 0 0 4px !important;
 		}
 
-		div:nth-last-of-type( 3 ) .components-button {
+		div:nth-last-of-type(3) .components-button {
 			border-radius: 0 0 0 4px !important;
 		}
 	}
@@ -48,7 +48,7 @@
 			border-radius: 4px 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 2 ) .components-button {
+		div:nth-of-type(2) .components-button {
 			border-radius: 0 !important;
 		}
 

package/src/progress-bar/style.scss

@@ -2,8 +2,8 @@
  * Progress Bar
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-progress-bar {
 	margin: 32px 0;

package/src/radio-control/style.scss

@@ -2,8 +2,8 @@
  * Radio Control
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
 	color: wp-colors.$gray-700;
@@ -41,7 +41,7 @@
 
 	// Radio
 
-	input[type='radio'] {
+	input[type="radio"] {
 		height: 24px;
 		margin-right: 8px;
 		width: 24px;

package/src/section-header/style.scss

@@ -2,7 +2,7 @@
  * Section Header
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-section-header {
 	margin: 64px 0 32px;

package/src/select-control/style.scss

@@ -2,7 +2,7 @@
  * Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .components-select-control {
 	&__input {
@@ -22,7 +22,7 @@
 				padding: 8px;
 
 				&:checked {
-					background: var( --wp-admin-theme-color );
+					background: var(--wp-admin-theme-color);
 					color: white;
 				}
 			}
@@ -64,8 +64,8 @@
 			}
 
 			&:focus {
-				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
-				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
+				border-color: var(--wp-admin-theme-color-darker-10) !important;
+				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10) !important;
 				color: inherit;
 			}
 		}

package/src/settings/style.scss

@@ -44,7 +44,7 @@
 					align-items: center;
 					justify-content: space-between;
 					flex-wrap: wrap;
-					> *:not( [class*='help'], [class*='label'] ) {
+					> *:not([class*="help"], [class*="label"]) {
 						margin: 0;
 					}
 				}

package/src/steps-list/style.scss

@@ -1,5 +1,5 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list {
 	margin-left: auto;

package/src/steps-list-item/style.scss

@@ -1,5 +1,5 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list-item {
 	align-items: center;
@@ -9,9 +9,9 @@
 	position: relative;
 
 	&::before {
-		border: 1px solid #F0F0F0;
+		border: 1px solid #f0f0f0;
 		bottom: -16px;
-		content: '';
+		content: "";
 		display: block;
 		left: 14px;
 		position: absolute;
@@ -44,4 +44,4 @@
 		width: 28px;
 		z-index: 2;
 	}
-}
+}

package/src/style-card/style.scss

@@ -2,8 +2,8 @@
  * Style Card
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-style-card {
 	margin: 32px 0;
@@ -61,7 +61,7 @@
 	// Actions
 	&__actions {
 		align-items: center;
-		background: rgba( white, 0.9 );
+		background: rgba(white, 0.9);
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -83,7 +83,7 @@
 		}
 
 		&__badge {
-			color: var( --wp-admin-theme-color );
+			color: var(--wp-admin-theme-color);
 			font-weight: bold;
 		}
 

package/src/style.scss

@@ -1,4 +1,4 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 // Buttons Card
 

package/src/tabbed-navigation/index.js

@@ -27,7 +27,7 @@ const TabbedNavigation = ( { items, className, disableUpcoming, children = null
 								if ( item.activeTabPaths ) {
 									return item.activeTabPaths.includes( pathname );
 								}
-								return pathname === item.path;
+								return match;
 							} }
 							exact
 							activeClassName={ 'selected' }

package/src/tabbed-navigation/style.scss

@@ -2,7 +2,7 @@
  * Tabbed Navigation
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-tabbed-navigation {
 	background: white;
@@ -50,7 +50,7 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: var( --wp-admin-theme-color );
+				color: var(--wp-admin-theme-color);
 				outline: none;
 			}
 
@@ -64,10 +64,10 @@
 			}
 
 			&.selected {
-				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var( --wp-admin-theme-color );
+				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);
 
 				@media screen and ( min-width: 600px ) {
-					border-color: var( --wp-admin-theme-color );
+					border-color: var(--wp-admin-theme-color);
 					box-shadow: none;
 				}
 			}

package/src/web-preview/style.scss

@@ -2,8 +2,8 @@
  * Web Preview
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-web-preview {
 	// Color
@@ -14,7 +14,7 @@
 	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
 
-	background: rgba( black, 0.7 );
+	background: rgba(black, 0.7);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -54,7 +54,7 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc( 100% - 49px );
+		height: calc(100% - 49px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
@@ -81,7 +81,7 @@
 		margin: -12px 0 0;
 		position: absolute;
 		top: 50%;
-		transform: translateX( -50% );
+		transform: translateX(-50%);
 	}
 
 	&__toolbar {

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/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/dist/cjs/autocomplete-tokenfield/style.scss

@@ -1,49 +0,0 @@
-/**
- * Autocomplete Token Field
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-autocomplete-tokenfield {
-	.components-spinner {
-		margin: 0;
-		position: absolute;
-		right: 8px;
-		top: 8px;
-	}
-
-	&__input-container {
-		position: relative;
-
-		&.has-label .components-spinner {
-			top: 32px;
-		}
-	}
-
-	/* Workaround for hard-coded help text in FormTokenField. */
-	.components-form-token-field {
-		> .components-form-token-field__help {
-			display: none;
-		}
-
-		> .components-form-token-field__token-text {
-			align-items: center;
-			display: flex;
-		}
-	}
-
-	.newspack-autocomplete-tokenfield__help {
-		color: wp-colors.$gray-700;
-		font-size: inherit;
-		margin-top: 0;
-	}
-
-	.components-form-token-field__suggestions-list {
-		margin-left: 0;
-		padding-left: 0;
-	}
-
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
-	}
-}