newspack-components 4.2.0 → 4.3.0

package/dist/esm/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/dist/esm/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/dist/esm/waiting/index.js

@@ -28,12 +28,14 @@ class Waiting extends Component {
       isRight,
       isLeft,
       isCenter,
+      noMargin,
       ...otherProps
     } = this.props;
     const classes = classnames('newspack-waiting', className, {
       'is-right': isRight,
       'is-left': isLeft,
-      'is-center': isCenter
+      'is-center': isCenter,
+      'no-margin': noMargin
     });
     return /*#__PURE__*/_jsx(Spinner, {
       className: classes,

package/dist/esm/waiting/style.scss

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

package/dist/esm/web-preview/index.js

@@ -3,8 +3,8 @@
  */
 import { Component, createRef, Fragment, createPortal } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { closeSmall, desktop, mobile, tablet } from '@wordpress/icons';
-import { Button, ButtonGroup } from '@wordpress/components';
+import { close, desktop, mobile, tablet, check } from '@wordpress/icons';
+import { Button, DropdownMenu, MenuItem } from '@wordpress/components';
 
 /**
  * Internal dependencies.
@@ -16,7 +16,7 @@ import './style.scss';
  * External dependencies.
  */
 import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
 
 /**
@@ -47,24 +47,63 @@ class WebPreview extends Component {
   }
 
   /**
-   * Add or remove applicable body classes
+   * Add or remove applicable body classes and keyboard event listeners
    */
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
     if (this.state.isPreviewVisible === true) {
       document.body.classList.add('newspack-web-preview--open');
+      if (prevState.isPreviewVisible === false) {
+        // Add event listener when modal opens
+        document.addEventListener('keydown', this.handleKeyDown);
+      }
     } else {
       document.body.classList.remove('newspack-web-preview--open');
+      if (prevState.isPreviewVisible === true) {
+        // Remove event listener when modal closes
+        document.removeEventListener('keydown', this.handleKeyDown);
+      }
     }
   }
 
+  /**
+   * Clean up event listeners on unmount
+   */
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.body.classList.remove('newspack-web-preview--open');
+  }
+
+  /**
+   * Handle keyboard events
+   */
+  handleKeyDown = event => {
+    if (event.key === 'Escape' && this.state.isPreviewVisible) {
+      this.closePreview();
+    }
+  };
+
+  /**
+   * Close the preview modal
+   */
+  closePreview = () => {
+    const {
+      onClose = () => {}
+    } = this.props;
+    onClose();
+    this.setState({
+      isPreviewVisible: false,
+      loaded: false
+    });
+  };
+
   /**
    * Create JSX for the modal
    */
   getWebPreviewModal = () => {
     const {
       beforeLoad = () => {},
-      onClose = () => {},
-      url
+      url,
+      title
     } = this.props;
     const {
       device,
@@ -75,6 +114,12 @@ class WebPreview extends Component {
       return null;
     }
     const classes = classnames('newspack-web-preview', device, loaded && 'is-loaded');
+    let icon = mobile;
+    if (device === 'desktop') {
+      icon = desktop;
+    } else if (device === 'tablet') {
+      icon = tablet;
+    }
     beforeLoad();
     return createPortal(/*#__PURE__*/_jsx("div", {
       className: classes,
@@ -82,45 +127,59 @@ class WebPreview extends Component {
         className: "newspack-web-preview__interior",
         children: [/*#__PURE__*/_jsxs("div", {
           className: "newspack-web-preview__toolbar",
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [title && /*#__PURE__*/_jsx("div", {
             className: "newspack-web-preview__toolbar-left",
-            children: /*#__PURE__*/_jsxs(ButtonGroup, {
-              children: [/*#__PURE__*/_jsx(Button, {
-                onClick: () => this.setState({
-                  device: 'desktop'
-                }),
-                variant: 'desktop' === device && 'primary',
-                icon: desktop,
-                label: __('Preview Desktop Size', 'newspack-plugin')
-              }), /*#__PURE__*/_jsx(Button, {
-                onClick: () => this.setState({
-                  device: 'tablet'
-                }),
-                variant: 'tablet' === device && 'primary',
-                icon: tablet,
-                label: __('Preview Tablet Size', 'newspack-plugin')
-              }), /*#__PURE__*/_jsx(Button, {
-                onClick: () => this.setState({
-                  device: 'phone'
-                }),
-                variant: 'phone' === device && 'primary',
-                icon: mobile,
-                label: __('Preview Phone Size', 'newspack-plugin')
-              })]
+            children: /*#__PURE__*/_jsx("h3", {
+              children: title
             })
-          }), /*#__PURE__*/_jsx("div", {
+          }), /*#__PURE__*/_jsxs("div", {
             className: "newspack-web-preview__toolbar-right",
-            children: /*#__PURE__*/_jsx(Button, {
-              onClick: () => {
-                onClose();
-                this.setState({
-                  isPreviewVisible: false,
-                  loaded: false
-                });
-              },
-              icon: closeSmall,
+            children: [/*#__PURE__*/_jsx(DropdownMenu, {
+              icon: icon,
+              label: __('Preview Size', 'newspack-plugin'),
+              children: ({
+                onClose: onDropdownClose
+              }) => /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx(MenuItem, {
+                  icon: device === 'desktop' ? check : null,
+                  role: "menuitemradio",
+                  isSelected: device === 'desktop',
+                  onClick: () => {
+                    this.setState({
+                      device: 'desktop'
+                    });
+                    onDropdownClose();
+                  },
+                  children: __('Desktop', 'newspack-plugin')
+                }), /*#__PURE__*/_jsx(MenuItem, {
+                  icon: device === 'tablet' ? check : null,
+                  role: "menuitemradio",
+                  isSelected: device === 'tablet',
+                  onClick: () => {
+                    this.setState({
+                      device: 'tablet'
+                    });
+                    onDropdownClose();
+                  },
+                  children: __('Tablet', 'newspack-plugin')
+                }), /*#__PURE__*/_jsx(MenuItem, {
+                  icon: device === 'phone' ? check : null,
+                  role: "menuitemradio",
+                  isSelected: device === 'phone',
+                  onClick: () => {
+                    this.setState({
+                      device: 'phone'
+                    });
+                    onDropdownClose();
+                  },
+                  children: __('Phone', 'newspack-plugin')
+                })]
+              })
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: this.closePreview,
+              icon: close,
               label: __('Close Preview', 'newspack-plugin')
-            })
+            })]
           })]
         }), /*#__PURE__*/_jsxs("div", {
           className: "newspack-web-preview__content",

package/dist/esm/web-preview/style.scss

@@ -13,8 +13,10 @@
 	--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};
 
-	background: #{colors.$neutral-700};
+	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -27,11 +29,11 @@
 	z-index: 99999;
 
 	&.phone iframe {
-		max-width: 380px;
+		max-width: 360px;
 	}
 
 	&.tablet iframe {
-		max-width: 768px;
+		max-width: 780px;
 	}
 
 	&.is-loaded iframe {
@@ -46,7 +48,7 @@
 		animation: appear-animation 125ms ease-in-out;
 		animation-fill-mode: forwards;
 		background: white;
-		border-radius: 2px;
+		border-radius: 8px;
 		overflow: hidden;
 		height: 100%;
 		width: 100%;
@@ -54,19 +56,18 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc(100% - 49px);
+		height: calc(100% - 72px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
 
 		iframe {
-			background: #fff;
+			background: white;
 			display: block;
 			height: 100%;
 			margin: 0 auto;
 			max-width: 100%;
 			opacity: 0;
-			outline: 1px solid wp-colors.$gray-300;
 			padding: 0;
 			pointer-events: all;
 			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
@@ -85,62 +86,28 @@
 	}
 
 	&__toolbar {
+		align-items: center;
 		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
-		padding: 6px;
+		gap: 16px;
+		justify-content: space-between;
+		min-height: 71px;
+		padding: 12px 24px;
 
 		&-left {
-			flex: 0 0 auto;
+			display: flex;
 
-			.newspack-button-group {
-				display: flex;
+			h3 {
 				margin: 0;
 			}
-
-			.newspack-button {
-				display: none;
-				padding: 0 !important;
-
-				&.is-selected {
-					background: var(--wp-admin-theme-color);
-					color: white;
-
-					&:active,
-					&:focus,
-					&:hover {
-						box-shadow: none !important;
-						color: white;
-						outline: none;
-					}
-
-					&:focus {
-						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
-					}
-				}
-
-				@media screen and ( min-width: 528px ) {
-					&.is-phone,
-					&.is-tablet {
-						display: flex;
-					}
-				}
-
-				@media screen and ( min-width: 816px ) {
-					&.is-desktop {
-						display: flex;
-					}
-				}
-			}
 		}
 
 		&-right {
-			display: flex;
-			flex: 1;
-			justify-content: flex-end;
-		}
-
-		.newspack-button {
-			border-radius: 0 !important;
+			display: grid;
+			gap: 8px;
+			grid-template-columns: repeat(2, 1fr);
+			justify-self: end;
+			margin-left: auto;
 		}
 	}
 }

package/dist/esm/with-wizard/index.js

@@ -318,7 +318,7 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         callback
       } = this.state.confirmation;
       return message && callback && /*#__PURE__*/_jsxs(Modal, {
-        isNarrow: true,
+        size: "small",
         hideTitle: !title,
         title: title,
         onRequestClose: () => this.setState({

package/dist/esm/with-wizard/style.scss

@@ -3,11 +3,21 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 // Styling for full-page-react Wizards (ignoring admin-header-only wizards).
 body.newspack-wizard-page:not(.newspack-admin-header) {
-
-	background: white;
+	--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};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-components-color-accent: #{colors.$primary-600};
+
+	background: #{wp-colors.$white};
 
 	// Reset Padding
 	#wpcontent {
@@ -18,6 +28,14 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		@media screen and ( min-width: 600px ) {
+			min-height: calc(100vh - 46px);
+		}
+
+		@media screen and ( min-width: 783px ) {
+			min-height: calc(100vh - 32px);
+		}
+
 		// For admin notices directly ">" at top of page above the Wizard header.
 		// PHP code should hide these notices, but just incase add this style.
 		> .notice {
@@ -29,8 +47,8 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 			padding-bottom: 202px;
 		}
 
-		@media screen and ( min-width: 1128px ) {
-			padding-bottom: 168px;
+		@media screen and ( min-width: 1054px ) {
+			padding-bottom: 136px;
 		}
 	}
 }
@@ -134,7 +152,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 68px auto 0;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: calc(100% - ( 32px * 2 ));
 
 		@media screen and ( min-width: 744px ) {
@@ -250,7 +268,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 0 auto;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: 100%;
 
 		@media screen and ( min-width: 744px ) {

package/dist/esm/with-wizard-screen/style.scss

@@ -13,6 +13,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};
 
 	color: wp-colors.$gray-900;
 
@@ -44,12 +46,39 @@
 	}
 
 	&__header {
+		align-items: center;
 		background: white;
+		border-bottom: 1px solid wp-colors.$gray-300;
+		display: flex;
+		.newspack-wizard__fixed-header & {
+			position: sticky;
+			top: 0;
+			width: 100%;
+			z-index: 1000;
+			.admin-bar & {
+				@media only screen and ( min-width: 601px ) {
+					top: 46px;
+				}
+				@media only screen and ( min-width: 782px ) {
+					top: 32px;
+				}
+			}
+		}
+		&__inner {
+			flex: 1;
+		}
+		&__actions {
+			align-items: center;
+			display: flex;
+			flex: 1 1 auto;
+			gap: 8px;
+			justify-content: flex-end;
+			padding: 0 24px 0 0;
+		}
 	}
 
 	&__title {
 		align-items: center;
-		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
 
 		h2 {
@@ -62,7 +91,7 @@
 			display: flex;
 			padding: 0 24px;
 
-			span {
+			> span {
 				color: wp-colors.$gray-700;
 				display: none;
 				margin-left: 8px;
@@ -119,14 +148,14 @@
 		}
 	}
 
+	&__section-header {
+		margin-bottom: 32px;
+	}
+
 	&__content {
 		margin: 0 auto;
-		max-width: 1208px;
-		padding: 0 16px;
-
-		@media screen and ( min-width: 744px ) {
-			padding: 40px 84px;
-		}
+		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
+		padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
 
 		// Typography
 
@@ -141,11 +170,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;