newspack-components 4.1.0 → 4.3.0

package/src/grid/style.scss

@@ -13,7 +13,7 @@
 
 	// No Margin
 	&--no-margin {
-		margin: 0;
+		margin: 0 !important;
 	}
 
 	// Gutter 0
@@ -41,6 +41,11 @@
 		grid-gap: 32px;
 	}
 
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
 	// Row Gap 0
 	&__row-gap-0 {
 		grid-row-gap: 0;
@@ -61,11 +66,6 @@
 		grid-row-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
 	// Columns 6
 	&__columns-6 {
 		grid-template-columns: repeat(2, 1fr);
@@ -77,6 +77,14 @@
 		&__columns-3,
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
+
+			> [start] {
+				grid-column-start: 1;
+			}
+
+			> [end] {
+				grid-column-end: -1;
+			}
 		}
 
 		&__columns-6 {
@@ -84,8 +92,8 @@
 		}
 	}
 
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
+	// Media Queries - 1054px
+	@media screen and ( min-width: 1054px ) {
 		// Columns 3
 		&__columns-3 {
 			grid-template-columns: repeat(3, 1fr);
@@ -94,6 +102,14 @@
 		// Columns 4
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
+
+			> [start="2"] {
+				grid-column-start: 2;
+			}
+
+			> [end="4"] {
+				grid-column-end: 4;
+			}
 		}
 
 		// Columns 6
@@ -116,6 +132,44 @@
 	> * {
 		margin-bottom: 0 !important;
 		margin-top: 0 !important;
+		> h1:first-child,
+		> h2:first-child,
+		> h3:first-child,
+		> h4:first-child,
+		> h5:first-child,
+		> h6:first-child {
+			margin-top: 0;
+		}
+	}
+
+	// Borders
+	&__borders {
+		grid-gap: 0 !important;
+		> * {
+			border-bottom: 1px solid wp-colors.$gray-300;
+			&:last-child {
+				border-bottom: none;
+			}
+			@media screen and ( min-width: 744px ) {
+				border-bottom: none;
+				border-right: 1px solid wp-colors.$gray-300;
+				&:last-child {
+					border-right: none;
+				}
+			}
+		}
+		&.newspack-grid__gutter-8 > * {
+			padding: 8px;
+		}
+		&.newspack-grid__gutter-16 > * {
+			padding: 16px;
+		}
+		&.newspack-grid__gutter-32 > * {
+			padding: 32px;
+		}
+		&.newspack-grid__gutter-64 > * {
+			padding: 64px;
+		}
 	}
 
 	.components-base-control {
@@ -163,4 +217,4 @@
 	&__tbody + &__tbody {
 		margin-top: -32px;
 	}
-}
+}

package/src/index.js

@@ -2,13 +2,19 @@ export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
+export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as ButtonCard } from './button-card';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
+export { default as CardSettingsGroup } from './card-settings-group';
+export { default as CardSortableList } from './card-sortable-list';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
+export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
+export { default as Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';

package/src/modal/index.js

@@ -18,12 +18,21 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-function Modal( { className, isWide, isNarrow, hideTitle, ...otherProps }, ref ) {
+const sizeClassMap = {
+	small: 'newspack-modal--size-small',
+	medium: 'newspack-modal--size-medium',
+	large: 'newspack-modal--size-large',
+	'x-large': 'newspack-modal--size-x-large',
+	full: 'newspack-modal--size-full',
+};
+
+const getSizeClassName = size => sizeClassMap[ size ] || sizeClassMap.medium;
+
+function Modal( { className, size = 'medium', hideTitle, ...otherProps }, ref ) {
 	const classes = classnames(
 		'newspack-modal',
-		isWide && 'newspack-modal--wide',
-		isNarrow && 'newspack-modal--narrow',
 		hideTitle && 'newspack-modal--hide-title', // Note: also hides the X close button.
+		getSizeClassName( size ),
 		className
 	);
 

package/src/modal/style.scss

@@ -12,20 +12,37 @@
 	--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};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
-	@media screen and ( min-width: 744px ) {
-		max-width: 680px;
-		width: 680px;
+	border-radius: 8px;
+	margin: auto;
+	max-height: calc(100% - 64px);
+	max-width: 512px;
+	width: calc(100% - 64px);
 
-		&--wide {
-			max-width: 1168px;
-			width: 1168px;
+	&--size-small {
+		max-width: 384px;
+
+		&.newspack-modal--hide-title {
+			max-width: 350px;
 		}
 	}
 
-	&--narrow {
-		max-width: 360px;
-		width: 360px;
+	&--size-medium {
+		max-width: 512px;
+	}
+
+	&--size-large {
+		max-width: 840px;
+	}
+
+	&--size-x-large {
+		max-width: calc(var(--newspack-wizard-section-width) + 64px)
+	}
+
+	&--size-full {
+		max-width: 100%;
 	}
 
 	&--hide-title {
@@ -39,8 +56,15 @@
 		}
 	}
 
-	@media screen and ( min-width: 960px ) {
-		max-height: calc(100% - 128px);
+	&--destructive {
+		.components-button.is-primary {
+			background-color: colors.$error-500;
+			color: colors.$neutral-000;
+			&:hover,
+			&:focus {
+				background-color: colors.$error-600;
+			}
+		}
 	}
 
 	// Links
@@ -60,8 +84,14 @@
 	}
 
 	.components-modal__content {
-		> *:last-child {
-			margin-bottom: 0;
+		> * {
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 }

package/src/newspack-icon/style.scss

@@ -1,20 +1,22 @@
+@use '../../../colors/colors.module.scss' as colors;
+
 /**
  * Newspack Icon
  */
 
 .newspack-icon {
-	background: var(--wp-admin-theme-color);
+	background: colors.$primary-600;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 	}
 
 	&--simple {
 		background: none;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 		padding: 0;
 	}
 

package/src/popover/style.scss

@@ -75,7 +75,7 @@
 		}
 
 		.screen-reader-text {
-			display: flex;
+			opacity: 0;
 		}
 
 		.newspack-select-control {

package/src/section-header/index.js

@@ -5,12 +5,15 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
+import { Tooltip } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Icon, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Grid } from '..';
+import { Badge, Button, Grid } from '..';
 import './style.scss';
 
 /**
@@ -22,14 +25,20 @@ import classnames from 'classnames';
  * Represents a section header component.
  *
  * @typedef {Object} SectionHeaderProps
- * @property {boolean}           [centered=false] - Indicates if the header is centered.
- * @property {?string}           [className=null] - Additional CSS class name.
- * @property {string|Function|*} [description]    - Description of the section.
- * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
- * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
- * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
- * @property {string}            title            - The title of the section.
- * @property {?string}           [id=null]        - Optional ID for the header element.
+ * @property {string}             [backNav='']       - URL to navigate back to.
+ * @property {string|string[]}    [badge]            - Badge to display in the header.
+ * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {boolean}            [centered=false]   - Indicates if the header is centered.
+ * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {string|Function|*}  [icon]             - Icon to display in the header.
+ * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
+ * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
+ * @property {string}             title              - The title of the section.
+ * @property {?string}            [id=null]          - Optional ID for the header element.
+ * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
  */
 
 /**
@@ -38,14 +47,21 @@ import classnames from 'classnames';
  * @param {SectionHeaderProps} props - The properties for the section header.
  */
 const SectionHeader = ( {
+	backNav = '',
+	badges,
 	centered = false,
 	className = null,
 	description = '',
 	heading = 2,
+	icon = null,
 	isWhite = false,
 	noMargin = false,
+	pageHeader = false,
 	title,
 	id = null,
+	primaryAction,
+	secondaryAction,
+	children = null,
 } ) => {
 	// If id is in the URL as a scrollTo param, scroll to it on render.
 	const ref = useRef();
@@ -65,20 +81,63 @@ const SectionHeader = ( {
 		centered && 'newspack-section-header--is-centered',
 		isWhite && 'newspack-section-header--is-white',
 		noMargin && 'newspack-section-header--no-margin',
-		className
+		pageHeader && 'newspack-section-header--page-header'
 	);
 
-	const HeadingTag = `h${ heading }`;
+	const HeadingTag = pageHeader ? 'h1' : `h${ heading }`;
 
 	return (
-		<div id={ id } className="newspack-section-header__container" ref={ ref }>
+		<div
+			id={ id }
+			className={ classnames(
+				'newspack-section-header__container',
+				backNav && 'newspack-section-header--has-back-nav',
+				primaryAction && 'newspack-section-header--has-primary-action',
+				className
+			) }
+			ref={ ref }
+		>
 			<Grid columns={ 1 } gutter={ 8 } className={ classes }>
-				{ typeof title === 'string' && <HeadingTag>{ title }</HeadingTag> }
+				{ icon && (
+					<div className="newspack-section-header__icon">
+						<Icon icon={ icon } size={ 48 } />
+					</div>
+				) }
+				{ backNav && (
+					<div className="newspack-section-header__back-nav">
+						<Tooltip text={ __( 'Go back', 'newspack-plugin' ) }>
+							<Button href={ backNav } icon={ chevronLeft } variant="tertiary" />
+						</Tooltip>
+					</div>
+				) }
+				{ typeof title === 'string' && (
+					<div className="newspack-section-header__title-container">
+						<HeadingTag>{ title }</HeadingTag>
+						{ badges?.length
+							? badges.map( ( badge, i ) => <Badge key={ i } text={ badge.label } level={ badge.level || 'default' } /> )
+							: null }
+						{ secondaryAction && (
+							<div className="newspack-section-header__secondary-action">
+								<Button variant="link" href={ secondaryAction.href } onClick={ secondaryAction.action }>
+									{ secondaryAction.label }
+								</Button>
+							</div>
+						) }
+					</div>
+				) }
 				{ typeof title === 'function' && <HeadingTag>{ title() }</HeadingTag> }
 				{ description && typeof description === 'string' && <p>{ description }</p> }
 				{ typeof description === 'function' && <p>{ description() }</p> }
 				{ description && typeof description !== 'string' && typeof description !== 'function' && <p>{ description }</p> }
+				{ children && <div className="newspack-section-header__children">{ children }</div> }
 			</Grid>
+			{ primaryAction && (
+				<div className="newspack-section-header__primary-action">
+					<Button href={ primaryAction.href } variant="primary" onClick={ primaryAction.action }>
+						{ primaryAction.label }
+					</Button>
+				</div>
+			) }
 		</div>
 	);
 };

package/src/section-header/style.scss

@@ -3,21 +3,58 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
+	flex: 1;
 	margin: 64px 0 32px;
 
-	&__container:not(:first-child) {
-		margin-top: 48px;
+	&__container {
+		position: relative;
+		&:not(:first-child) {
+			margin-top: 48px;
+		}
+		&.newspack-section-header--has-primary-action {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+			@media (min-width: 782px) {
+				align-items: flex-start;
+				flex-direction: row;
+			}
+		}
+		&.newspack-section-header--has-back-nav {
+			--back-nav-button-size: 36px;
+			margin-left: calc(var(--back-nav-button-size) + 8px);
+			@media (min-width: 782px) {
+				margin-left: 0;
+			}
+		}
+	}
+
+	&__back-nav {
+		left: calc((var(--back-nav-button-size) + 8px) * -1);
+		position: absolute;
+		top: calc(50% - (var(--back-nav-button-size) / 2));
+		a,
+		button {
+			color: inherit !important;
+		}
 	}
 
-	&--no-margin,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+		margin: 0 !important;
+	}
+
+	&--no-margin {
 		margin: 0 !important;
 	}
 
@@ -25,7 +62,7 @@
 		text-align: center;
 	}
 
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+	&:not( #{&}--no-margin ) + *:not( #{&} ):not(.newspack-wizard__section-header):not(.newspack-section-header__primary-action) {
 		margin-top: -16px !important;
 	}
 
@@ -39,7 +76,75 @@
 		color: wp-colors.$gray-700;
 	}
 
+	&__title-container {
+		align-items: baseline;
+		display: flex;
+		gap: 8px;
+
+		.newspack-badge {
+			transform: translateY(-4px);
+		}
+	}
+
+	&__primary-action {
+		@media (min-width: 782px) {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+	}
+
+	&__secondary-action {
+		display: flex;
+		margin-left: 8px;
+	}
+
+	&__children {
+		margin-top: 32px;
+		width: 100%;
+		.newspack-button-card:not(.grouped) {
+			margin-bottom: 0;
+			& + .newspack-button-card:not(.grouped) {
+				margin-top: 16px;
+			}
+		}
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}
+	&.newspack-section-header--page-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		margin-right: auto;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6,
+		> p {
+			text-align: center;
+		}
+		.newspack-section-header__icon {
+			background-color: var(--wp-admin-theme-color-lighter-10);
+			border-radius: 100%;
+			display: grid;
+			height: 80px;
+			margin-bottom: 8px !important;
+			width: 80px;
+			place-items: center;
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+		h1 {
+			font-size: 1.25rem;
+			font-weight: 500;
+			line-height: 1.5;
+		}
+	}
 }

package/src/style.scss

@@ -9,6 +9,8 @@
 	--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};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 }
 
 // Buttons Card

package/src/waiting/index.js

@@ -23,11 +23,12 @@ class Waiting extends Component {
 	 * Render
 	 */
 	render() {
-		const { className, isRight, isLeft, isCenter, ...otherProps } = this.props;
+		const { className, isRight, isLeft, isCenter, noMargin, ...otherProps } = this.props;
 		const classes = classnames( 'newspack-waiting', className, {
 			'is-right': isRight,
 			'is-left': isLeft,
 			'is-center': isCenter,
+			'no-margin': noMargin,
 		} );
 		return <Spinner className={ classes } { ...otherProps } />;
 	}

package/src/waiting/style.scss

@@ -24,4 +24,8 @@
 	&.is-center {
 		margin: auto;
 	}
+
+	&.no-margin {
+		margin: 0;
+	}
 }