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

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

@@ -0,0 +1,220 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SectionHeader, Notice } from '../';
+import SettingsSection from './SettingsSection';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class PluginSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      inFlight: false,
+      settings: {},
+      error: null
+    };
+  }
+  fetchSettings = () => {
+    const {
+      afterFetch,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    apiFetch({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
+    }).then(settings => {
+      this.setState({
+        settings,
+        error: null
+      });
+      if ('function' === typeof afterFetch) {
+        afterFetch(settings);
+      }
+    }).catch(error => {
+      this.setState({
+        error
+      });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
+      });
+    });
+  };
+  componentDidMount() {
+    this.fetchSettings();
+  }
+  getSettingsValues = sectionKey => {
+    return this.state.settings[sectionKey]?.reduce((map, setting) => {
+      map[setting.key] = setting.value;
+      return map;
+    }, {}) || {};
+  };
+  handleSettingChange = sectionKey => (key, value) => {
+    const sectionSettings = [...this.state.settings[sectionKey]];
+    sectionSettings.forEach(setting => {
+      if (setting.key === key) {
+        setting.value = value;
+      }
+    });
+    this.setState({
+      settings: {
+        ...this.state.settings,
+        [sectionKey]: sectionSettings
+      }
+    });
+  };
+  handleSectionUpdate = sectionKey => data => {
+    const {
+      afterUpdate,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    apiFetch({
+      path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
+      method: 'POST',
+      data: {
+        section: sectionKey,
+        settings: data ? data : this.getSettingsValues(sectionKey)
+      }
+    }).then(settings => {
+      this.setState({
+        settings: {
+          ...this.state.settings,
+          [sectionKey]: settings[sectionKey]
+        },
+        error: null
+      });
+      if ('function' === typeof afterUpdate) {
+        afterUpdate(settings);
+      }
+    }).catch(error => {
+      this.setState({
+        error
+      });
+    }).finally(() => {
+      this.setState({
+        inFlight: false
+      });
+    });
+  };
+
+  /**
+   * Get the section setting containing section information.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {Object} The section setting.
+   */
+  getSectionInfo = sectionKey => {
+    return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
+  };
+
+  /**
+   * Get the section title.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section title.
+   */
+  getSectionTitle = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.description;
+  };
+
+  /**
+   * Get the section description.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section description.
+   */
+  getSectionDescription = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.help;
+  };
+
+  /**
+   * Get whether a section is active.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
+   */
+  isSectionActive = sectionKey => {
+    const {
+      settings
+    } = this.state;
+    const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
+    if (!activation) {
+      return null;
+    }
+    return activation.value;
+  };
+
+  /**
+   * Get list of section field settings.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {?Array} List of section fields.
+   */
+  getSectionFields = sectionKey => {
+    return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      title,
+      description,
+      hasGreyHeader,
+      children
+    } = this.props;
+    const {
+      settings,
+      inFlight,
+      error
+    } = this.state;
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [title && /*#__PURE__*/_jsx(SectionHeader, {
+        title: title,
+        description: description
+      }), error && /*#__PURE__*/_jsx(Notice, {
+        isError: true,
+        noticeText: error.message
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classnames('newspack-plugin-settings', {
+          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
+        }),
+        children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/_jsx(SettingsSection, {
+          disabled: inFlight,
+          sectionKey: sectionKey,
+          title: this.getSectionTitle(sectionKey),
+          description: this.getSectionDescription(sectionKey),
+          active: this.isSectionActive(sectionKey),
+          fields: this.getSectionFields(sectionKey),
+          onChange: this.handleSettingChange(sectionKey),
+          onUpdate: this.handleSectionUpdate(sectionKey),
+          hasGreyHeader: hasGreyHeader
+        }, sectionKey)), children]
+      })]
+    });
+  }
+}
+PluginSettings.defaultProps = {
+  title: __('General Settings', 'newspack-plugin')
+};
+PluginSettings.Section = SettingsSection;
+export default PluginSettings;

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

@@ -0,0 +1,7 @@
+.newspack-card:not(.newspack-settings__no-border) {
+	.newspack-action-card__region-children {
+		> .newspack-grid {
+			margin: 32px 0 0 !important;
+		}
+	}
+}

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

@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { ActionCard, Waiting } from '../';
+import './style.scss';
+
+/**
+ * Plugin toggle group component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class PluginToggle extends Component {
+  state = {
+    pluginInfo: {}
+  };
+  componentDidMount = () => {
+    this.retrievePluginInfo();
+  };
+
+  /**
+   * Retrieve complete data about Newspack plugins.
+   */
+  retrievePluginInfo = () => {
+    return new Promise(() => {
+      apiFetch({
+        path: '/newspack/v1/plugins/'
+      }).then(pluginInfo => this.setState({
+        pluginInfo
+      }));
+    });
+  };
+
+  /**
+   * 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
+        }
+      }
+    }, () => {
+      apiFetch(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')
+            }
+          }
+        });
+      });
+    });
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      plugins
+    } = this.props;
+    const {
+      pluginInfo
+    } = this.state;
+    return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
+      const {
+        name,
+        description,
+        href,
+        slug,
+        editPath
+      } = plugin;
+      const pluginStatus = this.isPluginInstalledAndActive(plugin);
+      const handoff = !href && pluginStatus && editPath ? slug : null;
+      const error = this.errorForPlugin(plugin);
+      return /*#__PURE__*/_jsx(ActionCard, {
+        className: this.classNameForPlugin(plugin),
+        title: name,
+        description: description,
+        actionText: this.actionTextForPlugin(plugin),
+        handoff: handoff,
+        href: href,
+        toggle: true,
+        toggleChecked: this.isPluginInstalledAndActive(plugin),
+        toggleOnChange: value => this.managePlugin(slug, value),
+        notification: error,
+        notificationHTML: error,
+        notificationLevel: "error"
+      }, 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__*/_jsxs(Fragment, {
+        children: [__('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if ('deactivate' === inFlight) {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [__('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if (!name) {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [__('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/_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.
+   */
+  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';
+  };
+}
+export default PluginToggle;

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

@@ -0,0 +1,20 @@
+/**
+ * Plugin Toggle
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-action-card {
+	&.in-flight,
+	&.loading {
+		opacity: 0.5;
+
+		.newspack-action-card__region-right {
+			.newspack-button {
+				color: wp-colors.$gray-700;
+				pointer-events: none;
+				text-decoration: none;
+			}
+		}
+	}
+}

package/dist/esm/popover/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { Popover as BaseComponent } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Popover
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+class Popover extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      className,
+      padding,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-popover', padding && 'newspack-popover__padding-' + padding, className);
+    return /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+Popover.defaultProps = {
+  padding: false
+};
+export default Popover;

package/dist/esm/popover/style.scss

@@ -0,0 +1,161 @@
+/**
+ * Popover
+ */
+
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-popover {
+	.components-popover__content {
+		min-width: 238px;
+
+		.newspack-button {
+			color: wp-colors.$gray-700;
+			display: flex;
+			font-weight: normal;
+			padding: 6px 8px;
+
+			&:hover {
+				color: colors.$primary-500;
+
+				.components-menu-items__item-icon {
+					fill: currentcolor;
+				}
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 2px colors.$primary-500;
+				position: relative;
+				z-index: 1;
+			}
+
+			&.is-link {
+				border-radius: 2px;
+				padding: 6px 8px;
+				text-decoration: none;
+
+				&:not(.is-destructive) {
+					color: wp-colors.$gray-700;
+
+					&:active,
+					&:active:enabled,
+					&:focus,
+					&:focus:enabled &:hover,
+					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
+						color: colors.$primary-500;
+					}
+				}
+
+				&:focus,
+				&:focus:enabled {
+					outline: none;
+				}
+			}
+
+			&.is-destructive:not(:focus) {
+				box-shadow: none !important;
+			}
+
+			.components-menu-items__item-icon {
+				fill: wp-colors.$gray-900;
+			}
+
+			.components-menu-item__item {
+				display: flex;
+				width: 100%;
+			}
+		}
+
+		.components-menu-group__label {
+			color: wp-colors.$gray-900;
+			font-size: 12px;
+			font-weight: bold;
+			line-height: 16px;
+			margin: 0;
+			padding: 10px 8px;
+		}
+
+		.screen-reader-text {
+			display: flex;
+		}
+
+		.newspack-select-control {
+			margin: 0;
+			width: 100%;
+
+			.components-select-control {
+				select.components-select-control__input {
+					height: 36px;
+					min-height: 36px;
+
+					&:focus ~ div.components-input-control__backdrop {
+						border-color: colors.$primary-500;
+						box-shadow: inset 0 0 0 1px colors.$primary-500;
+					}
+				}
+
+				div.components-input-control__backdrop {
+					padding: 0;
+				}
+			}
+		}
+
+		.newspack-form-token-field {
+			margin: 0;
+			text-align: left;
+
+			.newspack-form-token-field__input-container {
+				min-height: 36px;
+				padding: 3px 5px;
+			}
+
+			.components-form-token-field__suggestions-list {
+				margin: 5px -3px -11px;
+			}
+
+			.components-form-token-field__label {
+				display: block;
+			}
+		}
+
+		.newspack-toggle-control {
+			margin: 0;
+
+			.components-base-control__field {
+				margin: 3px 0;
+			}
+
+			.components-form-toggle {
+				border-top: 0;
+			}
+		}
+	}
+
+	&:not(.is-without-arrow)::before {
+		border-color: wp-colors.$gray-300;
+	}
+
+	&.is-from-bottom {
+		margin-bottom: 2px;
+	}
+
+	&.is-from-top {
+		margin-top: 2px;
+	}
+
+	&.components-animate__appear {
+		animation: none;
+	}
+
+	&__padding-8 {
+		.components-popover__content {
+			padding: 8px;
+		}
+	}
+
+	&__padding-16 {
+		.components-popover__content {
+			padding: 16px;
+		}
+	}
+}