newspack-components 2.2.1 → 3.0.0-alpha.2

package/src/modal/style.scss

@@ -2,7 +2,7 @@
  * Modal
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-modal {
 	// Color
@@ -29,21 +29,21 @@
 	}
 
 	@media screen and ( min-width: 960px ) {
-		max-height: calc( 100% - 128px );
+		max-height: calc(100% - 128px);
 	}
 
 	// 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;
 		}
 	}

package/src/newspack-icon/style.scss

@@ -2,7 +2,7 @@
  * Newspack Icon
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-icon {
 	background: colors.$primary-500;

package/src/newspack-logo/style.scss

@@ -2,7 +2,7 @@
  * Newspack Logo
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-logo {
 	&__svg {

package/src/notice/index.js

@@ -62,7 +62,7 @@ class Notice extends Component {
 				{ <Icon icon={ noticeIcon } /> }
 				<div className="newspack-notice__content">
 					{ rawHTML ? <RawHTML>{ noticeText }</RawHTML> : noticeText }
-					{ debugMode && __( 'Debug Mode', 'newspack' ) }
+					{ debugMode && __( 'Debug Mode', 'newspack-plugin' ) }
 					{ children || null }
 				</div>
 			</div>

package/src/notice/style.scss

@@ -2,9 +2,9 @@
  * Notice
  */
 
-@use 'sass:color';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 .newspack-notice {
 	align-items: center;
@@ -26,7 +26,7 @@
 		background: colors.$primary-700;
 		border-radius: 2px;
 		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		color: white;
 		font-weight: bold;
 		margin: 0 16px;
@@ -40,16 +40,16 @@
 	}
 
 	&__is-error {
-		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
+		background: color.adjust(wp-colors.$alert-red, $lightness: 51%);
 
 		> svg {
 			fill: wp-colors.$alert-red;
-			transform: rotate( 180deg );
+			transform: rotate(180deg);
 		}
 	}
 
 	&__is-handoff {
-		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
 		margin-top: 0;
 		position: sticky;
 		top: 46px;
@@ -69,7 +69,7 @@
 	}
 
 	&__is-success {
-		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
+		background: color.adjust(wp-colors.$alert-green, $lightness: 42%);
 
 		> svg {
 			fill: wp-colors.$alert-green;
@@ -77,11 +77,11 @@
 	}
 
 	&__is-warning {
-		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
 
 		> svg {
 			fill: wp-colors.$alert-yellow;
-			transform: rotate( 180deg );
+			transform: rotate(180deg);
 		}
 	}
 
@@ -100,7 +100,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentcolor;
 			}
 		}
 	}

package/src/patrons-logo/index.js

@@ -21,7 +21,10 @@ class PatronsLogo extends Component {
 				height="16"
 				viewBox="0 0 438 32"
 				className="patrons-logo"
-				aria-label={ __( 'A project of WordPress.com and the Google News Initiative', 'newspack' ) }
+				aria-label={ __(
+					'A project of WordPress.com and the Google News Initiative',
+					'newspack-plugin'
+				) }
 			>
 				<Path
 					fillRule="evenodd"

package/src/plugin-installer/index.js

@@ -170,8 +170,8 @@ class PluginInstaller extends Component {
 			currentStatus === 'active' || currentStatus === 'inactive';
 
 		const buttonText = currentPluginStatuses.every( pluginInstalled )
-			? __( 'Activate', 'newspack' )
-			: __( 'Install', 'newspack' );
+			? __( 'Activate', 'newspack-plugin' )
+			: __( 'Install', 'newspack-plugin' );
 
 		const needsInstall = slugs.some( slug => {
 			const plugin = pluginInfo[ slug ];
@@ -183,7 +183,7 @@ class PluginInstaller extends Component {
 				{ ( ! pluginInfo || ! Object.keys( pluginInfo ).length ) && (
 					<div className="newspack-plugin-installer_is-waiting">
 						<Waiting isLeft />
-						{ __( 'Retrieving plugin information…' ) }
+						{ __( 'Retrieving plugin information…', 'newspack-plugin' ) }
 					</div>
 				) }
 				{ pluginInfo &&
@@ -202,8 +202,8 @@ class PluginInstaller extends Component {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
 									{ isAtomic
-										? __( 'Contact Newspack support to install', 'newspack' )
-										: __( 'Plugin must be installed manually', 'newspack' ) }
+										? __( 'Contact Newspack support to install', 'newspack-plugin' )
+										: __( 'Plugin must be installed manually', 'newspack-plugin' ) }
 									<span className="newspack-checkbox-icon" />
 								</span>
 							);
@@ -217,14 +217,14 @@ class PluginInstaller extends Component {
 						} else if ( Status === 'inactive' ) {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
-									{ __( 'Activate', 'newspack' ) }
+									{ __( 'Activate', 'newspack-plugin' ) }
 									<span className="newspack-checkbox-icon" />
 								</span>
 							);
 						} else if ( Status === 'active' ) {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
-									{ __( 'Installed', 'newspack' ) }
+									{ __( 'Installed', 'newspack-plugin' ) }
 									<span className="newspack-checkbox-icon newspack-checkbox-icon--checked">
 										<Icon icon={ check } />
 									</span>

package/src/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {

package/src/plugin-settings/index.js

@@ -205,7 +205,7 @@ class PluginSettings extends Component {
 }
 
 PluginSettings.defaultProps = {
-	title: __( 'General Settings', 'newspack' ),
+	title: __( 'General Settings', 'newspack-plugin' ),
 };
 
 PluginSettings.Section = SettingsSection;

package/src/plugin-settings/style.scss

@@ -1,4 +1,4 @@
-.newspack-card:not( .newspack-settings__no-border ) {
+.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

@@ -67,7 +67,9 @@ class PluginToggle extends Component {
 								...pluginInfo,
 								[ plugin ]: {
 									...pluginInfo[ plugin ],
-									error: e.message || __( 'There was an error managing this plugin.', 'newspack' ),
+									error:
+										e.message ||
+										__( 'There was an error managing this plugin.', 'newspack-plugin' ),
 								},
 							},
 						} );
@@ -115,14 +117,13 @@ class PluginToggle extends Component {
 			.map( pluginSlug =>
 				pluginsFromAPI[ pluginSlug ]
 					? Object.keys( pluginsFromAPI[ pluginSlug ] ).reduce(
-							( accumulator, key ) => ( {
-								...accumulator,
-								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
+						( accumulator, key ) => ( {
+							...accumulator,
+							[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
 									pluginsFromAPI[ pluginSlug ][ key ],
-							} ),
-							{}
-					  )
-					: {}
+						} ),
+						{}
+					) : {}
 			)
 			.map( plugin => Object.assign( plugin, pluginsFromProps[ plugin.slug ] ) );
 
@@ -148,21 +149,21 @@ class PluginToggle extends Component {
 		if ( 'configure' === inFlight ) {
 			return (
 				<Fragment>
-					{ __( 'Installing…', 'newspack' ) } <Waiting isRight />
+					{ __( 'Installing…', 'newspack-plugin' ) } <Waiting isRight />
 				</Fragment>
 			);
 		}
 		if ( 'deactivate' === inFlight ) {
 			return (
 				<Fragment>
-					{ __( 'Deactivating…', 'newspack' ) } <Waiting isRight />
+					{ __( 'Deactivating…', 'newspack-plugin' ) } <Waiting isRight />
 				</Fragment>
 			);
 		}
 		if ( ! name ) {
 			return (
 				<Fragment>
-					{ __( 'Loading…', 'newspack' ) } <Waiting isRight />
+					{ __( 'Loading…', 'newspack-plugin' ) } <Waiting isRight />
 				</Fragment>
 			);
 		}
@@ -171,7 +172,7 @@ class PluginToggle extends Component {
 			return null;
 		}
 		if ( href || editPath ) {
-			return actionText ? actionText : __( 'Configure', 'newspack' );
+			return actionText ? actionText : __( 'Configure', 'newspack-plugin' );
 		}
 	};
 

package/src/plugin-toggle/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,

package/src/popover/style.scss

@@ -2,8 +2,8 @@
  * Popover
  */
 
-@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-popover {
 	.components-popover__content {
@@ -23,7 +23,7 @@
 				}
 			}
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
@@ -34,14 +34,14 @@
 				padding: 6px 8px;
 				text-decoration: none;
 
-				&:not( .is-destructive ) {
+				&:not(.is-destructive) {
 					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
 						color: colors.$primary-500;
 					}
 				}
@@ -52,7 +52,7 @@
 				}
 			}
 
-			&.is-destructive:not( :focus ) {
+			&.is-destructive:not(:focus) {
 				box-shadow: none !important;
 			}
 
@@ -131,7 +131,7 @@
 		}
 	}
 
-	&:not( .is-without-arrow )::before {
+	&:not(.is-without-arrow)::before {
 		border-color: wp-colors.$gray-300;
 	}
 

package/src/position-control/index.js

@@ -29,73 +29,72 @@ export default function PositionControl( {
 	const options =
 		size === 'full-width'
 			? [
-					{
-						value: 'top',
-						/* translators: Overlay Position */
-						label: __( 'Top', 'newspack' ),
-					},
-					{
-						value: 'center',
-						/* translators: Overlay Position */
-						label: __( 'Center', 'newspack' ),
-					},
-					{
-						value: 'bottom',
-						/* translators: Overlay Position */
-						label: __( 'Bottom', 'newspack' ),
-					},
-			  ]
-			: [
-					{
-						value: 'top_left',
-						/* translators: Overlay Position */
-						label: __( 'Top Left', 'newspack' ),
-					},
-					{
-						value: 'top',
-						/* translators: Overlay Position */
-						label: __( 'Top Center', 'newspack' ),
-					},
-					{
-						value: 'top_right',
-						/* translators: Overlay Position */
-						label: __( 'Top Right', 'newspack' ),
-					},
-					{
-						value: 'center_left',
-						/* translators: Overlay Position */
-						label: __( 'Center Left', 'newspack' ),
-					},
-					{
-						value: 'center',
-						/* translators: Overlay Position */
-						label: __( 'Center', 'newspack' ),
-					},
-					{
-						value: 'center_right',
-						/* translators: Overlay Position */
-						label: __( 'Center Right', 'newspack' ),
-					},
-					{
-						value: 'bottom_left',
-						/* translators: Overlay Position */
-						label: __( 'Bottom Left', 'newspack' ),
-					},
-					{
-						value: 'bottom',
-						/* translators: Overlay Position */
-						label: __( 'Bottom Center', 'newspack' ),
-					},
-					{
-						value: 'bottom_right',
-						/* translators: Overlay Position */
-						label: __( 'Bottom Right', 'newspack' ),
-					},
-			  ];
+				{
+					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' ) } { ...props }>
+			<ButtonGroup aria-label={ __( 'Select Position', 'newspack-plugin' ) } { ...props }>
 				{ options.map( ( option, index ) => {
 					return (
 						<div

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/index.js

@@ -21,7 +21,7 @@ import classnames from 'classnames';
 const SectionHeader = ( {
 	centered = false,
 	className = null,
-	description,
+	description = '',
 	heading = 2,
 	isWhite = false,
 	noMargin = false,
@@ -52,11 +52,11 @@ const SectionHeader = ( {
 	const HeadingTag = `h${ heading }`;
 
 	return (
-		<div id={ id } ref={ ref }>
+		<div id={ id } className="newspack-section-header__container" ref={ ref }>
 			<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> }
+				{ description && typeof description === 'string' && <p>{ description }</p> }
 				{ typeof description === 'function' && <p>{ description() }</p> }
 			</Grid>
 		</div>

package/src/section-header/style.scss

@@ -2,11 +2,15 @@
  * 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;
 
+	&__container:not(:first-child) {
+		margin-top: 48px;
+	}
+
 	&--no-margin,
 	h1,
 	h2,

package/src/select-control/GroupedSelectControl.js

@@ -52,7 +52,7 @@ export default function GroupedSelectControl( {
 					aria-describedby={ !! help ? `${ id }__help` : undefined }
 					{ ...props }
 				>
-					<option value="">{ __( '-- Select --', 'newspack' ) }</option>
+					<option value="">{ __( '-- Select --', 'newspack-plugin' ) }</option>
 					{ optgroups.map( ( { label: optgroupLabel, options }, optgroupIndex ) => (
 						<optgroup label={ optgroupLabel } key={ optgroupIndex }>
 							{ options.map( ( option, optionIndex ) => (

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;
 			}
 		}