newspack-components 2.1.0 → 2.2.0

package/dist/esm/toggle-control/style.scss

@@ -0,0 +1,74 @@
+/**
+ * Toggle Control
+ */
+
+@import '../../../shared/scss/colors';
+@import '~@wordpress/base-styles/colors';
+
+.newspack-toggle-control {
+	margin: 32px 0;
+
+	.components-base-control__field {
+		align-items: flex-start;
+		margin: 0;
+
+		.components-toggle-control__label {
+			color: $gray-700;
+			font-size: 14px;
+			line-height: 24px;
+			margin: 0;
+		}
+
+		.components-form-toggle {
+			margin: 3px 8px 3px 0;
+
+			&.is-checked {
+				.components-form-toggle__track {
+					background: $primary-500;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+
+	// Is Dark
+
+	&.newspack-toggle-control--is-dark {
+		.components-base-control__field label {
+			color: $gray-900;
+			font-weight: bold;
+		}
+
+		.components-base-control__help {
+			font-style: normal;
+		}
+	}
+
+	// Is disabled
+
+	&.newspack-toggle-control--is-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	// Focus
+
+	.components-form-toggle__input:focus {
+		+ .components-form-toggle__track {
+			box-shadow: 0 0 0 2px white, 0 0 0 4px $primary-500;
+		}
+	}
+
+	// Multiple Toggle Controls
+
+	& + & {
+		margin-bottom: 32px;
+		margin-top: -24px;
+	}
+
+	// Reset
+
+	.components-base-control__help {
+		margin: 0 0 0 44px;
+	}
+}

package/dist/esm/toggle-group/index.js

@@ -0,0 +1,58 @@
+/**
+ * Toggle Group
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+/**
+ * Internal dependencies.
+ */
+
+import { ToggleControl } 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";
+
+class ToggleGroup extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      checked,
+      children,
+      description,
+      onChange,
+      title,
+      className
+    } = this.props;
+    const classes = classnames('newspack-toggle-group', className);
+    return _jsxs("div", {
+      className: classes,
+      children: [_jsx(ToggleControl, {
+        checked: checked || false,
+        onChange: onChange
+      }), _jsxs("div", {
+        className: "newspack-toggle-group__description",
+        children: [_jsx("p", {
+          className: "is-dark",
+          children: _jsx("strong", {
+            children: title
+          })
+        }), _jsx("p", {
+          children: description
+        }), checked && children]
+      })]
+    });
+  }
+
+}
+
+export default ToggleGroup;

package/dist/esm/toggle-group/style.scss

@@ -0,0 +1,28 @@
+/**
+ * Toggle Group
+ */
+
+.newspack-toggle-group {
+	display: flex;
+	margin: 32px 0;
+
+	& &__description p {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+
+	.newspack-toggle-control {
+		margin: 0;
+	}
+
+	&__description {
+		flex: 1;
+	}
+
+	// Multiple Toogle Groups
+
+	& + & {
+		margin-bottom: 32px;
+		margin-top: -16px;
+	}
+}

package/dist/esm/utils/index.js

@@ -3,7 +3,6 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const InteractiveDiv = _ref => {
   let {
     style = {},
@@ -20,7 +19,14 @@ const InteractiveDiv = _ref => {
     ...props
   });
 };
-
+const confirmAction = message => {
+  // eslint-disable-next-line no-alert
+  if (confirm(message)) {
+    return true;
+  }
+  return false;
+};
 export default {
-  InteractiveDiv
+  InteractiveDiv,
+  confirmAction
 };

package/dist/esm/waiting/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class Waiting extends Component {
   /**
    * Render
@@ -41,7 +40,5 @@ class Waiting extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default Waiting;

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * WordPress dependencies.
  */
@@ -8,34 +7,35 @@ 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 { 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 = () => {},
@@ -47,11 +47,9 @@ class WebPreview extends Component {
         loaded,
         isPreviewVisible
       } = this.state;
-
       if (!this.modalDOMElement || !isPreviewVisible) {
         return null;
       }
-
       const classes = classnames('newspack-web-preview', device, loaded && 'is-loaded');
       beforeLoad();
       return createPortal(_jsx("div", {
@@ -122,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');
@@ -158,11 +151,6 @@ class WebPreview extends Component {
       document.body.classList.remove('newspack-web-preview--open');
     }
   }
-  /**
-   * Create JSX for the modal
-   */
-
-
   /**
    * Render.
    */
@@ -170,7 +158,6 @@ class WebPreview extends Component {
     const {
       label,
       variant,
-
       /**
        * Inversion of control - let the caller render
        * the button that will trigger the modal
@@ -188,11 +175,9 @@ class WebPreview extends Component {
       }), this.getWebPreviewModal()]
     });
   }
-
 }
-
 WebPreview.defaultProps = {
-  url: '//newspack.pub',
+  url: '//newspack.com',
   label: __('Preview', 'newspack'),
   onLoad: () => {}
 };

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

@@ -2,17 +2,17 @@
  * 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 {
 	// Color
-	--wp-admin-theme-color: #{$primary-500};
-	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
+	--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;
@@ -53,7 +53,7 @@
 	}
 
 	&__content {
-		background: $gray-100;
+		background: wp-colors.$gray-100;
 		height: calc( 100% - 49px );
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
@@ -66,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;
@@ -78,14 +78,14 @@
 		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;
 
@@ -102,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: $primary-500;
+					background: colors.$primary-500;
 					color: white;
 
 					&:active,
@@ -114,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, {
@@ -238,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,
@@ -253,7 +272,6 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
       };
       this.wrappedComponentRef = createRef();
     }
-
     /**
      * Render.
      */
@@ -267,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(' '),
@@ -293,6 +309,5 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
         })]
       });
     }
-
   };
 }