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

package/dist/cjs/plugin-toggle/index.js

@@ -1,182 +1,97 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
+
 /**
  * Internal dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Plugin toggle group component.
- */
-class PluginToggle extends _element.Component {
-  constructor(...args) {
-    super(...args);
-    (0, _defineProperty2.default)(this, "state", {
-      pluginInfo: {}
-    });
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      this.retrievePluginInfo();
-    });
-    /**
-     * Retrieve complete data about Newspack plugins.
-     */
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", () => {
-      return new Promise(() => {
-        (0, _apiFetch.default)({
-          path: '/newspack/v1/plugins/'
-        }).then(pluginInfo => this.setState({
-          pluginInfo
-        }));
-      });
-    });
-    /**
-     * Install/activate or remove a plugin.
-     */
-    (0, _defineProperty2.default)(this, "managePlugin", (plugin, value) => {
-      const {
-        plugins
-      } = this.props;
-      const {
+ */class PluginToggle extends _element.Component {
+  state = {
+    pluginInfo: {}
+  };
+  componentDidMount = () => {
+    this.retrievePluginInfo();
+  };
+
+  /**
+   * Retrieve complete data about Newspack plugins.
+   */
+  retrievePluginInfo = () => {
+    return new Promise(() => {
+      (0, _apiFetch.default)({
+        path: '/newspack/v1/plugins/'
+      }).then(pluginInfo => this.setState({
         pluginInfo
-      } = this.state;
-      const action = value ? 'configure' : 'deactivate';
-      const params = {
-        path: `/newspack/v1/plugins/${plugin}/${action}/`,
-        method: 'post'
-      };
-      this.setState({
-        pluginInfo: {
-          ...pluginInfo,
-          [plugin]: {
-            ...pluginInfo[plugin],
-            inFlight: action
-          }
+      }));
+    });
+  };
+
+  /**
+   * Install/activate or remove a plugin.
+   */
+  managePlugin = (plugin, value) => {
+    const {
+      plugins
+    } = this.props;
+    const {
+      pluginInfo
+    } = this.state;
+    const action = value ? 'configure' : 'deactivate';
+    const params = {
+      path: `/newspack/v1/plugins/${plugin}/${action}/`,
+      method: 'post'
+    };
+    this.setState({
+      pluginInfo: {
+        ...pluginInfo,
+        [plugin]: {
+          ...pluginInfo[plugin],
+          inFlight: action
         }
-      }, () => {
-        (0, _apiFetch.default)(params).then(response => {
-          const {
-            shouldRefreshAfterUpdate
-          } = plugins[plugin];
-          this.setState(({
-            pluginInfo: currentPluginInfo
-          }) => ({
-            pluginInfo: {
-              ...currentPluginInfo,
-              [plugin]: response
-            }
-          }), () => shouldRefreshAfterUpdate && location.reload());
-        }).catch(e => {
-          this.setState({
-            pluginInfo: {
-              ...pluginInfo,
-              [plugin]: {
-                ...pluginInfo[plugin],
-                error: e.message || __('There was an error managing this plugin.', 'newspack-plugin')
-              }
+      }
+    }, () => {
+      (0, _apiFetch.default)(params).then(response => {
+        const {
+          shouldRefreshAfterUpdate
+        } = plugins[plugin];
+        this.setState(({
+          pluginInfo: currentPluginInfo
+        }) => ({
+          pluginInfo: {
+            ...currentPluginInfo,
+            [plugin]: response
+          }
+        }), () => shouldRefreshAfterUpdate && location.reload());
+      }).catch(e => {
+        this.setState({
+          pluginInfo: {
+            ...pluginInfo,
+            [plugin]: {
+              ...pluginInfo[plugin],
+              error: e.message || (0, _i18n.__)('There was an error managing this plugin.', 'newspack-plugin')
             }
-          });
+          }
         });
       });
     });
-    /**
-     * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
-     */
-    (0, _defineProperty2.default)(this, "prepareDataForRender", (pluginsFromProps, pluginsFromAPI) => Object.keys(pluginsFromProps).map(pluginSlug => pluginsFromAPI[pluginSlug] ? Object.keys(pluginsFromAPI[pluginSlug]).reduce((accumulator, key) => ({
-      ...accumulator,
-      [key.charAt(0).toLowerCase() + key.slice(1)]: pluginsFromAPI[pluginSlug][key]
-    }), {}) : {}).map(plugin => Object.assign(plugin, pluginsFromProps[plugin.slug])));
-    /**
-     * Generate a classname for the ActionCard based on plugin state. Applies 'in-flight' class if an API is underway and 'loading' if the plugin data is not yet available.
-     */
-    (0, _defineProperty2.default)(this, "classNameForPlugin", plugin => {
-      const {
-        status,
-        inFlight
-      } = plugin;
-      if (inFlight) {
-        return 'in-flight';
-      }
-      if (!status) {
-        return 'loading';
-      }
-    });
-    /**
-     * Generate the ActionCard action text for a plugin.
-     */
-    (0, _defineProperty2.default)(this, "actionTextForPlugin", plugin => {
-      const {
-        actionText,
-        editPath,
-        href,
-        inFlight,
-        name
-      } = plugin;
-      // Show spinner when plugin data is unavailable, or when an API call is in flight.
-      if ('configure' === inFlight) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Installing…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if ('deactivate' === inFlight) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Deactivating…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if (!name) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Loading…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      // No action button at all if the plugin isn't installed and active.
-      if (!this.isPluginInstalledAndActive(plugin)) {
-        return null;
-      }
-      if (href || editPath) {
-        return actionText ? actionText : __('Configure', 'newspack-plugin');
-      }
-    });
-    /**
-     * Get error message for this plugin.
-     */
-    (0, _defineProperty2.default)(this, "errorForPlugin", plugin => {
-      const {
-        slug
-      } = plugin;
-      const {
-        pluginInfo
-      } = this.state;
-      return pluginInfo[slug]?.error || null;
-    });
-    /**
-     * Get installation/activation status for a plugin.
-     */
-    (0, _defineProperty2.default)(this, "isPluginInstalledAndActive", plugin => {
-      const {
-        status
-      } = plugin;
-      return status === 'active';
-    });
-  }
+  };
+
   /**
    * Render.
    */
@@ -198,7 +113,7 @@ class PluginToggle extends _element.Component {
       const pluginStatus = this.isPluginInstalledAndActive(plugin);
       const handoff = !href && pluginStatus && editPath ? slug : null;
       const error = this.errorForPlugin(plugin);
-      return (0, _jsxRuntime.jsx)(_.ActionCard, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
         className: this.classNameForPlugin(plugin),
         title: name,
         description: description,
@@ -214,5 +129,94 @@ class PluginToggle extends _element.Component {
       }, index);
     });
   }
+
+  /**
+   * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
+   */
+  prepareDataForRender = (pluginsFromProps, pluginsFromAPI) => Object.keys(pluginsFromProps).map(pluginSlug => pluginsFromAPI[pluginSlug] ? Object.keys(pluginsFromAPI[pluginSlug]).reduce((accumulator, key) => ({
+    ...accumulator,
+    [key.charAt(0).toLowerCase() + key.slice(1)]: pluginsFromAPI[pluginSlug][key]
+  }), {}) : {}).map(plugin => Object.assign(plugin, pluginsFromProps[plugin.slug]));
+
+  /**
+   * Generate a classname for the ActionCard based on plugin state. Applies 'in-flight' class if an API is underway and 'loading' if the plugin data is not yet available.
+   */
+  classNameForPlugin = plugin => {
+    const {
+      status,
+      inFlight
+    } = plugin;
+    if (inFlight) {
+      return 'in-flight';
+    }
+    if (!status) {
+      return 'loading';
+    }
+  };
+
+  /**
+   * Generate the ActionCard action text for a plugin.
+   */
+  actionTextForPlugin = plugin => {
+    const {
+      actionText,
+      editPath,
+      href,
+      inFlight,
+      name
+    } = plugin;
+    // Show spinner when plugin data is unavailable, or when an API call is in flight.
+    if ('configure' === inFlight) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if ('deactivate' === inFlight) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if (!name) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    // No action button at all if the plugin isn't installed and active.
+    if (!this.isPluginInstalledAndActive(plugin)) {
+      return null;
+    }
+    if (href || editPath) {
+      return actionText ? actionText : (0, _i18n.__)('Configure', 'newspack-plugin');
+    }
+  };
+
+  /**
+   * Get error message for this plugin.
+   */
+  errorForPlugin = plugin => {
+    const {
+      slug
+    } = plugin;
+    const {
+      pluginInfo
+    } = this.state;
+    return pluginInfo[slug]?.error || null;
+  };
+
+  /**
+   * Get installation/activation status for a plugin.
+   */
+  isPluginInstalledAndActive = plugin => {
+    const {
+      status
+    } = plugin;
+    return status === 'active';
+  };
 }
 var _default = exports.default = PluginToggle;

package/dist/cjs/plugin-toggle/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,

package/dist/cjs/popover/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -35,7 +35,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-popover', padding && 'newspack-popover__padding-' + padding, className);
-    return (0, _jsxRuntime.jsx)(_components.Popover, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
       className: classes,
       ...otherProps
     });

package/dist/cjs/popover/style.scss

@@ -2,8 +2,8 @@
  * Popover
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
 	.components-popover__content {
@@ -23,7 +23,7 @@
 				}
 			}
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
@@ -34,14 +34,14 @@
 				padding: 6px 8px;
 				text-decoration: none;
 
-				&:not( .is-destructive ) {
+				&:not(.is-destructive) {
 					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
 						color: colors.$primary-500;
 					}
 				}
@@ -52,7 +52,7 @@
 				}
 			}
 
-			&.is-destructive:not( :focus ) {
+			&.is-destructive:not(:focus) {
 				box-shadow: none !important;
 			}
 
@@ -131,7 +131,7 @@
 		}
 	}
 
-	&:not( .is-without-arrow )::before {
+	&:not(.is-without-arrow)::before {
 		border-color: wp-colors.$gray-300;
 	}
 

package/dist/cjs/position-control/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,17 +9,19 @@ var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies
  */
+
 /**
  * Internal dependencies
  */
+
 function PositionControl({
   allowedPositions,
   value,
@@ -35,64 +37,64 @@ function PositionControl({
   const options = size === 'full-width' ? [{
     value: 'top',
     /* translators: Overlay Position */
-    label: __('Top', 'newspack-plugin')
+    label: (0, _i18n.__)('Top', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Center', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom', 'newspack-plugin')
   }] : [{
     value: 'top_left',
     /* translators: Overlay Position */
-    label: __('Top Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Left', 'newspack-plugin')
   }, {
     value: 'top',
     /* translators: Overlay Position */
-    label: __('Top Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Center', 'newspack-plugin')
   }, {
     value: 'top_right',
     /* translators: Overlay Position */
-    label: __('Top Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Right', 'newspack-plugin')
   }, {
     value: 'center_left',
     /* translators: Overlay Position */
-    label: __('Center Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Center Left', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Center', 'newspack-plugin')
   }, {
     value: 'center_right',
     /* translators: Overlay Position */
-    label: __('Center Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Center Right', 'newspack-plugin')
   }, {
     value: 'bottom_left',
     /* translators: Overlay Position */
-    label: __('Bottom Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Left', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Center', 'newspack-plugin')
   }, {
     value: 'bottom_right',
     /* translators: Overlay Position */
-    label: __('Bottom Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Right', 'newspack-plugin')
   }];
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-position-placement-control', 'size-' + size),
-    children: [(0, _jsxRuntime.jsx)("p", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "components-base-control__label",
       children: label
-    }), (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack-plugin'),
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
+      "aria-label": (0, _i18n.__)('Select Position', 'newspack-plugin'),
       ...props,
       children: options.map((option, index) => {
-        return (0, _jsxRuntime.jsx)("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: option.value === value ? 'is-selected' : null,
-          children: (0, _jsxRuntime.jsx)(_components.Button, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             isSmall: true,
             title: option.label,
             "aria-label": option.label,
@@ -104,7 +106,7 @@ function PositionControl({
           })
         }, `newspack-position-placement-item-${index}`);
       })
-    }), (0, _jsxRuntime.jsx)("p", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "components-base-control__help",
       children: help
     })]

package/dist/cjs/position-control/style.scss

@@ -1,4 +1,4 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-position-placement-control {
 	margin-bottom: 1em;
@@ -10,8 +10,8 @@
 
 	.components-button-group {
 		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		grid-template-rows: repeat( 3, 1fr );
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(3, 1fr);
 
 		div {
 			padding: 1px;
@@ -24,19 +24,19 @@
 			width: 100%;
 		}
 
-		div:nth-of-type( 1 ) .components-button {
+		div:nth-of-type(1) .components-button {
 			border-radius: 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 3 ) .components-button {
+		div:nth-of-type(3) .components-button {
 			border-radius: 0 4px 0 0 !important;
 		}
 
-		div:nth-last-of-type( 1 ) .components-button {
+		div:nth-last-of-type(1) .components-button {
 			border-radius: 0 0 4px !important;
 		}
 
-		div:nth-last-of-type( 3 ) .components-button {
+		div:nth-last-of-type(3) .components-button {
 			border-radius: 0 0 0 4px !important;
 		}
 	}
@@ -48,7 +48,7 @@
 			border-radius: 4px 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 2 ) .components-button {
+		div:nth-of-type(2) .components-button {
 			border-radius: 0 !important;
 		}
 

package/dist/cjs/progress-bar/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _element = require("@wordpress/element");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Progress Bar
  */
@@ -49,21 +49,21 @@ class ProgressBar extends _element.Component {
     const barStyle = {
       width: this.getCompletionPercentage(cleanCompleted, cleanTotal) + '%'
     };
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-progress-bar",
-      children: [(label || displayFraction) && (0, _jsxRuntime.jsxs)("div", {
+      children: [(label || displayFraction) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-progress-bar__headings",
-        children: [label && (0, _jsxRuntime.jsx)("h2", {
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
           children: label
-        }), displayFraction && (0, _jsxRuntime.jsx)("p", {
+        }), displayFraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "is-dark",
-          children: (0, _jsxRuntime.jsxs)("strong", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
             children: [cleanCompleted, "/", cleanTotal]
           })
         })]
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-progress-bar__container",
-        children: (0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-progress-bar__bar",
           style: barStyle,
           "data-testid": "progress-bar-indicator"