newspack-components 2.1.0 → 2.2.1

package/src/plugin-settings/SettingsSection.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
@@ -52,17 +52,9 @@ const getControlType = setting => {
 };
 
 const SettingsSection = props => {
-	const {
-		error,
-		sectionKey,
-		active,
-		title,
-		description,
-		fields,
-		disabled,
-		onChange,
-		onUpdate,
-	} = props;
+	const [ saveDisabled, setSaveDisabled ] = useState( true );
+	const { error, sectionKey, active, title, description, fields, disabled, onChange, onUpdate } =
+		props;
 	const getControlProps = setting => ( {
 		disabled,
 		name: `${ setting.section }_${ setting.key }`,
@@ -79,6 +71,7 @@ const SettingsSection = props => {
 		checked: setting.type === 'boolean' ? !! setting.value : null,
 		onChange: value => {
 			onChange( setting.key, value );
+			setSaveDisabled( false );
 		},
 	} );
 	const createFilter = ( name, defaultComponent = null ) => {
@@ -109,9 +102,10 @@ const SettingsSection = props => {
 					'buttons',
 					<Button
 						variant="primary"
-						disabled={ disabled }
+						disabled={ disabled || saveDisabled }
 						onClick={ () => {
 							onUpdate();
+							setSaveDisabled( true );
 						} }
 					>
 						{ __( 'Save Settings', 'newspack' ) }

package/src/plugin-settings/index.js

@@ -90,8 +90,13 @@ class PluginSettings extends Component {
 			},
 		} )
 			.then( settings => {
-				this.setState( { settings, error: null } );
-
+				this.setState( {
+					settings: {
+						...this.state.settings,
+						[ sectionKey ]: settings[ sectionKey ],
+					},
+					error: null,
+				} );
 				if ( 'function' === typeof afterUpdate ) {
 					afterUpdate( settings );
 				}

package/src/plugin-toggle/index.js

@@ -117,9 +117,8 @@ class PluginToggle extends Component {
 					? Object.keys( pluginsFromAPI[ pluginSlug ] ).reduce(
 							( accumulator, key ) => ( {
 								...accumulator,
-								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]: pluginsFromAPI[ pluginSlug ][
-									key
-								],
+								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
+									pluginsFromAPI[ pluginSlug ][ key ],
 							} ),
 							{}
 					  )

package/src/plugin-toggle/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,
@@ -11,7 +11,7 @@
 
 		.newspack-action-card__region-right {
 			.newspack-button {
-				color: $gray-700;
+				color: wp-colors.$gray-700;
 				pointer-events: none;
 				text-decoration: none;
 			}

package/src/popover/style.scss

@@ -2,30 +2,29 @@
  * Popover
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-popover {
 	.components-popover__content {
-		border: 1px solid $gray-300;
-		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		min-width: 238px;
 
 		.newspack-button {
-			color: $gray-700;
+			color: wp-colors.$gray-700;
 			display: flex;
 			font-weight: normal;
 			padding: 6px 8px;
 
 			&:hover {
+				color: colors.$primary-500;
+
 				.components-menu-items__item-icon {
-					fill: currentColor;
+					fill: currentcolor;
 				}
 			}
 
 			&:focus:not( :disabled ) {
-				box-shadow: inset 0 0 0 2px $primary-500;
+				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
 			}
@@ -36,14 +35,14 @@
 				text-decoration: none;
 
 				&:not( .is-destructive ) {
-					color: $gray-700;
+					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-						color: $primary-500;
+					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+						color: colors.$primary-500;
 					}
 				}
 
@@ -53,8 +52,12 @@
 				}
 			}
 
+			&.is-destructive:not( :focus ) {
+				box-shadow: none !important;
+			}
+
 			.components-menu-items__item-icon {
-				fill: $gray-900;
+				fill: wp-colors.$gray-900;
 			}
 
 			.components-menu-item__item {
@@ -64,7 +67,7 @@
 		}
 
 		.components-menu-group__label {
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 			font-size: 12px;
 			font-weight: bold;
 			line-height: 16px;
@@ -86,8 +89,8 @@
 					min-height: 36px;
 
 					&:focus ~ div.components-input-control__backdrop {
-						border-color: $primary-500;
-						box-shadow: inset 0 0 0 1px $primary-500;
+						border-color: colors.$primary-500;
+						box-shadow: inset 0 0 0 1px colors.$primary-500;
 					}
 				}
 
@@ -129,7 +132,7 @@
 	}
 
 	&:not( .is-without-arrow )::before {
-		border-color: $gray-300;
+		border-color: wp-colors.$gray-300;
 	}
 
 	&.is-from-bottom {

package/src/position-control/index.js

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ButtonGroup, Button } from '@wordpress/components';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+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' ),
+					},
+					{
+						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' ),
+					},
+			  ];
+	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 }>
+				{ options.map( ( option, index ) => {
+					return (
+						<div
+							key={ `newspack-position-placement-item-${ index }` }
+							className={ option.value === value ? 'is-selected' : null }
+						>
+							<Button
+								isSmall
+								title={ option.label }
+								aria-label={ option.label }
+								isPrimary={ option.value === value }
+								onClick={ () => {
+									onChange( option.value );
+								} }
+								disabled={ allowedPositions?.length && ! allowedPositions.includes( option.value ) }
+							/>
+						</div>
+					);
+				} ) }
+			</ButtonGroup>
+			<p className="components-base-control__help">{ help }</p>
+		</div>
+	);
+}

package/src/position-control/style.scss

@@ -0,0 +1,66 @@
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.newspack-position-placement-control {
+	margin-bottom: 1em;
+
+	.components-base-control__label {
+		margin-bottom: 8px;
+		margin-top: 1em;
+	}
+
+	.components-button-group {
+		display: grid;
+		grid-template-columns: repeat( 3, 1fr );
+		grid-template-rows: repeat( 3, 1fr );
+
+		div {
+			padding: 1px;
+		}
+
+		.components-button {
+			border-radius: 0 !important;
+			height: 100%;
+			padding: 20px;
+			width: 100%;
+		}
+
+		div:nth-of-type( 1 ) .components-button {
+			border-radius: 4px 0 0 !important;
+		}
+
+		div:nth-of-type( 3 ) .components-button {
+			border-radius: 0 4px 0 0 !important;
+		}
+
+		div:nth-last-of-type( 1 ) .components-button {
+			border-radius: 0 0 4px !important;
+		}
+
+		div:nth-last-of-type( 3 ) .components-button {
+			border-radius: 0 0 0 4px !important;
+		}
+	}
+
+	&.size-full-width .components-button-group {
+		grid-template-columns: 1fr;
+
+		div:first-of-type .components-button {
+			border-radius: 4px 4px 0 0 !important;
+		}
+
+		div:nth-of-type( 2 ) .components-button {
+			border-radius: 0 !important;
+		}
+
+		div:last-of-type .components-button {
+			border-radius: 0 0 4px 4px !important;
+		}
+	}
+
+	.components-base-control__help {
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		font-style: normal;
+		margin-top: 8px;
+	}
+}

package/src/progress-bar/style.scss

@@ -2,8 +2,8 @@
  * Progress Bar
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-progress-bar {
 	margin: 32px 0;
@@ -26,7 +26,7 @@
 	}
 
 	&__container {
-		background-color: $gray-100;
+		background-color: wp-colors.$gray-100;
 		border-radius: 4px;
 		height: 8px;
 		overflow: hidden;
@@ -35,7 +35,7 @@
 	}
 
 	&__bar {
-		background-color: $primary-500;
+		background-color: colors.$primary-500;
 		height: 8px;
 		transition: width 125ms ease-in-out;
 	}

package/src/radio-control/style.scss

@@ -2,11 +2,11 @@
  * Radio Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-radio-control {
-	color: $gray-700;
+	color: wp-colors.$gray-700;
 	font-size: 14px;
 	line-height: 24px;
 	margin: 32px 0;
@@ -19,7 +19,7 @@
 	}
 
 	.components-base-control__label {
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-weight: bold;
 	}
 
@@ -28,7 +28,7 @@
 	.components-radio-control__option {
 		align-items: center;
 		display: flex;
-		margin: 0 0 8px 0;
+		margin: 0 0 8px;
 
 		&:first-of-type {
 			margin-top: 8px;
@@ -52,8 +52,8 @@
 		}
 
 		&:checked {
-			background-color: $primary-500;
-			border-color: $primary-500;
+			background-color: colors.$primary-500;
+			border-color: colors.$primary-500;
 
 			&::before {
 				border: none;
@@ -61,8 +61,8 @@
 		}
 
 		&:focus {
-			border-color: $primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
+			border-color: colors.$primary-500;
+			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
 		}
 	}
 

package/src/section-header/index.js

@@ -2,6 +2,11 @@
  * Section Header
  */
 
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -14,14 +19,28 @@ import './style.scss';
 import classnames from 'classnames';
 
 const SectionHeader = ( {
-	centered,
-	className,
+	centered = false,
+	className = null,
 	description,
-	heading,
-	isWhite,
-	noMargin,
+	heading = 2,
+	isWhite = false,
+	noMargin = false,
 	title,
+	id = null,
 } ) => {
+	// If id is in the URL as a scrollTo param, scroll to it on render.
+	const ref = useRef();
+	useEffect( () => {
+		const params = new Proxy( new URLSearchParams( window.location.search ), {
+			get: ( searchParams, prop ) => searchParams.get( prop ),
+		} );
+		const scrollToId = params.scrollTo;
+		if ( scrollToId && scrollToId === id ) {
+			// Let parent scroll action run before running this.
+			window.setTimeout( () => ref.current.scrollIntoView( { behavior: 'smooth' } ), 250 );
+		}
+	}, [] );
+
 	const classes = classnames(
 		'newspack-section-header',
 		centered && 'newspack-section-header--is-centered',
@@ -33,17 +52,15 @@ const SectionHeader = ( {
 	const HeadingTag = `h${ heading }`;
 
 	return (
-		<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> }
-			{ typeof description === 'function' && <p>{ description() }</p> }
-		</Grid>
+		<div id={ id } 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> }
+				{ typeof description === 'function' && <p>{ description() }</p> }
+			</Grid>
+		</div>
 	);
 };
 
-SectionHeader.defaultProps = {
-	heading: 2,
-};
-
 export default SectionHeader;

package/src/section-header/style.scss

@@ -2,7 +2,7 @@
  * Section Header
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-section-header {
 	margin: 64px 0 32px;
@@ -32,7 +32,7 @@
 	}
 
 	p {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 	}
 
 	.newspack-wizard__content &:first-child {

package/src/select-control/ButtonGroupControl.js

@@ -16,6 +16,7 @@ import { hooks } from '..';
 
 const ButtonGroupControl = ( {
 	buttonOptions,
+	buttonSmall,
 	className,
 	hideLabelFromVision,
 	label,
@@ -42,7 +43,9 @@ const ButtonGroupControl = ( {
 						<Button
 							key={ option.value }
 							variant={ isSelected ? 'primary' : null }
+							isPressed={ isSelected }
 							onClick={ () => onChange( option.value ) }
+							isSmall={ buttonSmall }
 						>
 							<Label />
 						</Button>

package/src/select-control/GroupedSelectControl.js

@@ -9,7 +9,8 @@ import { Icon, chevronDown } from '@wordpress/icons';
  * External dependencies
  */
 import classnames from 'classnames';
-import { find, some } from 'lodash';
+import find from 'lodash/find';
+import some from 'lodash/some';
 
 /**
  * Internal dependencies

package/src/select-control/index.js

@@ -25,7 +25,7 @@ class SelectControl extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, optgroups, buttonOptions, ...otherProps } = this.props;
+		const { className, optgroups, buttonOptions, buttonSmall, ...otherProps } = this.props;
 		const classes = classNames(
 			'newspack-select-control',
 			optgroups && 'newspack-grouped-select-control',
@@ -38,7 +38,11 @@ class SelectControl extends Component {
 				{ optgroups ? (
 					<GroupedSelectControl optgroups={ optgroups } { ...otherProps } />
 				) : buttonOptions ? (
-					<ButtonGroupControl buttonOptions={ buttonOptions } { ...otherProps } />
+					<ButtonGroupControl
+						buttonOptions={ buttonOptions }
+						buttonSmall={ buttonSmall }
+						{ ...otherProps }
+					/>
 				) : (
 					<BaseComponent { ...otherProps } />
 				) }

package/src/select-control/style.scss

@@ -2,7 +2,7 @@
  * Select Control
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .components-select-control {
 	&__input {
@@ -47,7 +47,7 @@
 		&__input {
 			appearance: none;
 			background: transparent;
-			border: 1px solid $gray-700;
+			border: 1px solid wp-colors.$gray-700;
 			border-radius: 2px;
 			box-shadow: none !important;
 			box-sizing: border-box;

package/src/settings/style.scss

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

package/src/steps-list/index.js

@@ -0,0 +1,39 @@
+/**
+ * Steps List
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { StepsListItem } from '../';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+class StepsList extends Component {
+	/**
+	 * Render
+	 */
+	render() {
+		const { className, stepsListItems, narrowList, style = {} } = this.props;
+		const classes = classnames( 'steps-list', className, narrowList && 'steps-list__narrow-list' );
+
+		return (
+			<div className={ classes } style={ style }>
+				{ stepsListItems.map( ( listItem, index ) => (
+					<StepsListItem key={ index } listItemCount={ index + 1 } listItemText={ listItem } />
+				) ) }
+			</div>
+		);
+	}
+}
+
+export default StepsList;

package/src/steps-list/style.scss

@@ -0,0 +1,11 @@
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.steps-list {
+	margin-left: auto;
+	margin-right: auto;
+
+	&__narrow-list {
+		max-width: 416px;
+	}
+}