newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/src/card/core-card.js

@@ -0,0 +1,224 @@
+/**
+ * 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, MenuGroup, 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,
+	headerAction,
+	headerStyle,
+	childrenStyle,
+	footerStyle,
+	disabled,
+	icon,
+	iconBackgroundColor,
+	isActive,
+	isDraggable,
+	isFirstTarget,
+	isLastTarget,
+	isNarrow,
+	isSmall,
+	dragIndex,
+	onDragCallback = () => {},
+	onToggle = () => {},
+	onHeaderClick,
+	noBorder,
+	noMargin,
+	children = null,
+	hasGreyHeader,
+	hasHeaderBorder = true,
+	...otherProps
+} ) => {
+	const classes = classNames(
+		'newspack-card--core',
+		className,
+		( buttonsCard || as === 'a' ) && 'newspack-card--core__buttons-card',
+		actions?.length > 0 && 'newspack-card--core__header--has-actions',
+		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',
+		disabled && 'newspack-card--core__is-disabled',
+		children && 'newspack-card--core__has-children',
+		noMargin && 'newspack-card--core__no-margin',
+		hasGreyHeader && 'newspack-card--core__has-grey-header'
+	);
+	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',
+						! hasHeaderBorder && 'newspack-card--core__header--no-border'
+					) }
+					style={ headerStyle }
+					size={ sizeProps }
+					gap={ 4 }
+					onClick={ disabled ? undefined : onHeaderClick }
+					disabled={ onHeaderClick && disabled ? true : undefined }
+					aria-disabled={ onHeaderClick && disabled ? true : undefined }
+				>
+					{ 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>
+					) }
+					{ actions?.length > 0 && actionType === 'toggle' && (
+						<ToggleControl
+							className="newspack-card--core__action"
+							label={ otherProps.title }
+							hideLabelFromVision
+							checked={ isActive }
+							onChange={ onToggle }
+						/>
+					) }
+					{ 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={ onToggle }
+						/>
+					) }
+					{ actions?.length > 0 && (
+						<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
+							{ () =>
+								actions.map( ( action, index ) => {
+									// Actions can be an array of sub-actions, which are rendered within a MenuGroup.
+									if ( Array.isArray( action ) ) {
+										return (
+											<MenuGroup key={ index }>
+												{ action.map( ( subAction, i ) => {
+													return (
+														<MenuItem
+															key={ i }
+															icon={ subAction.icon }
+															onClick={ subAction.action }
+															href={ subAction.href }
+															disabled={ subAction.disabled || false }
+															isDestructive={ subAction.destructive || false }
+														>
+															{ subAction.label }
+														</MenuItem>
+													);
+												} ) }
+											</MenuGroup>
+										);
+									}
+									return (
+										<MenuItem
+											key={ index }
+											icon={ action.icon }
+											onClick={ action.action }
+											href={ action.href }
+											disabled={ action.disabled || false }
+											isDestructive={ action.destructive || false }
+										>
+											{ action.label }
+										</MenuItem>
+									);
+								} )
+							}
+						</DropdownMenu>
+					) }
+					{ headerAction && (
+						<Button
+							className="newspack-card--core__header__action"
+							icon={ headerAction.icon }
+							href={ headerAction.href }
+							disabled={ headerAction.disabled || false }
+							isDestructive={ headerAction.destructive || false }
+							onClick={ headerAction.onClick }
+							tone={ headerAction.tone || 'primary' }
+							variant={ headerAction.variant || 'secondary' }
+						>
+							{ headerAction.label }
+						</Button>
+					) }
+				</CardHeader>
+			) }
+			{ children && (
+				<div
+					className={ classNames( 'newspack-card--core__body', ! hasHeaderBorder && 'newspack-card--core__body--no-header-border' ) }
+					style={ childrenStyle }
+				>
+					{ children }
+				</div>
+			) }
+			{ footer && (
+				<CardFooter size={ sizeProps } style={ footerStyle }>
+					{ 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,45 @@ 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,
+				hasGreyHeader: false,
+				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,295 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: wp-colors.$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: wp-vars.$radius-round;
+		display: grid;
+		height: wp-vars.$grid-unit-60;
+		place-items: center;
+		width: wp-vars.$grid-unit-60;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: wp-vars.$grid-unit-50;
+			width: wp-vars.$grid-unit-50;
+		}
+		.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: wp-vars.$font-size-large;
+		}
+		.newspack-card--core {
+			&__header-content {
+				* {
+					line-height: wp-vars.$font-line-height-small;
+				}
+			}
+			&__icon {
+				height: wp-vars.$grid-unit-50;
+				width: wp-vars.$grid-unit-50;
+				svg {
+					height: wp-vars.$grid-unit-30;
+					width: wp-vars.$grid-unit-30;
+				}
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__is-disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		.newspack-card--core__header {
+			pointer-events: none;
+		}
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		flex-wrap: wrap;
+		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%;
+			max-width: 50px;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+		&__action {
+			background-color: wp-colors.$white;
+			flex: 1 100%;
+			justify-content: center !important;
+		}
+	}
+	&__header--is-draggable {
+		padding-left: 80px !important;
+		.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%;
+			}
+		}
+	}
+	// Two classes beat the single-class .components-card__header border-bottom
+	// rule from WP Core without needing !important.
+	&__header.newspack-card--core__header--no-border {
+		border-bottom: none;
+	}
+	&__body.newspack-card--core__body--no-header-border {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding-top: 0;
+		}
+	}
+	&__header--has-actions {
+		.newspack-card--core__header {
+			padding-right: 70px;
+		}
+	}
+	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: 600;
+			display: flex;
+			gap: 8px;
+			a {
+				color: inherit;
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active:not(.newspack-card--core__is-draggable) {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		.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 {
+			.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);
+				}
+			}
+		}
+	}
+	&.is-destructive {
+		.newspack-card--core__header {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: wp-colors.$alert-red;
+			}
+			&:hover,
+			&:focus {
+				background-color: wp-colors.$gray-100;
+			}
+		}
+		.newspack-card--core__action,
+		.newspack-card--core__action svg {
+			fill: wp-colors.$alert-red;
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
+		}
+	}
+	&__has-grey-header {
+		.newspack-card--core__header {
+			background-color: rgba(black, 0.025);
+		}
+	}
+	&__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;
+			}
+		}
+		> .components-card__media {
+			border-radius: 0 !important;
+		}
+	}
+}

package/src/card/style.scss

@@ -52,8 +52,8 @@
 		margin-left: auto;
 		margin-right: auto;
 
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
 		}
 	}
 
@@ -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;