newspack-components 3.0.0 → 4.0.0

package/src/select-control/ButtonGroupControl.js

@@ -14,19 +14,12 @@ import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
  */
 import { hooks } from '..';
 
-const ButtonGroupControl = ( {
-	buttonOptions,
-	buttonSmall,
-	className,
-	hideLabelFromVision,
-	label,
-	onChange,
-	value,
-} ) => {
+const ButtonGroupControl = ( { buttonOptions, buttonSmall, className, help, hideLabelFromVision, label, onChange, value } ) => {
 	const id = hooks.useUniqueId( 'button-group' );
 	return (
 		<BaseControl
 			label={ label }
+			help={ help }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id.current }
 			className={ classnames( className, 'components-select-control' ) }

package/src/select-control/GroupedSelectControl.js

@@ -20,15 +20,7 @@ import { hooks } from '..';
 /**
  * SelectControl with optgroup support
  */
-export default function GroupedSelectControl( {
-	help,
-	label,
-	onChange,
-	optgroups = [],
-	className,
-	hideLabelFromVision,
-	...props
-} ) {
+export default function GroupedSelectControl( { help, label, onChange, optgroups = [], className, hideLabelFromVision, ...props } ) {
 	const onChangeValue = event => {
 		const { value } = event.target;
 		const optgroup = find( optgroups, group => some( group.options, [ 'value', value ] ) );

package/src/select-control/index.js

@@ -38,11 +38,7 @@ class SelectControl extends Component {
 				{ optgroups ? (
 					<GroupedSelectControl optgroups={ optgroups } { ...otherProps } />
 				) : buttonOptions ? (
-					<ButtonGroupControl
-						buttonOptions={ buttonOptions }
-						buttonSmall={ buttonSmall }
-						{ ...otherProps }
-					/>
+					<ButtonGroupControl buttonOptions={ buttonOptions } buttonSmall={ buttonSmall } { ...otherProps } />
 				) : (
 					<BaseComponent { ...otherProps } />
 				) }

package/src/settings/MinMaxSetting.js

@@ -9,23 +9,11 @@ import { CheckboxControl } from '@wordpress/components';
  */
 import { TextControl } from '../';
 
-const MinMaxSetting = ( {
-	min,
-	max,
-	onChangeMin,
-	onChangeMax,
-	minPlaceholder,
-	maxPlaceholder,
-	...props
-} ) => {
+const MinMaxSetting = ( { min, max, onChangeMin, 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-plugin' ) }
-				/>
+				<CheckboxControl checked={ min > 0 } onChange={ value => onChangeMin( value ? 1 : 0 ) } label={ __( 'Min', 'newspack-plugin' ) } />
 				<TextControl
 					data-testid="min"
 					type="number"

package/src/settings/SettingsCard.js

@@ -8,12 +8,8 @@ import classnames from 'classnames';
  */
 import { Grid, ActionCard } from '../';
 
-const SettingsCard = ( { children, className, columns, gutter, noBorder, rowGap, ...props } ) => {
-	const classes = classnames(
-		'newspack-settings__card',
-		noBorder && 'newspack-settings__no-border',
-		className
-	);
+const SettingsCard = ( { children, className, columns = 3, gutter = 32, noBorder, rowGap, ...props } ) => {
+	const classes = classnames( 'newspack-settings__card', noBorder && 'newspack-settings__no-border', className );
 
 	return (
 		<ActionCard { ...props } className={ classes } notificationLevel="info" noBorder={ noBorder }>
@@ -24,9 +20,4 @@ const SettingsCard = ( { children, className, columns, gutter, noBorder, rowGap,
 	);
 };
 
-SettingsCard.defaultProps = {
-	columns: 3,
-	gutter: 32,
-};
-
 export default SettingsCard;

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
-import { Notice } from '@wordpress/components';
+import { CheckboxControl, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -12,11 +12,7 @@ import ActionCard from '../action-card';
 import Button from '../button';
 import './style.scss';
 
-export default function SortableNewsletterListControl( {
-	lists,
-	selected = [],
-	onChange = () => {},
-} ) {
+export default function SortableNewsletterListControl( { lists, selected = [], onChange = () => {} } ) {
 	if ( ! Array.isArray( lists ) && lists.errors ) {
 		return (
 			<Notice status="error" isDismissible={ false }>
@@ -42,8 +38,8 @@ export default function SortableNewsletterListControl( {
 							title={ list.name }
 							description={ () => (
 								<>
-									<input
-										type="checkbox"
+									<CheckboxControl
+										label={ __( 'Checked by default', 'newspack-plugin' ) }
 										checked={ selectedList.checked }
 										onChange={ () => {
 											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
@@ -52,18 +48,17 @@ export default function SortableNewsletterListControl( {
 											onChange( newSelected );
 										} }
 									/>
-									{ __( 'Checked by default', 'newspack-plugin' ) }
 								</>
 							) }
 							isSmall
+							hasWhiteHeader
 							actionText={
 								<>
 									<Button
-										onClick={ () =>
-											onChange( selected.filter( ( { id } ) => id !== selectedList.id ) )
-										}
+										onClick={ () => onChange( selected.filter( ( { id } ) => id !== selectedList.id ) ) }
 										label={ __( 'Remove', 'newspack-plugin' ) }
 										icon={ trash }
+										isDestructive
 									/>
 								</>
 							}
@@ -81,11 +76,7 @@ export default function SortableNewsletterListControl( {
 											newSelected.splice( index - 1, 0, selectedList );
 											onChange( newSelected );
 										} }
-										className={
-											selected.findIndex( ( { id } ) => id === selectedList.id ) === 0
-												? 'disabled'
-												: ''
-										}
+										className={ selected.findIndex( ( { id } ) => id === selectedList.id ) === 0 ? 'disabled' : '' }
 									>
 										<Icon icon={ chevronUp } />
 									</button>
@@ -98,10 +89,7 @@ export default function SortableNewsletterListControl( {
 											onChange( newSelected );
 										} }
 										className={
-											selected.findIndex( ( { id } ) => id === selectedList.id ) ===
-											selected.length - 1
-												? 'disabled'
-												: ''
+											selected.findIndex( ( { id } ) => id === selectedList.id ) === selected.length - 1 ? 'disabled' : ''
 										}
 									>
 										<Icon icon={ chevronDown } />
@@ -121,11 +109,7 @@ export default function SortableNewsletterListControl( {
 					) }{ ' ' }
 					{ getAvailableLists().map( list => {
 						return (
-							<Button
-								key={ list.id }
-								variant="secondary"
-								onClick={ () => onChange( [ ...selected, { id: list.id, checked: true } ] ) }
-							>
+							<Button key={ list.id } variant="secondary" onClick={ () => onChange( [ ...selected, { id: list.id, checked: true } ] ) }>
 								{ list.name }
 							</Button>
 						);

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

@@ -1,10 +1,15 @@
 .newspack__newsletter-list-control {
+	grid-column: span 3;
+
 	&__selected {
 		.newspack-card {
 			display: flex;
 			justify-content: center;
 			min-height: 40px;
 			flex-direction: row;
+			&:first-of-type {
+				margin-top: 0 !important;
+			}
 			.newspack-action-card__region {
 				align-items: center;
 				display: flex;
@@ -14,11 +19,16 @@
 			.newspack-action-card__region-top {
 				flex: 1;
 				order: 2;
+
+				.newspack-grid {
+					margin: 0;
+				}
 			}
 			.newspack-action-card__region-children {
-				padding: 12px;
+				padding: 12px !important;
 			}
 		}
+
 	}
 	&__sort-handle {
 		display: flex;

package/src/steps-list/style.scss

@@ -1,6 +1,3 @@
-@use "../../../shared/scss/colors";
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
 .steps-list {
 	margin-left: auto;
 	margin-right: auto;

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

@@ -28,10 +28,7 @@ class StepsListItem extends Component {
 		return (
 			<div className={ classes } style={ style }>
 				<div className="steps-list-item__number">{ listItemCount }</div>
-				<div
-					className="steps-list-item__content"
-					dangerouslySetInnerHTML={ { __html: listItemText } }
-				/>
+				<div className="steps-list-item__content" dangerouslySetInnerHTML={ { __html: listItemText } } />
 			</div>
 		);
 	}

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

@@ -1,4 +1,3 @@
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list-item {
@@ -35,7 +34,7 @@
 		background: #fff;
 		border: 1px solid currentcolor;
 		border-radius: 100%;
-		color: colors.$primary-500;
+		color: var(--wp-admin-theme-color);
 		display: flex;
 		height: 28px;
 		justify-content: center;

package/src/style-card/index.js

@@ -25,45 +25,30 @@ class StyleCard extends Component {
 	 * Render.
 	 */
 	render() {
-		const { ariaLabel, className, cardTitle, url, image, imageType, isActive, onClick, id } =
-			this.props;
-		const classes = classnames(
-			'newspack-style-card',
-			isActive && 'newspack-style-card__is-active',
-			className
-		);
+		const { ariaLabel, className, cardTitle, url, image, imageType, isActive, onClick, id } = this.props;
+		const classes = classnames( 'newspack-style-card', isActive && 'newspack-style-card__is-active', className );
 		return (
 			<div className={ classes } id={ id }>
 				<div className="newspack-style-card__image">
 					{ imageType === 'html' ? (
-						<div dangerouslySetInnerHTML={ image } />
+						<div className="newspack-style-card__image-html" dangerouslySetInnerHTML={ image } />
 					) : (
 						<img src={ image } alt={ cardTitle + ' ' + __( 'Thumbnail', 'newspack-plugin' ) } />
 					) }
 					<div className="newspack-style-card__actions">
 						{ isActive ? (
-							<span className="newspack-style-card__actions__badge">
-								{ __( 'Selected', 'newspack-plugin' ) }
-							</span>
+							<span className="newspack-style-card__actions__badge">{ __( 'Selected', 'newspack-plugin' ) }</span>
 						) : (
 							<Button
 								variant="link"
 								onClick={ onClick }
-								aria-label={
-									ariaLabel ? ariaLabel : __( 'Select', 'newspack-plugin' ) + ' ' + cardTitle
-								}
+								aria-label={ ariaLabel ? ariaLabel : __( 'Select', 'newspack-plugin' ) + ' ' + cardTitle }
 								tabIndex="0"
 							>
 								{ __( 'Select', 'newspack-plugin' ) }
 							</Button>
 						) }
-						{ url && (
-							<WebPreview
-								url={ url }
-								label={ __( 'View Demo', 'newspack-plugin' ) }
-								variant="link"
-							/>
-						) }
+						{ url && <WebPreview url={ url } label={ __( 'View Demo', 'newspack-plugin' ) } variant="link" /> }
 					</div>
 				</div>
 				{ cardTitle && <div className="newspack-style-card__title">{ cardTitle }</div> }

package/src/style-card/style.scss

@@ -2,7 +2,6 @@
  * Style Card
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-style-card {
@@ -15,7 +14,7 @@
 		text-align: center;
 
 		.newspack-style-card__is-active & {
-			color: colors.$primary-500;
+			color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -48,8 +47,8 @@
 		}
 
 		.newspack-style-card__is-active & {
-			border-color: colors.$primary-500;
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 
 			img {
 				position: relative;
@@ -88,7 +87,7 @@
 		}
 
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 	}
 }

package/src/style.scss

@@ -1,4 +1,15 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../colors/colors.module" as colors;
+
+:root {
+	// WP Admin
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+}
 
 // Buttons Card
 
@@ -13,6 +24,10 @@
 	&:empty {
 		display: none;
 	}
+
+	+ .newspack-card {
+		margin-top: 64px;
+	}
 }
 
 // Checkboxes

package/src/tabbed-navigation/index.js

@@ -16,6 +16,23 @@ const TabbedNavigation = ( { items, className, disableUpcoming, children = null
 	const displayedItems = items.filter( item => ! item.isHiddenInTabbedNavigation );
 	const { location } = useHistory();
 	const currentIndex = findIndex( displayedItems, [ 'path', location.pathname ] );
+
+	function isActive( item, match, pathname ) {
+		if ( item.path === pathname ) {
+			return true;
+		}
+		if ( Array.isArray( item?.activeTabPaths ) ) {
+			return item.activeTabPaths.some( path => {
+				if ( path.endsWith( '*' ) ) {
+					const basePath = path.slice( 0, -1 );
+					return pathname.startsWith( basePath );
+				}
+				return item.activeTabPaths.includes( pathname );
+			} );
+		}
+		return match;
+	}
+
 	return (
 		<div className={ classnames( 'newspack-tabbed-navigation', className ) }>
 			<ul>
@@ -23,13 +40,8 @@ const TabbedNavigation = ( { items, className, disableUpcoming, children = null
 					<li key={ index }>
 						<NavLink
 							to={ item.path }
-							isActive={ ( match, { pathname } ) => {
-								if ( item.activeTabPaths ) {
-									return item.activeTabPaths.includes( pathname );
-								}
-								return match;
-							} }
-							exact
+							isActive={ ( match, { pathname } ) => isActive( item, match, pathname ) }
+							exact={ item.hasOwnProperty( 'exact' ) ? item.exact : true }
 							activeClassName={ 'selected' }
 							className={ classnames( {
 								disabled: disableUpcoming && index > currentIndex,

package/src/tabbed-navigation/style.scss

@@ -39,6 +39,7 @@
 			display: flex;
 			font-weight: bold;
 			height: 48px;
+			outline: none;
 			padding: 12px 15px;
 			text-decoration: none;
 
@@ -51,15 +52,10 @@
 			&:focus,
 			&:hover {
 				color: var(--wp-admin-theme-color);
-				outline: none;
-			}
-
-			&:focus {
-				box-shadow: none;
 			}
 
 			&:focus-visible {
-				outline: 2px solid;
+				outline: 2px solid var(--wp-admin-theme-color);
 				outline-offset: -2px;
 			}
 

package/src/text-control/index.tsx

@@ -24,13 +24,7 @@ type BaseComponentProps = {
 	value: string | number;
 };
 
-const TextControl = ( {
-	className = '',
-	required = false,
-	isWide = false,
-	withMargin = true,
-	...otherProps
-} ) => {
+const TextControl = ( { className = '', required = false, isWide = false, withMargin = true, ...otherProps } ) => {
 	const wrapperRef = useRef< HTMLDivElement >( null );
 	useEffect( () => {
 		if ( wrapperRef.current === null ) {
@@ -51,11 +45,7 @@ const TextControl = ( {
 	);
 	return required ? (
 		<div ref={ wrapperRef } className="newspack-text-control--required">
-			<BaseComponent
-				className={ classes }
-				required={ required }
-				{ ...( otherProps as BaseComponentProps ) }
-			/>
+			<BaseComponent className={ classes } required={ required } { ...( otherProps as BaseComponentProps ) } />
 		</div>
 	) : (
 		<BaseComponent className={ classes } { ...( otherProps as BaseComponentProps ) } />

package/src/utils/color.ts

@@ -0,0 +1,32 @@
+/**
+ * Determine if black or white should be used based on a contrast ratio.
+ *
+ * @param hexcolor Hex code for determining contrast
+ * @return black or white string
+ */
+export function getContrast( hexcolor: string ) {
+	if ( hexcolor.charAt( 0 ) === '#' ) {
+		hexcolor = hexcolor.slice( 1 );
+	}
+
+	// Normalize to 6 character hex code if needed
+	if ( hexcolor.length === 3 ) {
+		hexcolor = hexcolor
+			.split( '' )
+			.map( function ( hex ) {
+				return hex + hex;
+			} )
+			.join( '' );
+	}
+
+	// Convert to RGB value
+	const r = parseInt( hexcolor.substring( 0, 2 ), 16 );
+	const g = parseInt( hexcolor.substring( 2, 4 ), 16 );
+	const b = parseInt( hexcolor.substring( 4 ), 16 );
+
+	// Get YIQ ratio
+	const yiq = ( r * 299 + g * 587 + b * 114 ) / 1000;
+
+	// Check contrast
+	return yiq >= 128 ? 'black' : 'white';
+}

package/src/web-preview/style.scss

@@ -2,19 +2,19 @@
  * Web Preview
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
-
-	background: rgba(black, 0.7);
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+
+	background: #{colors.$neutral-700};
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -102,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: colors.$primary-500;
+					background: var(--wp-admin-theme-color);
 					color: white;
 
 					&:active,
@@ -114,7 +114,7 @@
 					}
 
 					&:focus {
-						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
 					}
 				}