newspack-components 4.2.0 → 4.3.0

package/src/autocomplete-with-latest-posts/style.scss

@@ -0,0 +1,150 @@
+/**
+* Styles for AutocompleteWithLatestPosts component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-latest-posts {
+	display: grid;
+	gap: 16px;
+	width: 100%;
+
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-latest-posts__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	// Hide the built-in "Separate with commas or the Enter key." help text when hideFormTokenHelp is true
+	&.hide-form-token-help .components-form-token-field__help {
+		display: none;
+	}
+
+	p.newspack-autocomplete-with-latest-posts__label {
+		font-size: inherit;
+		margin: 0 0 8px;
+	}
+
+	&__selected-items {
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 16px;
+		padding-bottom: 12px;
+
+		p.newspack-autocomplete-with-latest-posts__label {
+			flex: 0 0 100%;
+			margin: 0;
+		}
+	}
+
+	&__selected-item-button.components-button.is-tertiary {
+		background-color: wp-colors.$gray-300;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: 13px;
+		height: auto;
+		margin: 0;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&::after {
+			content: "✕";
+			margin-left: 8px;
+		}
+
+		&:hover {
+			box-shadow: none;
+			color: black;
+		}
+	}
+
+	&__search-suggestions,
+	&__search-suggestions-multiselect {
+		max-height: 220px;
+		overflow: visible auto;
+		margin: 0 -4px;
+		padding: 4px 4px 0;
+
+		.components-button {
+			display: block;
+			line-height: normal;
+			margin: auto;
+
+			&.is-link {
+				color: wp-colors.$gray-900;
+				padding: 8px;
+				text-decoration: none;
+				width: 100%;
+
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
+					background: wp-colors.$gray-900;
+					background: var(--wp-admin-theme-color);
+					color: white;
+				}
+			}
+			&.is-secondary {
+				margin-bottom: 8px;
+				margin-top: 8px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__search-suggestions {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		padding: 0;
+
+		.components-button {
+			line-height: normal;
+
+			&:focus:not(:disabled) {
+				border-radius: 0;
+				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&.is-secondary {
+				width: calc(100% - 16px);
+			}
+		}
+	}
+
+	// Temp: CSS work-around.
+	.newspack-autocomplete-with-suggestions__label {
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+		display: block;
+		margin: 0 0 8px;
+		padding: 0;
+	}
+}

package/src/badge/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+type BadgeProps = {
+	text: string;
+	level?: 'default' | 'info' | 'success' | 'warning' | 'error';
+};
+
+/**
+ * Badge component
+ */
+const Badge = ( { text, level = 'default' }: BadgeProps ) => {
+	const classes = classnames( 'newspack-badge', `is-${ level }` );
+	return <span className={ classes }>{ text }</span>;
+};
+
+export default Badge;

package/src/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}

package/src/button/index.tsx

@@ -19,10 +19,11 @@ const { useHistory } = Router;
 type OriginalButtonProps = typeof BaseComponent.defaultProps;
 type Props = OriginalButtonProps & {
 	href?: string;
+	loading?: boolean;
 	onClick?: () => void;
 };
 
-const Button = ( { href, onClick, ...otherProps }: Props ) => {
+const Button = ( { href, loading = undefined, onClick, ...otherProps }: Props ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
@@ -42,7 +43,7 @@ const Button = ( { href, onClick, ...otherProps }: Props ) => {
 		otherProps.disabled = true;
 	}
 	// @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
-	return <BaseComponent { ...otherProps } />;
+	return <BaseComponent loading={ loading ? true : undefined } { ...otherProps } />;
 };
 
 export default Button;

package/src/card/core-card.js

@@ -0,0 +1,147 @@
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuItem, ToggleControl } from '@wordpress/components';
+import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style-core.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const CoreCard = ( {
+	actions,
+	actionType,
+	as,
+	buttonsCard,
+	className,
+	footer,
+	header,
+	icon,
+	iconBackgroundColor,
+	isActive,
+	isDraggable,
+	isFirstTarget,
+	isLastTarget,
+	isNarrow,
+	isSmall,
+	dragIndex,
+	onDragCallback = () => {},
+	onHeaderClick,
+	noBorder,
+	noMargin,
+	children = null,
+	...otherProps
+} ) => {
+	const classes = classNames(
+		'newspack-card--core',
+		className,
+		( buttonsCard || as === 'a' ) && 'newspack-card--core__buttons-card',
+		isDraggable && 'newspack-card--core__is-draggable',
+		isNarrow && 'newspack-card--core__is-narrow',
+		isSmall && 'newspack-card--core__is-small',
+		icon && 'newspack-card--core__has-icon',
+		iconBackgroundColor && 'newspack-card--core__has-icon-background-color',
+		isActive && 'newspack-card--core__is-active',
+		children && 'newspack-card--core__has-children',
+		noMargin && 'newspack-card--core__no-margin'
+	);
+	let sizeProps = isSmall ? 'small' : otherProps.size;
+	if ( buttonsCard || as === 'a' ) {
+		if ( ! isSmall ) {
+			sizeProps = 'large';
+		}
+		if ( as !== 'a' ) {
+			otherProps.as = 'a'; // Render as an anchor tag.
+		}
+	}
+	if ( noBorder ) {
+		otherProps.isBorderless = true;
+	}
+	return (
+		<CardWrapper as={ as } className={ classes } { ...otherProps }>
+			{ ( header || icon ) && (
+				<CardHeader
+					as={ onHeaderClick ? 'button' : undefined }
+					className={ classNames( 'newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable' ) }
+					size={ sizeProps }
+					onClick={ onHeaderClick }
+				>
+					{ isDraggable && (
+						<div className="newspack-card--core__header__draggable-controls">
+							<div className="newspack-card--core__header__draggable-controls__drag-handle">
+								<Icon icon={ dragHandle } />
+							</div>
+							<div className="newspack-card--core__header__draggable-controls__move-buttons">
+								<Button
+									icon={ chevronUp }
+									onClick={ () => onDragCallback( dragIndex, dragIndex - 1 ) }
+									disabled={ isFirstTarget }
+									label={ __( 'Move one position up', 'newspack-plugin' ) }
+									size="small"
+								/>
+								<Button
+									icon={ chevronDown }
+									onClick={ () => onDragCallback( dragIndex, dragIndex + 1 ) }
+									disabled={ isLastTarget }
+									label={ __( 'Move one position down', 'newspack-plugin' ) }
+									size="small"
+								/>
+							</div>
+						</div>
+					) }
+					{ icon && (
+						<div className="newspack-card--core__icon">
+							<Icon icon={ icon } height={ isSmall ? 24 : 48 } width={ isSmall ? 24 : 48 } />
+						</div>
+					) }
+					{ header && <div className="newspack-card--core__header-content">{ header }</div> }
+					{ ! actions?.length > 0 && actionType === 'chevron' && (
+						<Icon className="newspack-card--core__action" icon={ chevronRight } height={ 24 } width={ 24 } />
+					) }
+					{ ! actions?.length > 0 && actionType === 'toggle' && (
+						<ToggleControl
+							className="newspack-card--core__action"
+							label={ otherProps.title }
+							hideLabelFromVision
+							checked={ isActive }
+							onChange={ () => {} }
+						/>
+					) }
+					{ actions?.length > 0 && (
+						<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
+							{ () =>
+								actions.map( ( action, index ) => (
+									<MenuItem
+										key={ index }
+										icon={ action.icon }
+										onClick={ action.action }
+										disabled={ action.disabled || false }
+										isDestructive={ action.destructive || false }
+									>
+										{ action.label }
+									</MenuItem>
+								) )
+							}
+						</DropdownMenu>
+					) }
+				</CardHeader>
+			) }
+			{ children && <div className="newspack-card--core__body">{ children }</div> }
+			{ footer && <CardFooter size={ sizeProps }>{ footer }</CardFooter> }
+		</CardWrapper>
+	);
+};
+
+export default CoreCard;

package/src/card/index.js

@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import CoreCard from './core-card';
 import './style.scss';
 
 /**
@@ -22,7 +23,44 @@ class Card extends Component {
 	 * Render
 	 */
 	render() {
-		const { buttonsCard, className, headerActions, isNarrow, isMedium, isSmall, isWhite, noBorder, ...otherProps } = this.props;
+		const {
+			buttonsCard,
+			className,
+			headerActions,
+			isNarrow,
+			isMedium,
+			isSmall,
+			isWhite,
+			noBorder,
+			// Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+			__experimentalCoreCard,
+			// Pass props supported by WP Core's Card component in this single prop.
+			__experimentalCoreProps = {
+				actionType: null, // chevron | toggle | button | link | none
+				header: null, // Pass a React component to render in a CardHeader component.
+				icon: null,
+				footer: null, // Pass a React component to render in a CardFooter component.
+				noMargin: false,
+				isDraggable: false,
+				dragIndex: null,
+				onDragCallback: () => {},
+			},
+			...otherProps
+		} = this.props;
+		if ( __experimentalCoreCard ) {
+			const props = {
+				buttonsCard,
+				className,
+				isMedium,
+				isNarrow,
+				isSmall,
+				isWhite,
+				noBorder,
+				...otherProps,
+				...__experimentalCoreProps,
+			};
+			return <CoreCard { ...props } />;
+		}
 		const classes = classNames(
 			'newspack-card',
 			className,

package/src/card/style-core.scss

@@ -0,0 +1,227 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: white;
+	position: relative;
+	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
+	svg {
+		transition: fill 125ms ease-in-out;
+	}
+	&__icon {
+		border-radius: 50%;
+		display: grid;
+		height: 48px;
+		place-items: center;
+		width: 48px;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: 40px;
+			width: 40px;
+		}
+		.newspack-card--core__has-icon-background-color & {
+			background: var(--wp-admin-theme-color-lighter-10);
+		}
+	}
+	&__is-small {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: 14px;
+			font-weight: 500;
+		}
+		.newspack-card--core__icon {
+			height: 40px;
+			width: 40px;
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		column-gap: 16px;
+		position: relative;
+		.newspack-card--core__action {
+			margin: 0;
+			label {
+				border: 0;
+				clip-path: inset(50%);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute !important;
+				width: 1px;
+				word-wrap: normal !important;
+			}
+		}
+		.components-dropdown-menu {
+			aspect-ratio: 1;
+			border-left: 1px solid wp-colors.$gray-200;
+			display: grid;
+			height: 100%;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	&__header--is-draggable {
+		.newspack-card--core__header-content {
+			padding-left: 65px;
+		}
+		.newspack-card--core__header__draggable-controls {
+			align-items: center;
+			border-right: 1px solid wp-colors.$gray-200;
+			display: flex;
+			height: 100%;
+			justify-content: space-between;
+			left: 0;
+			padding: 0 8px;
+			position: absolute;
+			top: 0;
+		}
+		.newspack-card--core__header__draggable-controls__drag-handle {
+			cursor: grab;
+			display: grid;
+			place-items: center;
+		}
+		.newspack-card--core__header__draggable-controls__move-buttons {
+			display: flex;
+			flex-direction: column;
+			.components-button.has-icon {
+				height: 16px;
+				padding: 0;
+				width: 100%;
+			}
+		}
+	}
+	button.newspack-card--core__header {
+		appearance: none;
+		background-color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	&__header-content {
+		display: grid;
+		flex: 1;
+		grid-gap: 8px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			margin-bottom: 0;
+			margin-top: 0;
+			transition: color 125ms ease-in-out;
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			align-items: center;
+			color: wp-colors.$gray-900;
+			font-weight: 500;
+			display: flex;
+			gap: 8px;
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		button.newspack-card--core__header {
+			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
+			color: var(--wp-admin-theme-color);
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: var(--wp-admin-theme-color);
+			}
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&.newspack-card--core__has-children {
+			button.newspack-card--core__header {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			.newspack-card--core__body {
+				border-top: 1px solid var(--wp-admin-theme-color);
+			}
+			.components-card__divider {
+				background: wp-colors.$gray-100;
+			}
+		}
+	}
+	&__buttons-card {
+		display: block;
+		text-decoration: none;
+		&:active,
+		&:hover {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+			.newspack-card--core__header {
+				color: var(--wp-admin-theme-color);
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					color: var(--wp-admin-theme-color);
+				}
+				svg {
+					fill: var(--wp-admin-theme-color);
+				}
+			}
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+	&__body {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding: 16px 24px;
+			.newspack-card--core__is-small & {
+				padding: 16px;
+			}
+			.newspack-card--core__no-margin & {
+				padding: 0;
+			}
+		}
+	}
+}

package/src/card/style.scss

@@ -133,11 +133,11 @@
 
 	// Thematic Break
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 48px 0;
+		margin: 32px 0;
 
 		@media screen and ( min-width: 744px ) {
 			margin: 64px 0;