newspack-components 2.0.3 → 2.1.0

package/dist/cjs/notice/style.scss

@@ -6,14 +6,11 @@
 @import '../../../shared/scss/colors';
 
 .newspack-notice {
-	align-items: flex-start;
+	align-items: center;
 	background: $gray-100;
-	border-radius: 3px;
 	color: $gray-900;
 	display: flex;
-	font-size: 14px;
 	justify-content: flex-start;
-	line-height: 24px;
 	margin: 32px 0;
 	padding: 6px 8px;
 
@@ -24,8 +21,25 @@
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: $primary-700;
+		border-radius: 2px;
+		bottom: 16px;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		color: white;
+		font-weight: bold;
+		margin: 0 16px;
+		position: fixed;
+		text-transform: uppercase;
+		z-index: 9997;
+
+		> svg {
+			fill: white;
+		}
+	}
+
 	&__is-error {
-		background: lighten( $alert-red, 54% );
+		background: lighten( $alert-red, 51% );
 
 		> svg {
 			fill: $alert-red;
@@ -34,7 +48,7 @@
 	}
 
 	&__is-help {
-		background: $primary-000;
+		background: $primary-050;
 
 		> svg {
 			fill: $primary-500;
@@ -42,7 +56,7 @@
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 47% );
+		background: lighten( $alert-green, 42% );
 
 		> svg {
 			fill: $alert-green;
@@ -50,7 +64,7 @@
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 36% );
+		background: lighten( $alert-yellow, 30% );
 
 		> svg {
 			fill: $alert-yellow;
@@ -58,9 +72,23 @@
 		}
 	}
 
-	&__content {
+	& &__content {
 		> div > * {
-			margin: 0;
+			margin: 0 !important;
+		}
+
+		a {
+			color: inherit;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: inherit;
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+			}
 		}
 	}
 

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

@@ -216,7 +216,7 @@ class PluginInstaller extends _element.Component {
       const plugin = pluginInfo[slug];
       return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
     });
-    return (0, _jsxRuntime.jsxs)("div", {
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [(!pluginInfo || !Object.keys(pluginInfo).length) && (0, _jsxRuntime.jsxs)("div", {
         className: "newspack-plugin-installer_is-waiting",
         children: [(0, _jsxRuntime.jsx)(_.Waiting, {

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

@@ -7,10 +7,16 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _hooks = require("@wordpress/hooks");
+
 var _i18n = require("@wordpress/i18n");
 
+var _components = require("@wordpress/components");
+
 var _ = require("../");
 
+require("./style.scss");
+
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 /**
@@ -22,15 +28,19 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 const __ = _i18n.__;
 
+const isSelectControl = setting => {
+  return Array.isArray(setting.options) && setting.options.length;
+};
+
 const getControlComponent = setting => {
-  if (Array.isArray(setting.options) && setting.options.length) {
+  if (isSelectControl(setting)) {
     return _.SelectControl;
   }
 
   switch (setting.type) {
     case 'checkbox':
     case 'boolean':
-      return _.CheckboxControl;
+      return _components.CheckboxControl;
 
     default:
       return _.TextControl;
@@ -49,13 +59,22 @@ const getControlType = setting => {
     case 'text':
       return 'text';
 
+    case 'password':
+      return 'password';
+
+    case 'boolean':
+    case 'checkbox':
+      return 'checkbox';
+
     default:
       return null;
   }
 };
 
-const SettingsSection = _ref => {
-  let {
+const SettingsSection = props => {
+  const {
+    error,
+    sectionKey,
     active,
     title,
     description,
@@ -63,61 +82,73 @@ const SettingsSection = _ref => {
     disabled,
     onChange,
     onUpdate
-  } = _ref;
-
-  const getControlProps = setting => {
-    var _setting$options;
-
-    return {
-      disabled,
-      name: `${setting.section}_${setting.key}`,
-      type: getControlType(setting),
-      label: setting.description,
-      help: setting.help || null,
-      options: ((_setting$options = setting.options) === null || _setting$options === void 0 ? void 0 : _setting$options.map(option => ({
-        value: option.value,
-        label: option.name
-      }))) || null,
-      value: setting.value,
-      checked: setting.type === 'boolean' ? !!setting.value : null,
-      onChange: value => {
-        onChange(setting.key, value);
-      }
-    };
+  } = props;
+
+  const getControlProps = setting => ({
+    disabled,
+    name: `${setting.section}_${setting.key}`,
+    type: getControlType(setting),
+    label: setting.description,
+    help: setting.help || null,
+    options: setting.options?.map(option => ({
+      value: option.value,
+      label: option.name || option.label
+    })) || null,
+    value: setting.value,
+    multiple: isSelectControl(setting) && setting.multiple ? true : null,
+    checked: setting.type === 'boolean' ? !!setting.value : null,
+    onChange: value => {
+      onChange(setting.key, value);
+    }
+  });
+
+  const createFilter = function (name) {
+    let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return (0, _hooks.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 (0, _jsxRuntime.jsx)(_.ActionCard, {
     isMedium: true,
     disabled: disabled,
     title: title,
     description: description,
     toggleChecked: active,
-    hasGreyHeader: true,
+    hasGreyHeader: active || null === active,
     toggleOnChange: active !== null ? value => onUpdate({
       active: value
     }) : null,
+    actionContent: (active || null === active) && createFilter('buttons', (0, _jsxRuntime.jsx)(_.Button, {
+      variant: "primary",
+      disabled: disabled,
+      onClick: () => {
+        onUpdate();
+      },
+      children: __('Save Settings', 'newspack')
+    })),
     children: (active || active === null) && (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [(0, _jsxRuntime.jsx)(_.Grid, {
-        columns: fields.length % 3 === 0 ? 3 : 2,
+      children: [error?.message && (0, _jsxRuntime.jsx)(_.Notice, {
+        noticeText: error.message,
+        isError: true
+      }), createFilter('beforeControls'), (0, _jsxRuntime.jsx)(_.Grid, {
+        columns: columns,
         gutter: 32,
         children: fields.map(setting => {
           const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
 
-          return (0, _jsxRuntime.jsx)(Control, { ...getControlProps(setting)
-          }, setting.key);
-        })
-      }), (0, _jsxRuntime.jsx)("div", {
-        className: "newspack-buttons-card",
-        style: {
-          margin: '32px 0 0'
-        },
-        children: (0, _jsxRuntime.jsx)(_.Button, {
-          isPrimary: true,
-          disabled: disabled,
-          onClick: () => {
-            onUpdate();
-          },
-          children: __('Save settings', 'newspack')
+          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, (0, _jsxRuntime.jsx)(Control, { ...getControlProps(setting)
+          }, setting.key), {
+            sectionKey,
+            setting,
+            onChange
+          });
         })
       })]
     })

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

@@ -37,18 +37,24 @@ class PluginSettings extends _element.Component {
     super(...arguments);
     (0, _defineProperty2.default)(this, "fetchSettings", () => {
       const {
-        pluginSlug
+        afterFetch,
+        pluginSlug,
+        isWizard
       } = this.props;
       this.setState({
         inFlight: true
       });
       (0, _apiFetch.default)({
-        path: `/${pluginSlug}/v1/settings`
+        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
@@ -60,12 +66,10 @@ class PluginSettings extends _element.Component {
       });
     });
     (0, _defineProperty2.default)(this, "getSettingsValues", sectionKey => {
-      var _this$state$settings$;
-
-      return ((_this$state$settings$ = this.state.settings[sectionKey]) === null || _this$state$settings$ === void 0 ? void 0 : _this$state$settings$.reduce((map, setting) => {
+      return this.state.settings[sectionKey]?.reduce((map, setting) => {
         map[setting.key] = setting.value;
         return map;
-      }, {})) || {};
+      }, {}) || {};
     });
     (0, _defineProperty2.default)(this, "handleSettingChange", sectionKey => (key, value) => {
       const sectionSettings = [...this.state.settings[sectionKey]];
@@ -82,13 +86,15 @@ class PluginSettings extends _element.Component {
     });
     (0, _defineProperty2.default)(this, "handleSectionUpdate", sectionKey => data => {
       const {
-        pluginSlug
+        afterUpdate,
+        pluginSlug,
+        isWizard
       } = this.props;
       this.setState({
         inFlight: true
       });
       (0, _apiFetch.default)({
-        path: `/${pluginSlug}/v1/settings`,
+        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
         method: 'POST',
         data: {
           section: sectionKey,
@@ -99,6 +105,10 @@ class PluginSettings extends _element.Component {
           settings,
           error: null
         });
+
+        if ('function' === typeof afterUpdate) {
+          afterUpdate(settings);
+        }
       }).catch(error => {
         this.setState({
           error
@@ -110,27 +120,19 @@ class PluginSettings extends _element.Component {
       });
     });
     (0, _defineProperty2.default)(this, "getSectionInfo", sectionKey => {
-      var _this$state$settings$2;
-
-      return (_this$state$settings$2 = this.state.settings[sectionKey]) === null || _this$state$settings$2 === void 0 ? void 0 : _this$state$settings$2.find(setting => !setting.key || setting.key === 'active');
+      return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
     });
     (0, _defineProperty2.default)(this, "getSectionTitle", sectionKey => {
-      var _this$getSectionInfo;
-
-      return (_this$getSectionInfo = this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo === void 0 ? void 0 : _this$getSectionInfo.description;
+      return this.getSectionInfo(sectionKey)?.description;
     });
     (0, _defineProperty2.default)(this, "getSectionDescription", sectionKey => {
-      var _this$getSectionInfo2;
-
-      return (_this$getSectionInfo2 = this.getSectionInfo(sectionKey)) === null || _this$getSectionInfo2 === void 0 ? void 0 : _this$getSectionInfo2.help;
+      return this.getSectionInfo(sectionKey)?.help;
     });
     (0, _defineProperty2.default)(this, "isSectionActive", sectionKey => {
-      var _settings$sectionKey;
-
       const {
         settings
       } = this.state;
-      const activation = (_settings$sectionKey = settings[sectionKey]) === null || _settings$sectionKey === void 0 ? void 0 : _settings$sectionKey.find(setting => setting.key === 'active');
+      const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
 
       if (!activation) {
         return null;
@@ -139,9 +141,7 @@ class PluginSettings extends _element.Component {
       return activation.value;
     });
     (0, _defineProperty2.default)(this, "getSectionFields", sectionKey => {
-      var _this$state$settings$3;
-
-      return (_this$state$settings$3 = this.state.settings[sectionKey]) === null || _this$state$settings$3 === void 0 ? void 0 : _this$state$settings$3.filter(setting => setting.key && setting.key !== 'active');
+      return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
     });
     this.state = {
       inFlight: false,
@@ -160,7 +160,9 @@ class PluginSettings extends _element.Component {
   render() {
     const {
       title,
-      description
+      description,
+      hasGreyHeader,
+      children
     } = this.props;
     const {
       settings,
@@ -168,25 +170,27 @@ class PluginSettings extends _element.Component {
       error
     } = this.state;
     return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [(0, _jsxRuntime.jsx)(_.SectionHeader, {
+      children: [title && (0, _jsxRuntime.jsx)(_.SectionHeader, {
         title: title,
         description: description
       }), error && (0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
         noticeText: error.message
-      }), (0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)({
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('newspack-plugin-settings', {
           'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
         }),
-        children: Object.keys(settings).map(sectionKey => (0, _jsxRuntime.jsx)(_SettingsSection.default, {
+        children: [Object.keys(settings).map(sectionKey => (0, _jsxRuntime.jsx)(_SettingsSection.default, {
           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)
-        }, sectionKey))
+          onUpdate: this.handleSectionUpdate(sectionKey),
+          hasGreyHeader: hasGreyHeader
+        }, sectionKey)), children]
       })]
     });
   }

package/dist/cjs/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/cjs/plugin-toggle/index.js

@@ -80,6 +80,14 @@ class PluginToggle extends _element.Component {
               }
             };
           }, () => shouldRefreshAfterUpdate && location.reload());
+        }).catch(e => {
+          this.setState({
+            pluginInfo: { ...pluginInfo,
+              [plugin]: { ...pluginInfo[plugin],
+                error: e.message || __('There was an error managing this plugin.', 'newspack')
+              }
+            }
+          });
         });
       });
     });
@@ -142,6 +150,15 @@ class PluginToggle extends _element.Component {
         return actionText ? actionText : __('Configure', 'newspack');
       }
     });
+    (0, _defineProperty2.default)(this, "errorForPlugin", plugin => {
+      const {
+        slug
+      } = plugin;
+      const {
+        pluginInfo
+      } = this.state;
+      return pluginInfo[slug]?.error || null;
+    });
     (0, _defineProperty2.default)(this, "isPluginInstalledAndActive", plugin => {
       const {
         status
@@ -170,6 +187,7 @@ class PluginToggle extends _element.Component {
       } = 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,
@@ -179,7 +197,10 @@ class PluginToggle extends _element.Component {
         href: href,
         toggle: true,
         toggleChecked: this.isPluginInstalledAndActive(plugin),
-        toggleOnChange: value => this.managePlugin(slug, value)
+        toggleOnChange: value => this.managePlugin(slug, value),
+        notification: error,
+        notificationHTML: error,
+        notificationLevel: "error"
       }, index);
     });
   }

package/dist/cjs/popover/style.scss

@@ -8,7 +8,7 @@
 .newspack-popover {
 	.components-popover__content {
 		border: 1px solid $gray-300;
-		border-radius: 3px;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		min-width: 238px;
 
@@ -31,7 +31,7 @@
 			}
 
 			&.is-link {
-				border-radius: 3px;
+				border-radius: 2px;
 				padding: 6px 8px;
 				text-decoration: none;
 

package/dist/cjs/radio-control/style.scss

@@ -76,8 +76,7 @@
 	// Multiple Controls
 
 	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
+	+ .newspack-text-control {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}

package/dist/cjs/section-header/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _ = require("..");
+
 require("./style.scss");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -26,23 +28,34 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 const SectionHeader = _ref => {
   let {
+    centered,
     className,
     description,
+    heading,
+    isWhite,
     noMargin,
     title
   } = _ref;
-  const classes = (0, _classnames.default)('newspack-section-header', noMargin && 'newspack-section-header--no-margin', className);
-  return (0, _jsxRuntime.jsxs)("div", {
+  const classes = (0, _classnames.default)('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', className);
+  const HeadingTag = `h${heading}`;
+  return (0, _jsxRuntime.jsxs)(_.Grid, {
+    columns: 1,
+    gutter: 8,
     className: classes,
-    children: [(0, _jsxRuntime.jsx)("h2", {
+    children: [typeof title === 'string' && (0, _jsxRuntime.jsx)(HeadingTag, {
       children: title
-    }), typeof description === 'string' && (0, _jsxRuntime.jsx)("span", {
+    }), typeof title === 'function' && (0, _jsxRuntime.jsx)(HeadingTag, {
+      children: title()
+    }), typeof description === 'string' && (0, _jsxRuntime.jsx)("p", {
       children: description
-    }), typeof description === 'function' && (0, _jsxRuntime.jsx)("span", {
+    }), typeof description === 'function' && (0, _jsxRuntime.jsx)("p", {
       children: description()
     })]
   });
 };
 
+SectionHeader.defaultProps = {
+  heading: 2
+};
 var _default = SectionHeader;
 exports.default = _default;

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

@@ -2,18 +2,39 @@
  * Section Header
  */
 
+@import '~@wordpress/base-styles/colors';
+
 .newspack-section-header {
 	margin: 64px 0 32px;
 
 	&--no-margin,
-	h2 {
+	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: $gray-700;
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}

package/dist/cjs/select-control/ButtonGroupControl.js

@@ -31,20 +31,21 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const ButtonGroupControl = _ref => {
   let {
     buttonOptions,
-    onChange,
-    value,
+    className,
+    hideLabelFromVision,
     label,
-    className
+    onChange,
+    value
   } = _ref;
 
   const id = _.hooks.useUniqueId('button-group');
 
   return (0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
+    hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: (0, _classnames.default)(className, 'components-select-control'),
-    children: (0, _jsxRuntime.jsx)(_.ButtonGroup, {
-      noMargin: true,
+    children: (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
       children: buttonOptions.map(option => {
         const isSelected = value === option.value;
 
@@ -57,9 +58,8 @@ const ButtonGroupControl = _ref => {
           });
         }
 
-        return (0, _jsxRuntime.jsx)(_.Button, {
-          isSecondary: !isSelected,
-          isPressed: isSelected,
+        return (0, _jsxRuntime.jsx)(_components.Button, {
+          variant: isSelected ? 'primary' : null,
           onClick: () => onChange(option.value),
           children: (0, _jsxRuntime.jsx)(Label, {})
         }, option.value);