newspack-components 2.2.0 → 3.0.0-alpha.1

package/src/handoff/index.js

@@ -52,10 +52,11 @@ class Handoff extends Component {
 	textForPlugin = pluginInfo => {
 		const defaults = {
 			modalBody: null,
-			modalTitle: pluginInfo.Name && `${ __( 'Manage', 'newspack' ) } ${ pluginInfo.Name }`,
-			primaryButton: pluginInfo.Name && `${ __( 'Manage', 'newspack' ) } ${ pluginInfo.Name }`,
-			primaryModalButton: __( 'Manage', 'newspack' ),
-			dismissModalButton: __( 'Dismiss', 'newspack' ),
+			modalTitle: pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
+			primaryButton:
+				pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
+			primaryModalButton: __( 'Manage', 'newspack-plugin' ),
+			dismissModalButton: __( 'Dismiss', 'newspack-plugin' ),
 		};
 		return assign( defaults, this.props );
 	};
@@ -115,7 +116,7 @@ class Handoff extends Component {
 				) }
 				{ Name && 'active' !== Status && (
 					<Button className={ classes } variant="secondary" disabled { ...otherProps }>
-						{ Name + __( ' not installed', 'newspack' ) }
+						{ Name + __( ' not installed', 'newspack-plugin' ) }
 					</Button>
 				) }
 				{ ! Name && (
@@ -126,7 +127,7 @@ class Handoff extends Component {
 					>
 						<Fragment>
 							{ ! compact && <Waiting isLeft /> }
-							{ __( 'Retrieving Plugin Info', 'newspack' ) }
+							{ __( 'Retrieving Plugin Info', 'newspack-plugin' ) }
 						</Fragment>
 					</Button>
 				) }

package/src/hooks/{index.js → index.ts}

@@ -7,7 +7,7 @@ import usePrompt from './usePrompt';
 import useObjectState from './useObjectState';
 import useOnClickOutside from './useOnClickOutside';
 
-const useUniqueId = prefix => {
+const useUniqueId = ( prefix: string ) => {
 	const id = useRef( `${ prefix }-${ Math.round( Math.random() * 99999 ) }` );
 	return id.current;
 };

package/src/hooks/{usePrompt.js → usePrompt.ts}

@@ -12,11 +12,11 @@ import Router from '../proxied-imports/router';
 
 const { useHistory } = Router;
 
-export default ( when, message ) => {
+export default ( when: boolean, message: string ): ( () => void ) => {
 	const history = useHistory();
 	const self = useRef( null );
 
-	const onWindowOrTabClose = event => {
+	const onWindowOrTabClose = ( event: Event | undefined ) => {
 		if ( ! when ) {
 			return;
 		}
@@ -25,10 +25,6 @@ export default ( when, message ) => {
 			event = window.event;
 		}
 
-		if ( event ) {
-			event.returnValue = message;
-		}
-
 		return message;
 	};
 
@@ -40,11 +36,11 @@ export default ( when, message ) => {
 
 		return () => {
 			if ( self.current ) {
-				self.current();
+				( self.current as () => void )();
 			}
 			window.removeEventListener( 'beforeunload', onWindowOrTabClose );
 		};
 	}, [ message, when ] );
 
-	return self.current;
+	return self.current || ( () => {} );
 };

package/src/image-upload/index.js

@@ -102,11 +102,11 @@ class ImageUpload extends Component {
 							<img
 								data-testid="image-upload"
 								src={ image.url }
-								alt={ __( 'Image preview', 'newspack' ) }
+								alt={ __( 'Image preview', 'newspack-plugin' ) }
 							/>
 							<div className="newspack-image-upload__controls">
 								<Button disabled={ disabled } onClick={ this.openModal } isLink>
-									{ __( 'Replace', 'newspack' ) }
+									{ __( 'Replace', 'newspack-plugin' ) }
 								</Button>
 								<span className="sep" />
 								<Button
@@ -115,13 +115,13 @@ class ImageUpload extends Component {
 									isLink
 									isDestructive
 								>
-									{ __( 'Remove', 'newspack' ) }
+									{ __( 'Remove', 'newspack-plugin' ) }
 								</Button>
 							</div>
 						</>
 					) : (
 						<Button disabled={ disabled } onClick={ this.openModal } isLink>
-							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack' ) }
+							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>

package/src/index.js

@@ -1,4 +1,3 @@
-export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
@@ -29,7 +28,6 @@ export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
-export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';

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/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-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-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' ),
 								},
 							},
 						} );
@@ -148,21 +150,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 +173,7 @@ class PluginToggle extends Component {
 			return null;
 		}
 		if ( href || editPath ) {
-			return actionText ? actionText : __( 'Configure', 'newspack' );
+			return actionText ? actionText : __( 'Configure', 'newspack-plugin' );
 		}
 	};
 

package/src/position-control/index.js

@@ -32,70 +32,70 @@ export default function PositionControl( {
 					{
 						value: 'top',
 						/* translators: Overlay Position */
-						label: __( 'Top', 'newspack' ),
+						label: __( 'Top', 'newspack-plugin' ),
 					},
 					{
 						value: 'center',
 						/* translators: Overlay Position */
-						label: __( 'Center', 'newspack' ),
+						label: __( 'Center', 'newspack-plugin' ),
 					},
 					{
 						value: 'bottom',
 						/* translators: Overlay Position */
-						label: __( 'Bottom', 'newspack' ),
+						label: __( 'Bottom', 'newspack-plugin' ),
 					},
 			  ]
 			: [
 					{
 						value: 'top_left',
 						/* translators: Overlay Position */
-						label: __( 'Top Left', 'newspack' ),
+						label: __( 'Top Left', 'newspack-plugin' ),
 					},
 					{
 						value: 'top',
 						/* translators: Overlay Position */
-						label: __( 'Top Center', 'newspack' ),
+						label: __( 'Top Center', 'newspack-plugin' ),
 					},
 					{
 						value: 'top_right',
 						/* translators: Overlay Position */
-						label: __( 'Top Right', 'newspack' ),
+						label: __( 'Top Right', 'newspack-plugin' ),
 					},
 					{
 						value: 'center_left',
 						/* translators: Overlay Position */
-						label: __( 'Center Left', 'newspack' ),
+						label: __( 'Center Left', 'newspack-plugin' ),
 					},
 					{
 						value: 'center',
 						/* translators: Overlay Position */
-						label: __( 'Center', 'newspack' ),
+						label: __( 'Center', 'newspack-plugin' ),
 					},
 					{
 						value: 'center_right',
 						/* translators: Overlay Position */
-						label: __( 'Center Right', 'newspack' ),
+						label: __( 'Center Right', 'newspack-plugin' ),
 					},
 					{
 						value: 'bottom_left',
 						/* translators: Overlay Position */
-						label: __( 'Bottom Left', 'newspack' ),
+						label: __( 'Bottom Left', 'newspack-plugin' ),
 					},
 					{
 						value: 'bottom',
 						/* translators: Overlay Position */
-						label: __( 'Bottom Center', 'newspack' ),
+						label: __( 'Bottom Center', 'newspack-plugin' ),
 					},
 					{
 						value: 'bottom_right',
 						/* translators: Overlay Position */
-						label: __( 'Bottom Right', 'newspack' ),
+						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/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

@@ -7,6 +7,10 @@
 .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/settings/MinMaxSetting.js

@@ -16,37 +16,39 @@ const MinMaxSetting = ( {
 	onChangeMax,
 	minPlaceholder,
 	maxPlaceholder,
+	...props
 } ) => {
 	return (
-		<>
+		<div { ...props }>
 			<div className="newspack-settings__min-max">
 				<CheckboxControl
 					checked={ min > 0 }
 					onChange={ value => onChangeMin( value ? 1 : 0 ) }
-					label={ __( 'Min', 'newspack' ) }
+					label={ __( 'Min', 'newspack-plugin' ) }
 				/>
 				<TextControl
-					data-testid="min-articles-input"
+					data-testid="min"
 					type="number"
 					value={ min }
 					placeholder={ minPlaceholder }
 					onChange={ value => onChangeMin( value > 0 ? value : 0 ) }
 				/>
 			</div>
-			<div className="newspack-settings__min-max">
+			<div className="newspack-settings__min-max" data-testid="max">
 				<CheckboxControl
 					checked={ max > 0 }
 					onChange={ value => onChangeMax( value ? min || 1 : 0 ) }
-					label={ __( 'Max', 'newspack' ) }
+					label={ __( 'Max', 'newspack-plugin' ) }
 				/>
 				<TextControl
+					data-testid="max"
 					type="number"
 					value={ max }
 					placeholder={ maxPlaceholder }
 					onChange={ value => onChangeMax( value > 0 ? value : 0 ) }
 				/>
 			</div>
-		</>
+		</div>
 	);
 };
 export default MinMaxSetting;

package/src/settings/style.scss

@@ -37,7 +37,8 @@
 				}
 			}
 			&__content {
-				> div {
+				> div,
+				.newspack-settings__min-max {
 					margin: 0;
 					display: flex;
 					align-items: center;
@@ -47,6 +48,18 @@
 						margin: 0;
 					}
 				}
+				.newspack-autocomplete-tokenfield,
+				.newspack-settings__min-max {
+					width: 100%;
+				}
+				.newspack-autocomplete-tokenfield {
+					display: block;
+					margin: 0;
+
+					label:empty {
+						display: none;
+					}
+				}
 				.newspack-text-control,
 				.newspack-checkbox-control {
 					margin: 0 !important;

package/src/sortable-newsletter-list-control/index.js

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ActionCard from '../action-card';
+import Button from '../button';
+import './style.scss';
+
+export default function SortableNewsletterListControl( {
+	lists,
+	selected = [],
+	onChange = () => {},
+} ) {
+	if ( ! Array.isArray( lists ) && lists.errors ) {
+		return (
+			<Notice status="error" isDismissible={ false }>
+				{ Object.values( lists.errors ).join( ', ' ) }
+			</Notice>
+		);
+	}
+	const getList = id => lists.find( list => list.id === id );
+	const getAvailableLists = () => {
+		return lists.filter( list => list.active && ! selected.find( ( { id } ) => id === list.id ) );
+	};
+	return (
+		<div className="newspack__newsletter-list-control">
+			<div className="newspack__newsletter-list-control__selected">
+				{ selected.map( selectedList => {
+					const list = getList( selectedList.id );
+					if ( ! list ) {
+						return null;
+					}
+					return (
+						<ActionCard
+							key={ `selected-${ selectedList.id }` }
+							title={ list.name }
+							description={ () => (
+								<>
+									<input
+										type="checkbox"
+										checked={ selectedList.checked }
+										onChange={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											const newSelected = [ ...selected ];
+											newSelected[ index ].checked = ! newSelected[ index ].checked;
+											onChange( newSelected );
+										} }
+									/>
+									{ __( 'Checked by default', 'newspack-plugin' ) }
+								</>
+							) }
+							isSmall
+							actionText={
+								<>
+									<Button
+										onClick={ () =>
+											onChange( selected.filter( ( { id } ) => id !== selectedList.id ) )
+										}
+										label={ __( 'Remove', 'newspack-plugin' ) }
+										icon={ trash }
+									/>
+								</>
+							}
+						>
+							{ selected.length > 1 && (
+								<span className="newspack__newsletter-list-control__sort-handle">
+									<button
+										onClick={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											if ( index === 0 ) {
+												return;
+											}
+											const newSelected = [ ...selected ];
+											newSelected.splice( index, 1 );
+											newSelected.splice( index - 1, 0, selectedList );
+											onChange( newSelected );
+										} }
+										className={
+											selected.findIndex( ( { id } ) => id === selectedList.id ) === 0
+												? 'disabled'
+												: ''
+										}
+									>
+										<Icon icon={ chevronUp } />
+									</button>
+									<button
+										onClick={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											const newSelected = [ ...selected ];
+											newSelected.splice( index, 1 );
+											newSelected.splice( index + 1, 0, selectedList );
+											onChange( newSelected );
+										} }
+										className={
+											selected.findIndex( ( { id } ) => id === selectedList.id ) ===
+											selected.length - 1
+												? 'disabled'
+												: ''
+										}
+									>
+										<Icon icon={ chevronDown } />
+									</button>
+								</span>
+							) }
+						</ActionCard>
+					);
+				} ) }
+			</div>
+			{ getAvailableLists().length > 0 && (
+				<p className="newspack__newsletter-list-control__lists">
+					{ selected.length > 0 ? (
+						<strong>{ __( 'Add more lists:', 'newspack-plugin' ) }</strong>
+					) : (
+						<strong>{ __( 'Select lists:', 'newspack-plugin' ) }</strong>
+					) }{ ' ' }
+					{ getAvailableLists().map( list => {
+						return (
+							<Button
+								key={ list.id }
+								variant="secondary"
+								onClick={ () => onChange( [ ...selected, { id: list.id, checked: true } ] ) }
+							>
+								{ list.name }
+							</Button>
+						);
+					} ) }
+				</p>
+			) }
+		</div>
+	);
+}

package/src/sortable-newsletter-list-control/style.scss

@@ -0,0 +1,45 @@
+.newspack__newsletter-list-control {
+	&__selected {
+		.newspack-card {
+			display: flex;
+			justify-content: center;
+			min-height: 40px;
+			flex-direction: row;
+			.newspack-action-card__region {
+				align-items: center;
+				display: flex;
+				justify-content: space-between;
+				margin: 0;
+			}
+			.newspack-action-card__region-top {
+				flex: 1;
+				order: 2;
+			}
+			.newspack-action-card__region-children {
+				padding: 12px;
+			}
+		}
+	}
+	&__sort-handle {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		button {
+			background: transparent;
+			border: none;
+			margin: 0;
+			padding: 0;
+			height: 20px;
+			&.disabled {
+				cursor: default;
+				opacity: 0.3;
+			}
+		}
+	}
+	&__lists {
+		button {
+			margin-right: 0.5rem;
+		}
+	}
+}