newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,217 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Component, Fragment } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-import { SectionHeader, Notice } from '../';
-import SettingsSection from './SettingsSection';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class PluginSettings extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "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
-        });
-      });
-    });
-    _defineProperty(this, "getSettingsValues", sectionKey => {
-      return this.state.settings[sectionKey]?.reduce((map, setting) => {
-        map[setting.key] = setting.value;
-        return map;
-      }, {}) || {};
-    });
-    _defineProperty(this, "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
-        }
-      });
-    });
-    _defineProperty(this, "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.
-     */
-    _defineProperty(this, "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.
-     */
-    _defineProperty(this, "getSectionTitle", sectionKey => {
-      return this.getSectionInfo(sectionKey)?.description;
-    });
-    /**
-     * Get the section description.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {string} The section description.
-     */
-    _defineProperty(this, "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.
-     */
-    _defineProperty(this, "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.
-     */
-    _defineProperty(this, "getSectionFields", sectionKey => {
-      return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
-    });
-    this.state = {
-      inFlight: false,
-      settings: {},
-      error: null
-    };
-  }
-  componentDidMount() {
-    this.fetchSettings();
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      title,
-      description,
-      hasGreyHeader,
-      children
-    } = this.props;
-    const {
-      settings,
-      inFlight,
-      error
-    } = this.state;
-    return _jsxs(Fragment, {
-      children: [title && _jsx(SectionHeader, {
-        title: title,
-        description: description
-      }), error && _jsx(Notice, {
-        isError: true,
-        noticeText: error.message
-      }), _jsxs("div", {
-        className: classnames('newspack-plugin-settings', {
-          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
-        }),
-        children: [Object.keys(settings).map(sectionKey => _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')
-};
-PluginSettings.Section = SettingsSection;
-export default PluginSettings;

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

@@ -1,7 +0,0 @@
-.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

@@ -1,217 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Component, Fragment } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-import { ActionCard, Waiting } from '../';
-import './style.scss';
-
-/**
- * Plugin toggle group component.
- */
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class PluginToggle extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      pluginInfo: {}
-    });
-    _defineProperty(this, "componentDidMount", () => {
-      this.retrievePluginInfo();
-    });
-    /**
-     * Retrieve complete data about Newspack plugins.
-     */
-    _defineProperty(this, "retrievePluginInfo", () => {
-      return new Promise(() => {
-        apiFetch({
-          path: '/newspack/v1/plugins/'
-        }).then(pluginInfo => this.setState({
-          pluginInfo
-        }));
-      });
-    });
-    /**
-     * Install/activate or remove a plugin.
-     */
-    _defineProperty(this, "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(_ref => {
-            let {
-              pluginInfo: currentPluginInfo
-            } = _ref;
-            return {
-              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')
-              }
-            }
-          });
-        });
-      });
-    });
-    /**
-     * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
-     */
-    _defineProperty(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.
-     */
-    _defineProperty(this, "classNameForPlugin", plugin => {
-      const {
-        status,
-        inFlight
-      } = plugin;
-      if (inFlight) {
-        return 'in-flight';
-      }
-      if (!status) {
-        return 'loading';
-      }
-    });
-    /**
-     * Generate the ActionCard action text for a plugin.
-     */
-    _defineProperty(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 _jsxs(Fragment, {
-          children: [__('Installing…', 'newspack'), " ", _jsx(Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if ('deactivate' === inFlight) {
-        return _jsxs(Fragment, {
-          children: [__('Deactivating…', 'newspack'), " ", _jsx(Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if (!name) {
-        return _jsxs(Fragment, {
-          children: [__('Loading…', 'newspack'), " ", _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');
-      }
-    });
-    /**
-     * Get error message for this plugin.
-     */
-    _defineProperty(this, "errorForPlugin", plugin => {
-      const {
-        slug
-      } = plugin;
-      const {
-        pluginInfo
-      } = this.state;
-      return pluginInfo[slug]?.error || null;
-    });
-    /**
-     * Get installation/activation status for a plugin.
-     */
-    _defineProperty(this, "isPluginInstalledAndActive", plugin => {
-      const {
-        status
-      } = plugin;
-      return status === 'active';
-    });
-  }
-  /**
-   * 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 _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);
-    });
-  }
-}
-export default PluginToggle;

package/dist/esm/popover/index.js

@@ -1,41 +0,0 @@
-/**
- * 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 "@emotion/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 _jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-Popover.defaultProps = {
-  padding: false
-};
-export default Popover;

package/dist/esm/popover/style.scss

@@ -1,161 +0,0 @@
-/**
- * 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;
-		}
-	}
-}