newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,222 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-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");
-/**
- * WordPress dependencies.
- */
-/**
- * Internal dependencies.
- */
-const __ = _i18n.__;
-/**
- * Plugin toggle group component.
- */
-class PluginToggle extends _element.Component {
-  constructor() {
-    super(...arguments);
-    (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 {
-        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(_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.
-     */
-    (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'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if ('deactivate' === inFlight) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Deactivating…', 'newspack'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if (!name) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Loading…', 'newspack'), " ", (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');
-      }
-    });
-    /**
-     * 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.
-   */
-  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 (0, _jsxRuntime.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);
-    });
-  }
-}
-var _default = PluginToggle;
-exports.default = _default;

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

@@ -1,20 +0,0 @@
-/**
- * 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/cjs/proxied-imports/router.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var ReactRouterDOM = _interopRequireWildcard(require("react-router-dom"));
-/**
- * A proxy for react-router-dom.
- * Ensures that both components and the plugin use the same instance of
- * React Router, even if there are node_modules in components.
- */
-var _default = ReactRouterDOM;
-exports.default = _default;

package/dist/cjs/section-header/style.scss

@@ -1,41 +0,0 @@
-/**
- * Section Header
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-section-header {
-	margin: 64px 0 32px;
-
-	&--no-margin,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin: 0 !important;
-	}
-
-	&--is-centered {
-		text-align: center;
-	}
-
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
-		margin-top: -16px !important;
-	}
-
-	&#{&}--is-white {
-		> * {
-			color: white;
-		}
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	.newspack-wizard__content &:first-child {
-		margin-top: 32px;
-	}
-}

package/dist/cjs/settings/MinMaxSetting.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-const __ = _i18n.__;
-/**
- * Internal dependencies.
- */
-const MinMaxSetting = _ref => {
-  let {
-    min,
-    max,
-    onChangeMin,
-    onChangeMax,
-    minPlaceholder,
-    maxPlaceholder
-  } = _ref;
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("div", {
-      className: "newspack-settings__min-max",
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-        checked: min > 0,
-        onChange: value => onChangeMin(value ? 1 : 0),
-        label: __('Min', 'newspack')
-      }), (0, _jsxRuntime.jsx)(_.TextControl, {
-        "data-testid": "min-articles-input",
-        type: "number",
-        value: min,
-        placeholder: minPlaceholder,
-        onChange: value => onChangeMin(value > 0 ? value : 0)
-      })]
-    }), (0, _jsxRuntime.jsxs)("div", {
-      className: "newspack-settings__min-max",
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-        checked: max > 0,
-        onChange: value => onChangeMax(value ? min || 1 : 0),
-        label: __('Max', 'newspack')
-      }), (0, _jsxRuntime.jsx)(_.TextControl, {
-        type: "number",
-        value: max,
-        placeholder: maxPlaceholder,
-        onChange: value => onChangeMax(value > 0 ? value : 0)
-      })]
-    })]
-  });
-};
-var _default = MinMaxSetting;
-exports.default = _default;

package/dist/cjs/settings/SettingsSection.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Internal dependencies.
- */
-
-const SettingSection = _ref => {
-  let {
-    title,
-    description,
-    children
-  } = _ref;
-  return (0, _jsxRuntime.jsxs)(_.Grid, {
-    columns: 1,
-    gutter: 8,
-    className: "newspack-settings__section",
-    children: [(0, _jsxRuntime.jsxs)("div", {
-      className: "newspack-settings__section__title",
-      children: [(0, _jsxRuntime.jsx)("span", {
-        children: title
-      }), description && (0, _jsxRuntime.jsx)(_.InfoButton, {
-        text: description
-      })]
-    }), (0, _jsxRuntime.jsx)("div", {
-      className: "newspack-settings__section__content",
-      children: children
-    })]
-  });
-};
-var _default = SettingSection;
-exports.default = _default;

package/dist/cjs/steps-list/style.scss

@@ -1,11 +0,0 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.steps-list {
-	margin-left: auto;
-	margin-right: auto;
-
-	&__narrow-list {
-		max-width: 416px;
-	}
-}

package/dist/cjs/style-card/style.scss

@@ -1,94 +0,0 @@
-/**
- * Style Card
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-style-card {
-	margin: 32px 0;
-	width: 100%;
-
-	// Title
-	&__title {
-		margin: 1em 0 0;
-		text-align: center;
-
-		.newspack-style-card__is-active & {
-			color: colors.$primary-500;
-		}
-	}
-
-	// Image
-	&__image {
-		border: 1px solid wp-colors.$gray-300;
-		border-radius: 2px;
-		overflow: hidden;
-		position: relative;
-
-		&:hover,
-		&:focus,
-		&:focus-within {
-			.newspack-style-card__actions,
-			.newspack-style-card__actions > * {
-				opacity: 1;
-			}
-		}
-
-		img,
-		svg {
-			display: block;
-			height: auto;
-			max-width: 100%;
-		}
-
-		svg {
-			fill: wp-colors.$gray-600;
-			margin: 8px;
-		}
-
-		.newspack-style-card__is-active & {
-			border-color: colors.$primary-500;
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
-
-			img {
-				position: relative;
-				z-index: -1;
-			}
-		}
-	}
-
-	// Actions
-	&__actions {
-		align-items: center;
-		background: rgba( white, 0.9 );
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		inset: 0;
-		opacity: 0;
-		padding: 16px;
-		position: absolute;
-		transition: opacity 125ms ease-in-out;
-
-		&:empty {
-			display: none;
-		}
-
-		&__badge,
-		.components-button {
-			margin: 4px;
-			opacity: 0;
-			transition: opacity 125ms ease-in-out;
-		}
-
-		&__badge {
-			color: var( --wp-admin-theme-color );
-			font-weight: bold;
-		}
-
-		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
-		}
-	}
-}

package/dist/cjs/style.scss

@@ -1,43 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-// Buttons Card
-
-.newspack-buttons-card {
-	display: flex;
-	flex-direction: row-reverse;
-	gap: 16px;
-	justify-content: flex-start;
-	align-items: center;
-	margin: 64px 0 32px;
-
-	&:empty {
-		display: none;
-	}
-}
-
-// Checkbox Icon
-
-.newspack-checkbox-icon {
-	background: white;
-	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px wp-colors.$gray-300;
-	display: block;
-	height: 24px;
-	width: 24px;
-
-	svg {
-		fill: wp-colors.$gray-700;
-	}
-
-	&--checked {
-		background: wp-colors.$alert-green;
-		box-shadow: none;
-
-		svg {
-			fill: white;
-		}
-	}
-	&--pending {
-		background: wp-colors.$alert-yellow;
-	}
-}

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

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Text Control
- */
-/**
- * WordPress dependencies
- */
-/**
- * Internal dependencies
- */
-const __ = _i18n.__;
-/**
- * External dependencies
- */
-class TextControl extends _element.Component {
-  constructor(props) {
-    super(props);
-    this.wrapperRef = (0, _element.createRef)();
-  }
-  componentDidMount() {
-    if (this.wrapperRef.current) {
-      const labelEl = this.wrapperRef.current.querySelector('label');
-      if (labelEl) {
-        labelEl.setAttribute('data-required-text', __('(required)', 'newspack'));
-      }
-    }
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      required,
-      isWide,
-      withMargin = true,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-text-control', {
-      'newspack-text-control--wide': isWide
-    }, {
-      'newspack-text-control--with-margin': withMargin
-    }, className);
-    return required ? (0, _jsxRuntime.jsx)("div", {
-      ref: this.wrapperRef,
-      className: "newspack-text-control--required",
-      children: (0, _jsxRuntime.jsx)(_components.TextControl, {
-        className: classes,
-        required: required,
-        ...otherProps
-      })
-    }) : (0, _jsxRuntime.jsx)(_components.TextControl, {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-var _default = TextControl;
-exports.default = _default;

package/dist/cjs/utils/index.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _keycodes = require("@wordpress/keycodes");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-
-const InteractiveDiv = _ref => {
-  let {
-    style = {},
-    ...props
-  } = _ref;
-  return (0, _jsxRuntime.jsx)("div", {
-    tabIndex: "0",
-    role: "button",
-    onKeyDown: event => _keycodes.ENTER === event.keyCode && props.onClick(),
-    style: {
-      cursor: 'pointer',
-      ...style
-    },
-    ...props
-  });
-};
-const confirmAction = message => {
-  // eslint-disable-next-line no-alert
-  if (confirm(message)) {
-    return true;
-  }
-  return false;
-};
-var _default = {
-  InteractiveDiv,
-  confirmAction
-};
-exports.default = _default;