newspack-components 2.1.0 → 2.2.1

package/dist/esm/newspack-logo/style.scss

@@ -2,12 +2,12 @@
  * Newspack Logo
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-logo {
 	&__svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 		margin: 0;
 		padding-bottom: 32px;
 		width: auto;
@@ -19,7 +19,7 @@
 	}
 
 	&__wrapper {
-		background: $primary-500;
+		background: colors.$primary-500;
 		color: white;
 		position: relative;
 

package/dist/esm/notice/index.js

@@ -8,20 +8,19 @@
 import { Component, RawHTML } from '@wordpress/element';
 import { Icon, bug, check, help, info } from '@wordpress/icons';
 import { __ as alias__ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies.
  */
-
 const __ = alias__;
 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 Notice extends Component {
   /**
    * Render
@@ -31,6 +30,7 @@ class Notice extends Component {
       className,
       debugMode,
       isError,
+      isHandoff,
       isHelp,
       isSuccess,
       isWarning,
@@ -39,9 +39,8 @@ class Notice extends Component {
       style = {},
       children = null
     } = this.props;
-    const classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+    const classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
     let noticeIcon;
-
     if (isHelp) {
       noticeIcon = help;
     } else if (isSuccess) {
@@ -51,7 +50,6 @@ class Notice extends Component {
     } else {
       noticeIcon = info;
     }
-
     return _jsxs("div", {
       className: classes,
       style: style,
@@ -65,7 +63,5 @@ class Notice extends Component {
       })]
     });
   }
-
 }
-
 export default Notice;

package/dist/esm/notice/style.scss

@@ -2,13 +2,14 @@
  * Notice
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use 'sass:color';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+@use '../../../shared/scss/colors';
 
 .newspack-notice {
 	align-items: center;
-	background: $gray-100;
-	color: $gray-900;
+	background: wp-colors.$gray-100;
+	color: wp-colors.$gray-900;
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
@@ -16,13 +17,13 @@
 
 	> svg {
 		display: block;
-		fill: $gray-900;
+		fill: wp-colors.$gray-900;
 		flex: 0 0 24px;
 		margin-right: 4px;
 	}
 
 	&__is-debug {
-		background: $primary-700;
+		background: colors.$primary-700;
 		border-radius: 2px;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
@@ -39,35 +40,47 @@
 	}
 
 	&__is-error {
-		background: lighten( $alert-red, 51% );
+		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
 
 		> svg {
-			fill: $alert-red;
+			fill: wp-colors.$alert-red;
 			transform: rotate( 180deg );
 		}
 	}
 
+	&__is-handoff {
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		margin-top: 0;
+		position: sticky;
+		top: 46px;
+		z-index: 100;
+
+		@media ( min-width: 782px ) {
+			top: 32px;
+		}
+	}
+
 	&__is-help {
-		background: $primary-050;
+		background: colors.$primary-050;
 
 		> svg {
-			fill: $primary-500;
+			fill: colors.$primary-500;
 		}
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 42% );
+		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
 
 		> svg {
-			fill: $alert-green;
+			fill: wp-colors.$alert-green;
 		}
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 30% );
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
 
 		> svg {
-			fill: $alert-yellow;
+			fill: wp-colors.$alert-yellow;
 			transform: rotate( 180deg );
 		}
 	}
@@ -87,7 +100,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
 			}
 		}
 	}

package/dist/esm/patrons-logo/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * WordPress.com and Google News Initiative Logos.
  */
@@ -13,11 +12,12 @@ import { __ as alias__ } from '@wordpress/i18n';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const __ = alias__;
-
 class PatronsLogo extends Component {
   constructor() {
     super(...arguments);
-
+    /**
+     * Render.
+     */
     _defineProperty(this, "render", () => {
       return _jsxs(SVG, {
         xmlns: "http://www.w3.org/2000/svg",
@@ -72,7 +72,5 @@ class PatronsLogo extends Component {
       });
     });
   }
-
 }
-
 export default PatronsLogo;

package/dist/esm/plugin-installer/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * Plugin Installer
  */
@@ -12,36 +11,33 @@ import { Component } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { Icon, check } from '@wordpress/icons';
+
 /**
  * Internal dependencies.
  */
-
 import { ActionCard, Button, Waiting } from '../';
 import './style.scss';
 const PLUGIN_STATE_NONE = 0;
 const PLUGIN_STATE_ACTIVE = 1;
 const PLUGIN_STATE_INSTALLING = 2;
 const PLUGIN_STATE_ERROR = 3;
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Plugin installer.
  */
-
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-
 class PluginInstaller extends Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
-
     _defineProperty(this, "componentDidMount", () => {
       const {
         plugins
@@ -52,7 +48,6 @@ class PluginInstaller extends Component {
         }
       });
     });
-
     _defineProperty(this, "componentDidUpdate", prevProps => {
       const {
         autoInstall,
@@ -61,16 +56,13 @@ class PluginInstaller extends Component {
       const {
         installationInitialized
       } = this.state;
-
       if (plugins !== prevProps.plugins) {
         this.retrievePluginInfo(plugins);
       }
-
       if (autoInstall && !installationInitialized) {
         this.installAllPlugins();
       }
     });
-
     _defineProperty(this, "retrievePluginInfo", plugins => {
       return new Promise(resolve => {
         apiFetch({
@@ -80,8 +72,8 @@ class PluginInstaller extends Component {
             if (plugins.indexOf(slug) === -1) {
               return result;
             }
-
-            result[slug] = { ...response[slug],
+            result[slug] = {
+              ...response[slug],
               installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
             };
             return result;
@@ -90,7 +82,6 @@ class PluginInstaller extends Component {
         });
       });
     });
-
     _defineProperty(this, "installAllPlugins", () => {
       const {
         pluginInfo
@@ -101,7 +92,6 @@ class PluginInstaller extends Component {
       const promises = Object.keys(pluginInfo).filter(slug => 'active' !== pluginInfo[slug].Status).map(slug => () => this.installPlugin(slug));
       promises.reduce((promise, action) => promise.then(result => action().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
     });
-
     _defineProperty(this, "installPlugin", slug => {
       this.setInstallationStatus(slug, PLUGIN_STATE_INSTALLING);
       const params = {
@@ -113,8 +103,10 @@ class PluginInstaller extends Component {
           pluginInfo
         } = this.state;
         this.props.onInstalled(slug);
-        this.updatePluginInfo({ ...pluginInfo,
-          [slug]: { ...response,
+        this.updatePluginInfo({
+          ...pluginInfo,
+          [slug]: {
+            ...response,
             installationStatus: PLUGIN_STATE_ACTIVE
           }
         });
@@ -122,32 +114,32 @@ class PluginInstaller extends Component {
         this.setInstallationStatus(slug, PLUGIN_STATE_ERROR, error.message);
       });
     });
-
     _defineProperty(this, "setChecked", (slug, checked) => {
       const {
         pluginInfo
       } = this.state;
-      this.updatePluginInfo({ ...pluginInfo,
-        [slug]: { ...pluginInfo[slug],
+      this.updatePluginInfo({
+        ...pluginInfo,
+        [slug]: {
+          ...pluginInfo[slug],
           checked
         }
       });
     });
-
     _defineProperty(this, "setInstallationStatus", function (slug, installationStatus) {
       let notification = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       const {
         pluginInfo
       } = _this.state;
-
-      _this.updatePluginInfo({ ...pluginInfo,
-        [slug]: { ...pluginInfo[slug],
+      _this.updatePluginInfo({
+        ...pluginInfo,
+        [slug]: {
+          ...pluginInfo[slug],
           installationStatus,
           notification
         }
       });
     });
-
     _defineProperty(this, "updatePluginInfo", pluginInfo => {
       return new Promise(resolve => {
         const {
@@ -167,29 +159,23 @@ class PluginInstaller extends Component {
         });
       });
     });
-
     _defineProperty(this, "classForInstallationStatus", status => {
       switch (status) {
         case PLUGIN_STATE_ACTIVE:
           return 'newspack-plugin-installer__status-active';
-
         case PLUGIN_STATE_INSTALLING:
           return 'newspack-plugin-installer__status-installing';
-
         case PLUGIN_STATE_ERROR:
           return 'newspack-plugin-installer__status-error';
-
         default:
           return 'newspack-plugin-installer__status-none';
       }
     });
-
     this.state = {
       pluginInfo: {},
       installationInitialized: false
     };
   }
-
   /**
    * Render.
    */
@@ -202,16 +188,20 @@ class PluginInstaller extends Component {
     const {
       pluginInfo
     } = this.state;
-    const slugs = Object.keys(pluginInfo); // Store all plugin status info for installer button text value based on current status.
+    const {
+      is_atomic: isAtomic
+    } = window;
+    const slugs = Object.keys(pluginInfo);
 
+    // Store all plugin status info for installer button text value based on current status.
     const currentPluginStatuses = [];
     slugs.forEach(slug => {
       const plugin = pluginInfo[slug];
       currentPluginStatuses.push(plugin.Status);
-    }); // Make sure plugin status falls in either one of these, to handle button text.
+    });
 
+    // Make sure plugin status falls in either one of these, to handle button text.
     const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
-
     const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack') : __('Install', 'newspack');
     const needsInstall = slugs.some(slug => {
       const plugin = pluginInfo[slug];
@@ -228,16 +218,24 @@ class PluginInstaller extends Component {
         const {
           Name,
           Description,
+          Download,
           Status,
           installationStatus,
           notification
         } = plugin;
         const isWaiting = installationStatus === PLUGIN_STATE_INSTALLING;
         const isButton = !isWaiting && Status !== 'active';
+        const installable = Download || pluginInstalled(Status);
         let actionText;
-
         if (installationStatus === PLUGIN_STATE_INSTALLING) {
-          actionText = __('Installing…');
+          actionText = 'inactive' === Status ? __('Activating…') : __('Installing…');
+        } else if (!installable) {
+          actionText = _jsxs("span", {
+            className: "newspack-plugin-installer__status",
+            children: [isAtomic ? __('Contact Newspack support to install', 'newspack') : __('Plugin must be installed manually', 'newspack'), _jsx("span", {
+              className: "newspack-checkbox-icon"
+            })]
+          });
         } else if (Status === 'uninstalled') {
           actionText = _jsxs("span", {
             className: "newspack-plugin-installer__status",
@@ -263,12 +261,12 @@ class PluginInstaller extends Component {
             })]
           });
         }
-
         const classes = classnames('newspack-action-card__plugin-installer', this.classForInstallationStatus(installationStatus));
         const onClick = isButton ? () => this.installPlugin(slug) : null;
         return _jsx(ActionCard, {
           title: Name,
           description: Description,
+          disabled: !installable,
           actionText: actionText,
           isSmall: isSmall,
           isWaiting: isWaiting,
@@ -289,9 +287,7 @@ class PluginInstaller extends Component {
       })]
     });
   }
-
 }
-
 PluginInstaller.defaultProps = {
   onStatus: () => {},
   onInstalled: () => {}

package/dist/esm/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {
@@ -35,10 +35,10 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 $alert-green;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
 
 		.newspack-plugin-installer__checkbox {
-			background: $alert-green;
+			background: wp-colors.$alert-green;
 			box-shadow: none;
 		}
 
@@ -48,12 +48,12 @@
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 $alert-red;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 $gray-100;
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
 	}
 
 	// Is Small

package/dist/esm/plugin-settings/SettingsSection.js

@@ -5,39 +5,34 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { CheckboxControl } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const isSelectControl = setting => {
   return Array.isArray(setting.options) && setting.options.length;
 };
-
 const getControlComponent = setting => {
   if (isSelectControl(setting)) {
     return SelectControl;
   }
-
   switch (setting.type) {
     case 'checkbox':
     case 'boolean':
       return CheckboxControl;
-
     default:
       return TextControl;
   }
 };
-
 const getControlType = setting => {
   switch (setting.type) {
     case 'int':
@@ -45,24 +40,20 @@ const getControlType = setting => {
     case 'float':
     case 'number':
       return 'number';
-
     case 'string':
     case 'text':
       return 'text';
-
     case 'password':
       return 'password';
-
     case 'boolean':
     case 'checkbox':
       return 'checkbox';
-
     default:
       return null;
   }
 };
-
 const SettingsSection = props => {
+  const [saveDisabled, setSaveDisabled] = useState(true);
   const {
     error,
     sectionKey,
@@ -74,7 +65,6 @@ const SettingsSection = props => {
     onChange,
     onUpdate
   } = props;
-
   const getControlProps = setting => ({
     disabled,
     name: `${setting.section}_${setting.key}`,
@@ -90,22 +80,19 @@ const SettingsSection = props => {
     checked: setting.type === 'boolean' ? !!setting.value : null,
     onChange: value => {
       onChange(setting.key, value);
+      setSaveDisabled(false);
     }
   });
-
   const createFilter = function (name) {
     let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return applyFilters(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
   };
-
   let columns = 2;
-
   if (fields.length % 3 === 0) {
     columns = 3;
   } else if (fields.length === 1) {
     columns = 1;
   }
-
   return _jsx(ActionCard, {
     isMedium: true,
     disabled: disabled,
@@ -118,9 +105,10 @@ const SettingsSection = props => {
     }) : null,
     actionContent: (active || null === active) && createFilter('buttons', _jsx(Button, {
       variant: "primary",
-      disabled: disabled,
+      disabled: disabled || saveDisabled,
       onClick: () => {
         onUpdate();
+        setSaveDisabled(true);
       },
       children: __('Save Settings', 'newspack')
     })),
@@ -133,8 +121,8 @@ const SettingsSection = props => {
         gutter: 32,
         children: fields.map(setting => {
           const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-
-          return applyFilters(`newspack.settingsSection.${sectionKey}.control`, _jsx(Control, { ...getControlProps(setting)
+          return applyFilters(`newspack.settingsSection.${sectionKey}.control`, _jsx(Control, {
+            ...getControlProps(setting)
           }, setting.key), {
             sectionKey,
             setting,
@@ -145,5 +133,4 @@ const SettingsSection = props => {
     })
   });
 };
-
 export default SettingsSection;