newspack-components 2.1.0 → 2.2.0

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

package/src/steps-list-item/index.js

@@ -0,0 +1,40 @@
+/**
+ * Steps List Item
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+class StepsListItem extends Component {
+	/**
+	 * Render
+	 */
+	render() {
+		const { className, listItemCount, listItemText, style = {} } = this.props;
+		const classes = classnames( 'steps-list-item', className );
+
+		return (
+			<div className={ classes } style={ style }>
+				<div className="steps-list-item__number">{ listItemCount }</div>
+				<div
+					className="steps-list-item__content"
+					dangerouslySetInnerHTML={ { __html: listItemText } }
+				/>
+			</div>
+		);
+	}
+}
+
+export default StepsListItem;

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

@@ -0,0 +1,47 @@
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.steps-list-item {
+	align-items: center;
+	display: grid;
+	grid-template-columns: 28px auto;
+	gap: 24px;
+	position: relative;
+
+	&::before {
+		border: 1px solid #F0F0F0;
+		bottom: -16px;
+		content: '';
+		display: block;
+		left: 14px;
+		position: absolute;
+		top: -16px;
+	}
+
+	&:first-child::before {
+		top: 50%;
+	}
+
+	&:last-child::before {
+		bottom: 50%;
+	}
+
+	+ .steps-list-item {
+		margin-top: 32px;
+	}
+
+	&__number {
+		align-items: center;
+		background: #fff;
+		border: 1px solid currentcolor;
+		border-radius: 100%;
+		color: colors.$primary-500;
+		display: flex;
+		height: 28px;
+		justify-content: center;
+		outline: 8px solid #fff;
+		position: relative;
+		width: 28px;
+		z-index: 2;
+	}
+}

package/src/style-card/index.js

@@ -25,17 +25,8 @@ class StyleCard extends Component {
 	 * Render.
 	 */
 	render() {
-		const {
-			ariaLabel,
-			className,
-			cardTitle,
-			url,
-			image,
-			imageType,
-			isActive,
-			onClick,
-			id,
-		} = this.props;
+		const { ariaLabel, className, cardTitle, url, image, imageType, isActive, onClick, id } =
+			this.props;
 		const classes = classnames(
 			'newspack-style-card',
 			isActive && 'newspack-style-card__is-active',

package/src/style-card/style.scss

@@ -2,8 +2,8 @@
  * Style Card
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-style-card {
 	margin: 32px 0;
@@ -15,13 +15,13 @@
 		text-align: center;
 
 		.newspack-style-card__is-active & {
-			color: $primary-500;
+			color: colors.$primary-500;
 		}
 	}
 
 	// Image
 	&__image {
-		border: 1px solid $gray-300;
+		border: 1px solid wp-colors.$gray-300;
 		border-radius: 2px;
 		overflow: hidden;
 		position: relative;
@@ -43,13 +43,13 @@
 		}
 
 		svg {
-			fill: $gray-600;
+			fill: wp-colors.$gray-600;
 			margin: 8px;
 		}
 
 		.newspack-style-card__is-active & {
-			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;
 
 			img {
 				position: relative;
@@ -62,16 +62,13 @@
 	&__actions {
 		align-items: center;
 		background: rgba( white, 0.9 );
-		bottom: 0;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		left: 0;
+		inset: 0;
 		opacity: 0;
 		padding: 16px;
 		position: absolute;
-		right: 0;
-		top: 0;
 		transition: opacity 125ms ease-in-out;
 
 		&:empty {
@@ -91,7 +88,7 @@
 		}
 
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px $primary-500;
+			box-shadow: inset 0 0 0 1px colors.$primary-500;
 		}
 	}
 }

package/src/style.scss

@@ -1,5 +1,4 @@
-@import '~@wordpress/base-styles/colors';
-@import '../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 // Buttons Card
 
@@ -21,17 +20,17 @@
 .newspack-checkbox-icon {
 	background: white;
 	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px $gray-300;
+	box-shadow: inset 0 0 0 1px wp-colors.$gray-300;
 	display: block;
 	height: 24px;
 	width: 24px;
 
 	svg {
-		fill: $gray-700;
+		fill: wp-colors.$gray-700;
 	}
 
 	&--checked {
-		background: $alert-green;
+		background: wp-colors.$alert-green;
 		box-shadow: none;
 
 		svg {
@@ -39,6 +38,6 @@
 		}
 	}
 	&--pending {
-		background: $alert-yellow;
+		background: wp-colors.$alert-yellow;
 	}
 }

package/src/tabbed-navigation/index.js

@@ -2,7 +2,7 @@
  * External dependencies.
  */
 import classnames from 'classnames';
-import { findIndex } from 'lodash';
+import findIndex from 'lodash/findIndex';
 import Router from '../proxied-imports/router';
 
 /**
@@ -12,16 +12,23 @@ import './style.scss';
 
 const { NavLink, useHistory } = Router;
 
-const TabbedNavigation = ( { items, className, disableUpcoming } ) => {
+const TabbedNavigation = ( { items, className, disableUpcoming, children = null } ) => {
+	const displayedItems = items.filter( item => ! item.isHiddenInTabbedNavigation );
 	const { location } = useHistory();
-	const currentIndex = findIndex( items, [ 'path', location.pathname ] );
+	const currentIndex = findIndex( displayedItems, [ 'path', location.pathname ] );
 	return (
 		<div className={ classnames( 'newspack-tabbed-navigation', className ) }>
 			<ul>
-				{ items.map( ( item, index ) => (
+				{ displayedItems.map( ( item, index ) => (
 					<li key={ index }>
 						<NavLink
 							to={ item.path }
+							isActive={ ( match, { pathname } ) => {
+								if ( item.activeTabPaths ) {
+									return item.activeTabPaths.includes( pathname );
+								}
+								return match;
+							} }
 							exact
 							activeClassName={ 'selected' }
 							className={ classnames( {
@@ -33,6 +40,7 @@ const TabbedNavigation = ( { items, className, disableUpcoming } ) => {
 					</li>
 				) ) }
 			</ul>
+			{ children }
 		</div>
 	);
 };

package/src/tabbed-navigation/style.scss

@@ -2,8 +2,7 @@
  * Tabbed Navigation
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-tabbed-navigation {
 	background: white;
@@ -20,7 +19,7 @@
 	}
 
 	ul {
-		box-shadow: 0 -1px 0 inset $gray-300;
+		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
 		display: flex;
 		flex-wrap: wrap;
 		margin: 0;
@@ -36,7 +35,7 @@
 
 		a {
 			align-items: center;
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 			display: flex;
 			font-weight: bold;
 			height: 48px;

package/src/utils/index.js

@@ -13,6 +13,15 @@ const InteractiveDiv = ( { style = {}, ...props } ) => (
 	/>
 );
 
+const confirmAction = message => {
+	// eslint-disable-next-line no-alert
+	if ( confirm( message ) ) {
+		return true;
+	}
+	return false;
+};
+
 export default {
 	InteractiveDiv,
+	confirmAction,
 };

package/src/web-preview/index.js

@@ -165,7 +165,7 @@ class WebPreview extends Component {
 }
 
 WebPreview.defaultProps = {
-	url: '//newspack.pub',
+	url: '//newspack.com',
 	label: __( 'Preview', 'newspack' ),
 	onLoad: () => {},
 };