newspack-components 2.0.3 → 2.2.0

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;
 		}
 	}
 
@@ -76,8 +76,7 @@
 	// Multiple Controls
 
 	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
+	+ .newspack-text-control {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}

package/src/section-header/index.js

@@ -2,9 +2,15 @@
  * Section Header
  */
 
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
+import { Grid } from '..';
 import './style.scss';
 
 /**
@@ -12,17 +18,47 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-const SectionHeader = ( { className, description, noMargin, title } ) => {
+const SectionHeader = ( {
+	centered = false,
+	className = null,
+	description,
+	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',
+		isWhite && 'newspack-section-header--is-white',
 		noMargin && 'newspack-section-header--no-margin',
 		className
 	);
+
+	const HeadingTag = `h${ heading }`;
+
 	return (
-		<div className={ classes }>
-			<h2>{ title }</h2>
-			{ typeof description === 'string' && <span>{ description }</span> }
-			{ typeof description === 'function' && <span>{ description() }</span> }
+		<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>
 	);
 };

package/src/section-header/style.scss

@@ -2,18 +2,39 @@
  * Section Header
  */
 
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
 .newspack-section-header {
 	margin: 64px 0 32px;
 
 	&--no-margin,
-	h2 {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		margin: 0 !important;
 	}
 
+	&--is-centered {
+		text-align: center;
+	}
+
 	&:not( #{&}--no-margin ) + *:not( #{&} ) {
 		margin-top: -16px !important;
 	}
 
+	&#{&}--is-white {
+		> * {
+			color: white;
+		}
+	}
+
+	p {
+		color: wp-colors.$gray-700;
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}

package/src/select-control/ButtonGroupControl.js

@@ -7,22 +7,31 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/icons';
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { Button, ButtonGroup, hooks } from '..';
+import { hooks } from '..';
 
-const ButtonGroupControl = ( { buttonOptions, onChange, value, label, className } ) => {
+const ButtonGroupControl = ( {
+	buttonOptions,
+	buttonSmall,
+	className,
+	hideLabelFromVision,
+	label,
+	onChange,
+	value,
+} ) => {
 	const id = hooks.useUniqueId( 'button-group' );
 	return (
 		<BaseControl
 			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
 			id={ id.current }
 			className={ classnames( className, 'components-select-control' ) }
 		>
-			<ButtonGroup noMargin>
+			<ButtonGroup>
 				{ buttonOptions.map( option => {
 					const isSelected = value === option.value;
 					let Label = () => option.label;
@@ -33,9 +42,10 @@ const ButtonGroupControl = ( { buttonOptions, onChange, value, label, className
 					return (
 						<Button
 							key={ option.value }
-							isSecondary={ ! isSelected }
+							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
@@ -43,30 +44,32 @@ export default function GroupedSelectControl( {
 			help={ help }
 			className={ classnames( className, 'components-select-control' ) }
 		>
-			<select
-				id={ id }
-				className="components-select-control__input"
-				onChange={ onChangeValue }
-				aria-describedby={ !! help ? `${ id }__help` : undefined }
-				{ ...props }
-			>
-				<option value="">{ __( '-- Select --', 'newspack' ) }</option>
-				{ optgroups.map( ( { label: optgroupLabel, options }, optgroupIndex ) => (
-					<optgroup label={ optgroupLabel } key={ optgroupIndex }>
-						{ options.map( ( option, optionIndex ) => (
-							<option
-								key={ `${ option.label }-${ option.value }-${ optionIndex }` }
-								value={ option.value }
-								disabled={ option.disabled }
-							>
-								{ option.label }
-							</option>
-						) ) }
-					</optgroup>
-				) ) }
-			</select>
-			<div className="components-select-control__arrow-wrapper">
-				<Icon icon={ chevronDown } size={ 18 } />
+			<div className="relative">
+				<select
+					id={ id }
+					className="components-select-control__input"
+					onChange={ onChangeValue }
+					aria-describedby={ !! help ? `${ id }__help` : undefined }
+					{ ...props }
+				>
+					<option value="">{ __( '-- Select --', 'newspack' ) }</option>
+					{ optgroups.map( ( { label: optgroupLabel, options }, optgroupIndex ) => (
+						<optgroup label={ optgroupLabel } key={ optgroupIndex }>
+							{ options.map( ( option, optionIndex ) => (
+								<option
+									key={ `${ option.label }-${ option.value }-${ optionIndex }` }
+									value={ option.value }
+									disabled={ option.disabled }
+								>
+									{ option.label }
+								</option>
+							) ) }
+						</optgroup>
+					) ) }
+				</select>
+				<div className="components-select-control__arrow-wrapper">
+					<Icon icon={ chevronDown } size={ 18 } />
+				</div>
 			</div>
 		</BaseControl>
 	);

package/src/select-control/index.js

@@ -25,12 +25,11 @@ class SelectControl extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, optgroups, buttonOptions, isSmall, ...otherProps } = this.props;
+		const { className, optgroups, buttonOptions, buttonSmall, ...otherProps } = this.props;
 		const classes = classNames(
 			'newspack-select-control',
 			optgroups && 'newspack-grouped-select-control',
 			buttonOptions && 'newspack-buttons-select-control',
-			isSmall && 'newspack-select-control--small',
 			className
 		);
 		return (
@@ -39,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,92 +2,39 @@
  * Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
-.newspack-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
+.components-select-control {
+	&__input {
+		max-width: 100% !important;
 
-	.components-base-control__field {
-		margin: 0;
-	}
-	.components-input-control__label,
-	.components-base-control__label {
-		color: $gray-900 !important;
-		display: flex;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
-		margin-bottom: 0;
-	}
-
-	.components-select-control {
-		border-radius: 3px;
-		font-size: 14px;
-		line-height: 24px;
-
-		div.components-input-control__backdrop {
-			border-color: $gray-300;
-		}
-
-		select.components-select-control__input {
-			color: $gray-700;
-			border-color: $gray-300;
-			font-size: 16px;
-			height: 48px;
-			line-height: 24px;
-			max-width: 100%;
-			min-height: 48px;
+		&[multiple] {
+			height: auto !important;
+			min-height: 70px !important;
+			padding: 0 !important;
 
-			@media screen and ( min-width: 600px ) {
-				font-size: 16px;
+			+ .components-input-control__suffix {
+				display: none;
 			}
 
-			@media screen and ( min-width: 768px ) {
-				font-size: 14px;
-			}
+			option {
+				min-height: 1.4em;
+				padding: 8px;
 
-			&:focus ~ div.components-input-control__backdrop {
-				border-color: $primary-500;
-				box-shadow: inset 0 0 0 2px $primary-500;
+				&:checked {
+					background: var( --wp-admin-theme-color );
+					color: white;
+				}
 			}
 		}
 	}
 
-	// Help
-
-	.components-base-control__help {
-		margin-top: 0;
-		font-style: italic;
-	}
-
-	// Small
-
-	&--small {
-		.components-select-control select.components-select-control__input {
-			height: 36px;
-			min-height: 36px;
-		}
-	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-base-control__field {
+		width: 100%;
 	}
 
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-input-control__label {
+		line-height: inherit;
 	}
 }
 
@@ -100,29 +47,38 @@
 		&__input {
 			appearance: none;
 			background: transparent;
-			border-radius: 3px;
+			border: 1px solid wp-colors.$gray-700;
+			border-radius: 2px;
 			box-shadow: none !important;
 			box-sizing: border-box;
 			display: block;
+			font-size: inherit;
 			margin: 0;
+			max-width: 100%;
 			outline: none;
 			padding: 0 24px 0 7px;
 			width: 100%;
 
+			&:hover {
+				color: inherit;
+			}
+
 			&:focus {
-				border-color: $primary-500 !important;
-				box-shadow: inset 0 0 0 2px $primary-500 !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;
 			}
 		}
 
 		&__arrow-wrapper {
 			align-items: center;
-			bottom: 0;
 			display: flex;
-			height: 48px;
+			height: 24px;
 			justify-content: center;
+			margin-top: -12px;
 			position: absolute;
 			right: 1px;
+			top: 50%;
 			width: 24px;
 		}
 	}
@@ -131,19 +87,22 @@
 // Buttons
 
 .newspack-buttons-select-control {
-	&.icon-only {
-		.newspack-button-group {
-			display: flex;
-		}
+	.components-base-control__label {
+		display: inline-flex;
+		margin-bottom: 8px;
+	}
 
-		.newspack-button {
+	.components-button-group {
+		display: flex;
+	}
+
+	&.icon-only {
+		.components-button {
 			align-items: center;
-			display: flex;
-			font-size: 17px;
-			height: 48px;
+			height: 36px;
 			justify-content: center;
 			padding: 0 !important;
-			width: 48px;
+			width: 36px;
 		}
 	}
 }

package/src/settings/MinMaxSetting.js

@@ -2,11 +2,12 @@
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
 
 /**
  * Internal dependencies.
  */
-import { CheckboxControl, TextControl } from '../';
+import { TextControl } from '../';
 
 const MinMaxSetting = ( {
 	min,

package/src/settings/SettingsCard.js

@@ -8,14 +8,16 @@ import classnames from 'classnames';
  */
 import { Grid, ActionCard } from '../';
 
-const SettingsCard = ( { children, className, columns, gutter, ...props } ) => {
+const SettingsCard = ( { children, className, columns, gutter, noBorder, rowGap, ...props } ) => {
+	const classes = classnames(
+		'newspack-settings__card',
+		noBorder && 'newspack-settings__no-border',
+		className
+	);
+
 	return (
-		<ActionCard
-			{ ...props }
-			className={ classnames( className, 'newspack-settings__card' ) }
-			notificationLevel="info"
-		>
-			<Grid columns={ columns } gutter={ gutter }>
+		<ActionCard { ...props } className={ classes } notificationLevel="info" noBorder={ noBorder }>
+			<Grid columns={ columns } gutter={ gutter } rowGap={ rowGap }>
 				{ children }
 			</Grid>
 		</ActionCard>

package/src/settings/SettingsSection.js

@@ -1,16 +1,16 @@
 /**
  * Internal dependencies.
  */
-import { Card, InfoButton } from '../';
+import { Grid, InfoButton } from '../';
 
 const SettingSection = ( { title, description, children } ) => (
-	<Card isSmall noBorder className="newspack-settings__section">
+	<Grid columns={ 1 } gutter={ 8 } className="newspack-settings__section">
 		<div className="newspack-settings__section__title">
-			<h3>{ title }</h3>
+			<span>{ title }</span>
 			{ description && <InfoButton text={ description } /> }
 		</div>
 		<div className="newspack-settings__section__content">{ children }</div>
-	</Card>
+	</Grid>
 );
 
 export default SettingSection;

package/src/settings/style.scss

@@ -28,11 +28,12 @@
 
 		.newspack-settings__section {
 			&__title {
+				align-items: center;
 				display: flex;
 				margin: 0;
 
-				h3 {
-					margin: 0;
+				span {
+					line-height: 24px;
 				}
 			}
 			&__content {
@@ -42,7 +43,7 @@
 					align-items: center;
 					justify-content: space-between;
 					flex-wrap: wrap;
-					> * {
+					> *:not( [class*='help'], [class*='label'] ) {
 						margin: 0;
 					}
 				}
@@ -58,8 +59,10 @@
 			}
 		}
 		.newspack-settings__min-max {
+			gap: 8px;
+
 			.newspack-checkbox-control {
-				flex: 0 0 64px;
+				flex: 0 0 auto;
 			}
 
 			.newspack-text-control {
@@ -75,4 +78,29 @@
 			}
 		}
 	}
+
+	&__no-border {
+		&.newspack-card.newspack-action-card {
+			border: 0;
+
+			.newspack-action-card__region-top,
+			.newspack-action-card__region-children {
+				padding-left: 0;
+				padding-right: 0;
+				padding-top: 0;
+			}
+
+			.newspack-action-card__region-children {
+				padding-bottom: 0;
+			}
+
+			.newspack-action-card__notification {
+				padding-bottom: 16px;
+			}
+
+			& + & {
+				margin-top: 64px;
+			}
+		}
+	}
 }

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