newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -51,6 +51,10 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 			padding-bottom: 136px;
 		}
 	}
+
+	.components-popover__content {
+		min-width: 192px;
+	}
 }
 
 // Styling for wizards that are admin-header-only.
@@ -81,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;
@@ -174,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;

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

@@ -65,18 +65,38 @@
 			}
 		}
 		&__inner {
-			flex: 1;
+			flex: 1 1 100%;
 		}
 		&__actions {
 			align-items: center;
 			display: flex;
-			flex: 1 1 auto;
 			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;
 		display: flex;
@@ -149,7 +169,15 @@
 	}
 
 	&__section-header {
-		margin-bottom: 32px;
+		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 {
@@ -180,6 +208,16 @@
 				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

@@ -4,29 +4,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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.
  *
@@ -37,19 +36,23 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @param {string}      props.position - The snackbar position.
  * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
  * @return {JSX.Element} The component.
- */const WizardSnackbar = ({
-  children,
-  position = 'bottom-left',
-  type = 'info',
-  actions = [],
-  ...props
-}) => {
-  const className = (0, _classnames.default)('newspack-wizard__snackbar', props.className, `newspack-wizard__snackbar--${position}`, `newspack-wizard__snackbar--${type}`);
-  const {
-    removeNotice,
-    resetNotices
-  } = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE);
-  const onRemove = () => {
+ */
+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();
     }
@@ -59,12 +62,12 @@ var _jsxRuntime = require("react/jsx-runtime");
       resetNotices();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Snackbar, {
-    className: className,
-    ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Snackbar, _objectSpread(_objectSpread({
+    className: className
+  }, props), {}, {
     onRemove: onRemove,
     actions: actions,
     children: children
-  });
+  }));
 };
-var _default = exports.default = WizardSnackbar;
+var _default = exports["default"] = WizardSnackbar;