newspack-components 2.0.3 → 2.2.0

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * WordPress dependencies.
  */
@@ -7,34 +6,36 @@ import { Component, createRef, Fragment, createPortal } from '@wordpress/element
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { closeSmall, desktop, mobile, tablet } from '@wordpress/icons';
+import { Button, ButtonGroup } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
-import { Button, ButtonGroup, Waiting } from '../';
+import { Waiting } from '../';
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
+
 /**
  * Web Preview. A component to preview a website in an iframe, with device sizing options.
  */
-
 class WebPreview extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       device: 'desktop',
       loaded: false,
       isPreviewVisible: false
     });
-
+    /**
+     * Create JSX for the modal
+     */
     _defineProperty(this, "getWebPreviewModal", () => {
       const {
         beforeLoad = () => {},
@@ -46,12 +47,10 @@ class WebPreview extends Component {
         loaded,
         isPreviewVisible
       } = this.state;
-
       if (!this.modalDOMElement || !isPreviewVisible) {
         return null;
       }
-
-      const classes = classnames('newspack-web-preview__container', device, loaded && 'newspack-web-preview__is-loaded');
+      const classes = classnames('newspack-web-preview', device, loaded && 'is-loaded');
       beforeLoad();
       return createPortal(_jsx("div", {
         className: classes,
@@ -66,26 +65,23 @@ class WebPreview extends Component {
                   onClick: () => this.setState({
                     device: 'desktop'
                   }),
-                  isSmall: true,
-                  className: classnames('is-desktop', 'desktop' === device && 'is-selected'),
+                  variant: 'desktop' === device && 'primary',
                   icon: desktop,
-                  label: __('Preview desktop size', 'newspack')
+                  label: __('Preview Desktop Size', 'newspack')
                 }), _jsx(Button, {
                   onClick: () => this.setState({
                     device: 'tablet'
                   }),
-                  isSmall: true,
-                  className: classnames('is-tablet', 'tablet' === device && 'is-selected'),
+                  variant: 'tablet' === device && 'primary',
                   icon: tablet,
-                  label: __('Preview tablet size', 'newspack')
+                  label: __('Preview Tablet Size', 'newspack')
                 }), _jsx(Button, {
                   onClick: () => this.setState({
                     device: 'phone'
                   }),
-                  isSmall: true,
-                  className: classnames('is-phone', 'phone' === device && 'is-selected'),
+                  variant: 'phone' === device && 'primary',
                   icon: mobile,
-                  label: __('Preview phone size', 'newspack')
+                  label: __('Preview Phone Size', 'newspack')
                 })]
               })
             }), _jsx("div", {
@@ -98,9 +94,8 @@ class WebPreview extends Component {
                     loaded: false
                   });
                 },
-                isSmall: true,
                 icon: closeSmall,
-                label: __('Close preview', 'newspack')
+                label: __('Close Preview', 'newspack')
               })
             })]
           }), _jsxs("div", {
@@ -125,35 +120,30 @@ class WebPreview extends Component {
         })
       }), this.modalDOMElement);
     });
-
     _defineProperty(this, "showPreview", () => {
       this.setState({
         isPreviewVisible: true
       });
     });
-
     this.iframeRef = createRef();
   }
+
   /**
    * If a div with id PORTAL_PARENT_ID exists, assign it to class field.
    * If not, create it and append to the body.
    */
-
-
   componentDidMount() {
     const existingDOMElement = document.getElementById(PORTAL_PARENT_ID);
     this.modalDOMElement = existingDOMElement || document.createElement('div');
-
     if (!existingDOMElement) {
       this.modalDOMElement.id = PORTAL_PARENT_ID;
       document.body.appendChild(this.modalDOMElement);
     }
   }
+
   /**
    * Add or remove applicable body classes
    */
-
-
   componentDidUpdate() {
     if (this.state.isPreviewVisible === true) {
       document.body.classList.add('newspack-web-preview--open');
@@ -161,24 +151,13 @@ class WebPreview extends Component {
       document.body.classList.remove('newspack-web-preview--open');
     }
   }
-  /**
-   * Create JSX for the modal
-   */
-
-
   /**
    * Render.
    */
   render() {
     const {
       label,
-      isPrimary,
-      isSecondary,
-      isTertiary,
-      isQuaternary,
-      isLink,
-      isSmall,
-
+      variant,
       /**
        * Inversion of control - let the caller render
        * the button that will trigger the modal
@@ -189,23 +168,16 @@ class WebPreview extends Component {
       children: [renderButton ? renderButton({
         showPreview: this.showPreview
       }) : _jsx(Button, {
-        isPrimary: isPrimary,
-        isSecondary: isSecondary,
-        isTertiary: isTertiary,
-        isQuaternary: isQuaternary,
-        isLink: isLink,
-        isSmall: isSmall,
+        variant: variant,
         onClick: this.showPreview,
         tabIndex: "0",
         children: label
       }), this.getWebPreviewModal()]
     });
   }
-
 }
-
 WebPreview.defaultProps = {
-  url: '//newspack.pub',
+  url: '//newspack.com',
   label: __('Preview', 'newspack'),
   onLoad: () => {}
 };

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

@@ -2,53 +2,59 @@
  * Web Preview
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-web-preview {
-	&--open {
-		overflow: hidden;
+	// 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};
+
+	background: rgba( black, 0.7 );
+	box-sizing: border-box;
+	height: 100%;
+	left: 0;
+	margin: 0;
+	max-width: 100%;
+	padding: 32px;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 99999;
+
+	&.phone iframe {
+		max-width: 380px;
 	}
 
-	&__container {
-		background: rgba( black, 0.7 );
-		box-sizing: border-box;
-		height: 100%;
-		left: 0;
-		margin: 0;
-		max-width: 100%;
-		padding: 32px;
-		position: fixed;
-		top: 0;
-		width: 100%;
-		z-index: 99999;
-
-		&.phone iframe {
-			max-width: 380px;
-		}
+	&.tablet iframe {
+		max-width: 768px;
+	}
 
-		&.tablet iframe {
-			max-width: 768px;
-		}
+	&.is-loaded iframe {
+		opacity: 1;
+	}
 
-		&.newspack-web-preview__is-loaded iframe {
-			opacity: 1;
-		}
+	&--open {
+		overflow: hidden;
 	}
 
 	&__interior {
 		animation: appear-animation 125ms ease-in-out;
 		animation-fill-mode: forwards;
 		background: white;
-		border-radius: 3px;
+		border-radius: 2px;
 		overflow: hidden;
 		height: 100%;
 		width: 100%;
 	}
 
 	&__content {
-		background: $gray-100;
-		height: calc( 100% - 37px );
+		background: wp-colors.$gray-100;
+		height: calc( 100% - 49px );
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
@@ -60,7 +66,7 @@
 			margin: 0 auto;
 			max-width: 100%;
 			opacity: 0;
-			outline: 1px solid $gray-300;
+			outline: 1px solid wp-colors.$gray-300;
 			padding: 0;
 			pointer-events: all;
 			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
@@ -72,15 +78,16 @@
 		align-items: center;
 		display: flex;
 		left: 50%;
-		margin: -12px 0 0 0;
+		margin: -12px 0 0;
 		position: absolute;
 		top: 50%;
 		transform: translateX( -50% );
 	}
 
 	&__toolbar {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
+		padding: 6px;
 
 		&-left {
 			flex: 0 0 auto;
@@ -95,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: $primary-500;
+					background: colors.$primary-500;
 					color: white;
 
 					&:active,
@@ -107,7 +114,7 @@
 					}
 
 					&:focus {
-						box-shadow: inset 0 0 0 1px $primary-500, inset 0 0 0 3px white !important;
+						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
 					}
 				}
 

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * WordPress dependencies.
  */
@@ -8,10 +7,10 @@ import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import apiFetch from '@wordpress/api-fetch';
 import { home } from '@wordpress/icons';
+
 /**
  * Internal dependencies.
  */
-
 import { Button, Card, Modal, NewspackIcon, Notice, PluginInstaller } from '../';
 import Router from '../proxied-imports/router';
 import Footer from '../footer';
@@ -22,24 +21,27 @@ const {
   Redirect,
   Route
 } = Router;
+
 /**
  * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
  */
-
 export default function withWizard(WrappedComponent, requiredPlugins) {
   return class WrappedWithWizard extends Component {
     constructor(props) {
       super(props);
-
       _defineProperty(this, "componentDidMount", () => {
         // If there are no requiredPlugins, fire onWizardReady as soon as component mounts.
         if (!requiredPlugins) {
-          const instance = this.wrappedComponentRef.current; // eslint-disable-next-line no-unused-expressions
-
+          const instance = this.wrappedComponentRef.current;
+          // eslint-disable-next-line no-unused-expressions
           instance && instance.onWizardReady && instance.onWizardReady();
         }
       });
-
+      /**
+       * Set the error. Called by Wizards when an error occurs.
+       *
+       * @return {Promise} Resolved after state update
+       */
       _defineProperty(this, "setError", error => {
         return new Promise(resolve => {
           this.setState({
@@ -47,28 +49,33 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           }, () => resolve());
         });
       });
-
+      /**
+       * Render any errors that need rendering.
+       *
+       * @return {Component} Error UI
+       */
       _defineProperty(this, "getError", () => {
         const {
           error
         } = this.state;
-
         if (!error) {
           return null;
         }
-
         const parsedError = this.parseError(error);
         const {
           level
         } = parsedError;
-
         if ('fatal' === level) {
           return this.getFatalError(parsedError);
         }
-
         return this.getErrorNotice(parsedError);
       });
-
+      /**
+       * Get a notice-level error.
+       *
+       * @param {Error} error object already parsed by parseError
+       * @return {Component} Error notice
+       */
       _defineProperty(this, "getErrorNotice", error => {
         const {
           message
@@ -80,14 +87,17 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           rawHTML: true
         });
       });
-
+      /**
+       * Get a fatal-level error.
+       *
+       * @param {Error} error object already parsed by parseError
+       * @return {Component} React object
+       */
       _defineProperty(this, "getFatalError", error => {
         const fallbackURL = this.getFallbackURL();
-
         if (!fallbackURL) {
           return null;
         }
-
         const {
           message
         } = error;
@@ -110,7 +120,12 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           })]
         });
       });
-
+      /**
+       * Get all the relevant info out of a raw API error response.
+       *
+       * @param {Object} error error object
+       * @return {Object} Error object with relevant fields and defaults
+       */
       _defineProperty(this, "parseError", error => {
         const {
           data,
@@ -118,28 +133,26 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           code
         } = error;
         let level = 'fatal';
-
         if (!!data && 'level' in data) {
           level = data.level;
         } else if ('rest_invalid_param' === code) {
           level = 'notice';
         }
-
         return {
           message,
           level
         };
       });
-
+      /**
+       * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
+       */
       _defineProperty(this, "pluginInstallationStatus", _ref => {
         let {
           complete
         } = _ref;
-
         if (this.state.loading) {
           this.doneLoading();
         }
-
         const instance = this.wrappedComponentRef.current;
         this.setState({
           complete
@@ -148,7 +161,9 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           complete && instance && instance.onWizardReady && instance.onWizardReady();
         });
       });
-
+      /**
+       * Begin loading.
+       */
       _defineProperty(this, "startLoading", quiet => {
         if (quiet) {
           this.setState(state => ({
@@ -160,7 +175,9 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           }));
         }
       });
-
+      /**
+       * End loading.
+       */
       _defineProperty(this, "doneLoading", quiet => {
         if (quiet) {
           this.setState(state => ({
@@ -172,7 +189,9 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           }));
         }
       });
-
+      /**
+       * Replacement for core apiFetch that automatically manages wizard loading UI.
+       */
       _defineProperty(this, "wizardApiFetch", args => {
         const {
           quiet
@@ -188,20 +207,22 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           });
         });
       });
-
+      /**
+       * Render a Route that checks for plugin installation requirements, and redirects to '/' when all are done.
+       *
+       * @return {void}
+       */
       _defineProperty(this, "pluginRequirements", () => {
         const {
           complete
         } = this.state;
         /* After all plugins are loaded, redirect to / (this could be configurable) */
-
         if (complete) {
           return _jsx(Redirect, {
             from: "/plugin-requirements",
             to: "/"
           });
         }
-
         return _jsx(Route, {
           path: "/",
           render: () => _jsxs(Fragment, {
@@ -221,8 +242,10 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
                     children: _jsx(NewspackIcon, {
                       size: 36
                     })
-                  }), _jsx("h1", {
-                    children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack')
+                  }), _jsx("div", {
+                    children: _jsx("h2", {
+                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack')
+                    })
                   })]
                 })
               })
@@ -236,13 +259,11 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
           })
         });
       });
-
       _defineProperty(this, "getFallbackURL", () => {
         if (typeof newspack_urls !== 'undefined') {
           return newspack_urls.dashboard;
         }
       });
-
       this.state = {
         complete: null,
         error: null,
@@ -251,7 +272,6 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
       };
       this.wrappedComponentRef = createRef();
     }
-
     /**
      * Render.
      */
@@ -265,11 +285,9 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         error
       } = this.state;
       const loadingClasses = [loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded'];
-
       if (quietLoading) {
         loadingClasses.push('newspack-wizard__is-loading-quiet');
       }
-
       return _jsxs(Fragment, {
         children: [this.getError(), _jsx("div", {
           className: loadingClasses.join(' '),
@@ -291,6 +309,5 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         })]
       });
     }
-
   };
 }