newspack-components 4.2.0 → 4.4.0-alpha.1

package/dist/cjs/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,10 +47,14 @@ 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;
 		}
 	}
+
+	.components-popover__content {
+		min-width: 192px;
+	}
 }
 
 // Styling for wizards that are admin-header-only.
@@ -63,37 +85,6 @@ svg {
 	}
 }
 
-// Blue Screen
-.newspack-wizard__blue {
-	#wpwrap {
-		background: var(--wp-admin-theme-color);
-	}
-
-	.newspack-footer {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		justify-content: center;
-
-		&__logo {
-			background: inherit;
-		}
-	}
-
-	#wpfooter {
-		color: white;
-
-		a {
-			color: inherit;
-
-			&:active,
-			&:focus,
-			&:hover {
-				opacity: 0.75;
-			}
-		}
-	}
-}
-
 // Loading
 .newspack-wizard__is-loading {
 	background: white;
@@ -134,7 +125,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 ) {
@@ -156,29 +147,6 @@ svg {
 		}
 	}
 
-	// Blue Screen
-	.newspack-wizard__blue & {
-		background: var(--wp-admin-theme-color);
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: white;
-			border-radius: 0;
-			box-shadow: 0;
-			height: 8px;
-			left: 0;
-			margin: 0;
-			position: absolute;
-			right: 100%;
-			top: 0;
-			width: auto;
-		}
-
-		&::after {
-			display: none;
-		}
-	}
-
 	// Quiet
 	&-quiet {
 		position: relative;
@@ -250,7 +218,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/cjs/with-wizard-screen/index.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = withWizardScreen;
+exports["default"] = withWizardScreen;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _ = require("../");
@@ -12,58 +13,52 @@ var _buttonProps = require("../button-props");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies
- */
-
-/**
+ */ /**
  * External dependencies
- */
-
-/**
+ */ /**
  * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
- */function withWizardScreen(WrappedComponent, {
-  hidePrimaryButton
-} = {}) {
-  const WrappedWithWizardScreen = props => {
-    const {
-      className,
-      buttonText,
-      buttonAction,
-      buttonDisabled,
-      headerText,
-      subHeaderText,
-      tabbedNavigation,
-      secondaryButtonText,
-      secondaryButtonAction,
-      renderAboveContent,
-      disableUpcomingInTabbedNavigation
-    } = props;
-    const retrievedButtonProps = (0, _buttonProps.buttonProps)(buttonAction);
-    const retrievedSecondaryButtonProps = (0, _buttonProps.buttonProps)(secondaryButtonAction);
-    const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? _.Handoff : _.Button;
-    const shouldRenderPrimaryButton = buttonText && buttonAction;
-    const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
-    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
-      isPrimary: true,
-      ...retrievedButtonProps,
-      ...overridingProps,
-      children: buttonText
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-      isPrimary: !buttonDisabled,
-      isSecondary: !!buttonDisabled,
-      disabled: buttonDisabled
-      // Allow overridingProps to set children.
-      // eslint-disable-next-line react/no-children-prop
-      ,
-      children: buttonText,
-      ...retrievedButtonProps,
-      ...overridingProps
-    });
+ */
+function withWizardScreen(WrappedComponent) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    hidePrimaryButton = _ref.hidePrimaryButton;
+  var WrappedWithWizardScreen = function WrappedWithWizardScreen(props) {
+    var className = props.className,
+      buttonText = props.buttonText,
+      buttonAction = props.buttonAction,
+      buttonDisabled = props.buttonDisabled,
+      headerText = props.headerText,
+      subHeaderText = props.subHeaderText,
+      tabbedNavigation = props.tabbedNavigation,
+      secondaryButtonText = props.secondaryButtonText,
+      secondaryButtonAction = props.secondaryButtonAction,
+      renderAboveContent = props.renderAboveContent,
+      disableUpcomingInTabbedNavigation = props.disableUpcomingInTabbedNavigation;
+    var retrievedButtonProps = (0, _buttonProps.buttonProps)(buttonAction);
+    var retrievedSecondaryButtonProps = (0, _buttonProps.buttonProps)(secondaryButtonAction);
+    var SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? _.Handoff : _.Button;
+    var shouldRenderPrimaryButton = buttonText && buttonAction;
+    var shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
+    var renderPrimaryButton = function renderPrimaryButton() {
+      var overridingProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return retrievedButtonProps.plugin ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, _objectSpread(_objectSpread(_objectSpread({
+        isPrimary: true
+      }, retrievedButtonProps), overridingProps), {}, {
+        children: buttonText
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, _objectSpread(_objectSpread({
+        isPrimary: !buttonDisabled,
+        isSecondary: !!buttonDisabled,
+        disabled: buttonDisabled
+        // Allow overridingProps to set children.
+        // eslint-disable-next-line react/no-children-prop
+        ,
+        children: buttonText
+      }, retrievedButtonProps), overridingProps));
+    };
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         debugMode: true
@@ -94,19 +89,20 @@ var _jsxRuntime = require("react/jsx-runtime");
         })
       }), tabbedNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
         disableUpcoming: disableUpcomingInTabbedNavigation,
-        items: tabbedNavigation.filter(item => !item.isHiddenInNav)
+        items: tabbedNavigation.filter(function (item) {
+          return !item.isHiddenInNav;
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('newspack-wizard newspack-wizard__content', className),
-        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
-          ...props,
+        className: (0, _classnames["default"])('newspack-wizard newspack-wizard__content', className),
+        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
           renderPrimaryButton: renderPrimaryButton
-        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        })), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "newspack-buttons-card",
-          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryCTAComponent, {
-            isSecondary: true,
-            ...retrievedSecondaryButtonProps,
+          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryCTAComponent, _objectSpread(_objectSpread({
+            isSecondary: true
+          }, retrievedSecondaryButtonProps), {}, {
             children: secondaryButtonText
-          })]
+          }))]
         })]
       })]
     });

package/dist/cjs/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,59 @@
 	}
 
 	&__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 1 100%;
+		}
+		&__actions {
+			align-items: center;
+			display: flex;
+			gap: 8px;
+			justify-content: flex-end;
+			padding: 0 24px 0 0;
+			> .newspack-wizard__header__actions__main {
+				display: none;
+			}
+			@media only screen and ( min-width: 782px ) {
+				flex: 1 1 auto;
+				> .newspack-wizard__header__actions__main {
+					display: flex;
+				}
+				&__more {
+					&--primary-only,
+					.newspack-wizard__header__actions__more__main {
+						display: none;
+					}
+				}
+			}
+		}
 	}
 
+	&__main {
+		overflow-x: hidden;
+		padding-bottom: 1px; /* Prevents borders from being cut off */
+	}
+
+
 	&__title {
 		align-items: center;
-		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
 
 		h2 {
@@ -62,7 +111,7 @@
 			display: flex;
 			padding: 0 24px;
 
-			span {
+			> span {
 				color: wp-colors.$gray-700;
 				display: none;
 				margin-left: 8px;
@@ -119,14 +168,22 @@
 		}
 	}
 
+	&__section-header {
+		margin: 0 auto 32px;
+		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
+		&:not(.newspack-section-header--has-primary-action) {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container + p {
+					max-width: 50%;
+				}
+			}
+		}
+	}
+
 	&__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,16 +198,26 @@
 
 		// 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;
 			}
 		}
+		&:not(.newspack-wizard__content--full-width) {
+			.newspack-dataviews {
+				margin-left: -24px;
+				margin-right: -24px;
+				@media (min-width: 380px) {
+					margin-left: -48px;
+					margin-right: -48px;
+				}
+			}
+		}
 	}
 
 	&__above-header {

package/dist/cjs/wizard/components/WizardError.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _i18n = require("@wordpress/i18n");
 var _data = require("@wordpress/data");
 var _ = require("../..");
@@ -17,36 +17,38 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies.
  */
 
-const parseError = ({
-  data,
-  message,
-  code
-}) => {
-  let level = 'fatal';
+var parseError = function parseError(_ref) {
+  var data = _ref.data,
+    message = _ref.message,
+    code = _ref.code;
+  var level = 'fatal';
   if (!!data && 'level' in data) {
     level = data.level;
   } else if ('rest_invalid_param' === code) {
     level = 'notice';
   }
   return {
-    message,
-    level
+    message: message,
+    level: level
   };
 };
-const WizardError = () => {
-  const error = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).getError());
+var WizardError = function WizardError() {
+  var error = (0, _data.useSelect)(function (select) {
+    return select(_store.WIZARD_STORE_NAMESPACE).getError();
+  });
   if (!error) {
     return null;
   }
-  const {
-    level,
-    message
-  } = parseError(error);
+  var _parseError = parseError(error),
+    level = _parseError.level,
+    message = _parseError.message;
   if ('fatal' === level) {
-    const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
+    var fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
       title: (0, _i18n.__)('Unrecoverable error'),
-      onRequestClose: fallbackURL ? () => window.location = fallbackURL : undefined,
+      onRequestClose: fallbackURL ? function () {
+        return window.location = fallbackURL;
+      } : undefined,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         noticeText: message,
         isError: true,
@@ -70,4 +72,4 @@ const WizardError = () => {
     rawHTML: true
   });
 };
-var _default = exports.default = WizardError;
+var _default = exports["default"] = WizardError;

package/dist/cjs/wizard/components/WizardSnackbar.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _components = require("@wordpress/components");
+var _data = require("@wordpress/data");
+var _store = require("../store");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "position", "type", "actions"];
+/**
+ * Snackbar.
+ */
+/**
+ * WordPress dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+/**
+ * External dependencies.
+ */
+/**
+ * WizardSnackbar component.
+ *
+ * @param {Object}      props          - The component props.
+ * @param {Object[]}    props.actions  - The actions to display in the snackbar.
+ * @param {JSX.Element} props.children - The component children.
+ * @param {Object}      props.props    - The component props. See: https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
+ * @param {string}      props.position - The snackbar position.
+ * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
+ * @return {JSX.Element} The component.
+ */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WizardSnackbar = function WizardSnackbar(_ref) {
+  var children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom-left' : _ref$position,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'info' : _ref$type,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var className = (0, _classnames["default"])('newspack-wizard__snackbar', props.className, "newspack-wizard__snackbar--".concat(position), "newspack-wizard__snackbar--".concat(type));
+  var _useDispatch = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    removeNotice = _useDispatch.removeNotice,
+    resetNotices = _useDispatch.resetNotices;
+  var onRemove = function onRemove() {
+    if (props.onRemove) {
+      props.onRemove();
+    }
+    if (props.id) {
+      removeNotice(props.id);
+    } else {
+      resetNotices();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Snackbar, _objectSpread(_objectSpread({
+    className: className
+  }, props), {}, {
+    onRemove: onRemove,
+    actions: actions,
+    children: children
+  }));
+};
+var _default = exports["default"] = WizardSnackbar;

package/dist/cjs/wizard/components/style.scss

@@ -0,0 +1,48 @@
+.newspack-wizard {
+	&__snackbar {
+		border-bottom: 2px solid transparent;
+		bottom: 16px;
+		left: 16px;
+		max-width: calc(100vw - 32px);
+		position: fixed;
+		z-index: 99999;
+		&--success {
+			border-color: var(--newspack-ui-color-success-60);
+		}
+		&--error {
+			border-color: var(--newspack-ui-color-error-60);
+		}
+		&--warning {
+			border-color: var(--newspack-ui-color-warning-40);
+		}
+		@media screen and ( min-width: 783px ) {
+			left: calc(36px + 16px); /* 36px for admin menu bar */
+		}
+		@media screen and ( min-width: 960px ) {
+			left: calc(160px + 16px); /* 160px for admin menu bar */
+		}
+		&.newspack-wizard__snackbar--bottom-right,
+		&.newspack-wizard__snackbar--top-right {
+			left: auto;
+			right: calc(16px);
+		}
+		&.newspack-wizard__snackbar--top-left,
+		&.newspack-wizard__snackbar--top-right {
+			bottom: auto;
+			top: calc(16px + 46px); /* 46px for admin bar */
+			@media screen and ( min-width: 783px ) {
+				top: calc(16px + 32px); /* 32px for admin bar */
+			}
+		}
+		a,
+		.components-button.is-link {
+			color: var(--newspack-ui-color-neutral-0);
+			cursor: pointer;
+			margin-left: 16px;
+			&:hover,
+			&:focus {
+				color: var(--newspack-ui-color-neutral-10);
+			}
+		}
+	}
+}