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

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

@@ -1,216 +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, 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-plugin')
-};
-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,213 +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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class PluginToggle extends Component {
-  constructor(...args) {
-    super(...args);
-    _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(({
-            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')
-              }
-            }
-          });
-        });
-      });
-    });
-    /**
-     * 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-plugin'), " ", _jsx(Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if ('deactivate' === inFlight) {
-        return _jsxs(Fragment, {
-          children: [__('Deactivating…', 'newspack-plugin'), " ", _jsx(Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if (!name) {
-        return _jsxs(Fragment, {
-          children: [__('Loading…', 'newspack-plugin'), " ", _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.
-     */
-    _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/position-control/index.js

@@ -1,107 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { ButtonGroup, Button } from '@wordpress/components';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export default function PositionControl({
-  allowedPositions,
-  value,
-  label,
-  help,
-  onChange,
-  size,
-  ...props
-}) {
-  /**
-   * Set layout options
-   */
-  const options = size === 'full-width' ? [{
-    value: 'top',
-    /* translators: Overlay Position */
-    label: __('Top', 'newspack-plugin')
-  }, {
-    value: 'center',
-    /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
-  }, {
-    value: 'bottom',
-    /* translators: Overlay Position */
-    label: __('Bottom', 'newspack-plugin')
-  }] : [{
-    value: 'top_left',
-    /* translators: Overlay Position */
-    label: __('Top Left', 'newspack-plugin')
-  }, {
-    value: 'top',
-    /* translators: Overlay Position */
-    label: __('Top Center', 'newspack-plugin')
-  }, {
-    value: 'top_right',
-    /* translators: Overlay Position */
-    label: __('Top Right', 'newspack-plugin')
-  }, {
-    value: 'center_left',
-    /* translators: Overlay Position */
-    label: __('Center Left', 'newspack-plugin')
-  }, {
-    value: 'center',
-    /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
-  }, {
-    value: 'center_right',
-    /* translators: Overlay Position */
-    label: __('Center Right', 'newspack-plugin')
-  }, {
-    value: 'bottom_left',
-    /* translators: Overlay Position */
-    label: __('Bottom Left', 'newspack-plugin')
-  }, {
-    value: 'bottom',
-    /* translators: Overlay Position */
-    label: __('Bottom Center', 'newspack-plugin')
-  }, {
-    value: 'bottom_right',
-    /* translators: Overlay Position */
-    label: __('Bottom Right', 'newspack-plugin')
-  }];
-  return _jsxs("div", {
-    className: classnames('newspack-position-placement-control', 'size-' + size),
-    children: [_jsx("p", {
-      className: "components-base-control__label",
-      children: label
-    }), _jsx(ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack-plugin'),
-      ...props,
-      children: options.map((option, index) => {
-        return _jsx("div", {
-          className: option.value === value ? 'is-selected' : null,
-          children: _jsx(Button, {
-            isSmall: true,
-            title: option.label,
-            "aria-label": option.label,
-            isPrimary: option.value === value,
-            onClick: () => {
-              onChange(option.value);
-            },
-            disabled: allowedPositions?.length && !allowedPositions.includes(option.value)
-          })
-        }, `newspack-position-placement-item-${index}`);
-      })
-    }), _jsx("p", {
-      className: "components-base-control__help",
-      children: help
-    })]
-  });
-}

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

@@ -1,66 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-position-placement-control {
-	margin-bottom: 1em;
-
-	.components-base-control__label {
-		margin-bottom: 8px;
-		margin-top: 1em;
-	}
-
-	.components-button-group {
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		grid-template-rows: repeat( 3, 1fr );
-
-		div {
-			padding: 1px;
-		}
-
-		.components-button {
-			border-radius: 0 !important;
-			height: 100%;
-			padding: 20px;
-			width: 100%;
-		}
-
-		div:nth-of-type( 1 ) .components-button {
-			border-radius: 4px 0 0 !important;
-		}
-
-		div:nth-of-type( 3 ) .components-button {
-			border-radius: 0 4px 0 0 !important;
-		}
-
-		div:nth-last-of-type( 1 ) .components-button {
-			border-radius: 0 0 4px !important;
-		}
-
-		div:nth-last-of-type( 3 ) .components-button {
-			border-radius: 0 0 0 4px !important;
-		}
-	}
-
-	&.size-full-width .components-button-group {
-		grid-template-columns: 1fr;
-
-		div:first-of-type .components-button {
-			border-radius: 4px 4px 0 0 !important;
-		}
-
-		div:nth-of-type( 2 ) .components-button {
-			border-radius: 0 !important;
-		}
-
-		div:last-of-type .components-button {
-			border-radius: 0 0 4px 4px !important;
-		}
-	}
-
-	.components-base-control__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		font-style: normal;
-		margin-top: 8px;
-	}
-}