newspack-components 3.0.0-alpha.2 → 3.0.0-alpha.3

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

@@ -0,0 +1,282 @@
+/**
+ * With Wizard
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
+
+// Reset Padding of the Admin Page
+
+.toplevel_page_newspack:not(.menu-top),
+body[class*="newspack_page_newspack-"],
+body[class*="admin_page_newspack-"] {
+	background: white;
+
+	#wpcontent {
+		padding-left: 0;
+	}
+
+	#wpbody-content {
+		padding-bottom: 220px;
+		min-height: 100vh;
+
+		@media screen and ( min-width: 783px ) {
+			padding-bottom: 202px;
+		}
+
+		@media screen and ( min-width: 1128px ) {
+			padding-bottom: 168px;
+		}
+	}
+}
+
+svg {
+	&.newspack--error {
+		fill: wp-colors.$alert-red;
+		transform: rotate(180deg);
+	}
+	&.newspack--success {
+		fill: wp-colors.$alert-green;
+	}
+}
+
+// Blue Screen
+
+.newspack-wizard__blue {
+	#wpwrap {
+		background: colors.$primary-500;
+	}
+
+	.newspack-footer {
+		background: colors.$primary-500;
+		border-color: colors.$primary-500;
+		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;
+	cursor: wait;
+	inset: 0;
+	position: absolute;
+
+	> * {
+		display: none !important;
+	}
+
+	&::before,
+	&::after {
+		animation: loading 2s ease-in-out infinite;
+		content: "";
+		display: block;
+	}
+
+	&::before {
+		background: colors.$primary-500;
+		box-shadow:
+			24px 0 0 white,
+			69px 0 0 -15px wp-colors.$gray-900,
+			99px 0 0 -15px wp-colors.$gray-900,
+			129px 0 0 -15px wp-colors.$gray-900,
+			159px 0 0 -15px wp-colors.$gray-900,
+			189px 0 0 -15px wp-colors.$gray-900;
+		height: 60px;
+		width: 60px;
+	}
+
+	&::after {
+		background: wp-colors.$gray-900;
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
+			0 96px 0 0 wp-colors.$gray-700;
+		height: 24px;
+		margin: 68px auto 0;
+		max-width: 1040px;
+		width: calc(100% - ( 32px * 2 ));
+
+		@media screen and ( min-width: 744px ) {
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+			width: calc(100% - ( 64px * 2 ));
+		}
+
+		@media screen and ( min-width: 1224px ) {
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				512px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+			width: calc(100% - ( 64px * 2 ));
+		}
+	}
+
+	// Blue Screen
+	.newspack-wizard__blue & {
+		background: colors.$primary-500;
+
+		&::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;
+
+		&::before,
+		&::after {
+			content: "";
+			cursor: wait;
+			display: block;
+			left: 0;
+			position: fixed;
+			top: 46px;
+
+			@media screen and ( min-width: 783px ) {
+				top: 32px;
+				margin-left: 160px;
+
+				body.auto-fold & {
+					margin-left: 36px;
+				}
+			}
+
+			@media screen and ( min-width: 961px ) {
+				body.auto-fold & {
+					margin-left: 160px;
+				}
+
+				body.folded & {
+					margin-left: 36px;
+				}
+			}
+		}
+
+		&::before {
+			animation: loading-quiet 1.25s ease-in-out infinite;
+			background: colors.$primary-500;
+			height: 8px;
+			right: 100%;
+			z-index: 9999;
+		}
+
+		&::after {
+			background: rgba(white, 0.7);
+			bottom: 0;
+			right: 0;
+			z-index: 9998;
+		}
+	}
+}
+
+.newspack-wizard-section__is-loading {
+	background: white;
+	cursor: wait;
+	min-height: 150px;
+
+	> * {
+		display: none !important;
+	}
+
+	&::after {
+		animation: loading 2s ease-in-out infinite;
+		content: "";
+		display: block;
+		background: wp-colors.$gray-900;
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
+			0 96px 0 0 wp-colors.$gray-700;
+		height: 24px;
+		margin: 0 auto;
+		max-width: 1040px;
+		width: 100%;
+
+		@media screen and ( min-width: 744px ) {
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+		}
+
+		@media screen and ( min-width: 1224px ) {
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				520px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.1;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes loading-quiet {
+	0% {
+		left: 0;
+		right: 100%;
+	}
+
+	50% {
+		left: 0;
+		right: 0;
+	}
+
+	100% {
+		left: 100%;
+		right: 0;
+	}
+}

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

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { category } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
+import { buttonProps } from '../../../shared/js/';
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function withWizardScreen(WrappedComponent, {
+  hidePrimaryButton
+} = {}) {
+  const WrappedWithWizardScreen = props => {
+    const {
+      className,
+      buttonText,
+      buttonAction,
+      buttonDisabled,
+      headerText,
+      subHeaderText,
+      tabbedNavigation,
+      secondaryButtonText,
+      secondaryButtonAction,
+      renderAboveContent,
+      disableUpcomingInTabbedNavigation
+    } = props;
+    const retrievedButtonProps = buttonProps(buttonAction);
+    const retrievedSecondaryButtonProps = buttonProps(secondaryButtonAction);
+    const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? Handoff : Button;
+    const shouldRenderPrimaryButton = buttonText && buttonAction;
+    const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
+    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? /*#__PURE__*/_jsx(Handoff, {
+      isPrimary: true,
+      ...retrievedButtonProps,
+      ...overridingProps,
+      children: buttonText
+    }) : /*#__PURE__*/_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
+    });
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
+        debugMode: true
+      }), /*#__PURE__*/_jsx("div", {
+        className: "newspack-wizard__header",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "newspack-wizard__header__inner",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "newspack-wizard__title",
+            children: [/*#__PURE__*/_jsx(Button, {
+              isLink: true,
+              href: newspack_urls.dashboard,
+              label: __('Return to Dashboard', 'newspack-plugin'),
+              showTooltip: true,
+              icon: category,
+              iconSize: 36,
+              children: /*#__PURE__*/_jsx(NewspackIcon, {
+                size: 36
+              })
+            }), /*#__PURE__*/_jsxs("div", {
+              children: [headerText && /*#__PURE__*/_jsx("h2", {
+                children: headerText
+              }), subHeaderText && /*#__PURE__*/_jsx("span", {
+                children: subHeaderText
+              })]
+            })]
+          })
+        })
+      }), tabbedNavigation && /*#__PURE__*/_jsx(TabbedNavigation, {
+        disableUpcoming: disableUpcomingInTabbedNavigation,
+        items: tabbedNavigation.filter(item => !item.isHiddenInNav)
+      }), /*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs("div", {
+        className: classnames('newspack-wizard newspack-wizard__content', className),
+        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/_jsx(WrappedComponent, {
+          ...props,
+          renderPrimaryButton: renderPrimaryButton
+        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && /*#__PURE__*/_jsxs("div", {
+          className: "newspack-buttons-card",
+          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && /*#__PURE__*/_jsx(SecondaryCTAComponent, {
+            isSecondary: true,
+            ...retrievedSecondaryButtonProps,
+            children: secondaryButtonText
+          })]
+        })]
+      })]
+    });
+  };
+  return WrappedWithWizardScreen;
+}

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

@@ -0,0 +1,160 @@
+/**
+ * With Wizard Screen
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
+
+.newspack-wizard {
+	// Color
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+
+	color: wp-colors.$gray-900;
+
+	// Headings
+	h1,
+	h2,
+	h3 {
+		color: inherit;
+	}
+
+	h1 {
+		line-height: 1.4;
+	}
+
+	// Links
+	a {
+		color: var(--wp-admin-theme-color);
+
+		&:active,
+		&:focus,
+		&:hover {
+			color: var(--wp-admin-theme-color-darker-10);
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			outline: 3px solid transparent;
+		}
+	}
+
+	&__header {
+		background: white;
+	}
+
+	&__title {
+		align-items: center;
+		border-bottom: 1px solid wp-colors.$gray-300;
+		display: flex;
+
+		h2 {
+			margin: 0;
+			padding: 0;
+		}
+
+		> div {
+			align-items: baseline;
+			display: flex;
+			padding: 0 24px;
+
+			span {
+				color: wp-colors.$gray-700;
+				display: none;
+				margin-left: 8px;
+
+				@media screen and ( min-width: 744px ) {
+					display: block;
+				}
+			}
+		}
+
+		svg {
+			fill: white;
+			margin: 0 !important;
+
+			&.newspack-icon {
+				flex: 0 0 36px;
+				margin-bottom: -1px !important;
+			}
+
+			&:not(.newspack-icon) {
+				background: colors.$primary-500;
+				left: 50%;
+				margin: -28px 0 0 -28px !important;
+				opacity: 0;
+				padding: 10px;
+				position: absolute;
+				top: 50%;
+				transition: opacity 125ms ease-in-out;
+			}
+		}
+
+		.components-button.has-icon {
+			padding: 0;
+			position: relative;
+
+			&:hover {
+				svg {
+					opacity: 1;
+				}
+			}
+
+			&:focus-visible {
+				outline: none !important;
+
+				&::before {
+					border: 2px solid white;
+					border-radius: 2px;
+					content: "";
+					display: block;
+					inset: 6px 6px 5px;
+					position: absolute;
+				}
+			}
+		}
+	}
+
+	&__content {
+		margin: 0 auto;
+		max-width: 1208px;
+		padding: 0 16px;
+
+		@media screen and ( min-width: 744px ) {
+			padding: 32px 84px;
+		}
+
+		// Typography
+
+		strong {
+			font-weight: bold;
+		}
+
+		small {
+			font-size: 12px;
+			line-height: 1.4;
+		}
+
+		// Thematic Break
+
+		hr {
+			background: wp-colors.$gray-300;
+			border: 0;
+			height: 1px;
+			margin: 48px 0;
+
+			@media screen and ( min-width: 744px ) {
+				margin: 64px 0;
+			}
+		}
+	}
+
+	&__above-header {
+		border-radius: 0;
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies.
+ */
+import { Button, Card, Modal, Notice } from '../..';
+import { WIZARD_STORE_NAMESPACE } from '../store';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const parseError = ({
+  data,
+  message,
+  code
+}) => {
+  let level = 'fatal';
+  if (!!data && 'level' in data) {
+    level = data.level;
+  } else if ('rest_invalid_param' === code) {
+    level = 'notice';
+  }
+  return {
+    message,
+    level
+  };
+};
+const WizardError = () => {
+  const error = useSelect(select => select(WIZARD_STORE_NAMESPACE).getError());
+  if (!error) {
+    return null;
+  }
+  const {
+    level,
+    message
+  } = parseError(error);
+  if ('fatal' === level) {
+    const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
+    return /*#__PURE__*/_jsxs(Modal, {
+      title: __('Unrecoverable error'),
+      onRequestClose: fallbackURL ? () => window.location = fallbackURL : undefined,
+      children: [/*#__PURE__*/_jsx(Notice, {
+        noticeText: message,
+        isError: true,
+        rawHTML: true
+      }), fallbackURL && /*#__PURE__*/_jsx(Card, {
+        buttonsCard: true,
+        noBorder: true,
+        className: "justify-end",
+        children: /*#__PURE__*/_jsx(Button, {
+          isPrimary: true,
+          href: fallbackURL,
+          children: __('Return to Dashboard', 'newspack-plugin')
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Notice, {
+    isError: true,
+    className: "newspack-wizard__above-header",
+    noticeText: message,
+    rawHTML: true
+  });
+};
+export default WizardError;